Init

2025-12-14 12:53:25 +01:00
parent dbec2e9a74
commit 60bedab4a5
33 changed files with 1975 additions and 48 deletions
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,36 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
+
+.eslintcache
+
+# Cypress
+/cypress/videos/
+/cypress/screenshots/
+
+# Vitest
+__screenshots__/
--- a/frontend/.vscode/extensions.json
+++ b/frontend/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -0,0 +1,38 @@
+# vue-project
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Recommended Browser Setup
+
+- Chromium-based browsers (Chrome, Edge, Brave, etc.):
+  - [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) 
+  - [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
+- Firefox:
+  - [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
+  - [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+yarn
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+yarn dev
+```
+
+### Compile and Minify for Production
+
+```sh
+yarn build
+```
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/frontend/jsconfig.json
+++ b/frontend/jsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "vue-project",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.5.25"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.2",
+    "vite": "^7.2.4",
+    "vite-plugin-vue-devtools": "^8.0.5"
+  }
+}
--- a/frontend/public/favicon.ico
+++ b/frontend/public/favicon.ico
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -0,0 +1,10 @@
+<script setup>
+import Server_list from "@/components/server/server_list.vue";
+</script>
+
+<template>
+  <h1>Oxspeak</h1>
+  <server_list />
+</template>
+
+<style scoped></style>
--- a/frontend/src/components/server/server_create.vue
+++ b/frontend/src/components/server/server_create.vue
@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <label>
+      Server Name :
+      <input type="text" name="name" placeholder="Server Name" v-model="form_inputs.name">
+    </label>
+
+    <label>
+      Password :
+      <input type="password" name="password" placeholder="Password" v-model="form_inputs.password">
+    </label>
+    <button type="submit" @click="create_server">Create</button>
+  </div>
+</template>
+
+<script setup>
+// defined constants
+import {ref} from "vue";
+const emit = defineEmits(['created'])
+
+let form_inputs = ref({
+  name: '',
+  password: ''
+})
+// defined methods
+async function create_server(){
+  const response = await fetch("/api/server/servers/", {
+    method: 'POST',
+    body: JSON.stringify(form_inputs.value)
+  })
+  if (response.ok) {
+    emit('created', await response.json())
+  } else {
+    console.error("Failed to fetch servers:", response.statusText)
+  }
+}
+
+</script>
+
+<style scoped>
+
+</style>
--- a/frontend/src/components/server/server_detail.vue
+++ b/frontend/src/components/server/server_detail.vue
@@ -0,0 +1,39 @@
+<template>
+  <div>
+    {{server}}
+  </div>
+  <button @click="remove">Remove</button>/
+</template>
+
+<script setup>
+import {ref} from "vue";
+
+// defined constants
+const props = defineProps({
+  server: {
+    type: Object,
+    required: true
+  }
+})
+const emit = defineEmits(['remove'])
+
+// defined methods
+async function remove(){
+  const response = await fetch("/api/server/servers/", {
+    method: 'DELETE'
+  })
+  if (response.ok) {
+    emit('remove')
+  } else {
+    console.error("Failed to fetch servers:", response.statusText)
+  }
+}
+
+onMounted(() => {
+
+})
+</script>
+
+<style scoped>
+
+</style>
--- a/frontend/src/components/server/server_list.vue
+++ b/frontend/src/components/server/server_list.vue
@@ -0,0 +1,39 @@
+<template>
+  <h2>Servers</h2>
+  <server_create @created="servers.push($event)"/>
+  <button @click="fetch_servers">Refresh</button>
+  <server_detail
+    v-for="server in servers"
+    :server="server"
+    :key="server.id"
+  />
+</template>
+
+<script setup>
+import {ref, onMounted} from "vue";
+import Server_detail from "@/components/server/server_detail.vue";
+import Server_create from "@/components/server/server_create.vue";
+
+// defined constants
+const servers = ref([])
+
+// defined methods
+async function fetch_servers(){
+  const response = await fetch("/api/server/servers/")
+  if (response.ok) {
+    servers.value = await response.json()
+  } else {
+    console.error("Failed to fetch servers:", response.statusText)
+  }
+}
+
+onMounted(() => {
+  fetch_servers()
+})
+
+
+</script>
+
+<style scoped>
+
+</style>
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -0,0 +1,26 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueDevTools from 'vite-plugin-vue-devtools'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueDevTools(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    },
+  },
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:7000',
+        changeOrigin: true,
+      },
+    },
+  },
+})
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock