Facility and misc

.gitignore

@@ -24,3 +24,5 @@ dist-ssr
 *.sw?
 .env
 /certs/*
+/vite.config.d.ts
+/vite.config.js

Dockerfile

@@ -3,6 +3,8 @@ ARG build_cmd="build"
 FROM node:lts-alpine as build
 ARG build_cmd
 
+ENV VITE_API_URL=https://api.vatusa.dev
+
 WORKDIR /app
 COPY package*.json ./
 COPY . .

src/App.vue

@@ -1,20 +1,29 @@
 <template>
-  <div class="flex">
-    <Sidebar class="hidden lg:block" />
-    <div class="w-full h-screen bg-gray-100">
-      <Header />
-      <router-view />
+  <FadeOut>
+    <div v-if="!userStore.isLoggedIn" key="element1" class="flex items-center justify-center h-screen bg-usa-blue">
+      <Loader />
     </div>
-  </div>
+    <div v-else key="element2" class="flex">
+      <Sidebar class="hidden lg:block" />
+      <div class="w-full h-screen bg-gray-100">
+        <Header />
+        <router-view />
+      </div>
+    </div>
+  </FadeOut>
 </template>
 
 <script setup lang="ts">
 import apiUrl from "@/utils/api";
-import Header from "@/views/partials/Header.vue";
-import Sidebar from "@/views/partials/Sidebar.vue";
 import useUserStore from "@/stores/user";
 import { onMounted } from "vue";
 
+// Components
+import FadeOut from "@/components/animations/FadeOut.vue";
+import Header from "@/views/partials/Header.vue";
+import Loader from "@/components/animations/Loader.vue";
+import Sidebar from "@/views/partials/Sidebar.vue";
+
 const userStore = useUserStore();
 
 onMounted(async () => {

src/components/animations/FadeIn.vue

@@ -0,0 +1,56 @@
+<template>
+  <div
+    ref="viewableTarget"
+    class="w-full"
+    :class="['transition-opacity duration-500 ease-in', isViewable ? 'opacity-100' : 'opacity-0']"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from "vue";
+
+interface Props {
+  threshold?: number;
+  delay?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  threshold: 0.25,
+  delay: 0,
+});
+
+const isViewable = ref(false);
+const viewableTarget = ref<HTMLElement | null>(null);
+
+const onIntersection: IntersectionObserverCallback = (entries) => {
+  entries.forEach((entry) => {
+    if (entry.isIntersecting) {
+      setTimeout(
+        () => {
+          isViewable.value = true;
+        },
+        (props.delay + 0.05) * 1000
+      );
+    }
+  });
+};
+
+const setupObserver = (): void => {
+  const options: IntersectionObserverInit = {
+    root: null,
+    rootMargin: "0px",
+    threshold: props.threshold,
+  };
+
+  const observer = new IntersectionObserver(onIntersection, options);
+  if (viewableTarget.value) {
+    observer.observe(viewableTarget.value);
+  }
+};
+
+onMounted(() => {
+  setupObserver();
+});
+</script>

src/components/animations/FadeOut.vue

@@ -0,0 +1,19 @@
+<template>
+  <transition name="fade" mode="out-in">
+    <slot></slot>
+  </transition>
+</template>
+
+<script lang="ts" setup></script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

src/components/animations/Loader.vue

@@ -0,0 +1,24 @@
+<template>
+  <div
+    class="flex justify-center items-center"
+    :style="{ width: `${props.width}px`, height: `${props.height}px`, background: props.background }"
+  >
+    <img src="@/assets/logo-circle.png" class="w-20 animate-spin" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+interface Props {
+  width?: number;
+  height?: number;
+  background?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  width: 200,
+  height: 200,
+  background: "#052344",
+});
+</script>
+
+<style scoped></style>

src/components/animations/Spinner.vue

@@ -0,0 +1,26 @@
+<template>
+  <svg
+    class="animate-spin -ml-1 mr-3 h-5 w-5"
+    :class="props.dark ? 'text-white' : 'text-gray-500'"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+    <path
+      class="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    ></path>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+import { defineProps } from "vue";
+
+const props = defineProps<{
+  dark?: boolean;
+}>();
+</script>
+
+<style scoped></style>

src/components/profile/Profile.vue

@@ -70,15 +70,15 @@
   <div class="mt-20 border-b">
     <h3 class="font-bold">Facility Details</h3>
   </div>
-  <div v-if="!!rosters" class="m-5">
+  <div v-if="!!user?.rosters" class="m-5">
     <div class="grid grid-cols-4 gap-x-5 border-b font-semibold">
       <div class="col-span-1 flex">Facility</div>
       <div class="col-span-1 flex">Type</div>
       <div class="col-span-1 flex">Join Date</div>
       <div class="col-span-1 flex">Exit Date</div>
     </div>
     <div
-      v-for="(roster, idx) in rosters"
+      v-for="(roster, idx) in user.rosters"
       :key="idx"
       class="grid grid-cols-4 gap-x-5 gap-y-10"
       :class="idx % 2 == 0 ? 'bg-usa-white' : 'bg-white'"
@@ -102,11 +102,10 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
-import { User, Roster } from "@/types";
+import { User } from "@/types";
 
 const props = defineProps<{
   user: User | null;
-  rosters: Roster[] | null;
 }>();
 
 const editableUser = ref<User | null>(props.user);

src/stores/facility.ts

@@ -0,0 +1,44 @@
+import { defineStore } from "pinia";
+import { API } from "@/utils/api";
+import { Facility } from "@/types";
+
+interface FacilityState {
+  facilities: Facility[] | null;
+  error: string | null;
+  fetching: boolean;
+  hasFetched: boolean;
+  loading: Promise<void> | null;
+}
+
+const useFacilityStore = defineStore({
+  id: "facility",
+  state: () =>
+    ({
+      facilities: null,
+      error: null,
+      fetching: false,
+      hasFetched: false,
+    }) as FacilityState,
+  getters: {
+    getFacility: (state) => (id: string) => {
+      if (!state.facilities) return null;
+      return state.facilities.find((facility) => facility.id === id) || null;
+    },
+  },
+  actions: {
+    async fetchFacilities(): Promise<void> {
+      this.fetching = true;
+      try {
+        const { data } = await API.get("/v3/facility");
+        this.facilities = data;
+      } catch (e) {
+        this.facilities = [];
+      } finally {
+        this.fetching = false;
+        this.hasFetched = true;
+      }
+    },
+  },
+});
+
+export default useFacilityStore;

src/stores/user.ts

@@ -8,16 +8,19 @@ interface UserState {
   error: string | null;
   fetching: boolean;
   hasFetched: boolean;
+  hasFetchedRosters: boolean;
   loading: Promise<void> | null;
 }
 
-const useUserStore = defineStore("user", {
+const useUserStore = defineStore({
+  id: "user",
   state: () =>
     ({
       user: null,
       error: null,
       fetching: false,
       hasFetched: false,
+      hasFetchedRosters: false,
     }) as UserState,
   getters: {
     isLoggedIn: (state) => !!state.user,
@@ -27,7 +30,7 @@ const useUserStore = defineStore("user", {
     },
   },
   actions: {
-    async fetchUser() {
+    async fetchUser(): Promise<void> {
       this.fetching = true;
       try {
         const { data } = await API.get("/v3/user");
@@ -45,6 +48,32 @@ const useUserStore = defineStore("user", {
         this.hasFetched = true;
       }
     },
+    async fetchRosters(): Promise<void> {
+      if (!this.isLoggedIn) return;
+      try {
+        const { data } = await API.get(`/v3/user/${this.user?.cid}/roster`);
+        this.user!.rosters = data;
+      } catch (e) {
+        this.user!.rosters = [];
+      } finally {
+        this.hasFetchedRosters = true;
+      }
+    },
+    async logout(): Promise<void> {
+      this.fetching = true;
+      try {
+        await API.get("/v3/user/logout");
+        this.user = null;
+        this.hasFetched = false;
+        this.hasFetchedRosters = false;
+        window.location.href = "https://vatusa.net";
+      } catch (e) {
+        // TODO - throw error notification
+        console.log(e);
+      } finally {
+        this.fetching = false;
+      }
+    },
   },
 });
 

src/types/index.d.ts

@@ -49,11 +49,20 @@ export interface Roster {
   home: boolean;
   visiting: boolean;
   status: string;
+  roles: Role[];
   created_at: string;
   deleted_at?: string;
 }
 
+export interface Role {
+  role: string;
+  facility_id: string;
+  roster_id: number;
+  created_at: string;
+}
+
 export interface Facility {
   id: string;
   name: string;
+  url: string;
 }