add first version of report page (development)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lightcontrol",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "A Tecamino App",
   "productName": "Attendence Records",
   "author": "A. Zuercher",

src/components/DateDaySelect.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="q-gutter-sm">
+    <h6 class="text-center text-bold q-ma-md text-primary">{{ props.title }}</h6>
+    <div class="row">
+      <q-checkbox
+        style="min-width: 75px"
+        dense
+        v-for="opt in weekdayOptions"
+        :key="opt.value"
+        v-model="selectedWeekdays"
+        :val="opt.value"
+        :label="opt.label"
+      />
+    </div>
+    <div class="row">
+      <q-date v-model="dateRange" range flat />
+      <div>
+        <q-badge color="secondary"> Total dates selected: {{ filteredDates.length }} </q-badge>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { date } from 'quasar';
+import { i18n } from 'src/boot/lang';
+
+const props = defineProps({
+  title: String,
+});
+
+const startDate = new Date();
+
+// Initial range (format: YYYY/MM/DD)
+const dateRange = ref();
+const selectedWeekdays = ref([0, 3]); // Default to weekdays
+
+onMounted(() => {
+  dateRange.value = date.formatDate(startDate, 'YYYY/MM/DD');
+});
+
+const weekdayOptions = [
+  { label: i18n.global.t('MondayShort'), value: 1 },
+  { label: i18n.global.t('TuesdayShort'), value: 2 },
+  { label: i18n.global.t('WednesdayShort'), value: 3 },
+  { label: i18n.global.t('ThursdayShort'), value: 4 },
+  { label: i18n.global.t('FridayShort'), value: 5 },
+  { label: i18n.global.t('SaturdayShort'), value: 6 },
+  { label: i18n.global.t('SundayShort'), value: 0 },
+];
+
+// The Logic: Calculate all specific dates within the range that match weekdays
+const filteredDates = computed(() => {
+  if (!dateRange.value) {
+    return [];
+  } else if (typeof dateRange.value === 'string') {
+    const current = new Date(dateRange.value);
+    if (current !== undefined && selectedWeekdays.value.includes(current.getDay())) {
+      return [date.formatDate(current, 'YYYY/MM/DD')];
+    }
+    return [];
+  }
+
+  const end = new Date(dateRange.value.to);
+  const result = [];
+
+  let current = new Date(dateRange.value.from);
+
+  while (current <= end) {
+    if (selectedWeekdays.value.includes(current.getDay())) {
+      result.push(date.formatDate(current, 'YYYY/MM/DD'));
+    }
+    current = date.addToDate(current, { days: 1 });
+  }
+  return result;
+});
+</script>

src/pages/ReportPage.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="rows">
+    <div class="row justify-end">
+      <div class="column">
+        <DateDaySelect title="hjgjh" />
+      </div>
+    </div>
+  </div>
+  <q-btn @click="openDateSelect">Hallo</q-btn>
+  <DialogFrame :header-title="$t('selectDates')" :width="350" :height="500" ref="dateSelect">
+    <DateDaySelect :title="$t('selectDates')" />
+    <q-btn color="primary" no-caps>{{ $t('apply') }}</q-btn>
+  </DialogFrame>
+</template>
+
+<script setup lang="ts">
+import { appApi } from 'src/boot/axios';
+import DateDaySelect from 'src/components/DateDaySelect.vue';
+import { onMounted, ref } from 'vue';
+import { useNotify } from 'src/vueLib/general/useNotify';
+import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
+
+const dateSelect = ref();
+const { NotifyResponse } = useNotify();
+
+onMounted(() => {
+  appApi
+    .get('events')
+    .then((resp) => console.log(1, resp))
+    .catch((err) => NotifyResponse(err, 'error'));
+});
+
+function openDateSelect() {
+  dateSelect.value?.open();
+}
+</script>