+
-
-
diff --git a/client/src/api/UsersApi.ts b/client/src/api/UsersApi.ts
new file mode 100644
index 0000000..150a63a
--- /dev/null
+++ b/client/src/api/UsersApi.ts
@@ -0,0 +1,25 @@
+
+// services are kinda whatever, but in general its a good idea for all api calls to be within a service (at least thats how angular handles it)
+// this user service will handle all to <-> from the server when handling user objects
+// should be injected with the http client (I think its axios ?)
+
+import axios from "axios";
+import type {AxiosResponse } from "axios";
+import type { User } from "../models/User.ts";
+
+const API_URL: string = "/users";
+
+const baseUrl: string = import.meta.env.DEV ? import.meta.env.VITE_DEV_API_URL : "https://app.vxbard.net/api" // TODO: overarching api service
+const api = axios.create({
+ baseURL: baseUrl
+});
+
+export const getUsers = () => api.get(`${API_URL}`);
+
+export const getUser = (id: number) => api.get(`${API_URL}/${id}`);
+
+export const createUser = (data: User) => api.post(`${API_URL}`, data);
+
+export const updateUser = (id: number, data: User) => api.put(`${API_URL}/${id}`, data);
+
+export const deleteUser = (id: number) => api.delete(`${API_URL}/${id}`);
diff --git a/client/src/assets/mobus.txt b/client/src/assets/mobus.txt
new file mode 100644
index 0000000..1748201
--- /dev/null
+++ b/client/src/assets/mobus.txt
@@ -0,0 +1,3 @@
+
+// assets will contain common public resources
+// icons, fonts (if needed locally), images, whatever
diff --git a/client/src/components/Header.vue b/client/src/components/Header.vue
new file mode 100644
index 0000000..a017076
--- /dev/null
+++ b/client/src/components/Header.vue
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
diff --git a/client/src/components/UsersTable.vue b/client/src/components/UsersTable.vue
new file mode 100644
index 0000000..b9c87e0
--- /dev/null
+++ b/client/src/components/UsersTable.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
Users
+
+ Create User
+
+
+
+
{{ user.name }}
+
+ Edit
+
+
+
+
+
+
+
diff --git a/client/src/composables/what.ts b/client/src/composables/what.ts
new file mode 100644
index 0000000..ccdf101
--- /dev/null
+++ b/client/src/composables/what.ts
@@ -0,0 +1,3 @@
+
+// idk really what composables are but I think its extra service code that can be used in components
+// I think they're useful for moving data from a data store to the component but I could just be trolling
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/models/User.ts b/client/src/models/User.ts
new file mode 100644
index 0000000..03387ef
--- /dev/null
+++ b/client/src/models/User.ts
@@ -0,0 +1,8 @@
+
+// models are the data objects stored in the database. models defined here must match models defined in api/models
+
+export interface User {
+ id: number;
+ name: string;
+ email: string
+}
diff --git a/client/src/pages/UserForm.vue b/client/src/pages/UserForm.vue
new file mode 100644
index 0000000..96510d3
--- /dev/null
+++ b/client/src/pages/UserForm.vue
@@ -0,0 +1,54 @@
+
+
+
+
+
+
+
+
{{ id ? "Edit User" : "Create User" }}
+
+
+
+
+
\ No newline at end of file
diff --git a/client/src/pages/UsersList.vue b/client/src/pages/UsersList.vue
new file mode 100644
index 0000000..0fb4214
--- /dev/null
+++ b/client/src/pages/UsersList.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
+
Users
+
+ Create User
+
+
+
+
{{ user.name }}
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/client/src/pages/index.vue b/client/src/pages/index.vue
new file mode 100644
index 0000000..4e9fc51
--- /dev/null
+++ b/client/src/pages/index.vue
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
straight up gargoyling it !
+
yeah im so cool rn
+
imagining what I could do with themes :o
+
+
+
+
+
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index e1eab52..e96dc27 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -1,8 +1,22 @@
-import { createRouter, createWebHistory } from 'vue-router'
+
+// 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";
+
+// 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: [],
-})
+ routes: routes,
+});
-export default router
+export default router;
diff --git a/client/src/stores/UsersStore.ts b/client/src/stores/UsersStore.ts
new file mode 100644
index 0000000..a4d4b01
--- /dev/null
+++ b/client/src/stores/UsersStore.ts
@@ -0,0 +1,48 @@
+
+// stores are for component state management
+// Pinia (?) i kinda dont get it because in angular you just hook a component to a service and that's it,
+// though I guess the service handled the state management
+// sighh
+
+import { defineStore } from "pinia";
+import type { User } from "../models/User.ts";
+import * as api from "../api/UsersApi";
+
+interface UserState {
+ users: User[];
+ loading: boolean;
+}
+
+export const useUsersStore = defineStore("users", {
+
+ state: (): UserState => ({
+ users: [],
+ loading: false
+ }),
+
+ actions: {
+ async fetchUsers() {
+ this.loading = true;
+ const response = await api.getUsers();
+ this.users = response.data;
+ this.loading = false;
+ },
+
+ async addUser(user: User) {
+ const response = await api.createUser(user);
+ this.users.push(response.data);
+ },
+
+ async updateUser(id: number, user: User) {
+ await api.updateUser(id, user);
+ const index = this.users.findIndex(i => i.id === id);
+ this.users[index] = user;
+ },
+
+ async removeUser(id: number) {
+ await api.deleteUser(id);
+ this.users = this.users.filter(i => i.id !== id);
+ }
+ }
+
+});
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',
+ }
})
diff --git a/scripts/execute_all.sh b/scripts/execute_all.sh
index b0ac7d1..3d17957 100755
--- a/scripts/execute_all.sh
+++ b/scripts/execute_all.sh
@@ -1,4 +1,9 @@
# idk yet
-dotnet ./api/test.cs
+#dotnet ./api/test.cs
+
+set ASPNETCORE_ENVIRONMENT=Development
+dotnet run
+
+npm run dev