66 lines
1.6 KiB
Vue
66 lines
1.6 KiB
Vue
<template>
|
|
<div
|
|
class="dark:text-white container mx-auto h-full flex justify-center items-center"
|
|
>
|
|
<table class="table-fixed shadow-lg">
|
|
<thead>
|
|
<tr>
|
|
<th
|
|
class="w-1/2 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"
|
|
>
|
|
ID
|
|
</th>
|
|
<th
|
|
class="w-1/4 bg-blue-100 dark:bg-blue-900 border text-left px-8 py-4"
|
|
>
|
|
Default Prefix
|
|
</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>
|
|
</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>
|
|
<label
|
|
>Name
|
|
<input type="text" placeholder="Name" />
|
|
</label>
|
|
<label>
|
|
Default Prefix
|
|
<input type="text" placeholder="Default Prefix" />
|
|
</label>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { getSites, Site } from "../api";
|
|
import { ref } from "vue";
|
|
|
|
export default {
|
|
name: "Sites",
|
|
setup() {
|
|
const sites = ref<Site[]>([]);
|
|
getSites().then((s) => void (sites.value = s));
|
|
return { sites };
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped></style>
|