Merge branch '57-week-summary-component' into 'master'

Resolve "Week Summary Component"

Closes #57

See merge request marcel.schwarz/2020ss-qbc-geofence-timetracking!33

frontend/package-lock.json

@@ -1957,6 +1957,19 @@
         }
       }
     },
+    "apexcharts": {
+      "version": "3.19.0",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.19.0.tgz",
+      "integrity": "sha512-fzupCGVDvOoU6kEzguLAfgRgrlHynHM5fnkkyCL85tYf9U8bw1hCijs4A+kWXurC/SNytJrArBc21kA/2wuHYg==",
+      "requires": {
+        "svg.draggable.js": "^2.2.2",
+        "svg.easing.js": "^2.0.0",
+        "svg.filter.js": "^2.0.2",
+        "svg.pathmorphing.js": "^0.1.3",
+        "svg.resize.js": "^1.4.3",
+        "svg.select.js": "^3.0.1"
+      }
+    },
     "aproba": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
@@ -10402,6 +10415,70 @@
       "integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=",
       "dev": true
     },
+    "svg.draggable.js": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
+      "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
+      "requires": {
+        "svg.js": "^2.0.1"
+      }
+    },
+    "svg.easing.js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
+      "integrity": "sha1-iqmUawqOJ4V6XEChDrpAkeVpHxI=",
+      "requires": {
+        "svg.js": ">=2.3.x"
+      }
+    },
+    "svg.filter.js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
+      "integrity": "sha1-kQCOFROJ3ZIwd5/L5uLJo2LRwgM=",
+      "requires": {
+        "svg.js": "^2.2.5"
+      }
+    },
+    "svg.js": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
+      "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA=="
+    },
+    "svg.pathmorphing.js": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
+      "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
+      "requires": {
+        "svg.js": "^2.4.0"
+      }
+    },
+    "svg.resize.js": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
+      "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
+      "requires": {
+        "svg.js": "^2.6.5",
+        "svg.select.js": "^2.1.2"
+      },
+      "dependencies": {
+        "svg.select.js": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
+          "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
+          "requires": {
+            "svg.js": "^2.2.5"
+          }
+        }
+      }
+    },
+    "svg.select.js": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
+      "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
+      "requires": {
+        "svg.js": "^2.6.5"
+      }
+    },
     "svgo": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
@@ -11084,6 +11161,11 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz",
       "integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
     },
+    "vue-apexcharts": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/vue-apexcharts/-/vue-apexcharts-1.5.3.tgz",
+      "integrity": "sha512-ImbvQxgwbLMrEc9/veDIJ7lzncf1fJDSNqqK0x2YDNUCq5tE9uqM4Gb/ZYUB5WlDM3vDpzwDEmsidWcaO6/WXQ=="
+    },
     "vue-eslint-parser": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.0.0.tgz",

frontend/package.json

@@ -8,8 +8,10 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "apexcharts": "^3.19.0",
     "core-js": "^3.6.4",
     "vue": "^2.6.11",
+    "vue-apexcharts": "^1.5.3",
     "vue-router": "^3.1.6"
   },
   "devDependencies": {

frontend/src/components/layout/Footer.vue

@@ -7,6 +7,8 @@ footer
       <u><router-link to="/about">About</router-link></u>
       <br>
       <u><router-link to="/timerecords">Time Records</router-link></u>
+      <br>
+      <u><router-link to="/weeksummary">Week Summary</router-link></u>
     </div>
 </template>
 

frontend/src/router/index.js

@@ -8,6 +8,7 @@ import TimeRecords from "../views/TimeRecords.vue";
 import About from "../views/About.vue";
 import Login from "../views/Login.vue";
 import Register from "../views/Register.vue";
+import WeekSummary from "../views/WeekSummary.vue";
 Vue.use(VueRouter);
 
 const routes = [
@@ -53,6 +54,11 @@ const routes = [
     name: "About",
     component: About
   },
+  {
+    path: "/weeksummary",
+    name: "Week Summary",
+    component: WeekSummary
+  },
   {
     path: '*',
     component: missing

frontend/src/views/WeekSummary.vue

@@ -0,0 +1,132 @@
+<template>
+  <div>
+    <h3 align='center'>Weeky Summary</h3>
+    <div id="chart">
+      <apexchart type="bar" height="350" :options="chartOptions" :series="series"></apexchart>
+    </div>
+  </div>
+</template>
+
+
+<script>
+import VueApexCharts from "vue-apexcharts";
+export default {
+  components: {
+    apexchart: VueApexCharts
+  },
+  data() {
+    return {
+      series: [
+        {
+          name: "Working Hours",
+          data: [6, 4, 8, 8, 9, 2]
+        },
+        {
+          name: "Pause Hours",
+          data: [1, 0.5, 2, 1, 3, 0.2]
+        }
+      ],
+      chartOptions: {
+        chart: {
+          type: "bar",
+          height: 350,
+          stacked: true,
+          background: "#131313",
+          toolbar: {
+            show: true,
+            offsetX: 0,
+            offsetY: 0,
+            tools: {
+              download: true,
+              selection: true,
+              zoom: false,
+              zoomin: false,
+              zoomout: false,
+              pan: false,
+              reset: false,
+              customIcons: []
+            },
+            autoSelected: "zoom"
+          }
+        },
+        colors: ["#0096ff", "#e21d1f", "#546E7A", "#E91E63", "#FF9800"],
+        theme: {
+          mode: "dark"
+        },
+        dataLabels: {
+          enabled: false
+        },
+        tooltip: {
+          enabled: true,
+          followCursor: true,
+          x: {
+            show: false
+          },
+          y: {
+            formatter: function(value) {
+              var decimalTimeString = value;
+              var decimalTime = parseFloat(decimalTimeString);
+              decimalTime = decimalTime * 60 * 60;
+              var hours = Math.floor(decimalTime / (60 * 60));
+              decimalTime = decimalTime - hours * 60 * 60;
+              var minutes = Math.floor(decimalTime / 60);
+              decimalTime = decimalTime - minutes * 60;
+              var seconds = Math.round(decimalTime);
+              if (hours < 10) {
+                hours = "0" + hours;
+              }
+              if (minutes < 10) {
+                minutes = "0" + minutes;
+              }
+              if (seconds < 10) {
+                seconds = "0" + seconds;
+              }
+              return  hours + ":" + minutes + ":" + seconds;
+            }
+          }
+        },
+        responsive: [
+          {
+            breakpoint: 480,
+            options: {
+              legend: {
+                position: "bottom",
+                offsetX: -10,
+                offsetY: 0
+              }
+            }
+          }
+        ],
+        plotOptions: {
+          bar: {
+            horizontal: false
+          }
+        },
+        xaxis: {
+          type: "datetime",
+          categories: [
+            "01/01/2011 GMT",
+            "01/02/2011 GMT",
+            "01/03/2011 GMT",
+            "01/04/2011 GMT",
+            "01/05/2011 GMT",
+            "01/06/2011 GMT"
+          ]
+        },
+        legend: {
+          show: true,
+          position: "left",
+          offsetY: 40
+        },
+        fill: {
+          opacity: 1
+        }
+      }
+    };
+  }
+};
+</script>
+
+
+<style scoped>
+</style>