Merge pull request #6145 from pmattmann/feature/dashboard-scroll-today

dashboard add scroll-to-today
ecamp · Nov 5, 2024 · 1e67c90 · 1e67c90
2 parents 3928b3c + 10d9ffa
commit 1e67c90
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 0 deletions.
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
@@ -682,6 +682,7 @@
           "title": "Titel"
         },
         "noEntries": "Keine Aktivitäten gefunden. Versuche die Filter zu entfernen oder lade die Seite neu.",
+        "today": "Heute",
         "welcome": "Willkommen in deinem neuen Lager. Es sind noch keine Aktivitäten erfasst. "
       },
       "invitation": {

diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
@@ -677,6 +677,7 @@
           "title": "Title"
         },
         "noEntries": "No activities found. Try clearing the selection filters and/or reloading the page.",
+        "today": "Today",
         "welcome": "Welcome to your new camp. There aren't any activities defined yet."
       },
       "invitation": {

diff --git a/frontend/src/locales/fr.json b/frontend/src/locales/fr.json
@@ -621,6 +621,7 @@
           "title": "Titre"
         },
         "noEntries": "Aucune activité trouvée. Essaie d'effacer les filtres de sélection et/ou de recharger la page.",
+        "today": "Aujourd'hui",
         "welcome": "Bienvenue dans ton nouveau camp. Il n'y a pas encore d'activités définies."
       },
       "invitation": {

diff --git a/frontend/src/locales/it.json b/frontend/src/locales/it.json
@@ -601,6 +601,7 @@
           "title": "Titolo"
         },
         "noEntries": "Non sono state trovate attività. Prova a cancellare i filtri di selezione e/o a ricaricare la pagina.",
+        "today": "Oggi",
         "welcome": "Benvenuto nel tuo nuovo campo. Non ci sono ancora attività definite."
       },
       "invitation": {

diff --git a/frontend/src/views/camp/Dashboard.vue b/frontend/src/views/camp/Dashboard.vue
@@ -1,5 +1,12 @@
 <template>
   <content-card :title="$tc('views.camp.dashboard.activities')" toolbar>
+    <template #title-actions>
+      <v-spacer />
+      <v-btn v-if="today !== null" text @click="scrollToToday">
+        <v-icon left>mdi-calendar-today</v-icon>
+        {{ $tc('views.camp.dashboard.today') }}
+      </v-btn>
+    </template>
     <div class="d-flow-root">
       <ScheduleEntryFilters
         v-if="loading"
@@ -55,6 +62,7 @@
           <template v-if="!periods[uri].days()._meta.loading">
             <tbody
               v-for="(dayScheduleEntries, dayUri) in periodDays"
+              :id="days[dayUri].id"
               :key="dayUri"
               :aria-labelledby="dayUri + 'th'"
             >
@@ -140,6 +148,7 @@ import {
 } from '@/helpers/querySyncHelper'
 import AvatarRow from '@/components/generic/AvatarRow.vue'
 import ScheduleEntryFilters from '@/components/program/ScheduleEntryFilters.vue'
+import dayjs from '@/common/helpers/dayjs.js'
 
 export default {
   name: 'Dashboard',
@@ -188,6 +197,13 @@ export default {
         '_meta.self'
       )
     },
+    today() {
+      const now = dayjs.utc()
+      const today = Object.values(this.days).filter(
+        (d) => dayjs.utc(d.start) <= now && dayjs.utc(d.end) >= now
+      )
+      return today.length > 0 ? today[0] : null
+    },
     dayResponsibleCollaborators() {
       return mapValues(this.days, (day) =>
         day.dayResponsibles().items.map((item) => item.campCollaboration())
@@ -274,6 +290,24 @@ export default {
       if (filterAndQueryAreEqual(query, this.$route.query)) return
       this.$router.replace({ query }).catch((err) => console.warn(err))
     },
+    scrollToToday() {
+      const element = document.getElementById(this.today.id)
+      if (element) {
+        let elementPosition =
+          element.getBoundingClientRect().top + document.documentElement.scrollTop
+        if (this.$vuetify.breakpoint.mdAndUp) {
+          elementPosition = elementPosition - 50
+        } else if (this.$vuetify.breakpoint.smAndUp) {
+          elementPosition = elementPosition + 14
+        } else {
+          elementPosition = elementPosition - 34
+        }
+        window.scrollTo({
+          top: elementPosition,
+          behavior: 'smooth',
+        })
+      }
+    },
   },
 }
 </script>