From c5023202fcede67deb0adb1a5d8277b242688865 Mon Sep 17 00:00:00 2001
From: jedi <git@m.j3d1.de>
Date: Sun, 7 Jan 2024 21:39:33 +0100
Subject: [PATCH] use AuthenticatedImage component in Items view

---
 web/src/components/AuthenticatedImage.vue | 43 +++++++++++++++++++++++
 web/src/components/Lightbox.vue           | 12 +++----
 web/src/views/Items.vue                   | 11 +++---
 3 files changed, 52 insertions(+), 14 deletions(-)
 create mode 100644 web/src/components/AuthenticatedImage.vue

diff --git a/web/src/components/AuthenticatedImage.vue b/web/src/components/AuthenticatedImage.vue
new file mode 100644
index 0000000..921b562
--- /dev/null
+++ b/web/src/components/AuthenticatedImage.vue
@@ -0,0 +1,43 @@
+<template>
+    <img :src="image_data" :alt="src">
+</template>
+
+<style scoped>
+</style>
+
+<script>
+
+import {mapActions} from "vuex";
+
+export default {
+    name: "AuthenticatedImage",
+    props: {
+        src: {
+            type: String,
+            required: true
+        },
+    },
+    data() {
+        return {
+            image_data: "",
+            servers: []
+        }
+    },
+    methods: {
+        ...mapActions(['fetchImage']),
+        loadImage() {
+            this.fetchImage(this.src).then((response) => {
+                const mime_type = response.headers.get("content-type");
+                response.arrayBuffer().then((buf) => {
+                    const base64 = btoa(new Uint8Array(buf)
+                        .reduce((data, byte) => data + String.fromCharCode(byte), ""));
+                    this.image_data = "data:" + mime_type + ";base64," + base64;
+                });
+            })
+        }
+    },
+    mounted() {
+        this.loadImage();
+    }
+}
+</script>
\ No newline at end of file
diff --git a/web/src/components/Lightbox.vue b/web/src/components/Lightbox.vue
index ac159f4..2dae0de 100644
--- a/web/src/components/Lightbox.vue
+++ b/web/src/components/Lightbox.vue
@@ -1,12 +1,12 @@
 <template>
     <Modal @close="$emit('close')">
         <template #body>
-            <img
+            <AuthenticatedImage
                 class="img-fluid rounded mx-auto d-block mb-3 w-100"
-                :src="`${baseUrl}/1/images/${file}`"
+                :src="`/media/2/${file}/`"
                 alt="Image not available."
                 id="lightbox-image"
-            >
+            />
         </template>
         <template #buttons>
             <button type="button" class="btn btn-secondary" @click="$emit('close')">Cancel</button>
@@ -16,15 +16,11 @@
 
 <script>
 import Modal from '@/components/Modal';
-import config from '../config';
 
 export default {
     name: 'Lightbox',
     components: {Modal},
-    props: ['file'],
-    data: () => ({
-        baseUrl: config.service.url,
-    }),
+    props: ['file']
 };
 </script>
 
diff --git a/web/src/views/Items.vue b/web/src/views/Items.vue
index bfe852d..9ed1474 100644
--- a/web/src/views/Items.vue
+++ b/web/src/views/Items.vue
@@ -44,10 +44,10 @@
             v-slot="{ item }"
             @itemActivated="openLightboxModalWith($event)"
         >
-            <img
-                :src="`${baseUrl}/1/thumbs/${item.file}`"
+            <AuthenticatedImage v-if="item.file"
+                :src="`/media/2/256/${item.file}/`"
                 class="card-img-top img-fluid"
-            >
+            />
             <div class="card-body">
                 <h6 class="card-title">{{ item.description }}</h6>
                 <h6 class="card-subtitle text-secondary">uid: {{ item.uid }} box: {{ item.box }}</h6>
@@ -75,17 +75,16 @@ import Cards from '@/components/Cards';
 import Modal from '@/components/Modal';
 import EditItem from '@/components/EditItem';
 import {mapActions, mapState} from 'vuex';
-import config from '../config';
 import Lightbox from '../components/Lightbox';
+import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
 
 export default {
     name: 'Items',
     data: () => ({
         lightboxItem: null,
         editingItem: null,
-        baseUrl: config.service.url,
     }),
-    components: {Lightbox, Table, Cards, Modal, EditItem},
+    components: {AuthenticatedImage, Lightbox, Table, Cards, Modal, EditItem},
     computed: mapState(['loadedItems', 'layout']),
     methods: {
         ...mapActions(['deleteItem', 'markItemReturned']),