Add images page

Author: JanisV

frontend/src/App.vue

@@ -6,6 +6,7 @@ import FileUploaderView from '@/components/FileUploaderView.vue'
 import CoinListView from "@/components/CoinListView.vue";
 import AboutView from "@/components/AboutView.vue";
 import CoinView from "@/components/CoinView.vue";
+import ImagesView from "@/components/ImagesView.vue";
 
 const {isLoading,
     error,
@@ -84,6 +85,9 @@ const handleFileUpload = async (file) => {
       <div v-if="route.name === 'coin' && isOpened">
         <CoinView v-model:title="title" />
       </div>
+      <div v-if="route.name === 'images' && isOpened">
+        <ImagesView />
+      </div>
       <div v-if="route.name === 'about'">
         <AboutView v-model:title="title" />
       </div>

frontend/src/components/CoinListView.vue

@@ -1,6 +1,7 @@
 <script setup>
 import {defineProps, onMounted, onUnmounted} from "vue";
 import {useRouter} from "vue-router";
+import {arrayBufferToBase64} from "@/utils/bytes2img.js"
 
 const router = useRouter()
 
@@ -27,17 +28,6 @@ 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}`;
-}
-
 function generateDescription( coin_data ) {
   let desc = [];
   if (coin_data[4])

frontend/src/components/CoinView.vue

@@ -1,8 +1,10 @@
 <script setup>
 import {defineProps, onMounted, onUnmounted, ref} from "vue";
-import {useRoute} from "vue-router";
+import {useRoute, useRouter} from "vue-router";
 import {useSQLite} from "@/composables/useSQLite.js";
+import {arrayBufferToBase64} from "@/utils/bytes2img.js"
 
+const router = useRouter()
 const route = useRoute()
 
 const {isLoading,
@@ -43,22 +45,15 @@ onMounted(async () => {
 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" />
+  <v-img :src="arrayBufferToBase64(coinData[infoFieldIndex('obverseimg.image')])"
+         :width="200"
+         @click="router.push('/images/' + route.params['id'])" />
+  <v-img :src="arrayBufferToBase64(coinData[infoFieldIndex('reverseimg.image')])"
+         :width="200"
+         @click="router.push('/images/' + route.params['id'])" />
   {{ coinData[infoFieldIndex('status')] }}
   {{ coinData[infoFieldIndex('country')] }}
   {{ coinData[infoFieldIndex('type')] }}

frontend/src/components/ImagesView.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { onMounted, ref} from "vue";
+import {useRoute} from "vue-router";
+import {useSQLite} from "@/composables/useSQLite.js";
+import {arrayBufferToBase64} from "@/utils/bytes2img.js"
+
+const route = useRoute()
+
+const {isLoading,
+    error,
+    status,
+    openDatabase,
+    executeQuery} = useSQLite()
+
+const images = ref([])
+
+onMounted(async () => {
+  const id = route.params['id']
+  const sql = `SELECT obverseimg.image, reverseimg.image, edgeimg.image, photo1.image, photo2.image, photo3.image, photo4.image FROM coins
+        LEFT JOIN photos AS obverseimg ON coins.obverseimg = obverseimg.id
+        LEFT JOIN photos AS reverseimg ON coins.reverseimg = reverseimg.id
+        LEFT JOIN photos AS edgeimg ON coins.edgeimg = edgeimg.id
+        LEFT JOIN photos AS photo1 ON coins.photo1 = photo1.id
+        LEFT JOIN photos AS photo2 ON coins.photo2 = photo2.id
+        LEFT JOIN photos AS photo3 ON coins.photo3 = photo3.id
+        LEFT JOIN photos AS photo4 ON coins.photo4 = photo4.id
+        WHERE coins.id=?`
+  const results = await executeQuery(sql, [id,])
+  images.value = results[0]
+})
+</script>
+
+<template>
+  <div v-for="image in images">
+    <v-img :src="arrayBufferToBase64(image)" width="100%" />
+  </div>
+</template>
+
+<style scoped>
+
+</style>

frontend/src/router/index.js

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

frontend/src/utils/bytes2img.js

@@ -0,0 +1,10 @@
+export 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}`;
+}