Basic calendar view

src/pages/BoatPage.vue

@@ -1,5 +1,6 @@
 <template>
-  <q-page padding>
+  <toolbar-component pageTitle="Boats" />
+  <q-page>
     <boat-preview-component :boats="boats" />
   </q-page>
 </template>
@@ -8,6 +9,7 @@
 import BoatPreviewComponent from 'src/components/BoatPreviewComponent.vue';
 import { ref } from 'vue';
 import { useBoatStore } from 'src/stores/boat';
+import ToolbarComponent from 'src/components/ToolbarComponent.vue';
 
 const boats = ref(useBoatStore().boats);
 </script>

src/pages/BookingPage.vue

@@ -1,8 +0,0 @@
-<template>
-  <q-page padding>
-    <!-- content -->
-  </q-page>
-</template>
-
-<script setup lang="ts">
-</script>

src/pages/CertificationPage.vue

@@ -1,4 +1,5 @@
 <template>
+  <toolbar-component pageTitle="Certification" />
   <q-page padding>
     <CertificationComponent />
   </q-page>
@@ -6,4 +7,5 @@
 
 <script setup lang="ts">
 import CertificationComponent from 'components/CertificationComponent.vue';
+import ToolbarComponent from 'src/components/ToolbarComponent.vue';
 </script>

src/pages/ChecklistPage.vue

@@ -1,8 +1,25 @@
 <template>
+  <toolbar-component pageTitle="Checklists" />
   <q-page padding>
-    <!-- content -->
+    <q-card bordered separator style="max-width: 400px">
+      <q-card-section clickable v-ripple>
+        <div class="text-h6">Engine Starting</div>
+        <div class="text-subtitle2">
+          Proper procedures for starting an outboard engine.
+        </div>
+      </q-card-section>
+    </q-card>
+    <q-card bordered separator style="max-width: 400px">
+      <q-card-section clickable v-ripple>
+        <div class="text-h6">Pre-Sail Checklist J/27</div>
+        <div class="text-subtitle2">
+          Mandatory Safety and Equipment readiness check for J/27 class boats.
+        </div>
+      </q-card-section>
+    </q-card>
   </q-page>
 </template>
 
 <script setup lang="ts">
+import ToolbarComponent from 'src/components/ToolbarComponent.vue';
 </script>

src/pages/IndexPage.vue

@@ -1,4 +1,5 @@
 <template>
+  <ToolbarComponent />
   <q-page class="row justify-center">
     <q-img alt="OYS Logo" src="~assets/oysqn_logo.png" fit="scale-down" />
     <q-list class="full-width mobile-only">
@@ -25,6 +26,7 @@
 <script lang="ts" setup>
 import { links } from 'src/router/navlinks.js';
 import { useAuthStore } from 'stores/auth';
+import ToolbarComponent from 'components/ToolbarComponent.vue';
 
 const auth = useAuthStore();
 </script>

src/pages/ProfilePage.vue

@@ -1,9 +1,7 @@
 <template>
+  <toolbar-component pageTitle="Member Profile" />
   <q-page padding>
     <q-list bordered>
-      <q-toolbar class="bg-primary text-white shadow-3">
-        <q-toolbar-title> Member Profile </q-toolbar-title>
-      </q-toolbar>
       <q-separator />
       <q-item>
         <q-item-section avatar>
@@ -42,4 +40,6 @@
   </q-page>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import ToolbarComponent from 'src/components/ToolbarComponent.vue';
+</script>

src/pages/TaskPage.vue

@@ -1,8 +1,26 @@
 <template>
+  <toolbar-component pageTitle="Tasks" />
   <q-page padding>
-    <!-- content -->
+    <q-card bordered separator class="mobile-card">
+      <q-card-section clickable v-ripple>
+        <div class="text-h6">Launch Prep</div>
+        <div class="text-subtitle2">Prepare for Launch</div>
+        <q-chip size="md" color="green" text-color="white" icon="alarm">
+          APR 1,2024
+        </q-chip>
+        <q-chip size="md" icon="build"> 24 tasks </q-chip>
+      </q-card-section>
+    </q-card>
+    <q-card bordered separator class="mobile-card">
+      <q-card-section clickable v-ripple>
+        <div class="text-h6">General Maintenance</div>
+        <div class="text-subtitle2">Day to day maintenance and upkeep</div>
+        <q-chip size="md" icon="build"> 4 tasks </q-chip>
+      </q-card-section>
+    </q-card>
   </q-page>
 </template>
 
 <script setup lang="ts">
+import ToolbarComponent from 'src/components/ToolbarComponent.vue';
 </script>

src/pages/reference/ReferenceIndexPage.vue

@@ -1,11 +1,12 @@
 <template>
-  <q-page padding> <ReferencePreviewComponent :entries="items" /> </q-page>
+  <q-page padding>
+    <q-page padding> <ReferencePreviewComponent :entries="items" /> </q-page>
+  </q-page>
 </template>
 
 <script setup lang="ts">
 import ReferencePreviewComponent from 'src/components/ReferencePreviewComponent.vue';
 import { ref } from 'vue';
 import { useReferenceStore } from 'src/stores/reference';
-
 const items = ref(useReferenceStore().allItems);
 </script>

src/pages/reference/ReferenceItemPage.vue

