From 242872cba089aa75dac9ecf34a2b5fab626555e7 Mon Sep 17 00:00:00 2001
From: Blitblank <pmcgeee03@gmail.com>
Date: Sun, 8 Mar 2026 00:51:14 -0600
Subject: [PATCH] im so tired rn

---
 README.md                            |  2 +-
 client/scripts/launch_dev.sh         |  9 +++++
 client/src/App.vue                   | 12 +++----
 client/src/components/UsersTable.vue | 33 +++++++++++++++++
 client/src/main.ts                   |  2 ++
 client/src/pages/UserForm.vue        | 54 ++++++++++++++++++++++++++++
 client/src/pages/UsersList.vue       | 31 ++++++++++++++++
 client/src/pages/index.vue           | 12 ++++++-
 client/src/router/index.ts           | 17 ++++++---
 client/src/stores/UsersStore.ts      |  2 +-
 client/vite.config.ts                |  3 ++
 11 files changed, 162 insertions(+), 15 deletions(-)
 create mode 100644 client/scripts/launch_dev.sh

diff --git a/README.md b/README.md
index c4c9031..53428f4 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
 ## agologum
 A web server/web client template.
-Backend: a .NET web API with a [READACTED] database (probably sql for tinkering)
+Backend: a .NET web API with a [READACTED] database (probably prostgressql for tinkering)
 Frontend: Vue.js because I enjoy life and the splendor of God's creation
diff --git a/client/scripts/launch_dev.sh b/client/scripts/launch_dev.sh
new file mode 100644
index 0000000..a2f70aa
--- /dev/null
+++ b/client/scripts/launch_dev.sh
@@ -0,0 +1,9 @@
+
+# this script builds and launches the vue client served raw and locally
+# (without docker) on localhost (default) or via the machine's ip given the argument -I
+
+
+# launch the app
+npm run dev
+
+# TODO: more configuration
diff --git a/client/src/App.vue b/client/src/App.vue
index 78b26a3..7d14f1e 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,13 +1,9 @@
 
 <script setup lang="ts">
-import Header from './components/Header.vue'
+import index from './pages/index.vue'
 </script>
 
 <template>
-  <h1>straight up gargoyling it !</h1>
-  <Header />
-  <Header />
-  <Header />
-  <Header />
-  <h1>imagining what I could do with themes :o</h1>
-</template>
+  <index />
+  <router-view /> <!-- Routed components appear here -->
+</template>
\ No newline at end of file
diff --git a/client/src/components/UsersTable.vue b/client/src/components/UsersTable.vue
index e69de29..13c74cf 100644
--- a/client/src/components/UsersTable.vue
+++ b/client/src/components/UsersTable.vue
@@ -0,0 +1,33 @@
+
+<script setup lang="ts">
+
+import { onMounted } from "vue";
+import { useUsersStore} from "../stores/UsersStore.ts";
+
+const store = useUsersStore();
+
+onMounted(() => { // register callback for when component is loaded on page
+    store.fetchUsers();
+})
+
+</script>
+
+<template>
+
+    <div>
+        <h1>Users</h1>
+
+        <router-link to="/users/new">Create User</router-link>
+
+        <table>
+            <tr v-for="user in store.users" :key="user.id">
+                <td>{{ user.name }}</td>
+                <td>
+                    <router-link :to="`/users/${user.id}`">Edit</router-link>
+                    <button @click="store.removeUser(user.id)">Delete</button>
+                </td>
+            </tr>
+        </table>
+    </div>
+
+</template>
diff --git a/client/src/main.ts b/client/src/main.ts
index c8e37b0..a03cc32 100644
--- a/client/src/main.ts
+++ b/client/src/main.ts
@@ -1,9 +1,11 @@
 import { createApp } from 'vue'
+import { createPinia } from "pinia"
 import App from './App.vue'
 import router from './router'
 
 const app = createApp(App)
 
+app.use(createPinia())
 app.use(router)
 
 app.mount('#app')
