stash

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>

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)

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>