Added support for application statuses

api/index.js

@@ -7,16 +7,14 @@ app.use(express.json())
 
 const port = 3000
 
-app.get('/', (req, res) => {
-  res.send('Hello World!')
-})
-
 var application;
 var applicationMessages = [];
+var applicationStatus;
 
 app.post('/application', (req, res) => {
   data = req.body
-  application = data;
+  application = data.App;
+  applicationStatus = data.Status;
   console.log(data);
   res.send('Application received')
 });
@@ -25,7 +23,8 @@ app.get('/application/me', (req, res) => {
   if (application) {
     let data = {
       "app": application, 
-      "messages": applicationMessages
+      "messages": applicationMessages,
+      "Status": applicationStatus,
     }
     res.send(data);
   }

ui/src/api/application.ts

@@ -20,6 +20,12 @@ type ApplicationFull = Partial<{
   messages: object[]
 }>
 
+export enum Status {
+  Pending = "Pending",
+  Approved = "Approved",
+  Denied = "Denied",
+}
+
 const addr = "localhost:3000"
 
 export async function loadApplication(): Promise<ApplicationFull | null> {
@@ -32,10 +38,15 @@ export async function loadApplication(): Promise<ApplicationFull | null> {
 }
 
 export async function postApplication(val: any) {
+
+  let out = {
+    "App": val,
+    "Status": Status.Pending
+  }
   await fetch(`http://${addr}/application`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify(val),
+    body: JSON.stringify(out),
   })
 }
 

ui/src/pages/Application.vue

@@ -2,12 +2,13 @@
 import ApplicationChat from '@/components/application/ApplicationChat.vue';
 import ApplicationForm from '@/components/application/ApplicationForm.vue';
 import { onMounted, ref } from 'vue';
-import { loadApplication, postApplication, postChatMessage } from '@/api/application';
+import { loadApplication, postApplication, postChatMessage, Status } from '@/api/application';
 
 const appData = ref<Record<string, unknown> | null>(null);
 const chatData = ref<object[]>([])
 const readOnly = ref<boolean>(false);
 const newApp = ref<boolean>(true);
+const status = ref<Status>(Status.Pending);
 
 onMounted(async () => {
     try {
@@ -29,6 +30,19 @@ onMounted(async () => {
 
 <template>
     <div class="max-w-3xl mx-auto my-20">
+        <div v-if="newApp" class="flex flex-row justify-between items-center py-2 mb-8">
+            <!-- Application header -->
+            <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">Application Name</h3>
+            <h3 :class="[
+                'font-semibold',
+                status === Status.Pending && 'text-yellow-500',
+                status === Status.Approved && 'text-green-500',
+                status === Status.Denied && 'text-red-500'
+            ]">{{ status }}</h3>
+        </div>
+        <div v-else class="flex flex-row justify-between items-center py-2 mb-8">
+            <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">Apply to join the 17th Rangers</h3>
+        </div>
         <ApplicationForm v-if="appData" :read-only="readOnly" :data="appData" @submit="(e) => { postApplication(e) }"
             class="mb-7"></ApplicationForm>
         <div v-if="newApp">