Time Select

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;