add AccessPoint Overview page

Signed-off-by: garionion <github@entr0py.de>
This commit is contained in:
garionion 2021-04-04 16:34:10 +02:00
parent b8bbfff381
commit d8ac261b13
Signed by: garionion
GPG key ID: 53352FA607FA681A
6 changed files with 165 additions and 17 deletions

View file

@ -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"; import { get as idbGet, set as idbSet, del as idbDel } from "idb-keyval";
export * from "./types"; export * from "./types";
@ -99,5 +106,36 @@ export async function getSites(): Promise<Site[]> {
} }
export async function createSite(site: 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
);
} }

View file

@ -19,3 +19,26 @@ export interface Site {
export interface cSite { export interface cSite {
"site-id": number; "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;
}

View file

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

View file

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

View file

@ -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>

View file

@ -2,24 +2,21 @@
<div <div
class="dark:text-white container mx-auto h-full flex justify-center items-center" 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> <thead>
<tr> <tr>
<th <th class="bg-blue-100 dark:bg-blue-900 border text-left px-8 py-4">
class="w-1/2 bg-blue-100 dark:bg-blue-900 border text-left px-8 py-4"
>
Name Name
</th> </th>
<th <th class="bg-blue-100 dark:bg-blue-900 border text-left px-8 py-4">
class="w-1/4 bg-blue-100 dark:bg-blue-900 border text-left px-8 py-4"
>
ID ID
</th> </th>
<th <th class="bg-blue-100 dark:bg-blue-900 border text-left px-8 py-4">
class="w-1/4 bg-blue-100 dark:bg-blue-900 border text-left px-8 py-4"
>
Default Prefix Default Prefix
</th> </th>
<th class="bg-blue-100 dark:bg-blue-900 border text-left px-8 py-4">
Actions
</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -27,6 +24,18 @@
<td class="border px-8 py-4">{{ site.name }}</td> <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.id }}</td>
<td class="border px-8 py-4">{{ site.default_prefix }}</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> </tr>
</tbody> </tbody>
</table> </table>
@ -77,7 +86,7 @@ export default {
async setup() { async setup() {
const sites = ref<Site[]>([]); const sites = ref<Site[]>([]);
async function getSites() { async function getSites() {
apiGetSites().then((s) => void (sites.value = s)); await apiGetSites().then((s) => void (sites.value = s));
} }
await getSites(); await getSites();
@ -92,8 +101,8 @@ export default {
let newSite = await apiCreateSite(site); let newSite = await apiCreateSite(site);
console.log(newSite); console.log(newSite);
await getSites(); await getSites();
newSiteName.value = "" newSiteName.value = "";
newDefaultPrefix.value = "" newDefaultPrefix.value = "";
} catch (e) { } catch (e) {
console.log(e); console.log(e);
} }