Started work on Schedule Management

src/pages/schedule/ManageCalendar.vue

@@ -1,38 +1,52 @@
 <template>
   <div class="fit row wrap justify-start items-start content-start">
-    <div class="col-9">
+    <div class="col-9 q-pa-md">
       <div class="scheduler">
         <q-calendar-scheduler
           ref="calendar"
           v-model="selectedDate"
           v-model:model-resources="resources"
           view="week"
-          :drag-enter-func="onDragEnter"
-          :drag-over-func="onDragOver"
-          :drag-leave-func="onDragLeave"
-          :drop-func="onDrop"
-          :weekday-class="onWeekdayClass"
-          :day-class="onDayClass"
-          :weekdays="[1, 2, 3, 4, 5]"
+          :weekdays="[1, 2, 3, 4, 5, 6, 0]"
           hoverable
           animated
           bordered
           :day-min-height="50"
           :day-height="0"
-          style="max-width: 800px; width: 100%"
-          @change="onChange"
-          @moved="onMoved"
-          @click-date="onClickDate"
-          @click-day-resource="onClickDayResource"
-          @click-resource="onClickResource"
-          @click-head-resources="onClickHeadResources"
-          @click-head-day="onClickHeadDay"
         ></q-calendar-scheduler>
       </div>
     </div>
-    HI!
-    <div class="col-3">
-      <!---->
+    <div class="col-3 q-pa-md">
+      <q-list padding bordered class="rounded-borders">
+        <q-item>
+          <q-item-section>
+            <q-item-label overline>Availability Templates</q-item-label>
+            <q-item-label caption
+              >Drag and drop a template to a boat / date to create booking
+              availability</q-item-label
+            >
+          </q-item-section>
+        </q-item>
+        <q-separator spaced />
+        <q-expansion-item
+          v-for="template in timeblockTemplates"
+          :key="template.$id"
+          dense
+          dense-toggle
+          expand-separator
+          :label="template.name"
+          style="font-size: 0.8em"
+          draggable="true"
+        >
+          <q-card>
+            <q-card-section>
+              <q-badge v-for="item in template.timeTuple" :key="item.$id">
+                {{ item[0] }} - {{ item[1] }}
+              </q-badge>
+            </q-card-section>
+          </q-card>
+        </q-expansion-item></q-list
+      >
     </div>
   </div>
 </template>
@@ -40,8 +54,11 @@
 <script setup type="ts">
 import {QCalendarScheduler, today} from '@quasar/quasar-ui-qcalendar'
 import { useBoatStore } from 'src/stores/boat';
+import { useScheduleStore } from 'src/stores/schedule';
 import { ref } from 'vue';
 
 const selectedDate = ref(today())
-const resources = ref(useBoatStore().boats)
+const scheduleStore = useScheduleStore()
+const resources = useBoatStore().boats
+const timeblockTemplates = scheduleStore.timeblockTemplates
 </script>