add AccessPoint Overview page

Signed-off-by: garionion <github@entr0py.de>

src/api/index.ts

@@ -1,4 +1,11 @@
-import { cSite, LoginResponse, Site, token } from "./types";
+import {
+  AccessPoint,
+  AccessPointCreateResponse,
+  cSite,
+  LoginResponse,
+  Site,
+  token,
+} from "./types";
 import { get as idbGet, set as idbSet, del as idbDel } from "idb-keyval";
 
 export * from "./types";
@@ -99,5 +106,36 @@ export async function getSites(): Promise<Site[]> {
 }
 
 export async function createSite(site: Site) {
-  return request<cSite>("/sites", { auth: true, method: HTTPMethod.POST }, site);
+  return request<cSite>(
+    "/sites",
+    { auth: true, method: HTTPMethod.POST },
+    site
+  );
+}
+
+export async function getAccessPointDetails(
+  sideID?: number
+): Promise<AccessPoint[]> {
+  const endpoint = `${sideID ? "/sites/" + sideID : ""}/aps`;
+  return request<AccessPoint[]>(endpoint, {
+    auth: true,
+    method: HTTPMethod.GET,
+  });
+}
+
+export async function getAccessPointByID(id: number): Promise<AccessPoint> {
+  return request<AccessPoint>(`/aps/${id}`, {
+    auth: true,
+    method: HTTPMethod.GET,
+  });
+}
+
+export async function createAccessPoint(
+  ap: AccessPoint
+): Promise<AccessPointCreateResponse> {
+  return request<AccessPointCreateResponse>(
+    "/aps",
+    { auth: true, method: HTTPMethod.POST },
+    ap
+  );
 }

src/api/types.ts

@@ -19,3 +19,26 @@ export interface Site {
 export interface cSite {
   "site-id": number;
 }
+
+export interface AccessPoint {
+  id: number;
+  site_id: number;
+  ap_name: string;
+  serialnumber: string;
+  comment: string;
+  group: string;
+  location: string;
+  mac_address: string;
+  model: string;
+  appointment: Date;
+  new_switchport_id?: any;
+  new_userport_id?: any;
+  old_switchport_id?: any;
+  old_userport_id?: any;
+  registered_user_id?: any;
+  timestamp_registered?: any;
+}
+
+export interface AccessPointCreateResponse {
+  "ap-id": number;
+}

src/components/VNav.vue

@@ -146,6 +146,10 @@ export default {
         name: "Settings",
         to: "Settings",
       },
+      {
+        name: "AccessPoints",
+        to: "AccessPoints",
+      },
     ]);
     const route = useRoute();
     const activeRoute = computed(() => route.name);

src/router/index.ts

@@ -1,11 +1,12 @@
-import { createWebHistory, createRouter } from "vue-router";
+import { createWebHistory, createRouter, RouteRecordRaw } from "vue-router";
 import Home from "../views/Home.vue";
 const Settings = () => import("../views/Settings.vue");
 const Login = () => import("../views/Login.vue");
 const Sites = () => import("../views/Sites.vue");
+const AccessPoints = () => import("../views/AccessPoints.vue");
 import { isLoggedIn } from "../api";
 
