From 14d3eb1171351bd74112092e66b8a99975cbed42 Mon Sep 17 00:00:00 2001
From: ElizabethOnTheBathroomFloor <danil-pavlovz@mail.ru>
Date: Thu, 19 Dec 2024 21:23:50 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20?=
 =?UTF-8?q?=D0=BF=D0=B0=D0=BD=D0=B5=D0=BB=D1=8C=20=D0=B0=D0=B4=D0=BC=D0=B8?=
 =?UTF-8?q?=D0=BD=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/serverApi.js         |  2 +-
 frontend/src/router/index.js          |  2 +
 frontend/src/views/AdminPanelView.vue | 80 +++++++++++++++++++++++++++
 3 files changed, 83 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/views/AdminPanelView.vue

diff --git a/frontend/src/api/serverApi.js b/frontend/src/api/serverApi.js
index 6de64e9..6d23cc7 100644
--- a/frontend/src/api/serverApi.js
+++ b/frontend/src/api/serverApi.js
@@ -1,5 +1,5 @@
 // frontend/src/api/serverApi.js
-const BASE_URL = 'http://your-backend-url/api';
+const BASE_URL = 'http://localhost:8080';
 
 export const getServers = async () => {
   const response = await fetch(`${BASE_URL}/servers`);
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 1948cef..99ef5c0 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -4,6 +4,7 @@ import RegisterView from '../views/RegisterView.vue';
 import LoginView from '../views/LoginView.vue';
 import UserPanelView from '../views/UserPanelView.vue';
 import UserJobsView from '../views/UserJobsView.vue';
+import AdminPanelView from '../views/AdminPanelView.vue';
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -24,6 +25,7 @@ const router = createRouter({
     { path: '/register', name: 'Register', component: RegisterView },
     { path: '/login', name: 'Login', component: LoginView },
     { path: '/user-panel', name: 'UserPanel', component: UserPanelView },
+    { path: '/admin-panel', name: 'AdminPanel', component: AdminPanelView },
     { path: '/user/:id/jobs', name: 'UserJobs', component: UserJobsView },
   ],
 })
diff --git a/frontend/src/views/AdminPanelView.vue b/frontend/src/views/AdminPanelView.vue
new file mode 100644
index 0000000..70e882d
--- /dev/null
+++ b/frontend/src/views/AdminPanelView.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="admin-panel">
+    <h1>Admin Panel</h1>
+    <ServerForm />
+
+    <button @click="loadServers">Refresh Servers</button>
+    <h2>Servers</h2>
+    <ul>
+      <li v-for="server in servers" :key="server.id">
+        <h3>{{ server.hostname }}</h3>
+        <p>{{ server.description }}</p>
+        <p>Status: {{ server.status }}</p>
+        <p>Address: {{ server.address }}</p>
+        <p>CPU: {{ server.cpu_info }}</p>
+        <p>GPU: {{ server.gpu_info }}</p>
+        <p>RAM: {{ server.ram_size_gb }} GB</p>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted } from 'vue';
+import { getServers } from '../api/serverApi';
+import ServerForm from '../components/ServerForm.vue';
+
+export default {
+  components: { ServerForm },
+  setup() {
+    const servers = ref([]);
+
+    const loadServers = async () => {
+
+        servers.value = []
+      try {
+        const response = await getServers();
+        console.log('SERVERS:', response);
+        response.forEach((server) => {
+            console.log(server)
+          servers.value.push(server);
+        });
+      } catch (error) {
+        alert('Failed to load servers');
+      }
+    };
+
+    onMounted(loadServers);
+
+    return {
+      servers,
+      loadServers,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.admin-panel {
+  max-width: 1000px;
+  margin: auto;
+  padding: 20px;
+}
+h1, h2 {
+  text-align: center;
+}
+ul {
+  display: flex;
+  flex-wrap: wrap;
+  list-style-type: none;
+  padding: 0;
+  gap: 10px;
+}
+li {
+  border: 1px solid #ddd;
+  padding: 10px;
+  margin-bottom: 10px;
+  flex: 1 1 calc(33.333% - 20px); /* Adjust the width as needed */
+  box-sizing: border-box;
+}
+</style>