79 lines
2.2 KiB
Vue
79 lines
2.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">
|
|
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: 'EditAccessPoint', query: { 'ap-id': ap.id } }"
|
|
class="text-white bg-blue-600 hover:bg-blue-800 px-3 py-2 rounded-md text-sm font-medium"
|
|
>Edit</router-link
|
|
>
|
|
<router-link
|
|
v-if="ap.registered_user_id == null"
|
|
:to="{ name: 'RegisterAccessPoint', query: { 'ap-id': ap.id } }"
|
|
class="text-white bg-blue-600 hover:bg-blue-800 px-3 py-2 rounded-md text-sm font-medium"
|
|
>Register</router-link
|
|
>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { reactive, toRefs } from "vue";
|
|
import { getAccessPointDetails, AccessPoint } from "../api";
|
|
|
|
export default {
|
|
name: "AccessPoints",
|
|
props: {
|
|
siteID: {
|
|
type: Number,
|
|
required: false,
|
|
},
|
|
},
|
|
async setup(props: { siteID?: number }) {
|
|
const { siteID } = toRefs(props);
|
|
const aps = reactive<AccessPoint[]>([]);
|
|
async function getAccessPoints() {
|
|
try {
|
|
await getAccessPointDetails(siteID?.value).then(
|
|
(a) => void Object.assign(aps, a)
|
|
);
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
}
|
|
await getAccessPoints();
|
|
|
|
return { aps };
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped></style>
|