allow stepping through weeks with back and forward buttons and fix dst

frontend/src/App.vue

@@ -32,19 +32,39 @@ const regionSelected = function(nuts) {
   selectedNutsCode.value = nuts
 }
 
-const dateSelected = function(date) {
-  let momentDate = moment(date.toJSON())
+const setSelectedDate = function(date) {
+  let momentDate = date._isAMomentObject ? date : moment(date)
   momentDate.utc(true)
   momentDate.startOf('week')
+  if (momentDate.isDST()) momentDate.add(1, 'h')
   selectedDate.value = momentDate.toDate()
 }
 
+const oneWeekBack = function() {
+  let momentDate = moment(selectedDate.value)
+  momentDate.subtract(1, 'w')
+  setSelectedDate(momentDate.toDate())
+}
+
+const oneWeekForward = function() {
+  let momentDate = moment(selectedDate.value)
+  momentDate.add(1, 'w')
+  setSelectedDate(momentDate.toDate())
+}
+
+const jumpCurrentWeek = function() {
+  let momentDate = moment()
+  momentDate.utc(true)
+  momentDate.startOf('week')
+  setSelectedDate(momentDate.toDate())
+}
+
 init();
 </script>
 
 <template>
   <div>
-    <Sidebar :covid-data="covidData" :selectedNutsCode="selectedNutsCode" :selected-date="selectedDate" @date-selected="dateSelected" @search="search"/>
+    <Sidebar :covid-data="covidData" :selectedNutsCode="selectedNutsCode" :selected-date="selectedDate" @date-selected="setSelectedDate"  @one-week-back="oneWeekBack" @one-week-forward="oneWeekForward" @jumpCurrentWeek="jumpCurrentWeek" @search="search"/>
     <Globe :covid-data="covidData" :selected-date="selectedDate" @region-selected="regionSelected" />
   </div>
 </template>

frontend/src/components/Sidebar.vue

 <script setup>
 import { computed, ref } from "@vue/reactivity";
 import "bulma/css/bulma.css";
-import { watch } from "vue";
-import DatePicker from 'vue-datepicker-next';
-import 'vue-datepicker-next/index.css';
+import { onMounted, watch } from "vue";
+import DatePicker from "vue-datepicker-next";
+import "vue-datepicker-next/index.css";
 
 const props = defineProps({
   covidData: Object,
   selectedNutsCode: String,
   selectedDate: Date,
 });
-const emit = defineEmits(['search', 'dateSelected']);
+const emit = defineEmits(["search", "dateSelected", "oneWeekBack", "oneWeekForward", "jumpCurrentWeek"]);
 
 const selectedRegion = computed({
   get() {
     if (props.selectedNutsCode == "") return null;
     if (props.covidData.length == 0) return null;
 
-    const covidDataForDate = props.covidData[props.selectedDate.toJSON()]
+    const covidDataForDate = props.covidData[props.selectedDate.toJSON()];
     if (!covidDataForDate) {
-      return {}
+      return {};
     }
-    const covidDataForDateAndNutsCode = covidDataForDate[props.selectedNutsCode];
+    const covidDataForDateAndNutsCode =
+      covidDataForDate[props.selectedNutsCode];
     if (!covidDataForDateAndNutsCode) {
-      return {}
+      return {};
     }
-    return covidDataForDateAndNutsCode
+    return covidDataForDateAndNutsCode;
   },
 });
+
+onMounted(() => {
+  const dateInput = document.querySelector("input[name='date']")
+  dateInput.classList.add('input')
+  dateInput.classList.remove('mx-input')
+})
 </script>
 
 <template>
   <div id="menucontainer" class="container">
+    <div class="columns is-vcentered">
+      <div class="column">
         <h4 class="title is-4">¿A Donde quieres Viajar?</h4>
-    <div class="field has-addons">
+      </div>
+      <div class="field has-addons column">
         <p class="control has-icons-left">
           <input class="input" placeholder="Ciudad, Region o País" />
           <span class="icon is-small is-left">
@@ -44,10 +54,48 @@ const selectedRegion = computed({
           <a class="button is-info" @click="this.$emit('search')">Buscar</a>
         </div>
       </div>
+    </div>
     <hr />
-    <date-picker :value="selectedDate" @change="this.$emit('dateSelected', $event)" type="week" format="DD/MM/YYYY" :clearable="false" :lang="{formatLocale: {firstDayOfWeek: 1}}"></date-picker>
+    <div class="columns is-vcentered">
+      <div class="column">
+        <h4 class="title is-4">¿Cuando?</h4>
+      </div>
+      <div class="column">
+      <date-picker
+        :value="selectedDate"
+        @change="this.$emit('dateSelected', $event)"
+        type="week"
+        format="DD/MM/YYYY"
+        :clearable="false"
+        :lang="{ formatLocale: { firstDayOfWeek: 1 } }"
+      ></date-picker>
+      </div>
+      <div class="field has-addons column">
+        <p class="control">
+          <button class="button" @click="this.$emit('oneWeekBack')">
+              <i class="fas fa-angle-left"></i>
+          </button>
+        </p>
+        <p class="control">
+          <button class="button" @click="this.$emit('jumpCurrentWeek')">
+            <span class="icon is-small">
+              <i class="fas fa-calendar-day"></i>
+            </span>
+            <span>Hoy</span>
+          </button>
+        </p>
+        <p class="control">
+          <button class="button" @click="this.$emit('oneWeekForward')">
+              <i class="fas fa-angle-right"></i>
+          </button>
+        </p>
+      </div>
+    </div>
     <hr />
-    <h1>selected region: {{selectedRegion == null ? "none" : selectedRegion.region}}</h1>
+    <h1>
+      selected region:
+      {{ selectedRegion == null ? "none" : selectedRegion.region }}
+    </h1>
   </div>
 </template>
 
@@ -62,7 +110,7 @@ div#menucontainer {
   z-index: 1;
   color: white;
   text-align: center;
-  padding: 1rem;
+  padding: 2rem 1rem;
 }
 h4 {
   color: white;