From e7683a5c9db997110753e5ce8edda18d811cc2bc Mon Sep 17 00:00:00 2001
From: andrewlalis <andrewlalisofficial@gmail.com>
Date: Mon, 16 Dec 2024 22:47:57 -0500
Subject: [PATCH] Added basic view for classroom compliance app.

---
 app/.env.development                       |  2 +-
 app/src/App.vue                            |  5 +++
 app/src/api/auth.ts                        | 10 +++++-
 app/src/api/classroom_compliance.ts        | 39 ++++++++++++++++++++++
 app/src/router/index.ts                    |  4 +++
 app/src/stores/auth.ts                     |  2 +-
 app/src/views/apps/ClassroomCompliance.vue | 24 +++++++++++++
 7 files changed, 83 insertions(+), 3 deletions(-)
 create mode 100644 app/src/api/classroom_compliance.ts
 create mode 100644 app/src/views/apps/ClassroomCompliance.vue

diff --git a/app/.env.development b/app/.env.development
index 51920f9..3a1e65b 100644
--- a/app/.env.development
+++ b/app/.env.development
@@ -2,4 +2,4 @@
 # import.meta.env.VITE_MY_VAR, for example.
 # All variables must be prefixed with "VITE_" to be exposed to JS code.
 
-VITE_API_AUTH_URL=http://localhost:8080/api/auth
+VITE_API_URL=http://localhost:8080/api
diff --git a/app/src/App.vue b/app/src/App.vue
index 17ea957..828fb3d 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -17,6 +17,11 @@ const authStore = useAuthStore()
         </span>
         <button type="button" @click="authStore.logOut" v-if="authStore.state">Log out</button>
       </nav>
+      <nav v-if="authStore.state">
+        Apps:
+
+        <RouterLink to="/classroom-compliance">Classroom Compliance</RouterLink>
+      </nav>
     </div>
   </header>
 
diff --git a/app/src/api/auth.ts b/app/src/api/auth.ts
index 7fe6fd0..3bab7de 100644
--- a/app/src/api/auth.ts
+++ b/app/src/api/auth.ts
@@ -1,3 +1,5 @@
+const BASE_URL = import.meta.env.VITE_API_URL + '/auth'
+
 export interface User {
   id: number
   username: string
@@ -6,9 +8,15 @@ export interface User {
   isAdmin: boolean
 }
 
+export function getAuthHeaders(basicAuth: string) {
+  return {
+    Authorization: 'Basic ' + basicAuth,
+  }
+}
+
 export async function login(username: string, password: string): Promise<User | null> {
   const basicAuth = btoa(username + ':' + password)
-  const response = await fetch(import.meta.env.VITE_API_AUTH_URL + '/login', {
+  const response = await fetch(BASE_URL + '/login', {
     method: 'POST',
     headers: {
       Authorization: 'Basic ' + basicAuth,
diff --git a/app/src/api/classroom_compliance.ts b/app/src/api/classroom_compliance.ts
new file mode 100644
index 0000000..d63f277
--- /dev/null
+++ b/app/src/api/classroom_compliance.ts
@@ -0,0 +1,39 @@
+import { getAuthHeaders } from '@/api/auth'
+
+const BASE_URL = import.meta.env.VITE_API_URL + '/classroom-compliance'
+
+export interface Class {
+  id: number
+  number: number
+  schoolYear: string
+}
+
+export async function createClass(
+  auth: string,
+  number: number,
+  schoolYear: string,
+): Promise<Class> {
+  const response = await fetch(BASE_URL + '/classes', {
+    method: 'POST',
+    headers: getAuthHeaders(auth),
+    body: JSON.stringify({ number: number, schoolYear: schoolYear }),
+  })
+  return (await response.json()) as Class
+}
+
+export async function getClasses(auth: string): Promise<Class[]> {
+  const response = await fetch(BASE_URL + '/classes', {
+    headers: getAuthHeaders(auth),
+  })
+  return (await response.json()) as Class[]
+}
+
+export async function deleteClass(auth: string, classId: number): Promise<void> {
+  const response = await fetch(BASE_URL + '/classes/' + classId, {
+    method: 'DELETE',
+    headers: getAuthHeaders(auth),
+  })
+  if (!response.ok) {
+    throw new Error('Failed to delete class.')
+  }
+}
diff --git a/app/src/router/index.ts b/app/src/router/index.ts
index 1884044..d890ad5 100644
--- a/app/src/router/index.ts
+++ b/app/src/router/index.ts
@@ -13,6 +13,10 @@ const router = createRouter({
       path: '/login',
       component: LoginView,
     },
+    {
+      path: '/classroom-compliance',
+      component: () => import('@/views/apps/ClassroomCompliance.vue'),
+    },
   ],
 })
 
diff --git a/app/src/stores/auth.ts b/app/src/stores/auth.ts
index eb62bb9..347ee71 100644
--- a/app/src/stores/auth.ts
+++ b/app/src/stores/auth.ts
@@ -19,7 +19,7 @@ export const useAuthStore = defineStore('auth', () => {
     state.value = null
   }
   function getBasicAuth() {
-    if (!state.value) return null
+    if (!state.value) throw new Error('User is not authenticated.')
     return btoa(state.value.username + ':' + state.value.password)
   }
   return { state, logIn, logOut, getBasicAuth }
diff --git a/app/src/views/apps/ClassroomCompliance.vue b/app/src/views/apps/ClassroomCompliance.vue
new file mode 100644
index 0000000..9017757
--- /dev/null
+++ b/app/src/views/apps/ClassroomCompliance.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { getClasses, type Class } from '@/api/classroom_compliance';
+import { useAuthStore } from '@/stores/auth';
+import { onMounted, ref, type Ref } from 'vue';
+
+const classes: Ref<Class[]> = ref([])
+
+const authStore = useAuthStore()
+
+onMounted(async () => {
+  classes.value = await getClasses(authStore.getBasicAuth())
+  console.log(classes.value)
+})
+</script>
+<template>
+  <main>
+    <h1>Classroom Compliance</h1>
+    <p>Here you can track stuff.</p>
+    <div v-for="cls in classes" :key="cls.id">
+      <h3 v-text="cls.number"></h3>
+      <p v-text="cls.schoolYear"></p>
+    </div>
+  </main>
+</template>