71 lines
1.6 KiB
Vue
71 lines
1.6 KiB
Vue
<template>
|
|
<v-table>
|
|
<thead>
|
|
<tr>
|
|
<th class="text-left">ID</th>
|
|
<th class="text-left">Character</th>
|
|
<th class="text-left">Role</th>
|
|
<th class="text-left">Player</th>
|
|
<th class="text-left">Status</th>
|
|
<th class="text-left">Last Game</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="character in characters.data">
|
|
<td>
|
|
<a v-bind:href="`/#/characters/${character.id}`">{{ character.id }}</a>
|
|
</td>
|
|
<td>
|
|
<a v-bind:href="`/#/characters/${character.id}`">{{ character.characterName }}</a>
|
|
</td>
|
|
<td>{{ character.role }}</td>
|
|
<td>{{ character.playerName }}</td>
|
|
<td>{{ character.status }}</td>
|
|
<td>{{ character.lastGame }}</td>
|
|
<td>0</td>
|
|
</tr>
|
|
</tbody>
|
|
</v-table>
|
|
<button @click="previousPage()">pp</button>
|
|
<button @click="nextPage()">np</button>
|
|
</template>
|
|
|
|
<style type="text/css"></style>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, onCreated, ref } from 'vue'
|
|
import { Game, useGameStore } from '../store/gamestore'
|
|
import axios from 'axios'
|
|
|
|
let page = 0
|
|
let count = 10
|
|
const characters = ref({
|
|
data: [
|
|
{ id: 1, name: 'test', player: 'test player', status: 'active', lastGame: 0 },
|
|
{ id: 1, name: 'test', player: 'test player', status: 'active', lastGame: 0 }
|
|
]
|
|
})
|
|
|
|
async function loadData() {
|
|
characters.value = await axios.post('/api/character', {
|
|
page: `${page}`,
|
|
count: `${count}`,
|
|
orderBy: 'id'
|
|
})
|
|
}
|
|
|
|
function previousPage() {
|
|
page--
|
|
loadData()
|
|
}
|
|
|
|
function nextPage() {
|
|
page++
|
|
loadData()
|
|
}
|
|
|
|
onMounted(async () => {
|
|
loadData()
|
|
})
|
|
</script>
|