Show coins list

Author: JanisV

frontend/src/App.vue

@@ -5,6 +5,7 @@ import FileUploader from './components/FileUploader.vue'
 import CoinList from "@/components/CoinList.vue";
 
 const selectedFile = ref(null)
+const coinsList = ref([])
 
 const db = ref(null);
 const status = ref('');
@@ -38,11 +39,16 @@ const handleFileUpload = async (file) => {
       // Load database
       db.value = new SQL.Database(uint8Array);
 
-      const result = db.value.exec(`SELECT COUNT(*) FROM coins`);
-      console.log(`Coins in database: ${result[0].values[0][0]}`);
-
       status.value = `Database loaded successfully: ${file.name} (${(file.size / 1024 / 1024).toFixed(2)} MB)`;
 
+      const coins = db.value.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
+      `);
+      coinsList.value = coins.length > 0
+        ? coins[0].values
+        : [];
+
       selectedFile.value = file;
     } catch (err) {
       console.error('Error loading database:', err);
@@ -65,7 +71,7 @@ const handleFileUpload = async (file) => {
       <p>Your file not will be uploaded to the internet. You can disable internet connection.</p>
     </div>
     <div v-else class="file-view">
-      <CoinList :file_name="selectedFile.name" />
+      <CoinList :file_name="selectedFile.name" :coins_list="coinsList" />
     </div>
     <div v-if="status" class="status">{{ status }}</div>
   </main>

frontend/src/components/CoinList.vue

@@ -6,11 +6,63 @@ defineProps({
     type: String,
     required: true,
   },
+  coins_list: {
+    type: Array,
+    required: true,
+  },
 });
+
+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 ] );
+  }
+//  return window.btoa( binary );
+  const base64String = window.btoa( binary );
+  return `data:image/png;base64,${base64String}`;
+}
+
+function generateDescription( coin_data ) {
+  let desc = [];
+  if (coin_data[4])
+    desc.push(coin_data[4]);
+  if (coin_data[5] || coin_data[6])
+    desc.push(coin_data[5] + ' ' + coin_data[6]);
+  if (coin_data[10])
+    desc.push(coin_data[10]);
+  if (coin_data[7]) {
+    desc.push(coin_data[7]);
+  }
+  if (coin_data[8])
+    desc.push(coin_data[8]);
+  if (coin_data[9])
+    desc.push(coin_data[9]);
+
+  return desc;
+}
 </script>
 
 <template>
   <h2 class="file-name">{{ file_name }}</h2>
+
+  <div>
+    <table>
+      <tr v-for="coin_data in coins_list">
+        <td class="image" :data-id="coin_data[0]"><img :src="arrayBufferToBase64(coin_data[1])"></td>
+        <td class="data">
+          <div class="title">
+            {{ coin_data[2] }}&nbsp;
+          </div>
+          <div class="description">
+            {{ generateDescription(coin_data).join(', ') }}&nbsp;
+          </div>
+        </td>
+        <td>{{ coin_data[3] }}</td>
+      </tr>
+    </table>
+  </div>
 </template>
 
 <style scoped>