oys/bab-app
1
0
Fork 0
Code Issues 29 Pull Requests Actions Packages Projects 1 Releases 2 Wiki Activity

Visual improvements

Browse Source
This commit is contained in:
Patrick Toal
2024-05-24 08:11:47 -04:00
parent ce696a5a04
commit 68a2b8ffff
13 changed files with 441 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
src/pages/schedule/BoatReservationPage.vue
View File

@@ -1,88 +1,98 @@
<template>
<div class="q-pa-md row q-gutter-sm">
<div class="q-pa-xs row q-gutter-xs">
<q-card
flat
bordered
class="col-md-4 col-sm-8 col-xs-12">
class="col-lg-4 col-md-6 col-sm-8 col-xs-12">
<q-card-section>
<div class="text-h5 q-mt-none q-mb-xs">New Booking</div>
<div class="text-caption text-grey-8">for: {{ bookingForm.name }}</div>
</q-card-section>
<q-separator />
<q-item
clickable
@click="boatSelect = true">
<q-item-section avatar>
<q-list class="q-px-xs">
<q-separator />
<q-item
class="q-px-none"
clickable
@click="boatSelect = true">
<!-- <q-item-section avatar>
<q-icon
color="primary"
name="event" />
</q-item-section>
<q-item-section>
<q-card v-if="bookingForm.boat">
<q-card-section>
<q-img
:src="bookingForm.boat?.imgSrc"
:fit="'scale-down'">
<div class="row absolute-top">
<div class="col text-h6 text-left">
{{ bookingForm.boat?.name }}
</q-item-section> -->
<q-item-section>
<q-card v-if="bookingForm.boat">
<q-card-section>
<q-img
:src="bookingForm.boat?.imgSrc"
:fit="'scale-down'">
<div class="row absolute-top">
<div class="col text-h7 text-left">
{{ bookingForm.boat?.name }}
</div>
<div class="col text-right text-caption">
{{ bookingForm.boat?.class }}
</div>
</div>
<div class="col text-right">
{{ bookingForm.boat?.class }}
</div>
</div>
</q-img>
</q-card-section>
<q-separator />
<q-card-section class="q-py-none">
<q-list
dense
class="row">
<q-item>
<q-item-section avatar>
<q-badge
outline
color="primary"
label="Start" />
</q-item-section>
<q-item-section>
{{
date.formatDate(
new Date(bookingForm.startDate as string),
'ddd MMM Do @ hh:mm A'
)
}}
</q-item-section>
</q-item>
<q-item class="q-ma-none">
<q-item-section avatar>
<q-badge
outline
color="primary"
label="End" />
</q-item-section>
<q-item-section>
{{
date.formatDate(
new Date(bookingForm.endDate as string),
'ddd MMM Do @ hh:mm A'
)
}}
</q-item-section>
</q-item>
</q-list>
</q-card-section>
</q-card>
<div v-else>Tap to Select a Boat / Time</div>
</q-item-section>
</q-item>
<q-list dense>
<q-item>
<q-item-section avatar>
</q-img>
</q-card-section>
<q-separator />
<q-card-section horizontal>
<q-card-section>
<q-list
dense
class="row">
<q-item>
<q-item-section avatar>
<q-badge
color="primary"
label="Start" />
</q-item-section>
<q-item-section class="text-caption">
{{
date.formatDate(
new Date(bookingForm.startDate as string),
'ddd MMM Do @ hh:mm A'
)
}}
</q-item-section>
</q-item>
<q-item class="q-ma-none">
<q-item-section avatar>
<q-badge
color="primary"
label="End" />
</q-item-section>
<q-item-section class="text-caption">
{{
date.formatDate(
new Date(bookingForm.endDate as string),
'ddd MMM Do @ hh:mm A'
)
}}
</q-item-section>
</q-item>
</q-list>
</q-card-section>
<q-separator vertical />
<q-card-section class="col-3 flex flex-center bg-grey-4">
{{ bookingDuration }} hours
</q-card-section>
</q-card-section>
</q-card>
<q-field
readonly
filled
v-else>
Tap to Select a Boat / Time
</q-field>
</q-item-section>
</q-item>
<q-item class="q-px-none">
<!-- <q-item-section avatar>
<q-icon
color="primary"
name="category" />
</q-item-section>
</q-item-section> -->
<q-item-section>
<q-select
filled
@@ -91,6 +101,21 @@
label="Reason for sail" />
</q-item-section>
</q-item>
<q-item class="q-px-none">
<!-- <q-item-section avatar>
<q-icon
color="primary"
name="text" />
</q-item-section> -->
<q-item-section>
<q-input
v-model="bookingForm.comment"
clearable
autogrow
filled
label="Additional Comments (optional)" />
</q-item-section>
</q-item>
</q-list>
<q-card-actions align="right">
<q-btn
@@ -113,7 +138,7 @@
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { computed, ref, watch } from 'vue';
import { useAuthStore } from 'src/stores/auth';
import { Boat, useBoatStore } from 'src/stores/boat';
import { date, useQuasar } from 'quasar';
@@ -132,6 +157,7 @@ interface BookingForm {
reason: string;
members: { name: string }[];
guests: { name: string }[];
comment?: string;
}
const reason_options = ['Open Sail', 'Private Sail', 'Racing', 'Other'];
@@ -147,6 +173,7 @@ const newForm = {
reason: 'Open Sail',
members: [],
guests: [],
comment: '',
};
const bookingForm = ref<BookingForm>({ ...newForm });
const router = useRouter();
@@ -162,6 +189,16 @@ watch(interval, (new_interval) => {
bookingForm.value.endDate = new_interval?.end;
});
const bookingDuration = computed((): number => {
if (bookingForm.value.startDate && bookingForm.value.endDate) {
const start = new Date(bookingForm.value.startDate).getTime();
const end = new Date(bookingForm.value.endDate).getTime();
const delta = Math.abs(end - start) / 1000;
return Math.floor(delta / 3600) % 24;
}
return 0;
});
const onReset = () => {
bookingForm.value = { ...newForm };
};
@@ -180,6 +217,7 @@ const onSubmit = () => {
user: auth.currentUser.$id,
status: 'confirmed',
reason: booking.reason,
comment: booking.comment,
};
console.log(reservation);
// TODO: Fix this. It will always look successful