Merge branch 'release/0.4.0'

client/src/App.vue

@@ -22,6 +22,7 @@
       <q-tabs>
         <q-route-tab icon="mdi-home" to="/" exact />
         <q-route-tab icon="mdi-chart-bar" to="/stats" exact />
+        <q-route-tab icon="mdi-cog" to="/settings" exact />
       </q-tabs>
 
       <router-view />

client/src/components/Category.vue

@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <q-card v-bind:class="{ 'selected': this.selected }" class="my-card">
+      <q-card-section>
+        <div class="row">
+          <div class="q-pr-md" :style="'color: ' + category.color">
+            <q-icon name="mdi-checkbox-blank-circle" />
+          </div>
+          <div class="text-h6">{{ category.description }}</div>
+          <q-space />
+          <q-btn flat style="display: inline" color="grey" @click="editorOpen()" icon="mdi-pencil"></q-btn>
+          <q-btn
+            flat
+            style="display: inline"
+            color="grey"
+            @click="selectCategory()"
+            icon="mdi-arrow-right"
+          ></q-btn>
+        </div>
+      </q-card-section>
+    </q-card>
+    <q-dialog v-if="editedCategory != null" v-model="editorDialog">
+      <q-card>
+        <q-card-section>
+          <div class="text-h6">Edit Category</div>
+          <q-form ref="form" @submit.prevent>
+            <q-input v-model="editedCategory.description" r></q-input>
+            <q-input v-model="editedCategory.color" :rules="['anyColor']">
+              <template v-slot:append>
+                <q-icon name="mdi-eyedropper" class="cursor-pointer">
+                  <q-popup-proxy transition-show="scale" transition-hide="scale">
+                    <q-color v-model="editedCategory.color" />
+                  </q-popup-proxy>
+                </q-icon>
+              </template>
+            </q-input>
+            <q-btn outline icon="mdi-delete" label="Delete" @click="deleteDialog = true" />
+          </q-form>
+        </q-card-section>
+        <q-card-actions align="right" class="text-primary">
+          <q-btn flat label="Cancel" @click="editorDialog = false; timerSet()" />
+          <q-btn flat label="Save" @click="editorSave()" />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+    <q-dialog v-model="deleteDialog" persistent>
+      <q-card>
+        <q-card-section class="row items-center">
+          <span class="q-ml-sm">Are you sure you'd like to delete this?</span>
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn flat label="Cancel" color="primary" v-close-popup />
+          <q-btn flat label="Delete" color="warning" @click="categoryDelete" v-close-popup />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+  </div>
+</template>
+
+<script>
+import { A_CATEGORY_UPDATE, A_CATEGORY_DELETE } from '@/store/actions.type'
+import { M_CATEGORY_SELECT } from '@/store/mutations.type'
+
+export default {
+  name: 'Category',
+  props: {
+    category: {
+      type: Object,
+    },
+    selected: {
+      type: Boolean,
+    },
+  },
+  data: () => ({
+    categoryRules: [(v) => !!v || 'Description required'],
+    editorDialog: false,
+    editedCategory: null,
+    deleteDialog: false,
+  }),
+  methods: {
+    // category
+    categoryUpdate(category) {
+      this.$store.dispatch(A_CATEGORY_UPDATE, category)
+    },
+    categoryDelete() {
+      this.$store.dispatch(A_CATEGORY_DELETE, this.category)
+    },
+    // editor
+    editorOpen() {
+      this.editedCategory = Object.assign({}, this.category)
+      this.editorDialog = true
+    },
+    editorSave() {
+      this.$refs.form.validate().then((success) => {
+        if (success) {
+          this.editorDialog = false
+          this.categoryUpdate(this.editedCategory)
+        }
+      })
+    },
+    selectCategory() {
+      this.$store.commit(M_CATEGORY_SELECT, this.category._id)
+    },
+  },
+}
+</script>
+<style scoped>
+.selected {
+  background: #bbb;
+}
+</style>

