Time Select

2024-04-28 19:07:00 -04:00
parent 1a18881980
commit de04b53914
7 changed files with 502 additions and 146 deletions
--- a/src/components/scheduling/BoatSelection.vue
+++ b/src/components/scheduling/BoatSelection.vue
@@ -1,86 +1,9 @@
 <template>
-  <q-card-section style="max-width: 320px">
-    <div class="text-caption">
-      Use the calendar to pick a date. Select an available boat and timeslot
-      below.
-    </div>
-    <div
-      style="
-        width: 100%;
-        max-width: 320px;
-        display: flex;
-        justify-content: center;
-      "
-    >
-      <div
-        style="
-          width: 50%;
-          max-width: 350px;
-          display: flex;
-          justify-content: space-between;
-        "
-      >
-        <span
-          class="q-button"
-          style="cursor: pointer; user-select: none"
-          @click="onPrev"
-          >&lt;</span
-        >
-        {{ formattedMonth }}
-        <span
-          class="q-button"
-          style="cursor: pointer; user-select: none"
-          @click="onNext"
-          >&gt;</span
-        >
-      </div>
-    </div>
-    <div
-      style="
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-wrap: nowrap;
-      "
-    >
-      <div style="display: flex; width: 100%">
-        <q-calendar-month
-          ref="calendar"
-          v-model="selectedDate"
-          :disabled-before="disabledBefore"
-          :disabled-days="disabledDays()"
-          animated
-          bordered
-          mini-mode
-          date-type="rounded"
-          @click-date="onClickDate"
-          @change="onChange"
-        />
-      </div></div
-  ></q-card-section>
-  <q-card-section style="max-width: 320px">
-    <div v-for="boat in boatStore.boats" :key="boat.name">
-      <q-item-label header>{{ boat.name }}</q-item-label>
-      <q-item>
-        <q-item-section>
-          <q-option-group
-            :options="boatoptions(boat)"
-            type="radio"
-            v-model="selectedBoatTime"
-          >
-            <template v-slot:label="opt">
-              <div class="row items-center">
-                {{ opt.label }} &nbsp;
-                <span class="text-caption" v-if="opt.disable"
-                  >Reserved by {{ opt.user }}</span
-                >
-              </div></template
-            >
-          </q-option-group>
-        </q-item-section>
-      </q-item>
-    </div>
-  </q-card-section>
+  <q-banner :class="$q.dark.isActive ? 'bg-grey-9' : 'bg-grey-3'">
+    Use the calendar to pick a date. Select an available boat and timeslot
+    below.
+  </q-banner>
+  <BoatScheduleTableComponent />
 </template>

 <script setup lang="ts">
@@ -95,6 +18,7 @@ import { Boat, useBoatStore } from 'src/stores/boat';
 import { useScheduleStore, Timeblock } from 'src/stores/schedule';
 import { computed } from 'vue';
 import { date } from 'quasar';