diff --git a/client/src/pages/UserForm.vue b/client/src/pages/UserForm.vue
index e69de29..96510d3 100644
--- a/client/src/pages/UserForm.vue
+++ b/client/src/pages/UserForm.vue
@@ -0,0 +1,54 @@
+<!-- pages/views in vue are basically root-level full-page components -->
+
+<script setup lang="ts">
+
+import { ref, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+import { useUsersStore } from "../stores/UsersStore.ts";
+import type { User } from "../models/User.ts";
+
+const store = useUsersStore();
+const route = useRoute();
+const router = useRouter();
+
+const user = ref<User>({
+    name: "",
+    id: 0,
+    email: "",
+});
+
+const id: string | undefined = route.params.id as string | undefined
+
+onMounted(() => {
+    if(id) {
+        const existing = store.users.find(i => i.id == Number(id));
+        if (existing) user.value = { ...existing };
+    }
+});
+
+async function save(): Promise<void> {
+    if(id) {
+        await store.updateUser(Number(id), user.value);
+    } else {
+        await store.addUser(user.value);
+    }
+
+    router.push("/users"); // redirect
+}
+
+</script>
+
+<template>
+
+    <div>
+        <h2>{{ id ? "Edit User" : "Create User" }}</h2> <!-- omg I love ternary operator :D -->
+
+        <form @submit.prevent="save">
+            <input v-model="user.name" placeholder="Name" />
+            
+            <button type="submit">Save</button>
+        </form>
+    </div>
+
+</template>
\ No newline at end of file
diff --git a/client/src/pages/UsersList.vue b/client/src/pages/UsersList.vue
index e69de29..58036ca 100644
--- a/client/src/pages/UsersList.vue
+++ b/client/src/pages/UsersList.vue
@@ -0,0 +1,31 @@
+
+<script setup lang="ts">
+
+import { onMounted } from "vue"
+import { useUsersStore } from "../stores/UsersStore.ts"
+
+const store = useUsersStore()
+
+onMounted(() => {
+  store.fetchUsers()
+})
+
+</script>
+
+<template>
+    <div>
+        <h1>Users</h1>
+
+        <router-link to="/users/new">Create User</router-link>
+
+        <table>
+            <tr v-for="user in store.users" :key="user.id">
+                <td>{{ user.name }}</td>
+                <td>
+                    <router-link :to="`/users/${user.id}`">Edit</router-link>
+                    <button @click="store.removeUser(user.id)">Delete</button>
+                </td>
+            </tr>
+        </table>
+    </div>
+</template>
\ No newline at end of file
diff --git a/client/src/pages/index.vue b/client/src/pages/index.vue
index e50ff11..5f714a6 100644
--- a/client/src/pages/index.vue
+++ b/client/src/pages/index.vue
@@ -1,2 +1,12 @@
 
-<!-- pages are the base instance for routes. an endpoint serves a page, and the page loads components -->
\ No newline at end of file
+<!-- pages are the base instance for routes. an endpoint serves a page, and the page loads components -->
+
+ <script setup lang="ts">
+
+</script>
+
+<template>
+    <h1>straight up gargoyling it !</h1>
+    <h3>yeah im so cool rn</h3>
+    <h1>imagining what I could do with themes :o</h1>
+</template>
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index c737635..f5c48bb 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -1,13 +1,22 @@
 
-// generated by vue
 // the router creates front-end endpoints and serves pages to them
 
+import { createRouter, createWebHistory } from "vue-router";
+import UsersList from "../pages/UsersList.vue";
+import UserForm from "../pages/UserForm.vue";
+import index from "../pages/index.vue";
 
-import { createRouter, createWebHistory } from 'vue-router'
+// link path to the page component
+const routes = [
+  { path: "/", component: index },
+  { path: "/users", component: UsersList },
+  { path: "/user/new", component: UserForm },
+  { path: "/user/:id", component: UserForm }
+]; // I really like this
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [],
-})
+});
 
-export default router
+export default router;
diff --git a/client/src/stores/UsersStore.ts b/client/src/stores/UsersStore.ts
index 62a21d5..a4d4b01 100644
--- a/client/src/stores/UsersStore.ts
+++ b/client/src/stores/UsersStore.ts
@@ -21,7 +21,7 @@ export const useUsersStore = defineStore("users", {
     }),
 
     actions: {
-        async fetchItems() {
+        async fetchUsers() {
             this.loading = true;
             const response = await api.getUsers();
             this.users = response.data;
diff --git a/client/vite.config.ts b/client/vite.config.ts
index 4217010..7c295c6 100644
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -15,4 +15,7 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url))
     },
   },
+  server: {
+    host: '0.0.0.0',
+  }
 })