actually add the character list

frontend/src/vues/CharacterList.vue

@@ -0,0 +1,70 @@
+<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>