Final build working

.gitea/workflows/build.yaml

@@ -1,9 +1,10 @@
 name: Build BAB Application Deployment Artifact
-run-name: ${{ gitea.actor }} is building an artifact 🚀
+run-name: ${{ gitea.actor }} is building a BAB App artifact 🚀
 on:
   push:
     branches:
       - main
+      - devel
 
 jobs:
   build:
@@ -15,21 +16,35 @@ jobs:
         uses: actions/setup-node@v2
         with:
           node-version: '20.x'
-      - name: Install dependencies
-        run: npm install
       - name: Install yarn
         run: npm install --global yarn
+      - name: Install yarn dependencies
+        run: yarn install
       - name: Install Quasar CLI
-        run: npm install -g @quasar/cli
+        run: yarn global add @quasar/cli
+      - name: Create env file
+        run: |
+          echo "${{ vars.ENV_FILE }}" > .env.local
+      - name: Show env file
+        run: |
+          /bin/cat .env.local
       - name: Build Project
         run: quasar build -m pwa
       - name: Get Version Number
         id: get_version
         run: echo "::set-output name=VERSION::$(node -p "require('./package.json').version")"
-      - name: Create Tarball of Build
-        run: tar -czvf build-${{ steps.get_version.outputs.VERSION }}.tar.gz dist/pwa
-      - name: Upload Tarball
+      - name: Tarfile
+        run: |
+          cd dist/pwa
+          tar czf ../../build-${{ steps.get_version.outputs.VERSION }}.tar.gz .
+      - name: Upload Artifact
         uses: actions/upload-artifact@v3
         with:
-          name: build-artifact-${{ steps.get_version.outputs.VERSION }}
+          name: build-artifact-${{ steps.get_version.outputs.VERSION }}.${{ gitea.run_number }}
           path: build-${{ steps.get_version.outputs.VERSION }}.tar.gz
+      - name: Trigger Ansible Deploy Playbook
+        uses: https://github.com/distributhor/workflow-webhook@v3
+        with:
+          webhook_url: ${{ vars.WEBHOOK_URL }}
+          verbose: true
+          data: '{ "artifact_url": "${{ gitea.server_url }}/${{ gitea.repository }}/actions/runs/${{ gitea.run_id}}/artifacts/build-artifact-${{ steps.get_version.outputs.VERSION }}.${{ gitea.run_number }}" }'

package.json

@@ -16,7 +16,6 @@
     "@quasar/extras": "^1.16.4",
     "appwrite": "^13.0.0",
     "pinia": "^2.1.7",
-    "quasar": "^2.6.0",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0"
   },
@@ -32,6 +31,7 @@
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-vue": "^9.0.0",
     "prettier": "^2.5.1",
+    "quasar": "^2.14.2",
     "typescript": "^4.5.4",
     "workbox-build": "^7.0.0",
     "workbox-cacheable-response": "^7.0.0",

src/components/ResourceScheduleViewerComponent.vue

@@ -1,3 +1,4 @@
+<!-- This has been abandoned for now.  Going to block-based booking.  Will probably need the schedule viewer functionality at some point in the future, though -->
 <template>
   <q-card-section>
     <div class="text-caption text-justify">
@@ -117,6 +118,16 @@ import { date } from 'quasar';
 import { computed } from 'vue';
 import type { StatusTypes } from 'src/stores/schedule';
 
