103 lines
2.8 KiB
Vue
103 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
|
|
import { ref, onMounted } from 'vue'
|
|
|
|
import axios from 'axios'
|
|
import Button from 'primevue/button'
|
|
import DataTable from "primevue/datatable"
|
|
import Column from "primevue/column"
|
|
import Card from "primevue/card"
|
|
|
|
const allTables = ref()
|
|
const activeTables = ref()
|
|
|
|
onMounted(() => {
|
|
activeTables.value = [
|
|
{
|
|
tableName: "Table-One",
|
|
link: "vtt.cyberpunkrush.co/table-one"
|
|
}
|
|
]
|
|
|
|
axios.get('http://localhost/api/tables').then((resp) => allTables.value = resp.data)
|
|
axios.get('http://localhost/api/active_tables').then((resp) => activeTables.value = resp.data)
|
|
})
|
|
|
|
function startTable(tableId: number) {
|
|
const activate = axios.get(`http://localhost/api/tables/${tableId}:start`);
|
|
activate.then((resp) => axios.get('http://localhost/api/tables')).then((resp) => allTables.value = resp.data)
|
|
activate.then((resp) => axios.get('http://localhost/api/active_tables')).then((resp) => activeTables.value = resp.data)
|
|
}
|
|
|
|
function stopTable(tableId: number) {
|
|
const activate = axios.get(`http://localhost/api/tables/${tableId}:stop`);
|
|
activate.then((resp) => axios.get('http://localhost/api/tables')).then((resp) => allTables.value = resp.data)
|
|
activate.then((resp) => axios.get('http://localhost/api/active_tables')).then((resp) => activeTables.value = resp.data)
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
.ActiveTables {
|
|
margin: 20px;
|
|
|
|
h2 {
|
|
padding-left: 15px;
|
|
}
|
|
|
|
.ATTables {
|
|
padding-left: 50px;
|
|
}
|
|
|
|
.button-box {
|
|
padding: 10px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<template>
|
|
<Card class="ActiveTables">
|
|
<template #title>
|
|
<h2>Active Tables</h2>
|
|
</template>
|
|
|
|
<template #content>
|
|
<DataTable :exportable="false" :value="activeTables">
|
|
<Column field="table_name" header="Table Name" />
|
|
<Column field="table_link" header="Table Link">
|
|
<template #body="slotProps">
|
|
<a :href="slotProps.data.table_link">{{slotProps.data.table_link}}</a>
|
|
</template>
|
|
</Column>
|
|
<Column header="Close">
|
|
<template #body="slotProps">
|
|
<Button label="Close" @click="stopTable(slotProps.data.id)"/>
|
|
</template>
|
|
</Column>
|
|
</DataTable>
|
|
</template>
|
|
</Card>
|
|
|
|
<Card class="ActiveTables">
|
|
<template #title>
|
|
<h2>All Tables</h2>
|
|
</template>
|
|
|
|
<template #content>
|
|
<DataTable class="ATTables" style="" :exportable="false" :value="allTables">
|
|
<Column field="table_name" header="Table Name" />
|
|
<Column field="table_link" header="Table Link" />
|
|
<Column header="Close">
|
|
<template #body="slotProps">
|
|
<Button label="Start" @click="startTable(slotProps.data.id)" />
|
|
</template>
|
|
</Column>
|
|
</DataTable>
|
|
<div class="button-box flex justify-content-end">
|
|
<Button label="New Table"/>
|
|
</div>
|
|
</template>
|
|
</Card>
|
|
</template>
|