datepicker improvements

src/components/InputTimeInterval.vue

@@ -45,11 +45,15 @@ div
             option(:value="24*60*60") 24h
       tr(v-if="mode == 'range'")
         th.pr-2 Range:
-        td
-          input(type="date", v-model="start", :max="end || undefined")
-          input(type="date", v-model="end", :min="start || undefined", placeholder="(optional)")
+        td.d-flex.align-items-center
+          b-button(variant="outline-dark", size="sm", @click="shiftDays(-1)")
+            icon(name="arrow-left")
+          b-form-datepicker(v-model="start", size="sm", :start-weekday="firstDayOfWeek" :max="end || undefined")
+          b-form-datepicker(v-model="end", size="sm", :start-weekday="firstDayOfWeek", :min="start || undefined", placeholder="(optional)")
+          b-button(variant="outline-dark", size="sm", @click="shiftDays(1)")
+            icon(name="arrow-right")
           button(
-            class="btn btn-outline-dark btn-sm",
+            class="btn btn-outline-dark btn-sm ml-1",
             type="button",
             :disabled="invalidDaterange || emptyDaterange || daterangeTooLong",
             @click="applyRange"
@@ -70,11 +74,21 @@ div
     background-color: #aaa;
   }
 }
+
+.b-form-datepicker {
+  min-width: 300px;
+}
 </style>
 
 <script lang="ts">
 import moment from 'moment';
 import 'vue-awesome/icons/sync';
+import 'vue-awesome/icons/arrow-left';
+import 'vue-awesome/icons/arrow-right';
+import { mapState } from 'pinia';
+import { useSettingsStore } from '~/stores/settings';
+import { get_first_day_of_week } from '~/util/time';
+
 export default {
   name: 'input-timeinterval',
   props: {
@@ -113,6 +127,7 @@ export default {
     };
   },
   computed: {
+    ...mapState(useSettingsStore, ['startOfWeek']),
     value: {
       get() {
         if (this.mode == 'range' && this.start) {
@@ -138,6 +153,9 @@ export default {
       if (!this.end) return false;
       return moment(this.start).add(this.maxDuration, 'seconds').isBefore(moment(this.end));
     },
+    firstDayOfWeek() {
+      return get_first_day_of_week(this.startOfWeek);
+    },
   },
   mounted() {
     this.duration = this.defaultDuration;
@@ -179,6 +197,14 @@ export default {
       this.mode = 'last_duration';
       this.valueChanged();
     },
+    shiftDays(n) {
+      if (!this.start) return;
+      this.start = moment(this.start).add(n, 'days').format('YYYY-MM-DD');
+      if (this.end) {
+        this.end = moment(this.end).add(n, 'days').format('YYYY-MM-DD');
+      }
+      this.applyRange();
+    },
   },
 };
 </script>

src/components/QueryOptions.vue

@@ -5,9 +5,9 @@ div
       option(v-for="hostname in hostnameChoices")
         | {{hostname}}
   b-form-group(label="Start" label-cols=2)
-    b-form-datepicker(v-model="queryOptionsData.start")
+    b-form-datepicker(v-model="queryOptionsData.start", :start-weekday="firstDayOfWeek")
   b-form-group(label="Stop" label-cols=2)
-    b-form-datepicker(v-model="queryOptionsData.stop")
+    b-form-datepicker(v-model="queryOptionsData.stop", :start-weekday="firstDayOfWeek")
   b-form-group(label="Toggles" label-cols=2)
     b-form-checkbox(type="checkbox" v-model="queryOptionsData.filter_afk" label="Filter AFK" description="")
       label Exclude time away from computer
@@ -16,7 +16,10 @@ div
 <script lang="ts">
 import Vue from 'vue';
 import moment from 'moment';
+import { mapState } from 'pinia';
 import { useBucketsStore } from '~/stores/buckets';
+import { useSettingsStore } from '~/stores/settings';
+import { get_first_day_of_week } from '~/util/time';
 
 export default Vue.extend({
   name: 'QueryOptions',
@@ -39,9 +42,13 @@ export default Vue.extend({
   },
 
   computed: {
+    ...mapState(useSettingsStore, ['startOfWeek']),
     hostnameChoices() {
       return this.bucketsStore.hosts;
     },
+    firstDayOfWeek() {
+      return get_first_day_of_week(this.startOfWeek);
+    },
   },
 
   watch: {

src/util/time.ts

@@ -94,3 +94,12 @@ export function get_today_with_offset(offset?: string): string {
   const offset_dur = get_offset_duration(offset);
   return moment().subtract(offset_dur).startOf('day').format('YYYY-MM-DD');
 }
+
+export function get_first_day_of_week(startOfWeek: string): number {
+  const mapping: Record<string, number> = {
+    Sunday: 0,
+    Monday: 1,
+    Saturday: 6,
+  };
+  return mapping[startOfWeek] !== undefined ? mapping[startOfWeek] : 1;
+}