+type EventData = {
+  event: object;
+  scope: {
+    timestamp: object;
+    columnindex: number;
+    activeDate: boolean;
+    droppable: boolean;
+  };
+};
+
 const durations = [1, 1.5, 2, 2.5, 3, 3.5, 4];
 
 type ResourceIntervalScope = {
@@ -202,14 +213,16 @@ function onPrev() {
 function onNext() {
   calendar.value.next();
 }
-function onClickDate(data) {
-  return;
+
+function onClickDate(data: EventData) {
+  return data;
 }
-function onClickTime(data) {
+
+function onClickTime(data: EventData) {
   // TODO: Add a duration picker, here.
   emit('onClickTime', data);
 }
-function onUpdateDuration(value) {
+function onUpdateDuration(value: EventData) {
   emit('onUpdateDuration', value);
 }
 // eslint-disable-next-line @typescript-eslint/no-empty-function

src/components/scheduling/BoatSelection.vue

@@ -0,0 +1,193 @@
+<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>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import {
+  today,
+  parseTimestamp,
+  addToDate,
+  Timestamp,
+} from '@quasar/quasar-ui-qcalendar';
+import { Boat, useBoatStore } from 'src/stores/boat';
+import { useScheduleStore, Timeblock } from 'src/stores/schedule';
+import { computed } from 'vue';
+import { date } from 'quasar';
+
+type EventData = {
+  event: object;
+  scope: {
+    timestamp: object;
+    columnindex: number;
+    activeDate: boolean;
+    droppable: boolean;
+  };
+};
+
+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;
+});
+
+function monthFormatter() {
+  try {
+    return new Intl.DateTimeFormat('en-CA' || undefined, {
+      month: 'long',
+      timeZone: 'UTC',
+    });
+  } catch (e) {
+    //
+  }
+}
+
+const disabledDays = () => {
+  // Placeholder.  This should actually compute days when boats aren't available.
+  const days = [];
+  const todayTs = parseTimestamp(today()) as Timestamp;
+  days.push(addToDate(todayTs, { day: 2 }).date);
+  return days;
+};
+
+const boatoptions = (boat: Boat) => {
+  const options = useScheduleStore()
+    .getTimeblocksForDate(date.extractDate(selectedDate.value, 'YYYY-MM-DD'))
+    .map((x: Timeblock) => {
+      const conflicts = getConflicts(x, boat);
+      return {
+        label: x.start.time + ' to ' + x.end.time,
+        value: boat.id + ':' + x.start.time,
+        disable: conflicts.length > 0,
+        user: conflicts[0]?.user,
+        boat: boat,
+        timeblock: x,
+      };
+    });
+  return options;
+};
+
+const emit = defineEmits(['onClickTime', 'onUpdateDuration']);
+
+function onPrev() {
+  calendar.value.prev();
+}
+function onNext() {
+  calendar.value.next();
+}
+
+function onClickDate(data: EventData) {
+  return data;
+}
+function onChange(data: EventData) {
+  return data;
+}
+
+const getConflicts = (timeblock: Timeblock, boat: Boat) => {
+  const start = date.buildDate({
+    hour: timeblock.start.hour,
+    minute: timeblock.start.minute,
+    second: 0,
+    millisecond: 0,
+  });
+  const end = date.buildDate({
+    hour: timeblock.end.hour,
+    minute: timeblock.end.minute,
+    second: 0,
+    millisecond: 0,
+  });
+  return scheduleStore.getConflictingReservations(boat, start, end);
+};
+</script>

src/pages/schedule/BoatReservationPage.vue

@@ -21,14 +21,8 @@
           :caption="bookingSummary"
         >
           <q-separator />
-          <resource-schedule-viewer-component
-            @on-click-time="onClickTime"
-            @on-update-duration="
-              (value) => {
-                bookingForm.duration = value;
-              }
-            "
-          />
+          <boat-selection />
+
           <q-banner
             rounded
             class="bg-warning text-grey-10"
@@ -78,7 +72,7 @@ import { reactive, ref, computed, watch } from 'vue';
 import { useAuthStore } from 'src/stores/auth';
 import { Boat, useBoatStore } from 'src/stores/boat';
 import { Dialog, date } from 'quasar';
-import ResourceScheduleViewerComponent from 'src/components/ResourceScheduleViewerComponent.vue';
+import BoatSelection from 'src/components/scheduling/BoatSelection.vue';
 import { makeDateTime } from '@quasar/quasar-ui-qcalendar';
 import { useScheduleStore, Reservation } from 'src/stores/schedule';
 
@@ -113,7 +107,7 @@ watch(bookingForm, (b, a) => {
     status: 'tentative',
   };
   //TODO: Turn this into a validator.
-  scheduleStore.isOverlapped(newRes)
+  scheduleStore.isReservationOverlapped(newRes)
     ? Dialog.create({ message: 'This booking overlaps another!' })
     : scheduleStore.addOrCreateReservation(newRes);
 });

src/stores/schedule.ts

@@ -3,9 +3,15 @@ import { ref } from 'vue';
 import { Boat, useBoatStore } from './boat';
 import { date } from 'quasar';
 import { DateOptions } from 'quasar';
+import {
+  Timestamp,
+  parseTimestamp,
+  TimestampArray,
+} from '@quasar/quasar-ui-qcalendar';
+import { timeStamp } from 'console';
 
 export type StatusTypes = 'tentative' | 'confirmed' | 'pending' | undefined;
-export interface Reservation {
+export type Reservation = {
   id: number;
   user: string;
   start: Date;
@@ -13,15 +19,39 @@ export interface Reservation {
   resource: Boat;
   reservationDate: Date;
   status?: StatusTypes;
-}
+};
 
-function getSampleData(): Reservation[] {
+export type Timeblock = {
+  start: Timestamp;
+  end: Timestamp;
+};
+
+const sampleBlocks = [
+  {
+    start: { time: '09:00', hour: 9, minute: 0, hasDay: false, hasTime: true },
+    end: { time: '12:00', hour: 12, minute: 0, hasDay: false, hasTime: true },
+  },
+  {
+    start: { time: '12:00', hour: 12, minute: 0, hasDay: false, hasTime: true },
+    end: { time: '15:00', hour: 15, minute: 0, hasDay: false, hasTime: true },
+  },
+  {
+    start: { time: '15:00', hour: 15, minute: 0, hasDay: false, hasTime: true },
+    end: { time: '18:00', hour: 18, minute: 0, hasDay: false, hasTime: true },
+  },
+  {
+    start: { time: '18:00', hour: 18, minute: 0, hasDay: false, hasTime: true },
+    end: { time: '21:00', hour: 21, minute: 0, hasDay: false, hasTime: true },
+  },
+] as Timeblock[];
+
+function getSampleReservations(): Reservation[] {
   const sampleData = [
     {
       id: 1,
       user: 'John Smith',
       start: '12:00',
-      end: '14:00',
+      end: '15:00',
       boat: 1,
       status: 'confirmed',
     },
@@ -29,31 +59,31 @@ function getSampleData(): Reservation[] {
       id: 2,
       user: 'Bob Barker',
       start: '18:00',
-      end: '20:00',
+      end: '21:00',
       boat: 1,
       status: 'confirmed',
     },
     {
       id: 3,
       user: 'Peter Parker',
-      start: '8:00',
-      end: '10:00',
+      start: '9:00',
+      end: '12:00',
       boat: 2,
       status: 'tentative',
     },
     {
       id: 4,
       user: 'Vince McMahon',
-      start: '13:00',
-      end: '17:00',
+      start: '15:00',
+      end: '18:00',
       boat: 2,
       status: 'pending',
     },
     {
       id: 5,
       user: 'Heather Graham',
-      start: '06:00',
-      end: '09:00',
+      start: '09:00',
+      end: '12:00',
       boat: 3,
       status: 'confirmed',
     },
@@ -61,7 +91,7 @@ function getSampleData(): Reservation[] {
       id: 6,
       user: 'Lawrence Fishburne',
       start: '18:00',
-      end: '20:00',
+      end: '21:00',
       boat: 3,
     },
   ];
@@ -71,7 +101,12 @@ function getSampleData(): Reservation[] {
     return x.split(':');
   };
   const makeOpts = (x: string[]): DateOptions => {
-    return { hour: parseInt(x[0]), minute: parseInt(x[1]) };
+    return {
+      hour: parseInt(x[0]),
+      minute: parseInt(x[1]),
+      seconds: 0,
+      milliseconds: 0,
+    };
   };
 
   return sampleData.map((entry): Reservation => {
@@ -83,13 +118,18 @@ function getSampleData(): Reservation[] {
       end: date.adjustDate(now, makeOpts(splitTime(entry.end))),
       resource: boat,
       reservationDate: now,
-      status: entry.status,
+      status: entry.status as StatusTypes,
     };
   });
 }
 
 export const useScheduleStore = defineStore('schedule', () => {
-  const reservations = ref<Reservation[]>(getSampleData());
+  // TODO: Implement functions to dynamically pull this data.
+  const reservations = ref<Reservation[]>(getSampleReservations());
+  const timeblocks = sampleBlocks;
+
+  const getTimeblocksForDate = (date: Date): Timeblock[] => timeblocks;
+
   const getBoatReservations = (
     boat: number | string,
     curDate: Date
@@ -106,15 +146,30 @@ export const useScheduleStore = defineStore('schedule', () => {
     });
   };
 
-  const isOverlapped = (res: Reservation) => {
-    const lapped = reservations.value.filter(
+  const getConflictingReservations = (
+    resource: Boat,
+    start: Date,
+    end: Date
+  ): Reservation[] => {
+    const overlapped = reservations.value.filter(
       (entry: Reservation) =>
-        entry.id != res.id &&
-        entry.resource == res.resource &&
-        ((entry.start <= res.start && entry.end > res.start) ||
-          (entry.end >= res.end && entry.start <= res.end))
+        entry.resource.id == resource.id &&
+        entry.start < end &&
+        entry.end > start
     );
-    return lapped.length > 0;
+    return overlapped;
+  };
+
+  const isResourceTimeOverlapped = (
+    resource: Boat,
+    start: Date,
+    end: Date
+  ): boolean => {
+    return getConflictingReservations(resource, start, end).length > 0;
+  };
+
+  const isReservationOverlapped = (res: Reservation): boolean => {
+    return isResourceTimeOverlapped(res.resource, res.start, res.end);
   };
 
   const getNewId = () => {
@@ -134,8 +189,11 @@ export const useScheduleStore = defineStore('schedule', () => {
   return {
     reservations,
     getBoatReservations,
+    getConflictingReservations,
+    getTimeblocksForDate,
     getNewId,
     addOrCreateReservation,
-    isOverlapped,
+    isReservationOverlapped,
+    isResourceTimeOverlapped,
   };
 });