+import BoatScheduleTableComponent from './boat/BoatScheduleTableComponent.vue';

 type EventData = {
  event: object;
@@ -107,17 +31,10 @@ type EventData = {
 };

 const calendar = ref();
-const boatStore = useBoatStore();
 const scheduleStore = useScheduleStore();
 const selectedDate = ref(today());
 const selectedBoatTime = ref();

-const formattedMonth = computed(() => {
-  const date = new Date(selectedDate.value);
-
-  return monthFormatter()?.format(date);
-});
-
 const disabledBefore = computed(() => {
  const todayTs = parseTimestamp(today()) as Timestamp;
  return addToDate(todayTs, { day: -1 }).date;
--- a/src/components/scheduling/boat/BoatScheduleTableComponent.vue
+++ b/src/components/scheduling/boat/BoatScheduleTableComponent.vue
@@ -0,0 +1,118 @@
+<template>
+  <div class="q-px-sm">
+    <CalendarHeaderComponent v-model="selectedDate" />
+    <div class="boat-schedule-table-component">
+      <QCalendarDay
+        ref="calendar"
+        class="q-pt-xs"
+        flat
+        animated
+        dense
+        v-model="selectedDate"
+        :column-count="boats.length"
+        @change="scrollToEvent()"
+      >
+        <template #head-day="{ scope }">
+          <div style="text-align: center; font-weight: 800">
+            {{ boats[scope.columnIndex].displayName }}
+          </div>
+        </template>
+
+        <template #day-body="{ scope }">
+          <div
+            v-for="block in scheduleStore.getTimeblocksForDate(scope.timestamp)"
+            :key="block.id"
+          >
+            <div
+              class="timeblock"
+              :style="
+                blockStyles(block, scope.timeStartPos, scope.timeDurationHeight)
+              "
+              @click="selectBlock($event, scope, block)"
+            >
+              Available
+            </div>
+          </div>
+        </template>
+      </QCalendarDay>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Timestamp, diffTimestamp, today } from '@quasar/quasar-ui-qcalendar';
+
+import CalendarHeaderComponent from './CalendarHeaderComponent.vue';
+
+import { ref } from 'vue';
+import { useBoatStore } from 'src/stores/boat';
+import { Timeblock, useScheduleStore } from 'src/stores/schedule';
+
+const scheduleStore = useScheduleStore();
+const boatStore = useBoatStore();
+
+const selectedDate = ref(today());
+
+const boats = boatStore.boats;
+
+const calendar = ref<QCalendarDay.QCalendarDay | null>(null);
+
+function blockStyles(
+  block: Timeblock,
+  timeStartPos: (t: string) => string,
+  timeDurationHeight: (d: number) => string
+) {
+  const s = {
+    top: '',
+    height: '',
+  };
+  if (timeStartPos && timeDurationHeight) {
+    s.top = timeStartPos(block.start.time) + 'px';
+    s.height =
+      timeDurationHeight(
+        diffTimestamp(block.start, block.end, false) / 1000 / 60
+      ) + 'px';
+  }
+  return s;
+}
+
+interface DayBodyScope {
+  columnIndex: number;
+  timeDurationHeight: string;
+  timeStartPos: (time: string, clamp: boolean) => string;
+  timestamp: Timestamp;
+}
+
+function selectBlock(event: MouseEvent, scope: DayBodyScope, block: Timeblock) {
+  const target = event.target as HTMLDivElement;
+  target.classList.add('selected');
+  target.textContent = 'selected';
+}
+
+function scrollToEvent() {
+  setTimeout(() => calendar.value?.scrollToTime('09:00'), 0); // Should figure out why we need this setTimeout...
+}
+</script>
+
+<style lang="sass">
+.boat-schedule-table-component
+  display: flex
+  height: 40vh
+.timeblock
+  display: flex
+  position: absolute
+  justify-content: center
+  align-items: center
+  width: 100%
+  opacity: 0.25
+  margin: 0 1px
+  text-overflow: ellipsis
+  overflow: hidden
+  font-size: 0.8em
+  cursor: pointer
+  background: $primary
+  color: white
+  border: 2px solid black
+.selected
+  opacity: 1 !important
+</style>
--- a/src/components/scheduling/boat/CalendarHeaderComponent.vue
+++ b/src/components/scheduling/boat/CalendarHeaderComponent.vue
@@ -0,0 +1,241 @@
+<template>
+  <div class="title-bar" style="display: flex">
+    <button
+      tabindex="0"
+      class="date-button direction-button direction-button__left"
+      @click="onPrev"
+    >
+      <span class="q-calendar__focus-helper" tabindex="-1" />
+    </button>
+    <div class="dates-holder">
+      <div :key="parsedStart?.date" class="internal-dates-holder">
+        <div v-for="day in days" :key="day.date" :style="dayStyle">
+          <button
+            tabindex="0"
+            style="width: 100%"
+            :class="dayClass(day)"
+            @click="selectedDate = day.date"
+          >
+            <span class="q-calendar__focus-helper" tabindex="-1" />
+            <div style="width: 100%">
+              {{ monthFormatter(day, true) }}
+            </div>
+            <div style="width: 100%; font-size: 16px; font-weight: 700">
+              {{ dayFormatter(day, false) }}
+            </div>
+            <div style="width: 100%; font-size: 10px">
+              {{ weekdayFormatter(day, true) }}
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+    <button
+      tabindex="0"
+      class="date-button direction-button direction-button__right"
+      @click="onNext"
+    >
+      <span class="q-calendar__focus-helper" tabindex="-1" />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  Timestamp,
+  addToDate,
+  createDayList,
+  createNativeLocaleFormatter,
+  getEndOfWeek,
+  getStartOfWeek,
+  getWeekdaySkips,
+  parseTimestamp,
+  today,
+} from '@quasar/quasar-ui-qcalendar';
+
+import { ref, reactive, computed } from 'vue';
+
+const selectedDate = defineModel<string>();
+
+const weekdays = reactive([0, 1, 2, 3, 4, 5, 6]),
+  locale = ref('en-CA'),
+  monthFormatter = monthFormatterFunc(),
+  dayFormatter = dayFormatterFunc(),
+  weekdayFormatter = weekdayFormatterFunc();
+
+const weekdaySkips = computed(() => {
+  return getWeekdaySkips(weekdays);
+});
+
+const parsedStart = computed(() =>
+  getStartOfWeek(
+    parseTimestamp(selectedDate.value || today()) as Timestamp,
+    weekdays,
+    today2.value as Timestamp
+  )
+);
+
+const parsedEnd = computed(() =>
+  getEndOfWeek(
+    parseTimestamp(selectedDate.value || today()) as Timestamp,
+    weekdays,
+    today2.value as Timestamp
+  )
+);
+
+const today2 = computed(() => {
+  return parseTimestamp(today());
+});
+
+const days = computed(() => {
+  if (parsedStart.value && parsedEnd.value) {
+    return createDayList(
+      parsedStart.value,
+      parsedEnd.value,
+      today2.value as Timestamp,
+      weekdaySkips.value
+    );
+  }
+  return [];
+});
+
+const dayStyle = computed(() => {
+  const width = 100 / weekdays.length + '%';
+  return {
+    width,
+  };
+});
+
+function onPrev() {
+  const ts = addToDate(parsedStart.value, { day: -7 });
+  selectedDate.value = ts.date;
+}
+
+function onNext() {
+  const ts = addToDate(parsedStart.value, { day: 7 });
+  selectedDate.value = ts.date;
+}
+
+function dayClass(day: Timestamp) {
+  return {
+    'date-button': true,
+    'selected-date-button': selectedDate.value === day.date,
+  };
+}
+
+function monthFormatterFunc() {
+  const longOptions = { timeZone: 'UTC', month: 'long' };
+  const shortOptions = { timeZone: 'UTC', month: 'short' };
+
+  return createNativeLocaleFormatter(locale.value, (_tms, short) =>
+    short ? shortOptions : longOptions
+  );
+}
+
+function weekdayFormatterFunc() {
+  const longOptions = { timeZone: 'UTC', weekday: 'long' };
+  const shortOptions = { timeZone: 'UTC', weekday: 'short' };
+
+  return createNativeLocaleFormatter(locale.value, (_tms, short) =>
+    short ? shortOptions : longOptions
+  );
+}
+
+function dayFormatterFunc() {
+  const longOptions = { timeZone: 'UTC', day: '2-digit' };
+  const shortOptions = { timeZone: 'UTC', day: 'numeric' };
+
+  return createNativeLocaleFormatter(locale.value, (_tms, short) =>
+    short ? shortOptions : longOptions
+  );
+}
+</script>
+<style lang="sass">
+.title-bar
+  position: relative
+  width: 100%
+  height: 70px
+  background: $primary
+   display: flex
+   flex-direction: row
+   flex: 1 0 100%
+   justify-content: space-between
+   align-items: center
+  overflow: hidden
+  border-radius: 3px
+  user-select: none
+
+.dates-holder
+  position: relative
+  width: 100%
+  align-items: center
+  display: flex
+  justify-content: space-between
+  color: #fff
+  overflow: hidden
+  user-select: none
+
+.internal-dates-holder
+  position: relative
+  width: 100%
+  display: inline-flex
+  flex: 1 1 100%
+  flex-direction: row
+  justify-content: space-between
+  overflow: hidden
+  user-select: none
+
+.direction-button
+  background: $primary
+  color: white
+  width: 40px
+  max-width: 50px !important
+
+.direction-button__left
+  &:before
+    content: '<'
+    display: inline-flex
+    flex-direction: column
+    justify-content: center
+    height: 100%
+    font-weight: 900
+    font-size: 3em
+
+.direction-button__right
+  &:before
+    content: '>'
+    display: inline-flex
+    flex-direction: column
+    justify-content: center
+    height: 100%
+    font-weight: 900
+    font-size: 3em
+
+.date-button
+  color: white
+  background: $primary
+  z-index: 2
+  height: 100%
+  outline: 0
+  cursor: pointer
+  border-radius: 3px
+  display: inline-flex
+  flex: 1 0 auto
+  flex-direction: column
+  align-items: stretch
+  position: relative
+  border: 0
+  vertical-align: middle
+  padding: 0
+  font-size: 14px
+  line-height: 1.715em
+  text-decoration: none
+  font-weight: 500
+  text-transform: uppercase
+  text-align: center
+  user-select: none
+
+.selected-date-button
+  color: #3f51b5 !important
+  background: white !important
+</style>