refactor: Redo env var names to work with vite. Add version

src/boot/appwrite.ts

@@ -14,20 +14,25 @@ import type { Router } from 'vue-router';
 
 const client = new Client();
 
-let APPWRITE_API_ENDPOINT, APPWRITE_API_PROJECT;
+let VITE_APPWRITE_API_ENDPOINT, VITE_APPWRITE_API_PROJECT;
 
 // Private self-hosted appwrite
-if (process.env.APPWRITE_API_ENDPOINT && process.env.APPWRITE_API_PROJECT) {
-  APPWRITE_API_ENDPOINT = process.env.APPWRITE_API_ENDPOINT;
-  APPWRITE_API_PROJECT = process.env.APPWRITE_API_PROJECT;
+if (
+  process.env.VITE_APPWRITE_API_ENDPOINT &&
+  process.env.VITE_APPWRITE_API_PROJECT
+) {
+  VITE_APPWRITE_API_ENDPOINT = process.env.VITE_APPWRITE_API_ENDPOINT;
+  VITE_APPWRITE_API_PROJECT = process.env.VITE_APPWRITE_API_PROJECT;
 } else if (process.env.DEV) {
-  APPWRITE_API_ENDPOINT = 'http://localhost:4000/api/v1';
-  APPWRITE_API_PROJECT = '65ede55a213134f2b688';
+  VITE_APPWRITE_API_ENDPOINT = 'http://localhost:4000/api/v1';
+  VITE_APPWRITE_API_PROJECT = '65ede55a213134f2b688';
 } else {
-  APPWRITE_API_ENDPOINT = 'https://appwrite.oys.undock.ca/v1';
-  APPWRITE_API_PROJECT = 'bab';
+  VITE_APPWRITE_API_ENDPOINT = 'https://appwrite.oys.undock.ca/v1';
+  VITE_APPWRITE_API_PROJECT = 'bab';
 }
-client.setEndpoint(APPWRITE_API_ENDPOINT).setProject(APPWRITE_API_PROJECT);
+client
+  .setEndpoint(VITE_APPWRITE_API_ENDPOINT)
+  .setProject(VITE_APPWRITE_API_PROJECT);
 
 const pwresetUrl = process.env.DEV
   ? 'http://localhost:4000/pwreset'

src/components/BoatReservationComponent.vue

@@ -164,7 +164,7 @@ const reservationStore = useReservationStore();
 const boatSelect = ref(false);
 const bookingForm = ref<BookingForm>({ ...newForm });
 const $q = useQuasar();
-const router = useRouter();
+const $router = useRouter();
 
 watch(reservation, (newReservation) => {
   if (!newReservation) {
@@ -183,7 +183,7 @@ watch(reservation, (newReservation) => {
   }
 });
 
-const updateInterval = (interval: Interval) => {
+const updateInterval = (interval: Interval | null) => {
   bookingForm.value.interval = interval;
   boatSelect.value = false;
 };
@@ -210,7 +210,8 @@ const boat = computed((): Boat | null => {
 });
 
 const onDelete = () => {
-  reservationStore.deleteReservation(reservation.value?.id);
+  reservationStore.deleteReservation(reservation.value?.$id);
+  $router.go(-1);
 };
 
 const onReset = () => {
@@ -279,6 +280,6 @@ const onSubmit = async () => {
       message: 'Failed to book!' + e,
     });
   }
-  router.go(-1);
+  $router.go(-1);
 };
 </script>

src/components/ToolbarComponent.vue

@@ -11,7 +11,7 @@
 
       <q-toolbar-title>{{ pageTitle }}</q-toolbar-title>
       <q-space />
-      <div>v2024.6.4.2</div>
+      <div>v{{ VERSION }}</div>
     </q-toolbar>
   </q-header>
   <LeftDrawer
@@ -23,6 +23,8 @@
 import { ref } from 'vue';
 import LeftDrawer from 'components/LeftDrawer.vue';
 
+const VERSION = process.env.VUE_APP_VERSION;
+
 const leftDrawerOpen = ref(false);
 function toggleLeftDrawer() {
   leftDrawerOpen.value = !leftDrawerOpen.value;

src/stores/sampledata/boat.ts

@@ -5,7 +5,7 @@ export const getSampleData = () => [
     displayName: 'PX',
     class: 'J/27',
     year: 1981,
-    imgSrc: '/tmpimg/j27.png',
+    imgSrc: '/tmpimg/projectX.jpg',
     iconSrc: '/tmpimg/projectx_avatar256.png',
     bookingAvailable: true,
     maxPassengers: 8,