Init

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>

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>

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>