Add coin info page

Author: JanisV

frontend/src/App.vue

@@ -1,10 +1,11 @@
 <script setup>
 import {ref} from 'vue'
 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 AboutView from "@/components/AboutView.vue";
-import {useSQLite} from "@/composables/useSQLite.js";
+import CoinView from "@/components/CoinView.vue";
 
 const {isLoading,
     error,
@@ -32,7 +33,11 @@ const handleFileUpload = async (file) => {
   isOpened = true;
   await router.replace('/')
 
-  coinsList.value = await executeQuery("")
+  const sql = `
+      SELECT coins.id, images.image, title, status, subjectshort, value, unit, year, mintmark, series, country
+      FROM coins LEFT OUTER JOIN images ON images.id = coins.image
+    `
+  coinsList.value = await executeQuery(sql)
 }
 </script>
 
@@ -76,6 +81,9 @@ const handleFileUpload = async (file) => {
       <div v-if="route.name === 'home' && isOpened">
         <CoinListView v-model:title="title" :file_name="selectedFile.name" :coins_list="coinsList" />
       </div>
+      <div v-if="route.name === 'coin' && isOpened">
+        <CoinView v-model:title="title" />
+      </div>
       <div v-if="route.name === 'about'">
         <AboutView v-model:title="title" />
       </div>

frontend/src/components/CoinListView.vue

@@ -1,5 +1,8 @@
 <script setup>
 import {defineProps, onMounted, onUnmounted} from "vue";
+import {useRouter} from "vue-router";
+
+const router = useRouter()
 
 const props = defineProps({
   title: String,
@@ -63,6 +66,7 @@ function generateDescription( coin_data ) {
         :key="coin[0]"
         :subtitle="generateDescription(coin).join(', ')"
         :title="coin[2]"
+        @click="router.push('/coin/' + coin[0])"
       >
         <template v-slot:prepend>
           <v-img :src="arrayBufferToBase64(coin[1])" :width="100" />

frontend/src/components/CoinView.vue

@@ -0,0 +1,72 @@
+<script setup>
+import {defineProps, onMounted, onUnmounted, ref} from "vue";
+import {useRoute} from "vue-router";
+import {useSQLite} from "@/composables/useSQLite.js";
+
+const route = useRoute()
+
+const {isLoading,
+    error,
+    status,
+    openDatabase,
+    executeQuery} = useSQLite()
+
+const props = defineProps({
+  title: String,
+});
+
+const emit = defineEmits(['update:title']);
+let oldTitle = null;
+const coinData = ref([])
+
+const infoFields = ['coins.title', 'obverseimg.image', 'reverseimg.image',
+    'status', 'region', 'country', 'period', 'ruler', 'value', 'unit', 'type',
+    'series', 'subjectshort', 'issuedate', 'year', 'mintage', 'material',
+    'mint', 'mintmark', 'features', 'subject', 'grade', 'paydate', 'payprice',
+    'storage', 'condition', 'quantity'];
+function infoFieldIndex(field) {
+  return infoFields.findIndex(element => element === field);
+}
+
+onMounted(async () => {
+  const id = route.params['id']
+  const sql = `SELECT ${ infoFields.join(',') } FROM coins
+      LEFT JOIN photos AS obverseimg ON coins.obverseimg = obverseimg.id
+      LEFT JOIN photos AS reverseimg ON coins.reverseimg = reverseimg.id
+      WHERE coins.id=?`
+  const results = await executeQuery(sql, [id,])
+  coinData.value = results[0]
+
+  oldTitle = props.title;
+  emit('update:title', coinData.value[0]);
+})
+onUnmounted(async () => {
+  emit('update:title', oldTitle);
+})
+
+function arrayBufferToBase64( buffer ) {
+  let binary = '';
+  const bytes = new Uint8Array( buffer );
+  const len = bytes.byteLength;
+  for (let i = 0; i < len; i++) {
+    binary += String.fromCharCode( bytes[ i ] );
+  }
+  const base64String = window.btoa( binary );
+  return `data:image/png;base64,${base64String}`;
+}
+</script>
+
+<template>
+  <v-img :src="arrayBufferToBase64(coinData[infoFieldIndex('obverseimg.image')])" :width="200" />
+  <v-img :src="arrayBufferToBase64(coinData[infoFieldIndex('reverseimg.image')])" :width="200" />
+  {{ coinData[infoFieldIndex('status')] }}
+  {{ coinData[infoFieldIndex('country')] }}
+  {{ coinData[infoFieldIndex('type')] }}
+
+  {{ coinData[infoFieldIndex('features')] }}
+  {{ coinData[infoFieldIndex('subject')] }}
+</template>
+
+<style scoped>
+
+</style>

frontend/src/composables/useSQLite.js

@@ -88,10 +88,7 @@ export function useSQLite() {
     error.value = null
     status.value = 'Executing query...';
 
-    const result = db.exec(`
-      SELECT coins.id, images.image, title, status, subjectshort, value, unit, year, mintmark, series, country
-      FROM coins LEFT OUTER JOIN images on images.id = coins.image
-    `);
+    const result = db.exec(sql, params);
     console.log(result[0].values)
     const results = result.length > 0
       ? result[0].values

frontend/src/router/index.js

@@ -5,6 +5,10 @@ const routes = [
     path: '/',
     name: 'home',
   },
+  {
+    path: '/coin/:id',
+    name: 'coin',
+  },
   {
     path: '/open',
     name: 'open',