foundry-manager/src/TableManager.vue

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

import axios from 'axios'
import Button from 'primevue/button'
import DataTable from 'primevue/datatable'
import Column from 'primevue/column'
import Card from 'primevue/card'
import SplitButton from 'primevue/splitbutton'
import ConfirmDialog from 'primevue/confirmdialog'
import { useConfirm } from 'primevue/useconfirm'

const router = useRouter()
const allTables = ref()
const activeTables = ref()
const confirm = useConfirm()

onMounted(() => {
  activeTables.value = []
  loadTables()
})

async function loadTables(): Promise<void> {
  return axios.get('/api/tables/all')
    .then((resp) => (allTables.value = resp.data))
    .then(() => axios.get('/api/tables/active'))
    .then((resp) => (activeTables.value = resp.data))
}

function startTable(tableId: number) {
  axios.post(`/api/tables/${tableId}:start`, { "hard": "False" })
    .then(() => loadTables())
}

function stopTable(tableId: number) {
  axios.post(`/api/tables/${tableId}:stop`)
    .then(() => loadTables())
}

function deleteTable(tableId: number) {
  axios
    .delete(`/api/tables/${tableId}`)
    .then(() => loadTables())
}

function buildButtonModel(table: any) {
  return [
    {
      label: 'Edit',
      command: () => {
        router.push({ name: 'edit', params: { id: table.id } })
      },
    },
    { label: 'Restart' },
    {
      label: 'Hard Start',
      command: () => {
        axios.post(`/api/tables/${table.id}:start`, { "hard": "True" }).then(() => loadTables())
      }
    },
    { separator: true },
    {
      label: 'Delete',
      command: () => {
        confirm.require({
          header: `Delete ${table.table_name}?`,
          message: "This will delete the table and all of it's data",
          accept: () => { deleteTable(table.id) },
        })
      },
    },
  ]
}

</script>

<style>
@import 'primeflex/primeflex.css';

.ActiveTables {
  margin: 20px;

  h2 {
    padding-left: 15px;
  }

  .Tables {
    padding-left: 50px;
  }
}

.AllTables {
  margin: 20px;

  h2 {
    padding-left: 15px;
  }

  .Tables {
    padding-left: 50px;
  }

  .button-box {
    padding-top: 25px;
    padding-bottom: 10px;
  }
}
</style>

<template>
  <ConfirmDialog></ConfirmDialog>

  <Card class="ActiveTables">
    <template #title>
      <h2>Active Tables</h2>
    </template>

    <template #content>
      <DataTable class="Tables" :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">
              http://localhost/{{ 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="AllTables">
    <template #title>
      <h2>All Tables</h2>
    </template>

    <template #content>
      <DataTable class="Tables" :value="allTables">
        <Column field="table_name" header="Table Name"> </Column>
        <Column field="table_link" header="Table Link">
          <template #body="slotProps">
            <a v-if="slotProps.data.active" :href="'/' + slotProps.data.table_link">
              http://localhost/{{ slotProps.data.table_link }}
            </a>
            <div v-if="!slotProps.data.active">
              http://localhost/{{ slotProps.data.table_link }}
            </div>
          </template>
        </Column>
        <Column header="Close">
          <template #body="slotProps">
            <div class="flex flex-row">
              <span class="flex"></span>
              <SplitButton label="Start" @click="startTable(slotProps.data.id)"
                :model="buildButtonModel(slotProps.data)" />
            </div>
          </template>
        </Column>
      </DataTable>
      <div class="button-box flex justify-content-end">
        <router-link to="/new">
          <Button label="New Table"" />
        </router-link>
      </div>
    </template>
  </Card>
</template>