-const routes = [
+const routes: RouteRecordRaw[] = [
   {
     path: "/",
     name: "Home",
@@ -27,6 +28,12 @@ const routes = [
     component: Login,
     props: (route) => ({ logout: route.query.logout }),
   },
+  {
+    path: "/aps",
+    name: "AccessPoints",
+    component: AccessPoints,
+    props: (route) => ({ site: Number(route.query["site-id"]).valueOf() }),
+  },
 ];
 
 const router = createRouter({

src/views/AccessPoints.vue

@@ -0,0 +1,67 @@
+<template>
+  <div
+    class="dark:text-white container mx-auto h-full flex justify-center items-center"
+  >
+    <table class="table-auto shadow-lg">
+      <thead>
+        <tr>
+          <th class="bg-blue-100 dark:bg-blue-900 border text-left px-8 py-4">
+            Name
+          </th>
+          <th class="bg-blue-100 dark:bg-blue-900 border text-left px-8 py-4">
+            Location
+          </th>
+          <th class="bg-blue-100 dark:bg-blue-900 border text-left px-8 py-4">
+            Model
+          </th>
+          <th class="bg-blue-100 dark:bg-blue-900 border text-left px-8 py-4">
+            Comment
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="ap in aps">
+          <td class="border px-8 py-4">{{ ap.ap_name }}</td>
+          <td class="border px-8 py-4">{{ ap.location }}</td>
+          <td class="border px-8 py-4">{{ ap.model }}</td>
+          <td class="border px-8 py-4">{{ ap.comment }}</td>
+          <td>
+            <!--router-link
+            :to="{ name: 'AccessPoints', query: { 'site-id': site.id } }"
+            class="text-white bg-blue-600 hover:bg-blue-800 px-3 py-2 rounded-md text-sm font-medium"
+          >Show APs</router-link
+          --></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref, toRefs } from "vue";
+import { getAccessPointDetails, AccessPoint } from "../api";
+
+export default {
+  name: "AccessPoints",
+  props: {
+    site: {
+      type: Number,
+      required: false,
+    },
+  },
+  async setup(props: { site?: number }) {
+    const { site } = toRefs(props);
+    const aps = ref<AccessPoint[]>([]);
+    async function getAccessPoints() {
+      await getAccessPointDetails(site?.value).then(
+        (a) => void (aps.value = a)
+      );
+    }
+    await getAccessPoints();
+
+    return { aps };
+  },
+};
+</script>
+
+<style scoped></style>

src/views/Sites.vue

@@ -2,24 +2,21 @@
   <div
     class="dark:text-white container mx-auto h-full flex justify-center items-center"
   >
-    <table class="table-fixed shadow-lg">
+    <table class="table-auto shadow-lg">
       <thead>
         <tr>
-          <th
-            class="w-1/2 bg-blue-100 dark:bg-blue-900 border text-left px-8 py-4"
-          >
+          <th class="bg-blue-100 dark:bg-blue-900 border text-left px-8 py-4">
             Name
           </th>
-          <th
-            class="w-1/4 bg-blue-100 dark:bg-blue-900 border text-left px-8 py-4"
-          >
+          <th class="bg-blue-100 dark:bg-blue-900 border text-left px-8 py-4">
             ID
           </th>
-          <th
-            class="w-1/4 bg-blue-100 dark:bg-blue-900 border text-left px-8 py-4"
-          >
+          <th class="bg-blue-100 dark:bg-blue-900 border text-left px-8 py-4">
             Default Prefix
           </th>
+          <th class="bg-blue-100 dark:bg-blue-900 border text-left px-8 py-4">
+            Actions
+          </th>
         </tr>
       </thead>
       <tbody>
@@ -27,6 +24,18 @@
           <td class="border px-8 py-4">{{ site.name }}</td>
           <td class="border px-8 py-4">{{ site.id }}</td>
           <td class="border px-8 py-4">{{ site.default_prefix }}</td>
+          <td>
+            <!--router-link
+              :to="{ name: 'Login', query: { 'site-id': site.id } }"
+              class="text-white bg-blue-600 hover:bg-blue-800 px-3 py-2 rounded-md text-sm font-medium"
+              >Create AP</router-link
+            -->
+            <router-link
+              :to="{ name: 'AccessPoints', query: { 'site-id': site.id } }"
+              class="text-white bg-blue-600 hover:bg-blue-800 px-3 py-2 rounded-md text-sm font-medium"
+              >Show APs</router-link
+            >
+          </td>
         </tr>
       </tbody>
     </table>
@@ -77,7 +86,7 @@ export default {
   async setup() {
     const sites = ref<Site[]>([]);
     async function getSites() {
-      apiGetSites().then((s) => void (sites.value = s));
+      await apiGetSites().then((s) => void (sites.value = s));
     }
     await getSites();
 
@@ -92,8 +101,8 @@ export default {
         let newSite = await apiCreateSite(site);
         console.log(newSite);
         await getSites();
-        newSiteName.value = ""
-        newDefaultPrefix.value = ""
+        newSiteName.value = "";
+        newDefaultPrefix.value = "";
       } catch (e) {
         console.log(e);
       }