Add settings page

Author: JanisV

frontend/package-lock.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@mdi/font": "^7.4.47",
+    "pinia": "^3.0.4",
     "sql.js": "^1.13.0",
     "vue": "^3.5.25",
     "vue-router": "^4.6.4",

frontend/package.json

@@ -4,6 +4,7 @@ import {useRoute, useRouter} from 'vue-router'
 import {useSQLite} from "@/composables/useSQLite.js";
 import FileUploaderView from '@/components/FileUploaderView.vue'
 import CoinListView from "@/components/CoinListView.vue";
+import SettingsView from "@/components/SettingsView.vue";
 import AboutView from "@/components/AboutView.vue";
 import CoinView from "@/components/CoinView.vue";
 import ImagesView from "@/components/ImagesView.vue";
@@ -69,6 +70,13 @@ const handleFileUpload = async (file) => {
           @click="router.push('/open'); drawer = false"
           :active="route.name === 'open'"
         ></v-list-item>
+        <v-list-item
+          prepend-icon="mdi-cog"
+          title="Settings"
+          value="settings"
+          @click="router.push('/settings'); drawer = false"
+          :active="route.name === 'settings'"
+        ></v-list-item>
         <v-list-item
           prepend-icon="mdi-information"
           title="About"
@@ -89,6 +97,7 @@ const handleFileUpload = async (file) => {
       <CoinView v-if="route.name === 'coin' && isOpened"
         v-model:title="title" />
       <ImagesView v-if="route.name === 'images' && isOpened" />
+      <SettingsView v-model:title="title" v-if="route.name === 'settings'" />
       <AboutView v-model:title="title" v-if="route.name === 'about'" />
       <div v-if="status" class="status">{{ status }}</div>
     </v-main>

frontend/src/App.vue

@@ -0,0 +1,43 @@
+<script setup>
+import {onMounted, onUnmounted} from "vue";
+
+const props = defineProps({
+  title: String,
+});
+const emit = defineEmits(['update:title']);
+let oldTitle = null;
+
+onMounted(async () => {
+  oldTitle = props.title;
+  emit('update:title', 'Settings');
+})
+onUnmounted(async () => {
+  emit('update:title', oldTitle);
+})
+</script>
+
+<template>
+  <v-container>
+    <v-list>
+      <v-list-item>
+        <v-btn-toggle
+          rounded="xl"
+          border
+        >
+          <v-btn icon="mdi-weather-night"></v-btn>
+          <v-btn icon="mdi-brightness-auto"></v-btn>
+          <v-btn icon="mdi-weather-sunny"></v-btn>
+        </v-btn-toggle>
+      </v-list-item>
+      <v-list-item>
+        <v-select
+          :items="['English',]"
+        ></v-select>
+      </v-list-item>
+    </v-list>
+  </v-container>
+</template>
+
+<style scoped>
+
+</style>

frontend/src/components/SettingsView.vue

@@ -6,19 +6,23 @@ import { createApp } from 'vue'
 // Vuetify
 import 'vuetify/styles'
 import { createVuetify } from 'vuetify'
+import { createPinia } from 'pinia'
 import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'
 
 // Components
 import App from './App.vue'
 import router from './router'
 
+const pinia = createPinia()
+
 const vuetify = createVuetify({
   components,
   directives,
 })
 
 const app = createApp(App)
+app.use(pinia)
 app.use(router)
 app.use(vuetify)
 app.mount('#app')

frontend/src/main.js

@@ -17,6 +17,10 @@ const routes = [
     path: '/open',
     name: 'open',
   },
+  {
+    path: '/settings',
+    name: 'settings',
+  },
   {
     path: '/about',
     name: 'about',