@@ -0,0 +1,12 @@
+<template>
+  <q-page padding>
+    <div class="text-h4">Engine Starting</div>
+    <q-video
+      title="Engine Starting"
+      :ratio="16 / 9"
+      src="https://www.youtube.com/embed/GMHMLDlkKcE"
+    ></q-video>
+  </q-page>
+</template>
+
+<script setup lang="ts"></script>

src/pages/reference/ReferencePage.vue

@@ -0,0 +1,8 @@
+<template>
+  <toolbar-component pageTitle="Reference" />
+  <router-view />
+</template>
+
+<script setup lang="ts">
+import ToolbarComponent from 'src/components/ToolbarComponent.vue';
+</script>

src/pages/schedule/BoatReservationPage.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="row justify-center">
+    <q-btn-group rounded>
+      <q-btn
+        color="primary"
+        rounded
+        icon="keyboard_arrow_left"
+        label="Prev"
+        @click="onPrev"
+      />
+      <q-btn
+        color="primary"
+        rounded
+        icon="today"
+        label="Today"
+        @click="onToday"
+      />
+      <q-btn
+        color="primary"
+        rounded
+        icon-right="keyboard_arrow_right"
+        label="Next"
+        @click="onNext"
+      />
+    </q-btn-group>
+  </div>
+  <div class="row justify-center">
+    <div style="display: flex; max-width: 1024px; width: 100%">
+      <q-calendar-resource
+        ref="calendar"
+        v-model="selectedDate"
+        :model-resources="resources"
+        resource-key="id"
+        resource-label="name"
+        :interval-start="6"
+        :interval-count="12"
+        animated
+        bordered
+        @change="onChange"
+        @moved="onMoved"
+        @resource-expanded="onResourceExpanded"
+        @click-date="onClickDate"
+        @click-time="onClickTime"
+        @click-resource="onClickResource"
+        @click-head-resources="onClickHeadResources"
+        @click-interval="onClickInterval"
+      >
+        <template #resource-intervals="{ scope }">
+          <template v-for="(event, index) in getEvents(scope)" :key="index">
+            <q-badge
+              outline
+              color="primary"
+              :label="event.title"
+              :style="getStyle(event)"
+            />
+          </template>
+        </template>
+      </q-calendar-resource>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import { QCalendarResource, today } from '@quasar/quasar-ui-qcalendar';
+
+const selectedDate = ref(today());
+type Resource = {
+  id: string;
+  name: string;
+  expanded?: boolean;
+  children?: Resource[];
+};
+
+type Event = {
+  start: string;
+  title: string;
+  duration: number;
+  left?: number;
+  width?: number;
+};
+
+type ResourceIntervalScope = {
+  resource: Resource;
+  intervals: [];
+  timeStartPosX(start: string): number;
+  timeDurationWidth(duration: number): number;
+};
+
+const calendar = ref(null);
+const resources = reactive<Resource[]>([
+  { id: '1', name: 'ProjectX' },
+  { id: '2', name: 'Take 5' },
+  { id: '3', name: 'WeeBeestie' },
+]);
+
+const events = reactive<{ [key: string]: Event[] }>({
+  1: [
+    { start: '06:00', title: 'John Smith', duration: 90 },
+    { start: '12:00', title: 'Bob Barker', duration: 60 },
+  ],
+  2: [
+    { start: '08:00', title: 'Peter Parker', duration: 120 },
+    { start: '11:00', title: 'Vince McMahon', duration: 240 },
+  ],
+  3: [
+    { start: '08:00', title: 'Heather Graham', duration: 240 },
+    { start: '14:00', title: 'Lawrence Fishburne', duration: 60 },
+  ],
+});
+
+function getEvents(scope: ResourceIntervalScope) {
+  const resourceEvents = events[scope.resource.id];
+  return resourceEvents.map((event) => ({
+    left: scope.timeStartPosX(event.start),
+    width: scope.timeDurationWidth(event.duration),
+    title: event.title,
+  }));
+}
+
+function getStyle(event: { left: number; width: number; title: string }) {
+  return {
+    position: 'absolute',
+    background: 'white',
+    left: `${event.left}px`,
+    width: `${event.width}px`,
+    height: '40px',
+    overflow: 'hidden',
+  };
+}
+
+function onToday() {
+  calendar.value.moveToToday();
+}
+function onPrev() {
+  calendar.value.prev();
+}
+function onNext() {
+  calendar.value.next();
+}
+function onMoved(data) {
+  console.log('onMoved', data);
+}
+function onChange(data) {
+  console.log('onChange', data);
+}
+function onResourceExpanded(data) {
+  console.log('onResourceExpanded', data);
+}
+function onClickDate(data) {
+  console.log('onClickDate', data);
+}
+function onClickTime(data) {
+  console.log('onClickTime', data);
+}
+function onClickResource(data) {
+  console.log('onClickResource', data);
+}
+function onClickHeadResources(data) {
+  console.log('onClickHeadResources', data);
+}
+function onClickInterval(data) {
+  console.log('onClickInterval', data);
+}
+</script>

src/pages/schedule/ScheduleIndexPage.vue

@@ -0,0 +1,5 @@
+<template>
+  <q-page padding> </q-page>
+</template>
+
+<script setup lang="ts"></script>

src/pages/schedule/SchedulePageView.vue

@@ -0,0 +1,8 @@
+<template>
+  <toolbar-component pageTitle="Schedule" />
+  <router-view />
+</template>
+
+<script setup lang="ts">
+import ToolbarComponent from 'src/components/ToolbarComponent.vue';
+</script>