117 lines
3.2 KiB
Vue
117 lines
3.2 KiB
Vue
<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">
|
|
ID
|
|
</th>
|
|
<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>
|
|
<tr v-for="site in sites">
|
|
<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: 'CreateAccessPoint', 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>
|
|
</div>
|
|
<div
|
|
class="dark:text-white container mx-auto h-full flex justify-center items-center mt-12"
|
|
>
|
|
<h1 class="font-hairline mb-6 text-center">New Site</h1>
|
|
<form @submit.prevent="createSite">
|
|
<label
|
|
>Name
|
|
<input
|
|
type="text"
|
|
class="text-black"
|
|
v-model="newSiteName"
|
|
placeholder="Name"
|
|
/>
|
|
</label>
|
|
<label>
|
|
Default Prefix
|
|
<input
|
|
type="text"
|
|
class="text-black"
|
|
v-model="newDefaultPrefix"
|
|
placeholder="Default Prefix"
|
|
/>
|
|
</label>
|
|
<button
|
|
class="bg-green-600 hover:bg-green-400 text-white font-bold py-2 px-4 rounded"
|
|
type="submit"
|
|
>
|
|
Create!
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {
|
|
getSites as apiGetSites,
|
|
Site,
|
|
createSite as apiCreateSite,
|
|
} from "../api";
|
|
import { reactive, ref } from "vue";
|
|
|
|
export default {
|
|
name: "Sites",
|
|
async setup() {
|
|
const sites = reactive<Site[]>([]);
|
|
async function getSites() {
|
|
await apiGetSites().then((s) => void Object.assign(sites, s));
|
|
}
|
|
await getSites();
|
|
|
|
const newSiteName = ref("");
|
|
const newDefaultPrefix = ref("");
|
|
async function createSite() {
|
|
try {
|
|
const site: Site = {
|
|
name: newSiteName.value,
|
|
default_prefix: newDefaultPrefix.value,
|
|
};
|
|
let newSite = await apiCreateSite(site);
|
|
console.log(newSite);
|
|
await getSites();
|
|
newSiteName.value = "";
|
|
newDefaultPrefix.value = "";
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
}
|
|
|
|
return { sites, newSiteName, newDefaultPrefix, createSite };
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped></style>
|