client/src/components/ChartPieCategorical.vue

@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <q-card>
+      <q-card-section>
+        <div class="text-h4 text-weight-light">Time Taken</div>
+        <apexchart type="pie" :options="options"></apexchart>
+      </q-card-section>
+    </q-card>
+  </div>
+</template>
+<script>
+import VueApexCharts from 'vue-apexcharts'
+export default {
+  name: 'ChartPieCategorical',
+  components: {
+    apexchart: VueApexCharts,
+  },
+  data() {
+    return {
+      tenColorPalette: [
+        '#00c0c7',
+        '#5144d3',
+        '#e8871a',
+        '#da3490',
+        '#9089fa',
+        '#47e26f',
+        '#2780eb',
+        '#6f38b1',
+        '#dfbf03',
+        '#cb6f10',
+        '#268d6c',
+        '#9bec54',
+      ],
+    }
+  },
+  props: {
+    dateRange: {
+      type: Array,
+    },
+    data: {
+      type: Array,
+    },
+    colors: {
+      type: Array,
+    },
+  },
+  computed: {
+    options() {
+      return {
+        series: this.data.series,
+        chart: {
+          width: '100%',
+          type: 'donut',
+        },
+        colors: this.colors != null ? this.colors : this.tenColorPalette,
+        labels: this.data.labels,
+        legend: {
+          show: true,
+        },
+        tooltip: {
+          y: {
+            formatter: function (value) {
+              console.log(value)
+              var hours = parseInt(value)
+
+              var mins = parseInt((value * 60) % 60)
+              var retString = `${mins}m`
+              if (hours) {
+                retString = `${hours}h` + ' ' + retString
+              }
+              return retString
+            },
+          },
+        },
+      }
+    },
+  },
+}
+</script>
+<style scoped>
+.echarts {
+  width: 100%;
+  height: 400px;
+}
+</style>

client/src/components/ChartTime.vue → client/src/components/ChartTimeCategorical.vue

@@ -11,20 +11,41 @@
 <script>
 import VueApexCharts from 'vue-apexcharts'
 export default {
-  name: 'ChartTime',
+  name: 'ChartTimeCategorical',
   components: {
     apexchart: VueApexCharts,
   },
   data() {
-    return {}
+    return {
+      tenColorPalette: [
+        '#00c0c7',
+        '#5144d3',
+        '#e8871a',
+        '#da3490',
+        '#9089fa',
+        '#47e26f',
+        '#2780eb',
+        '#6f38b1',
+        '#dfbf03',
+        '#cb6f10',
+        '#268d6c',
+        '#9bec54',
+      ],
+    }
   },
   props: {
     dateRange: {
       type: Array,
     },
+    xaxisType: {
+      type: Array,
+    },
     data: {
       type: Array,
     },
+    colors: {
+      type: Array,
+    },
   },
   computed: {
     options() {
@@ -33,7 +54,10 @@ export default {
           toolbar: {
             show: false,
           },
+          stacked: true,
+          height: 400,
         },
+        colors: this.colors != null ? this.colors : this.tenColorPalette,
         dataLabels: {
           formatter: function (value) {
             var hours = parseInt(value)
@@ -46,6 +70,10 @@ export default {
             return retString
           },
         },
+        legend: {
+          position: 'right',
+          offsetY: 40,
+        },
         yaxis: {
           forceNiceScale: true,
           style: {
@@ -73,7 +101,7 @@ export default {
           axisBorder: {
             show: false,
           },
-          type: 'datetime',
+          type: this.xaxisType,
           categories: this.dateRange,
           labels: {
             format: 'ddd',
@@ -82,12 +110,7 @@ export default {
       }
     },
     series() {
-      return [
-        {
-          name: 'Tasks',
-          data: this.data,
-        },
-      ]
+      return this.data
     },
   },
 }