From b411065751644cf6b0a53c6b3bd1069197c7cd49 Mon Sep 17 00:00:00 2001
From: "jmosrael@gmail.com" <I4mmrc()w3>
Date: Sun, 5 May 2024 00:10:41 -0700
Subject: [PATCH] actually add the character list

---
 backend/src/app.ts                  |  3 +-
 frontend/src/vues/CharacterList.vue | 70 +++++++++++++++++++++++++++++
 2 files changed, 72 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/vues/CharacterList.vue

diff --git a/backend/src/app.ts b/backend/src/app.ts
index 737654b..f3009f4 100644
--- a/backend/src/app.ts
+++ b/backend/src/app.ts
@@ -18,7 +18,8 @@ const Character = sequelize.define(
     characterName: { type: DataTypes.TEXT },
     playerName: { type: DataTypes.TEXT },
     role: { type: DataTypes.TEXT },
-    creationDate: { type: DataTypes.INTEGER }
+    creationDate: { type: DataTypes.INTEGER },
+    status: { type: DataTypes.TEXT }
   },
   { timestamps: false }
 )
diff --git a/frontend/src/vues/CharacterList.vue b/frontend/src/vues/CharacterList.vue
new file mode 100644
index 0000000..fb1534d
--- /dev/null
+++ b/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>