Basic calendar view
This commit is contained in:
@@ -22,6 +22,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@quasar/app-vite": "^1.3.0",
|
||||
"@quasar/quasar-app-extension-qcalendar": "^4.0.0-beta.15",
|
||||
"@types/node": "^12.20.21",
|
||||
"@typescript-eslint/eslint-plugin": "^5.10.0",
|
||||
"@typescript-eslint/parser": "^5.10.0",
|
||||
|
||||
@@ -30,7 +30,7 @@ module.exports = configure(function (/* ctx */) {
|
||||
boot: ['appwrite'],
|
||||
|
||||
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
|
||||
css: ['app.scss'],
|
||||
css: ['app.sass'],
|
||||
|
||||
// https://github.com/quasarframework/quasar/tree/dev/extras
|
||||
extras: [
|
||||
|
||||
3
quasar.extensions.json
Normal file
3
quasar.extensions.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"@quasar/qcalendar": {}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<q-card v-for="boat in boats" :key="boat.id" flat class="my-card">
|
||||
<q-card v-for="boat in boats" :key="boat.id" flat class="mobile-card">
|
||||
<q-card-section>
|
||||
<q-img :src="boat.imgsrc" :fit="'scale-down'">
|
||||
<div class="row absolute-top">
|
||||
@@ -27,9 +27,3 @@ defineProps({
|
||||
boats: Array<Boat>,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.my-card
|
||||
width: 100%
|
||||
max-width: 400px
|
||||
</style>
|
||||
|
||||
26
src/components/BottomNavComponent.vue
Normal file
26
src/components/BottomNavComponent.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<q-tabs class="mobile-only">
|
||||
<!-- <q-tab name="Home" icon="home" to="index"></q-tab> -->
|
||||
<q-route-tab name="Boats" icon="sailing" to="/boat"></q-route-tab>
|
||||
<q-route-tab
|
||||
name="Schedule"
|
||||
icon="calendar_month"
|
||||
to="/schedule"
|
||||
></q-route-tab>
|
||||
<q-route-tab
|
||||
name="Checklists"
|
||||
icon="checklist"
|
||||
to="/checklist"
|
||||
></q-route-tab>
|
||||
<q-route-tab
|
||||
name="Reference"
|
||||
icon="info_outline"
|
||||
to="/reference"
|
||||
></q-route-tab>
|
||||
<q-route-tab name="Tasks" icon="build" to="/task">
|
||||
<q-badge color="red" floating> NEW </q-badge>
|
||||
</q-route-tab>
|
||||
</q-tabs>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
@@ -3,7 +3,7 @@
|
||||
:model-value="drawer"
|
||||
show-if-above
|
||||
:width="200"
|
||||
:breakpoint="500"
|
||||
:breakpoint="1024"
|
||||
@update:model-value="$emit('drawer-toggle')"
|
||||
>
|
||||
<q-scroll-area class="fit">
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
flat
|
||||
bordered
|
||||
class="my-card"
|
||||
:class="$q.dark.isActive ? 'bg-grey-9' : 'bg-grey-2'"
|
||||
v-for="entry in entries"
|
||||
:key="entry.title"
|
||||
>
|
||||
@@ -43,7 +42,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ReferenceEntry } from './models';
|
||||
import { ReferenceEntry } from 'src/stores/reference';
|
||||
|
||||
defineProps({
|
||||
entries: Array<ReferenceEntry>,
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
@click="toggleLeftDrawer"
|
||||
/>
|
||||
|
||||
<q-toolbar-title> OYS Borrow a Boat </q-toolbar-title>
|
||||
<q-toolbar-title> {{ pageTitle }} </q-toolbar-title>
|
||||
<q-tabs shrink>
|
||||
<q-tab> </q-tab>
|
||||
</q-tabs>
|
||||
@@ -27,4 +27,7 @@ const leftDrawerOpen = ref(false);
|
||||
function toggleLeftDrawer() {
|
||||
leftDrawerOpen.value = !leftDrawerOpen.value;
|
||||
}
|
||||
defineProps({
|
||||
pageTitle: String,
|
||||
});
|
||||
</script>
|
||||
|
||||
4
src/css/app.sass
Normal file
4
src/css/app.sass
Normal file
@@ -0,0 +1,4 @@
|
||||
// app global css in SASS form
|
||||
.mobile-card
|
||||
width: 100%
|
||||
max-width: 450px
|
||||
@@ -1 +0,0 @@
|
||||
// app global css in SCSS form
|
||||
@@ -1,16 +1,17 @@
|
||||
<template>
|
||||
<q-layout view="hHh Lpr lFf">
|
||||
<ToolbarComponent />
|
||||
|
||||
<q-layout view="hHh Lpr fFf">
|
||||
<q-page-container>
|
||||
<router-view />
|
||||
</q-page-container>
|
||||
<q-footer>
|
||||
<BottomNavComponent />
|
||||
</q-footer>
|
||||
</q-layout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useQuasar } from 'quasar';
|
||||
import ToolbarComponent from 'components/ToolbarComponent.vue';
|
||||
import BottomNavComponent from 'src/components/BottomNavComponent.vue';
|
||||
|
||||
const q = useQuasar();
|
||||
// q.fullscreen.request();
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
<template>
|
||||
<q-page padding>
|
||||
<!-- content -->
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
12
src/pages/reference/ReferenceItemPage.vue
Normal file
12
src/pages/reference/ReferenceItemPage.vue
Normal file
@@ -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>
|
||||
8
src/pages/reference/ReferencePage.vue
Normal file
8
src/pages/reference/ReferencePage.vue
Normal file
@@ -0,0 +1,8 @@
|
||||
<template>
|
||||
<toolbar-component pageTitle="Reference" />
|
||||
<router-view />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import ToolbarComponent from 'src/components/ToolbarComponent.vue';
|
||||
</script>
|
||||
165
src/pages/schedule/BoatReservationPage.vue
Normal file
165
src/pages/schedule/BoatReservationPage.vue
Normal file
@@ -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>
|
||||
5
src/pages/schedule/ScheduleIndexPage.vue
Normal file
5
src/pages/schedule/ScheduleIndexPage.vue
Normal file
@@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<q-page padding> </q-page>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
8
src/pages/schedule/SchedulePageView.vue
Normal file
8
src/pages/schedule/SchedulePageView.vue
Normal file
@@ -0,0 +1,8 @@
|
||||
<template>
|
||||
<toolbar-component pageTitle="Schedule" />
|
||||
<router-view />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import ToolbarComponent from 'src/components/ToolbarComponent.vue';
|
||||
</script>
|
||||
@@ -7,43 +7,43 @@ export const links = [
|
||||
},
|
||||
{
|
||||
name: 'Profile',
|
||||
to: 'profile',
|
||||
to: '/profile',
|
||||
icon: 'account_circle',
|
||||
front_links: false,
|
||||
},
|
||||
{
|
||||
name: 'Boats',
|
||||
to: 'boat',
|
||||
to: '/boat',
|
||||
icon: 'sailing',
|
||||
front_links: true,
|
||||
},
|
||||
{
|
||||
name: 'Booking',
|
||||
to: 'booking',
|
||||
name: 'Schedule',
|
||||
to: '/schedule',
|
||||
icon: 'calendar_month',
|
||||
front_links: true,
|
||||
},
|
||||
{
|
||||
name: 'Certifications',
|
||||
to: 'certification',
|
||||
to: '/certification',
|
||||
icon: 'verified',
|
||||
front_links: true,
|
||||
},
|
||||
{
|
||||
name: 'Checklists',
|
||||
to: 'checklist',
|
||||
to: '/checklist',
|
||||
icon: 'checklist',
|
||||
front_links: true,
|
||||
},
|
||||
{
|
||||
name: 'Reference',
|
||||
to: 'reference',
|
||||
to: '/reference',
|
||||
icon: 'info_outline',
|
||||
front_links: true,
|
||||
},
|
||||
{
|
||||
name: 'Tasks',
|
||||
to: 'task',
|
||||
to: '/task',
|
||||
icon: 'build',
|
||||
front_links: true,
|
||||
},
|
||||
|
||||
@@ -1,49 +1,90 @@
|
||||
import ScheduleIndexPage from 'pages/schedule/ScheduleIndexPage.vue';
|
||||
import ChecklistPageVue from 'pages/ChecklistPage.vue';
|
||||
import LoginPageVue from 'pages/LoginPage.vue';
|
||||
import ReferencePageVue from 'src/pages/reference/ReferencePage.vue';
|
||||
import ReferenceIndexPageVue from 'src/pages/reference/ReferenceIndexPage.vue';
|
||||
import ReferenceItemPageVue from 'src/pages/reference/ReferenceItemPage.vue';
|
||||
import MainLayoutVue from 'src/layouts/MainLayout.vue';
|
||||
import BoatPageVue from 'src/pages/BoatPage.vue';
|
||||
import CertificationPageVue from 'src/pages/CertificationPage.vue';
|
||||
import IndexPageVue from 'src/pages/IndexPage.vue';
|
||||
import ProfilePageVue from 'src/pages/ProfilePage.vue';
|
||||
import TaskPageVue from 'src/pages/TaskPage.vue';
|
||||
import { RouteRecordRaw } from 'vue-router';
|
||||
import BoatReservationPageVue from 'src/pages/schedule/BoatReservationPage.vue';
|
||||
import SchedulePageView from 'pages/schedule/SchedulePageView.vue';
|
||||
|
||||
const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '/',
|
||||
component: () => import('layouts/MainLayout.vue'),
|
||||
component: MainLayoutVue,
|
||||
// If we get so big we need lazy loading, we can use imports again
|
||||
// component: () => import('layouts/MainLayout.vue'),
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
component: () => import('pages/IndexPage.vue'),
|
||||
// If we get so big we need lazy loading, we can use imports again
|
||||
// component: () => import('pages/IndexPage.vue'),
|
||||
component: IndexPageVue,
|
||||
name: 'index',
|
||||
},
|
||||
{
|
||||
path: '/boat',
|
||||
component: () => import('pages/BoatPage.vue'),
|
||||
component: BoatPageVue,
|
||||
name: 'boat',
|
||||
},
|
||||
{
|
||||
path: '/booking',
|
||||
component: () => import('pages/BookingPage.vue'),
|
||||
name: 'booking',
|
||||
path: '/schedule',
|
||||
component: SchedulePageView,
|
||||
name: 'schedule',
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
component: ScheduleIndexPage,
|
||||
name: 'schedule-index',
|
||||
},
|
||||
{
|
||||
path: 'book',
|
||||
component: BoatReservationPageVue,
|
||||
name: 'reserve-boat',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/certification',
|
||||
component: () => import('pages/CertificationPage.vue'),
|
||||
component: CertificationPageVue,
|
||||
name: 'certification',
|
||||
},
|
||||
{
|
||||
path: '/task',
|
||||
component: () => import('pages/TaskPage.vue'),
|
||||
component: TaskPageVue,
|
||||
name: 'task',
|
||||
},
|
||||
{
|
||||
path: '/checklist',
|
||||
component: () => import('pages/ChecklistPage.vue'),
|
||||
component: ChecklistPageVue,
|
||||
name: 'checklist',
|
||||
},
|
||||
{
|
||||
path: '/profile',
|
||||
component: () => import('pages/ProfilePage.vue'),
|
||||
component: ProfilePageVue,
|
||||
name: 'profile',
|
||||
},
|
||||
{
|
||||
path: '/reference',
|
||||
component: () => import('pages/ReferencePage.vue'),
|
||||
component: ReferencePageVue,
|
||||
name: 'reference',
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
component: ReferenceIndexPageVue,
|
||||
name: 'reference-index',
|
||||
},
|
||||
{
|
||||
path: '/reference/:id/view',
|
||||
component: ReferenceItemPageVue,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -65,7 +106,7 @@ const routes: RouteRecordRaw[] = [
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
component: () => import('pages/LoginPage.vue'),
|
||||
component: LoginPageVue,
|
||||
name: 'login',
|
||||
meta: {
|
||||
publicRoute: true,
|
||||
|
||||
@@ -8,13 +8,13 @@ export interface Boat {
|
||||
class: string;
|
||||
year: number;
|
||||
imgsrc: string;
|
||||
booking: {
|
||||
booking?: {
|
||||
available: boolean;
|
||||
requiredCerts: string[];
|
||||
maxDuration: number;
|
||||
maxPassengers: number;
|
||||
};
|
||||
defects: {
|
||||
defects?: {
|
||||
type: string;
|
||||
severity: string;
|
||||
description: string;
|
||||
|
||||
33
src/stores/memberProfile.ts
Normal file
33
src/stores/memberProfile.ts
Normal file
@@ -0,0 +1,33 @@
|
||||
import { defineStore } from 'pinia';
|
||||
|
||||
export interface MemberProfile {
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
certs: string[];
|
||||
slackID: string;
|
||||
userID: string;
|
||||
}
|
||||
|
||||
const getSampleData = () => ({
|
||||
firstName: 'Billy',
|
||||
lastName: 'Crystal',
|
||||
certs: ['j27', 'capri25'],
|
||||
});
|
||||
|
||||
export const useMemberProfileStore = defineStore('memberProfile', {
|
||||
state: () => ({
|
||||
...getSampleData(),
|
||||
}),
|
||||
|
||||
// getters: {
|
||||
// doubleCount (state) {
|
||||
// return state.counter * 2;
|
||||
// }
|
||||
// },
|
||||
|
||||
// actions: {
|
||||
// increment () {
|
||||
// this.counter++;
|
||||
// }
|
||||
// }
|
||||
});
|
||||
@@ -1,9 +1,10 @@
|
||||
import { defineStore } from 'pinia';
|
||||
export interface Reservation {
|
||||
user: string;
|
||||
startdate: Date;
|
||||
enddate: Date;
|
||||
resource: string;
|
||||
bookingdate: Date;
|
||||
reservationDate: Date;
|
||||
}
|
||||
|
||||
export const useScheduleStore = defineStore('schedule', {
|
||||
|
||||
12
yarn.lock
12
yarn.lock
@@ -1110,6 +1110,18 @@
|
||||
resolved "https://registry.yarnpkg.com/@quasar/extras/-/extras-1.16.7.tgz#9416689f2e55f594f1135383c35b9ab03875c522"
|
||||
integrity sha512-nYF3gVE/si1YJ/D4qmAiHGwxoJIDCvTT8NI6ZmbTMPrur4J8xBKhfhfhyLoQ4k2jJZP6Rx0rUcB71FBNC2C8vQ==
|
||||
|
||||
"@quasar/quasar-app-extension-qcalendar@^4.0.0-beta.15":
|
||||
version "4.0.0-beta.15"
|
||||
resolved "https://registry.yarnpkg.com/@quasar/quasar-app-extension-qcalendar/-/quasar-app-extension-qcalendar-4.0.0-beta.15.tgz#1e85626a104c3a33083b7237f50ccf5f9048926a"
|
||||
integrity sha512-i6hQkcP70LXLfVMPZMKQjSg3681gjZmASV3vq6ULzc0LhtBiPneLdVNNtH2itkWxAmaUj+1heQDI5Pa0F7VKLQ==
|
||||
dependencies:
|
||||
"@quasar/quasar-ui-qcalendar" "^4.0.0-beta.15"
|
||||
|
||||
"@quasar/quasar-ui-qcalendar@^4.0.0-beta.15":
|
||||
version "4.0.0-beta.16"
|
||||
resolved "https://registry.yarnpkg.com/@quasar/quasar-ui-qcalendar/-/quasar-ui-qcalendar-4.0.0-beta.16.tgz#90dca0962f1fe1068361f387893df6c5da7522e2"
|
||||
integrity sha512-KVbFJD1HQp91tiklv+6XsG7bq8FKK6mhhnoVzmjgoyhUAEb9csfbDPbpegy1/FzXy3o0wITe6mmRZ8nbaiMEZg==
|
||||
|
||||
"@quasar/render-ssr-error@^1.0.1":
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/@quasar/render-ssr-error/-/render-ssr-error-1.0.2.tgz#92abb0d61cfdfbf51c2ec3cc2e4aadbf1c79f04f"
|
||||
|
||||
Reference in New Issue
Block a user