Basic daily and monthly stats

src/store/modules/juggl.js

@@ -251,9 +251,11 @@ export const juggl = {
       { dispatch },
       { startYear, startMonth, endYear, endMonth }
     ) {
+
+      // Month in date object goes from 0 - 11
       var options = {
-        from: new Date(startYear, startMonth, 1),
+        from: new Date(startYear, startMonth - 1, 2),
-        until: new Date(endYear, endMonth, 0) // 0 leads to the last day of the given month
+        until: new Date(endYear, endMonth, 0) // 0 leads to the last day of the previous month
       };
 
       dispatch("loadStatistics", options);

src/views/Statistics.vue

@@ -1,6 +1,94 @@
 <template>
   <LayoutNavbarPrivate title="Statistics">
-    <BaseSection id="projects" title="Today">
+    <BaseContainer class="centered mb-5">
+      <b-form-radio-group
+        id="mode-radio"
+        v-model="mode"
+        :options="options"
+        button-variant="outline-primary"
+        name="radio-btn-outline"
+        buttons
+        size="sm"
+        class="mb-3"
+        @input="updateStatistics"
+      ></b-form-radio-group>
+      <b-form id="form-daily" v-if="mode == 'daily'" inline>
+        <b-form-datepicker
+          id="startdate"
+          v-model="daily.startDate"
+          required
+          placeholder="Choose a start date"
+          :max="daily.endDate"
+          dark
+          @input="updateStatistics"
+        >
+        </b-form-datepicker>
+        →
+        <b-form-datepicker
+          id="enddate"
+          v-model="daily.endDate"
+          required
+          placeholder="Choose an end date"
+          :min="daily.startDate"
+          dark
+          @input="updateStatistics"
+        >
+        </b-form-datepicker>
+      </b-form>
+      <b-form id="form-monthly" v-if="mode == 'monthly'" inline>
+        <b-input-group>
+          <b-input
+            id="start-year"
+            type="number"
+            placeholder="Start year"
+            v-model="monthly.startYear"
+            required
+            trim
+            @input="updateStatistics"
+            class="slim"
+          >
+          </b-input>
+          <b-input
+            id="start-month"
+            type="number"
+            placeholder="Start month"
+            v-model="monthly.startMonth"
+            required
+            trim
+            @input="updateStatistics"
+            class="slim"
+          >
+          </b-input>
+        </b-input-group>
+        →
+        <b-input-group>
+          <b-input
+            id="end-year"
+            type="number"
+            placeholder="End year"
+            v-model="monthly.endYear"
+            required
+            trim
+            @input="updateStatistics"
+            class="slim"
+          >
+          </b-input>
+          <b-input
+            id="end-month"
+            type="number"
+            placeholder="End month"
+            v-model="monthly.endMonth"
+            required
+            trim
+            @input="updateStatistics"
+            class="slim"
+          >
+          </b-input>
+        </b-input-group>
+      </b-form>
+    </BaseContainer>
+
+    <BaseSection id="projects" title="Total">
       <JugglProjectStatisticsList :statistics="visibleStatistics" />
     </BaseSection>
   </LayoutNavbarPrivate>
@@ -11,6 +99,7 @@ import LayoutNavbarPrivate from "@/components/layout/LayoutNavbarPrivate";
 import JugglProjectStatisticsList from "@/components/juggl/JugglProjectStatisticsList";
 import { helperService } from "@/services/helper.service.js";
 import BaseSection from "@/components/base/BaseSection";
+import BaseContainer from "@/components/base/BaseContainer";
 import store from "@/store";
 
 export default {
@@ -18,15 +107,31 @@ export default {
   components: {
     LayoutNavbarPrivate,
     JugglProjectStatisticsList,
-    BaseSection
+    BaseSection,
+    BaseContainer
   },
   data: () => {
     return {
-      working: true
+      working: true,
+      mode: "daily",
+      options: [
+        { text: "Daily", value: "daily" },
+        { text: "Monthly", value: "monthly" }
+      ],
+      daily: {
+        startDate: new Date(),
+        endDate: new Date()
+      },
+      monthly: {
+        startYear: new Date().getFullYear(),
+        startMonth: new Date().getMonth() + 1,
+        endYear: new Date().getFullYear(),
+        endMonth: new Date().getMonth() + 1
+      }
     };
   },
-  created: function() {
+  mounted: function() {
-    store.dispatch("loadDailyStatistics", { date: new Date() });
+    this.updateStatistics();
   },
   computed: {
     visibleStatistics: () => {
@@ -36,9 +141,30 @@ export default {
     }
   },
   methods: {
-    getDurationTimestamp: helperService.getDurationTimestamp
+    getDurationTimestamp: helperService.getDurationTimestamp,
+    updateStatistics: function() {
+      if (this.mode == "daily") {
+        store.dispatch("loadStatistics", [
+          {
+            from: new Date(this.daily.startDate),
+            until: new Date(this.daily.endDate)
+          }
+        ]);
+      } else if (this.mode == "monthly") {
+        store.dispatch("loadMonthlyStatistics", this.monthly);
+      }
+    }
   }
 };
 </script>
 
-<style lang="sass"></style>
+<style lang="sass">
+.centered
+  text-align: center
+
+#form-daily *, #form-monthly *
+  margin: auto
+
+.slim
+  max-width: 6rem
+</style>