From 26493039464937b72ba3a4ee8642d30b3e6714a8 Mon Sep 17 00:00:00 2001
From: Raajheer1 <raaj.patel229@gmail.com>
Date: Mon, 30 Sep 2024 20:48:45 -0500
Subject: [PATCH] update

---
 src/components/Card.vue              |   2 -
 src/components/profile/ActionLog.vue |  59 +++++
 src/router/index.ts                  |  35 +--
 src/stores/facility.ts               |  17 +-
 src/stores/feedback.ts               |   7 +-
 src/stores/user.ts                   |  11 +-
 src/types/index.d.ts                 |  25 +-
 src/views/Profile.vue                |   4 +
 src/views/controllers/MyFeedback.vue |   6 +-
 src/views/pilots/LeaveFeedback.vue   | 332 ++++++++++++++++++++-------
 10 files changed, 387 insertions(+), 111 deletions(-)
 create mode 100644 src/components/profile/ActionLog.vue

diff --git a/src/components/Card.vue b/src/components/Card.vue
index 003c1d4..2c03d59 100644
--- a/src/components/Card.vue
+++ b/src/components/Card.vue
@@ -9,8 +9,6 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps } from "vue";
-
 const props = defineProps<{
   transparent?: boolean;
 }>();
diff --git a/src/components/profile/ActionLog.vue b/src/components/profile/ActionLog.vue
new file mode 100644
index 0000000..99c1659
--- /dev/null
+++ b/src/components/profile/ActionLog.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="border-b">
+    <h3 class="font-bold">Action Log</h3>
+  </div>
+  <div class="m-5">
+    <div v-if="fetching" class="m-5">
+      <Spinner />
+    </div>
+    <div v-else>
+      <div v-if="actionLogEntries.length === 0">
+        <h3>No record found. If you believe this was an error please make a ticket.</h3>
+      </div>
+      <div v-else class="relative overflow-x-auto">
+        <table class="w-full text-sm text-left rtl:text-right text-gray-500">
+          <thead class="text-xs text-gray-700 uppercase bg-gray-100">
+            <tr>
+              <th scope="col" class="px-6 py-3">Entry</th>
+              <th scope="col" class="px-6 py-3">Date</th>
+              <th scope="col" class="px-6 py-3">Added By</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(ale, idx) in actionLogEntries" :key="idx" class="bg-white border-b">
+              <th scope="row" class="text-wrap px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
+                {{ ale.entry }}
+              </th>
+              <td class="px-6 py-4">
+                {{ new Date(ale.created_at).toLocaleDateString() }}
+              </td>
+              <td class="px-6 py-4">
+                {{ ale.created_by }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { ActionLog } from "@/types";
+import useUserStore from "@/stores/user";
+
+import Spinner from "@/components/animations/Spinner.vue";
+
+const userStore = useUserStore();
+
+const actionLogEntries = ref<ActionLog[]>([]);
+const fetching = ref<boolean>(true);
+
+onMounted(async () => {
+  actionLogEntries.value = await userStore.fetchActionLog(userStore.self.cid);
+  fetching.value = false;
+});
+</script>
+
+<style scoped></style>
diff --git a/src/router/index.ts b/src/router/index.ts
index f6d0147..e2d3dc9 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -19,25 +19,32 @@ const routes = [
     },
   },
   {
-    path: "/facility",
-    name: "Facility",
-    component: () => import("@/views/controllers/Facility.vue"),
+    path: "/pilots",
+    children: [
+      {
+        path: "feedback",
+        name: "Leave Feedback",
+        component: () => import("@/views/pilots/LeaveFeedback.vue"),
+      },
+    ],
     meta: {
       requiresAuth: true,
     },
   },
   {
-    path: "/leave-feedback",
-    name: "Leave Feedback",
-    component: () => import("@/views/pilots/LeaveFeedback.vue"),
-    meta: {
-      requiresAuth: true,
-    },
-  },
-  {
-    path: "/feedback",
-    name: "My Feedback",
-    component: () => import("@/views/controllers/MyFeedback.vue"),
+    path: "/controllers",
+    children: [
+      {
+        path: "facility",
+        name: "Facility",
+        component: () => import("@/views/controllers/Facility.vue"),
+      },
+      {
+        path: "feedback",
+        name: "My Feedback",
+        component: () => import("@/views/controllers/MyFeedback.vue"),
+      },
+    ],
     meta: {
       requiresAuth: true,
     },
diff --git a/src/stores/facility.ts b/src/stores/facility.ts
index 71a63e9..5333350 100644
--- a/src/stores/facility.ts
+++ b/src/stores/facility.ts
@@ -1,9 +1,9 @@
 import { defineStore } from "pinia";
 import { API } from "@/utils/api";
-import { Facility } from "@/types";
+import { Facility, Roster } from "@/types";
 
 interface FacilityState {
-  facilities: Facility[] | null;
+  facilities: Facility[];
   error: string | null;
   fetching: boolean;
   hasFetched: boolean;
@@ -14,7 +14,7 @@ const useFacilityStore = defineStore({
   id: "facility",
   state: () =>
     ({
-      facilities: null,
+      facilities: [],
       error: null,
       fetching: false,
       hasFetched: false,
@@ -38,6 +38,17 @@ const useFacilityStore = defineStore({
         this.hasFetched = true;
       }
     },
+    async fetchRoster(facility: string): Promise<Roster[]> {
+      this.fetching = true;
+      try {
+        const { data } = await API.get(`/v3/facility/${facility}/roster`);
+        return data;
+      } catch (e) {
+        return [];
+      } finally {
+        this.fetching = false;
+      }
+    },
   },
 });
 
diff --git a/src/stores/feedback.ts b/src/stores/feedback.ts
index dedd758..396a6e3 100644
--- a/src/stores/feedback.ts
+++ b/src/stores/feedback.ts
@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 import { API } from "@/utils/api";
-import { Feedback } from "@/types";
+import { Feedback, FeedbackRequest } from "@/types";
 
 interface FeedbackState {
   myFeedback: Feedback;
@@ -33,6 +33,11 @@ const useFeedbackStore = defineStore({
         this.hasFetched = true;
       }
     },
+    async submitFeedback(facility: string, feedback: FeedbackRequest): Promise<void> {
+      this.loading = API.post(`/v3/facility/${facility}/feedback`, feedback);
+      await this.loading;
+      this.loading = null;
+    },
   },
 });
 
diff --git a/src/stores/user.ts b/src/stores/user.ts
index 911d8c1..5a99db8 100644
--- a/src/stores/user.ts
+++ b/src/stores/user.ts
@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 import { API } from "@/utils/api";
-import { User } from "@/types";
+import { ActionLog, User } from "@/types";
 import { getControllerRating, getPilotRating } from "@/utils/rating";
 import { notify } from "notiwind";
 
@@ -103,6 +103,15 @@ const useUserStore = defineStore({
         this.hasFetchedRosters = true;
       }
     },
+    async fetchActionLog(cid: number): Promise<ActionLog[]> {
+      try {
+        const { data } = await API.get(`/v3/user/${cid}/action-log`);
+        return data;
+      } catch (e) {
+        console.error(e);
+        return [];
+      }
+    },
     async logout(): Promise<void> {
       this.fetching = true;
       try {
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index 1b51e89..2d9fbf8 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -47,14 +47,27 @@ export interface Feedback {
   facility: string;
   position: number;
   comment: string;
-  notes: string;
+  feedback: string;
   rating: string;
   status: string;
   created_at: string;
 }
 
+export interface FeedbackRequest {
+  callsign: string;
+  controller_cid: number;
+  pilot_cid: number;
+  position: number;
+  comment: string;
+  feedback: string;
+  rating: string;
+  status: string;
+}
+
 export interface Roster {
   id: number;
+  first_name: string;
+  last_name: string;
   cid: number;
   facility: string;
   operating_initials: string;
@@ -78,3 +91,13 @@ export interface Facility {
   name: string;
   url: string;
 }
+
+export interface ActionLog {
+  id: number;
+  cid: number;
+  entry: string;
+  created_at: string;
+  created_by: string;
+  updated_at: string;
+  updated_by: string;
+}
diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index 6b2ed69..d46f3ff 100644
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@@ -25,6 +25,9 @@
           <div v-else-if="selectedTab == 2" key="2">
             <Discord :user="userStore.user" />
           </div>
+          <div v-else-if="selectedTab == 3" key="3">
+            <ActionLog :user="userStore.user" />
+          </div>
         </transition>
       </div>
     </Card>
@@ -42,6 +45,7 @@ import Discord from "@/components/profile/Discord.vue";
 import Notifications from "@/components/profile/Notifications.vue";
 import Page from "@/components/Page.vue";
 import Profile from "@/components/profile/Profile.vue";
+import ActionLog from "@/components/profile/ActionLog.vue";
 
 const userStore = useUserStore();
 
diff --git a/src/views/controllers/MyFeedback.vue b/src/views/controllers/MyFeedback.vue
index 49128ef..c26d765 100644
--- a/src/views/controllers/MyFeedback.vue
+++ b/src/views/controllers/MyFeedback.vue
@@ -50,7 +50,7 @@
                   {{ feedback.rating }}
                 </th>
                 <td class="px-6 py-4">
-                  {{ feedback.comment }}
+                  {{ feedback.feedback }}
                 </td>
                 <td class="px-6 py-4">{{ feedback.facility }} / {{ feedback.position }}</td>
               </tr>
@@ -65,6 +65,7 @@
 <script setup lang="ts">
 import { onMounted, ref, computed } from "vue";
 import useFeedbackStore from "@/stores/feedback";
+import useUserStore from "@/stores/user.ts";
 
 // Components
 import Page from "@/components/Page.vue";
@@ -72,6 +73,7 @@ import Card from "@/components/Card.vue";
 import Spinner from "@/components/animations/Spinner.vue";
 
 const feedbackStore = useFeedbackStore();
+const userStore = useUserStore();
 
 const search = ref<string>("");
 
@@ -114,7 +116,7 @@ const feedbackRating = computed(() => {
 
 onMounted(() => {
   if (!feedbackStore.hasFetched) {
-    feedbackStore.fetchFeedback(1293257);
+    feedbackStore.fetchFeedback(userStore.self.cid);
   }
 });
 </script>
diff --git a/src/views/pilots/LeaveFeedback.vue b/src/views/pilots/LeaveFeedback.vue
index 20b30ba..1e8c58d 100644
--- a/src/views/pilots/LeaveFeedback.vue
+++ b/src/views/pilots/LeaveFeedback.vue
@@ -1,61 +1,162 @@
 <template>
   <Page title="Leave Feedback">
-    <div class="mx-10">
-      <div class="flex text-4xl text-usa-blue">
-        <div v-for="i in feedbackRating" :key="i">
-          <i class="fa-solid fa-star"></i>
+    <Card>
+      <div class="px-14 py-8 grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-x-5 gap-y-10">
+        <div class="col-span-1 flex flex-col">
+          <input
+            v-model="facility"
+            class="order-2 my-1 py-1 border-b hover:border-b-usa-blue focus:border-b-usa-blue transition-all duration-300 outline-0 focus:ring-0 bg-transparent"
+            style="outline: 0"
+            placeholder="Search Facility"
+            required
+            @focus="facilityDropdown = true"
+            @blur="closeFacilityDropdown"
+          />
+          <ul
+            v-if="facilityDropdown && facilityStore.facilities.length"
+            class="absolute bg-white border border-gray-300 mt-14 z-10 max-h-40 overflow-y-auto"
+          >
+            <li
+              v-for="option in facilityList"
+              :key="option.id"
+              class="cursor-pointer hover:bg-gray-100 px-2 py-1"
+              @mousedown.prevent="selectFacility(option)"
+            >
+              {{ option.name }}
+            </li>
+            <li v-if="facilityList.length === 0" class="px-2 py-1">No Facilities Found</li>
+          </ul>
+          <p
+            class="order-1 font-bold -600 text-sm peer-focus:text-usa-blue transition-all duration-300"
+            :class="isValidFacility ? 'text-gray-600' : 'text-usa-red'"
+          >
+            Facility
+          </p>
         </div>
-        <div v-for="i in 5 - feedbackRating" :key="i">
-          <i class="fa-regular fa-star"></i>
+
+        <div class="col-span-1 flex flex-col">
+          <input
+            v-model="feedback.callsign"
+            class="order-2 peer my-1 py-1 border-b hover:border-b-usa-blue focus:border-b-usa-blue transition-all duration-300 outline-0 focus:ring-0 bg-transparent"
+            style="outline: 0"
+            placeholder="N978AP"
+            required
+          />
+          <p class="order-1 font-bold text-gray-600 text-sm peer-focus:text-usa-blue transition-all duration-300">
+            Callsign
+          </p>
         </div>
-      </div>
-      <h3 class="m-1">Average Feedback Rating</h3>
-    </div>
-    <Card>
-      <div v-if="!feedbackStore.hasFetched" class="m-5">
-        <Spinner />
-      </div>
-      <div v-else class="mt-8 px-14">
-        <div class="flex justify-between mb-6">
-          <div class="flex flex-col">
-            <p class="font-bold text-gray-600 text-sm">Search</p>
-            <input
-              v-model="search"
-              class="my-1 py-1 border-b hover:border-b-usa-blue outline-0 focus:border-transparent focus:ring-0 bg-transparent"
-              placeholder="Search"
-            />
-          </div>
-          <div class="flex gap-x-2 font-semibold text-usa-blue text-lg my-auto">
-            <i class="my-auto fa-solid fa-filter"></i>
-            <p>Filter</p>
-          </div>
+
+        <div class="col-span-1 flex flex-col relative">
+          <input
+            v-model="feedback.controller_cid"
+            class="order-2 my-1 py-1 border-b hover:border-b-usa-blue focus:border-b-usa-blue transition-all duration-300 outline-0 focus:ring-0 bg-transparent"
+            style="outline: 0"
+            placeholder="Search Controller"
+            required
+            @focus="controllerDropdown = true"
+            @blur="closeControllerDropdown"
+          />
+          <ul
+            v-if="controllerDropdown && controllerList.length > 0"
+            class="absolute bg-white border border-gray-300 mt-14 z-10 max-h-40 overflow-y-auto w-full"
+          >
+            <li
+              v-for="controller in controllerList"
+              :key="controller.id"
+              class="cursor-pointer hover:bg-gray-100 px-2 py-1"
+              @mousedown.prevent="selectController(controller.cid)"
+            >
+              {{ controller.first_name }} {{ controller.last_name }}
+            </li>
+          </ul>
+          <ul
+            v-else-if="controllerDropdown"
+            class="absolute bg-white border border-gray-300 mt-14 z-10 max-h-40 overflow-y-auto w-full"
+          >
+            <li v-if="isValidFacility" class="cursor-pointer hover:bg-gray-100 px-2 py-1 flex">
+              <svg
+                aria-hidden="true"
+                class="w-4 h-4 text-gray-200 animate-spin fill-blue-600 my-auto mr-2"
+                viewBox="0 0 100 101"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                  fill="currentFill"
+                />
+              </svg>
+              Loading...
+            </li>
+            <li v-else class="cursor-pointer hover:bg-gray-100 px-2 py-1">Invalid facility.</li>
+          </ul>
+          <p
+            class="order-1 font-bold text-sm peer-focus:text-usa-blue transition-all duration-300"
+            :class="isValidController ? 'text-gray-600' : 'text-usa-red'"
+          >
+            Controller
+          </p>
         </div>
 
-        <div class="relative overflow-x-auto">
-          <table class="w-full text-sm text-left rtl:text-right text-gray-500">
-            <thead class="text-xs text-gray-700 uppercase bg-gray-100">
-              <tr>
-                <th scope="col" class="px-6 py-3">Date</th>
-                <th scope="col" class="px-6 py-3">Rating</th>
-                <th scope="col" class="px-6 py-3">Comment</th>
-                <th scope="col" class="px-6 py-3">Facility/Position</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="(feedback, idx) in filteredFeedback" :key="idx" class="bg-white border-b">
-                <td class="px-6 py-4">
-                  {{ new Date(feedback.created_at).toLocaleDateString() }}
-                </td>
-                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
-                  {{ feedback.rating }}
-                </th>
-                <td class="px-6 py-4">
-                  {{ feedback.comment }}
-                </td>
-                <td class="px-6 py-4">{{ feedback.facility }} / {{ feedback.position }}</td>
-              </tr>
-            </tbody>
-          </table>
+        <div class="col-span-1 flex flex-col">
+          <input
+            v-model="feedback.position"
+            class="order-2 peer my-1 py-1 border-b hover:border-b-usa-blue focus:border-b-usa-blue transition-all duration-300 outline-0 focus:ring-0 bg-transparent"
+            style="outline: 0"
+            placeholder="DEN_APP"
+            required
+          />
+          <p class="order-1 font-bold text-gray-600 text-sm peer-focus:text-usa-blue transition-all duration-300">
+            Position
+          </p>
+        </div>
+        <div class="col-span-1 flex flex-col relative">
+          <input
+            v-model="feedback.rating"
+            class="order-2 my-1 py-1 border-b hover:border-b-usa-blue focus:border-b-usa-blue transition-all duration-300 outline-0 focus:ring-0 bg-transparent"
+            style="outline: 0"
+            placeholder="Feedback Rating"
+            required
+            @focus="ratingDropdown = true"
+            @blur="closeRatingDropdown"
+          />
+          <ul
+            v-if="ratingDropdown"
+            class="absolute bg-white border border-gray-300 mt-14 z-10 max-h-40 overflow-y-auto w-full"
+          >
+            <li
+              v-for="(rating, idx) in RatingList"
+              :key="idx"
+              class="cursor-pointer hover:bg-gray-100 px-2 py-1"
+              @mousedown.prevent="selectRating(rating)"
+            >
+              {{ rating }}
+            </li>
+          </ul>
+          <p
+            class="order-1 font-bold text-sm peer-focus:text-usa-blue transition-all duration-300"
+            :class="isValidRating ? 'text-gray-600' : 'text-usa-red'"
+          >
+            Rating
+          </p>
+        </div>
+
+        <div class="col-span-3 flex flex-col">
+          <textarea
+            v-model="feedback.position"
+            class="order-2 peer my-1 py-1 border-b hover:border-b-usa-blue focus:border-b-usa-blue transition-all duration-300 outline-0 focus:ring-0 bg-transparent"
+            style="outline: 0"
+            placeholder="The best controlling service into Denver!"
+            required
+          />
+          <p class="order-1 font-bold text-gray-600 text-sm peer-focus:text-usa-blue transition-all duration-300">
+            Feedback
+          </p>
         </div>
       </div>
     </Card>
@@ -63,59 +164,116 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, computed } from "vue";
+import { computed, onMounted, ref, watchEffect } from "vue";
+import { Facility, FeedbackRequest, Roster } from "@/types";
+
 import useFeedbackStore from "@/stores/feedback";
+import useUserStore from "@/stores/user";
+import useFacilityStore from "@/stores/facility";
 
 // Components
 import Page from "@/components/Page.vue";
 import Card from "@/components/Card.vue";
-import Spinner from "@/components/animations/Spinner.vue";
+import TextInput from "@/components/input/TextInput.vue";
+import FadeIn from "@/components/animations/FadeIn.vue";
 
 const feedbackStore = useFeedbackStore();
+const userStore = useUserStore();
+const facilityStore = useFacilityStore();
 
-const search = ref<string>("");
+const feedback = ref<FeedbackRequest>({
+  pilot_cid: userStore.self.cid,
+  comment: "",
+  status: "pending",
+});
 
-const filteredFeedback = computed(() => {
-  return feedbackStore.myFeedback.filter((feedback) => {
-    return (
-      feedback.comment.toLowerCase().includes(search.value.toLowerCase()) ||
-      feedback.facility.toLowerCase().includes(search.value.toLowerCase()) ||
-      feedback.position.toLowerCase().includes(search.value.toLowerCase())
-    );
-  });
+// Facility List
+const facility = ref<string>("");
+const facilityList = computed(() => {
+  return facilityStore.facilities.filter(
+    (f) =>
+      f.name.toLowerCase().includes(facility.value.toLowerCase()) ||
+      f.id.toLowerCase().includes(facility.value.toLowerCase())
+  );
 });
+const facilityDropdown = ref<boolean>(false);
+
+const selectFacility = (option: Facility): void => {
+  facility.value = option.id;
+  facilityDropdown.value = false;
+};
 
-function RatingToInteger(rating: string): number {
-  switch (rating) {
-    case "excellent":
-      return 5;
-    case "good":
-      return 4;
-    case "fair":
-      return 3;
-    case "poor":
-      return 2;
-    case "unsatisfactory":
-      return 1;
-    default:
-      return 0;
+const isValidFacility = computed(() => {
+  return facilityList.value.filter((f) => f.id === facility.value).length > 0;
+});
+
+const closeFacilityDropdown = (): void => {
+  setTimeout(() => {
+    facilityDropdown.value = false;
+  }, 100);
+};
+
+// Controller List
+const controllerDropdown = ref<boolean>(false);
+const controllerList = ref<Roster>([]);
+
+watchEffect(() => {
+  if (!isValidFacility.value) {
+    controllerList.value = [];
+    return;
   }
-}
 
-const feedbackRating = computed(() => {
-  const totalFeedback = feedbackStore.myFeedback.length;
-  if (totalFeedback === 0) return 0;
+  facilityStore
+    .fetchRoster(facility.value)
+    .then((data) => {
+      controllerList.value = data;
+    })
+    .catch((error) => {
+      console.error("Error fetching roster:", error);
+      controllerList.value = [];
+    });
+});
+
+const selectController = (cid: number): void => {
+  feedback.value.controller_cid = cid;
+  controllerDropdown.value = false;
+};
+
+const closeControllerDropdown = (): void => {
+  setTimeout(() => {
+    controllerDropdown.value = false;
+  }, 100);
+};
 
-  const totalRating = feedbackStore.myFeedback.reduce((acc, feedback) => acc + RatingToInteger(feedback.rating), 0);
-  const averageRating = totalRating / totalFeedback;
+const isValidController = computed(() => {
+  return controllerList.value.filter((c) => c.cid === feedback.value.controller_cid).length > 0;
+});
+
+// Rating List
+const ratingDropdown = ref<boolean>(false);
+const closeRatingDropdown = (): void => {
+  setTimeout(() => {
+    ratingDropdown.value = false;
+  }, 100);
+};
+
+const RatingList = ["excellent", "good", "average", "poor", "fair"];
 
-  return Math.floor(averageRating);
+const selectRating = (rating: string): void => {
+  feedback.value.rating = rating.toLowerCase();
+  ratingDropdown.value = false;
+};
+
+const isValidRating = computed(() => {
+  return RatingList.includes(feedback.value.rating);
 });
 
+const submitFeedback = (): void => {
+  feedbackStore.submitFeedback(facility, feedback);
+};
+
 onMounted(() => {
-  if (!feedbackStore.hasFetched) {
-    feedbackStore.fetchFeedback(1293257);
-  }
+  facilityStore.fetchFacilities();
 });
 </script>