bug fixes and cleanup

.github/workflows/build.yaml

@@ -13,7 +13,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [20.x]
 
     steps:
       - uses: actions/[email protected]

src/components/ControllerCertificationBadges.vue

@@ -1,17 +1,18 @@
 <template>
-  <div class="mr-2 overflow-hidden dark:mr-2 flex">
+  <div class="mr-2 overflow-hidden dark:mr-2 flex flex-wrap">
     <Badge
       v-for="(value, certification) in sortedCertifications(props.controller.certifications)"
       :key="certification"
       :background-color="genClass(value.value)"
-      class="mr-2"
+      class="mr-2 my-1"
       >{{ value.display_name }}</Badge
     >
   </div>
 </template>
 
 <script setup lang="ts">
 import type { CertificationItem, Controller } from "@/types";
+import fac from "@/facility";
 import Badge from "./Badge.vue";
 
 interface Props {
@@ -25,6 +26,7 @@ function sortedCertifications(certs: { [key: string]: CertificationItem }): { [k
   return Object.fromEntries(
     Object.entries(certs)
       .filter(([, cert]) => !cert.hidden)
+      .filter(([, cert]) => !fac.certificationsHideNone || (fac.certificationsHideNone && cert.value !== "none"))
       .sort(([, a], [, b]) => a.order - b.order)
   );
 }
@@ -66,4 +68,9 @@ function genClass(cert: string): string {
 .cert-color-none {
   background-color: #d7dce0;
 }
+
+.dark .cert-color-none {
+  background-color: #2d3748;
+  color: #687179;
+}
 </style>

src/facility-hcf.ts

@@ -18,6 +18,7 @@ const fac: Facility = {
   domain: "vhcf.net",
   apiUrl: "https://api.vhcf.net",
   devApiUrl: "https://api.dev.vhcf.net",
+  certificationsHideNone: false,
   navbarClasses: "bg-slate-800 text-white",
   boundaries: {
     center: [

src/facility-zan.ts

@@ -10,6 +10,7 @@ const fac: Facility = {
   domain: "zanartcc.org",
   apiUrl: "https://api.zanartcc.org",
   devApiUrl: "https://api.dev.zanartcc.org",
+  certificationsHideNone: false,
   hasOceanicCert: true,
   navbarClasses: "bg-alaska-blue dark:bg-alaska-blue text-white",
   resources: ["Policies", "LOAs", "VRC", "vSTARS", "vERAM", "vATIS", "Misc"],

src/facility-zdv.ts

@@ -10,6 +10,7 @@ const fac: Facility = {
   domain: "zdvartcc.org",
   apiUrl: "https://api.zdvartcc.org",
   devApiUrl: "https://api.dev.zdvartcc.org",
+  certificationsHideNone: false,
   customRoutes: [
     {
       path: "/",

src/facility-zlc.ts

@@ -10,6 +10,7 @@ const fac: Facility = {
   domain: "zlcartcc.org",
   apiUrl: "https://api.zlcartcc.org",
   devApiUrl: "https://api.dev.zlcartcc.org",
+  certificationsHideNone: false,
   navbarClasses: "bg-saltlake-orange dark:bg-saltlake-orange text-white",
   footerClasses: "bg-saltlake-orange dark:bg-black-deep text-white",
   primaryBackground: "bg-saltlake-orange",

src/types/index.d.ts

@@ -94,6 +94,7 @@ export type Facility = {
   logo: string;
   apiUrl: string;
   devApiUrl: string;
+  certificationsHideNone: boolean;
   navbarClasses?: string;
   footerClasses?: string;
   primaryBackground?: string;

src/views/pages/Certifications.vue

@@ -41,6 +41,7 @@
         <div class="draggable flex justify-between items-center">
           <div :key="element.id" class="flex">
             {{ element.name }}
+            <span v-if="element.hidden"><i class="fa-solid fa-ghost ml-2"></i></span>
           </div>
           <div class="flex">
             <button
@@ -255,10 +256,14 @@ const saveOrder = async (): Promise<void> => {
   }
 };
 
+function sortedCertifications(certs: CertificationItem[]): CertificationItem[] {
+  return certs.sort((a, b) => a.order - b.order);
+}
+
 const load = async (): Promise<void> => {
   await rosterStore.fetchCertifications();
-  // copy rosterStore.certifications into certifications
-  certifications.value = structuredClone(toRaw(rosterStore.certifications));
+  // We don't want to mess with store data, so clone it... we'll update store on save
+  certifications.value = sortedCertifications(structuredClone(toRaw(rosterStore.certifications)));
   cancelCertification();
 };
 

src/views/pages/RosterControllerPage.vue

@@ -83,7 +83,7 @@ const rosterStore = useRosterStore();
 const { controllers, lastRoster } = storeToRefs(rosterStore);
 const userStore = useUserStore();
 const cid = route.params.cid === "me" ? userStore.user?.cid : parseInt(route.params.cid as string, 10);
-const controller = ref(cid ? (rosterStore.getController(cid) as Controller) : null);
+const controller = ref(cid ? (rosterStore.getController(cid) as Controller) : {} as Controller);
 
 const isMe = (): boolean => {
   return isAuthenticated() && cid === userStore.user?.cid;

src/views/partials/roster/ControllerProfile.vue

@@ -61,6 +61,7 @@
         for="ground-cert"
       >
         {{ value.display_name }}
+        <span v-if="value.hidden"><i class="fa-solid fa-ghost pl-2"></i></span>
       </label>
       <span v-if="!canWorkController()" class="capitalize">{{ value.value }}</span>
       <select
@@ -135,7 +136,6 @@ const canModifycerts = (): boolean => {
 function sortedCertifications(certs: { [key: string]: CertificationItem }): { [key: string]: CertificationItem } {
   return Object.fromEntries(
     Object.entries(certs)
-      .filter(([, cert]) => !cert.hidden)
       .sort(([, a], [, b]) => a.order - b.order)
   );
 }

src/views/partials/roster/RosterTable.vue

@@ -3,37 +3,29 @@
     <table
       v-for="(controller, index) in props.roster"
       :key="controller.cid"
-      class="w-full dark:bg-slate-900 bg-slate-50 cursor-pointer"
-      :class="{ 'bg-slate-100 dark:bg-slate-800': (index - 1) % 2 }"
+      class="w-full cursor-pointer"
+      :class="{ 'bg-slate-100 dark:bg-slate-800': (index - 1) % 2, 'dark:bg-slate-900 bg-slate-50': index % 2 }"
       @click="goToController(controller.cid)"
     >
       <tbody class="border-collapse text-center w-full">
         <tr>
-          <td class="w-[5em]">
+          <td class="w-[5em] py-2">
             <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-400 mb-0">
               {{ controller.operating_initials }}
             </h2>
           </td>
-          <td class="w-[2em]">
+          <td class="w-[2em] py-2">
             <div
               class="float-right rounded-full w-[1em] h-[1em]"
               :class="genStatusClass(controller.status)"
               :data-tooltip-target="`tooltip-status-${controller.cid}`"
-            ></div>
-            <div
-              :id="`tooltip-status-${controller.cid}`"
-              role="tooltip"
-              class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
-            >
-              {{ controller.status }}
-              <div class="tooltip-arrow" data-popper-arrow></div>
-            </div>
+            />
           </td>
-          <td class="w-3/10 pl-4 py-2 text-left">
+          <td class="w-3/10 pl-4 text-left py-2">
             <h5 class="mb-0 text-xl">{{ `${controller.first_name} ${controller.last_name}` }}</h5>
             <p class="mb-0">{{ getControllerTitle(controller) }} ({{ controller.rating }})</p>
           </td>
-          <td class="w-1/2 pl-3 py-2 hidden md:inline">
+          <td class="w-full pl-3 hidden md:block py-2">
             <ControllerCertificationBadges :controller="controller" :show-active="true" />
           </td>
         </tr>

tailwind.config.cjs

@@ -37,6 +37,8 @@ module.exports = {
     "border-l-2",
     "border-colorado-yellow",
     "list-inside",
+    "bg-slate-100",
+    "bg-slate-800"
   ],
   theme: {
     extend: {