WIP edit translations

src/App.vue

@@ -23,6 +23,7 @@ function toggleLeftDrawer() {
           <span v-if="router.currentRoute.value.name == 'games'">Les jeux du moment</span>
           <span v-if="router.currentRoute.value.name == 'record-play'">Enregistre ta partie</span>
           <span v-if="router.currentRoute.value.name == 'about'">A propos</span>
+          <span v-if="router.currentRoute.value.name == 'translations'">Modifier traductions</span>
         </q-toolbar-title>
       </q-toolbar>
     </q-header>

src/router.ts

@@ -4,6 +4,7 @@ import AboutView from '@/views/AboutView.vue'
 import LogPlayView from '@/views/RecordPlayView.vue'
 import SuggestView from '@/views/SuggestView.vue'
 import GamesView from '@/views/GamesView.vue'
+import TranslationsView from '@/views/TranslationsView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -32,6 +33,11 @@ const router = createRouter({
       path: '/a-propos',
       name: 'about',
       component: AboutView
+    },
+    {
+      path: '/traductions',
+      name: 'translations',
+      component: TranslationsView
     }
   ]
 })

src/views/AboutView.vue

@@ -21,6 +21,9 @@ function resync() {
     .then(() => {
       resyncLog.value?.push({ message: 'Done', icon: 'done' })
     })
+    .catch((error) => {
+      resyncLog.value?.push({ message: `Failed with ${error}`, icon: 'error' })
+    })
     .finally(() => {
       resyncing.value = false
     })
@@ -86,7 +89,14 @@ function resync() {
     Les catégories et mécaniques de chaque jeu sont écrites en anglais sur le site de Board Game
     Geek. Pour changer la traduction c'est par ici :
   </p>
-  <q-btn label="Modifier les traductions" no-caps color="primary" unelevated :disable="!passCode" />
+  <q-btn
+    label="Modifier les traductions"
+    no-caps
+    color="primary"
+    unelevated
+    :disable="!passCode"
+    :to="{ name: 'translations' }"
+  />
 
   <p class="q-my-sm">
     Pour extraire toutes les informations présentes sur l'application c'est par ici. Ceci est utile

src/views/TranslationsView.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { inject, onBeforeMount, ref, type Ref } from 'vue'
+import type { Database } from '@/database'
+
+const db: Database = inject('db')!
+
+const categories: Ref<Map<string, string | null>> = ref(new Map([['a', ref('b')]]))
+</script>
+
+<template>
+  <p class="text-h5">Catégories</p>
+  <template v-for="[en, fr] in categories" :key="en">
+    {{ en }} = <input v-model="fr" /><br />
+  </template>
+</template>
+
+<style scoped></style>