From 0b46fb152cf4ed7d54959c8199f9fcc93c26c461 Mon Sep 17 00:00:00 2001
From: jedi <git@m.j3d1.de>
Date: Wed, 1 Nov 2023 01:39:58 +0100
Subject: [PATCH] stash

---
 .../src/components/AuthenticatedImage.vue     | 55 +++++++++++++++++++
 frontend/src/store.js                         |  4 ++
 frontend/src/views/InventoryDetail.vue        | 34 ++++++++++++
 3 files changed, 93 insertions(+)
 create mode 100644 frontend/src/components/AuthenticatedImage.vue

diff --git a/frontend/src/components/AuthenticatedImage.vue b/frontend/src/components/AuthenticatedImage.vue
new file mode 100644
index 0000000..84e08b9
--- /dev/null
+++ b/frontend/src/components/AuthenticatedImage.vue
@@ -0,0 +1,55 @@
+<template>
+    <div>
+        <!--img src=""-->
+        data:{{ image_data }}<br>
+        owner:{{ owner }}<br>
+        src:{{ src }}<br>
+        servers:{{ servers }}
+    </div>
+</template>
+
+<style scoped>
+img {
+    width: 190px;
+    height: 107px;
+    object-fit: contain;
+}
+</style>
+
+<script>
+import {mapActions, mapGetters} from "vuex";
+
+export default {
+    name: "AuthenticatedImage",
+    props: {
+        src: {
+            type: String,
+            required: true
+        },
+        owner: {
+            type: String,
+            required: true
+        }
+    },
+    data() {
+        return {
+            image_data: "",
+            servers: []
+        }
+    },
+    computed: {
+        ...mapGetters(["signAuth"])
+    },
+    methods: {
+        ...mapActions(["getFriendServers"])
+    },
+    async mounted() {
+        try {
+            this.servers = await this.getFriendServers({username: this.owner});
+            this.image_data = await this.servers.get(this.signAuth, this.src);
+        } catch (e) {
+            console.log(e);
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/frontend/src/store.js b/frontend/src/store.js
index 584f6e6..5ebb873 100644
--- a/frontend/src/store.js
+++ b/frontend/src/store.js
@@ -265,6 +265,10 @@ export default createStore({
             state.last_load.files = Date.now()
             return data
         },
+        async fetchFilesByItem({state, commit, dispatch, getters}, {id}) {
+            const servers = await dispatch('getHomeServers')
+            return await servers.get(getters.signAuth, '/api/item_files/' + id + '/')
+        },
         async pushFile({state, dispatch, getters}, {item_id, file}) {
             const servers = await dispatch('getHomeServers')
             const data = await servers.post(getters.signAuth, '/api/item_files/' + item_id + '/', file)
diff --git a/frontend/src/views/InventoryDetail.vue b/frontend/src/views/InventoryDetail.vue
index 2c9e1b0..3bfd9fa 100644
--- a/frontend/src/views/InventoryDetail.vue
+++ b/frontend/src/views/InventoryDetail.vue
@@ -26,6 +26,25 @@
                                 <label for="quantity" class="form-label">Quantity</label>
                                 {{ item.owned_quantity }}
                             </div>
+                            <!-- TODO -->
+                            <!--div class="mb-3">
+                                <label for="image" class="form-label">Image</label>
+                                <input type="text" class="form-control" id="image" name="image"
+                                       placeholder="Enter image" v-model="item.image">
+                            </div-->
+                            <div class="mb-3">
+                                <label for="image" class="form-label">Image</label>
+                                <div>
+                                    <img v-for="file in files" :key="file.id" :alt="file.name"
+                                         :src="'https://toolshed.j3d1.de'+file.name" class="img-thumbnail border-info">
+                                    <!-- TODO  replace dirty hack with proper solution -->
+                                </div>
+                                <div>
+                                    <authenticated-image v-for="file in files" :key="file.id" :src="file.name"
+                                                         :owner="file.owner"></authenticated-image>
+                                </div>
+
+                            </div>
                         </div>
                     </div>
                     <div class="card">
@@ -50,14 +69,21 @@
 import * as BIcons from "bootstrap-icons-vue";
 import BaseLayout from "@/components/BaseLayout.vue";
 import {mapActions, mapGetters} from "vuex";
+import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
 
 export default {
     name: "InventoryDetail",
     components: {
+        AuthenticatedImage,
         PropertyField, TagField,
         BaseLayout,
         ...BIcons
     },
+    data() {
+        return {
+            files: []
+        }
+    },
     props: {
         id: {
             type: String,
@@ -75,6 +101,14 @@ export default {
     },
     async mounted() {
         await this.fetchInventoryItems()
+        console.log(this.id, typeof this.id)
+        const files = await this.fetchFilesByItem({id: this.id})
+        this.files = files.map(file => {
+            return {
+                ...file,
+                owner: this.item.owner
+            }
+        })
     }
 }
 </script>