[widget] Implemented functional widget, show next services

src/components/Widget.vue

@@ -1,25 +1,53 @@
 <template>
-  <q-card class="row justify-center content-center" style="text-align: center">
-    <q-card-section>
-      <div class="text-h6 col-12">Dienste diesen Monat: {{ jobs }}</div>
-      <!--TODO: Filters are deprecated! -->
-      <!--<div class="text-h6 col-12">Nächster Dienst: {{ nextJob | date }}</div>-->
+  <q-card style="text-align: center">
+    <q-card-section class="row justify-center items-center content-center">
+      <div class="col-5">
+      <q-icon :name="jobs == 0 ? 'mdi-calendar-blank' : 'mdi-calendar-alert'" :size="divHeight" />
+      </div>
+      <div v-if="(jobs || 0) >  0" ref="div" class="col-7">
+        <div class="text-h6">Anstehende Dienste</div>
+        <div class="text-body1">{{ jobs }}</div>
+        <div class="text-h6">Nächster Dienst</div>
+        <div class="text-body1">{{ formatDate(nextJob) }}</div>
+      </div>
+      <div v-else ref="div" class="col-7">
+        <div class="text-subtitle1">Keine anstehenden Dienste</div>
+      </div>
     </q-card-section>
   </q-card>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { date } from 'quasar';
+import { computed, defineComponent, onBeforeMount, ref } from 'vue';
+import { asHour, formatDateTime } from '@flaschengeist/api';
+
+import { useEventStore } from '../store';
 
 export default defineComponent({
   name: 'EventsWidget',
   setup() {
-    function randomNumber(start: number, end: number) {
-      return start + Math.floor(Math.random() * Math.floor(end));
+    const store = useEventStore();
+
+    const jobs = ref<number>();
+    const nextJob = ref<Date>();
+    const div = ref<HTMLElement>();
+    const divHeight = computed(() => `${div.value?.scrollHeight || '100'}px`);
+
+    onBeforeMount(() => {
+      void store.getJobs({ limit: 1, from: new Date() }).then(({ count, result }) => {
+        jobs.value = count;
+        nextJob.value = count > 0 ? result[0].start : undefined;
+      });
+    });
+
+    function formatDate(d?: Date) {
+      if (d === undefined) return '-';
+      if (date.isSameDate(d, new Date(), 'day')) return `Heute ${asHour(d)} Uhr`;
+      return formatDateTime(d, true, true, false, true) + ' Uhr';
     }
-    const jobs = randomNumber(0, 5);
-    const nextJob = new Date(2021, randomNumber(1, 12), randomNumber(1, 31));
-    return { jobs, nextJob };
+
+    return { div, divHeight, formatDate, jobs, nextJob };
   },
 });
 </script>

src/store/index.ts

@@ -166,6 +166,15 @@ export const useEventStore = defineStore({
         .then(({ data }) => fixJob(data));
     },
 
+    async getJobs(filter?: FG.PaginationFilter) {
+      return api
+        .get<FG.PaginationResponse<FG.Job>>('/events/jobs', { params: <unknown>filter })
+        .then(({ data }) => {
+          data.result.forEach((j) => fixJob(j));
+          return data;
+        });
+    },
+
     /**
      * Send invite to job or transfer to other user
      * @param job Job to invite to