- added fields: longdescr, hoursworked, hoursplanned

src/components/CProgress/CProgress.scss

@@ -0,0 +1,39 @@
+$heightBtn: 100%;
+
+.flex-item{
+  // background-color: #d5e2eb;
+  padding: 2px;
+  margin: 2px;
+  margin-left: 3px;
+  margin-right: 3px;
+  color: #000;
+  font-size: 1rem;
+  height: $heightBtn;
+  line-height: $heightBtn;
+  vertical-align: middle;
+  //flex: 0 0 100%;
+}
+
+.progress-item {
+  margin: 1px;
+  padding: 2px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  flex: 1;
+  flex-direction: column;
+  order: 1;
+}
+
+.cpr-progrbar-item {
+  //height: 10px
+  padding-top: 7px;
+  height:15px;
+}
+
+.cpr-percProgress {
+  padding-top: 3px;
+  color: #888;
+  vertical-align: middle;
+  text-align: center;
+  //line-height: $heightitem;
+}

src/components/CProgress/CProgress.ts

@@ -0,0 +1,36 @@
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+
+import { tools } from '@src/store/Modules/tools'
+
+@Component({
+  name: 'CProgress'
+})
+
+export default class CProgress extends Vue {
+  public cpr_colProgress: string = 'blue'
+  public cpr_percProgress: string = 'cpr-percProgress'
+
+  @Watch('progressval')
+  public changeprogress() {
+    this.updateclasses()
+  }
+
+  @Prop({ required: true }) public progressval: number
+  @Prop() public descr: string
+
+  public updateclasses() {
+    this.cpr_colProgress = tools.getProgressColor(this.progressval)
+  }
+
+  get getdescr(){
+    if (!!this.descr) {
+      return this.descr + ' : '
+    }
+  }
+
+  public create() {
+    this.updateclasses()
+  }
+
+}

src/components/CProgress/CProgress.vue

@@ -0,0 +1,22 @@
+<template>
+    <div class="flex-item progress-item shadow-1">
+        <q-linear-progress
+                stripe
+                rounded
+                :value="progressval / 100"
+                class="cpr-progrbar-item"
+                :color="cpr_colProgress"
+        >
+        </q-linear-progress>
+        <div :class="cpr_percProgress">
+            {{getdescr}} {{progressval}}%
+        </div>
+    </div>
+</template>
+
+<script lang="ts" src="./CProgress.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './CProgress.scss';
+</style>

src/components/CProgress/index.ts

@@ -0,0 +1 @@
+export {default as CProgress} from './CProgress.vue'