stash

2023-11-29 23:42:04 +01:00 · 2023-11-29 23:42:04 +01:00 · dd5c8e3d57
commit dd5c8e3d57
parent ec139531f2
13 changed files with 506 additions and 52 deletions
--- a/frontend/src/components/AuthenticatedImage.vue
+++ b/frontend/src/components/AuthenticatedImage.vue
@ -1,5 +1,5 @@
 <template>
-    <img :src="image_data" :alt="owner + ':' + src"/>
+    <img :src="image_data" :title="owner + ':' + src"/>
 </template>

 <style scoped>
--- a/frontend/src/components/CombinedFileField.vue
+++ b/frontend/src/components/CombinedFileField.vue
@ -12,28 +12,48 @@
        </ul>
        <hr>
        <div style="position: relative;">
-            <authenticated-image v-for="file in only_images(item_files).filter(file => file.owner)" :key="file.id"
-                                 :owner="file.owner" :src="file.name" class="img-thumbnail"/>
-            <img v-for="file in only_images(item_files).filter(file => file.data)" :key="file.id" :alt="file.name"
-                 :src="'data:' + file.mime_type + ';base64,' + file.data" class="img-thumbnail border-info">
-            <fs-file-source @input="addFiles">
-                <div class="img-thumbnail btn btn-outline-primary">
-                    <b-icon-upload></b-icon-upload>
-                </div>
-            </fs-file-source>
-            <camera-file-source @input="addFiles">
-                <div class="img-thumbnail btn btn-outline-primary">
-                    <b-icon-camera></b-icon-camera>
-                </div>
-            </camera-file-source>
+            <div class="image-list">
+                <deletable-wrapper v-for="file in only_images(item_files).filter(file => file.owner)" :key="file.id"
+                                   @delete="deleteFile(file)">
+                    <authenticated-image :src="file.name" :owner="file.owner" class="img-thumbnail"/>
+                </deletable-wrapper>
+                <deletable-wrapper v-for="file in only_images(item_files).filter(file => file.data)" :key="file.id"
+                                   @delete="deleteTempFile(file)">
+                    <img :alt="file.name" :src="'data:' + file.mime_type + ';base64,' + file.data"
+                         class="img-thumbnail border-info">
+                </deletable-wrapper>
+                <fs-file-source @input="addFiles">
+                    <div class="img-thumbnail btn btn-outline-primary">
+                        <b-icon-upload></b-icon-upload>
+                    </div>
+                </fs-file-source>
+                <camera-file-source @input="addFiles">
+                    <div class="img-thumbnail btn btn-outline-primary">
+                        <b-icon-camera></b-icon-camera>
+                    </div>
+                </camera-file-source>
+                <webcam-file-source @input="addFiles">
+                    <div class="img-thumbnail btn btn-outline-primary">
+                        <b-icon-camera-video></b-icon-camera-video>
+                    </div>
+                </webcam-file-source>
+                <webcam-file-source-legacy @input="addFiles">
+                    <div class="img-thumbnail btn btn-outline-primary">
+                        <b-icon-camera-video></b-icon-camera-video>
+                    </div>
+                </webcam-file-source-legacy>
+                <label class="img-thumbnail btn btn-outline-primary" for="file-dropdown">
+                    <b-icon-plus></b-icon-plus>
+                </label>
+            </div>
            <input type="checkbox" id="file-dropdown" class="invisible-input">
-            <label class="img-thumbnail btn btn-outline-primary" for="file-dropdown">
-                <b-icon-plus></b-icon-plus>
-            </label>
-            <div class="dropdown-menu">
-                <authenticated-image v-for="file in only_images(files)" :key="file.id" :src="file.name"
-                                     :owner="file.owner"
-                                     class="img-thumbnail"/>
+            <div class="dropdown-menu" v-if="only_images(files).length > 0">
+                <div class="image-list">
+                    <span v-for="file in only_images(files)" :key="file.id" @click="addExistingFiles([file])"
+                          style="cursor: pointer;">
+                        <authenticated-image :src="file.name" :owner="file.owner" class="img-thumbnail"/>
+                    </span>
+                </div>
            </div>
        </div>
    </drag-drop-file-source>
@ -51,6 +71,12 @@
    height: 100%;
 }

+.image-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+}
+
 .invisible-input {
    display: none;
 }
@ -59,11 +85,16 @@
    display: block;
 }

+.dropdown-menu:hover {
+    display: block;
+}
+
 #file-dropdown:checked ~ label {
    color: #fff;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
 }
+
 #file-dropdown:checked ~ label:hover {
    color: var(--bs-primary);
    background-color: initial;
@ -78,12 +109,18 @@ import DragDropFileSource from "@/components/DragDropFileSource.vue";
 import FsFileSource from "@/components/FsFileSource.vue";
 import CameraFileSource from "@/components/CameraFileSource.vue";
 import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
+import DeletableWrapper from "@/components/DeletableWrapper.vue";
+import WebcamFileSource from "@/components/WebcamFileSource.vue";
+import WebcamFileSourceLegacy from "@/components/WebcamFileSourceLegacy.vue";

 export default {
    name: "CombinedFileField",
    components: {
+        WebcamFileSource,
+        WebcamFileSourceLegacy,
        ...BIcons,
        AuthenticatedImage,
+        DeletableWrapper,
        DragDropFileSource,
        CameraFileSource,
        FsFileSource
@ -106,7 +143,7 @@ export default {
        ...mapState(["files"]),
    },
    methods: {
-        ...mapActions(["fetchFiles", "pushFile"]),
+        ...mapActions(["fetchFiles", "pushFile", "deleteItemFile"]),
        async uploadFiles(files) {
            const jobs = files.map(async file => {
                return await this.pushFile({
@ -114,22 +151,41 @@ export default {
                    item_id: this.item_id
                });
            });
-            const responses = await Promise.all(jobs);
-            return responses;
+            return await Promise.all(jobs);
        },
        addFiles(files) {
-            const newfiles = files.filter(file => !this.item_files.find(f => f.hash === file.hash));
-            if (newfiles.length === 0) {
+            console.log("add files", files);
+            const new_files = files.filter(file => !this.item_files.find(f => f.hash === file.hash));
+            if (new_files.length === 0) {
                console.log("no new files");
                return;
            }
            if (!this.create) {
-                this.uploadFiles(newfiles).then((uploaded) => {
+                this.uploadFiles(new_files).then((uploaded) => {
                    this.$emit("change", [...this.item_files, ...uploaded]);
                })
+            } else {
+                this.$emit("change", [...this.item_files, ...new_files]);
            }

        },
+        addExistingFiles(files) {
+            console.log("add existing files", files);
+            const new_files = files.filter(file => !this.item_files.find(f => f.id === file.id));
+            if (new_files.length === 0) {
+                console.log("no new files");
+                return;
+            }
+            this.$emit("change", [...this.item_files, ...new_files]);
+        },
+        deleteFile(file) {
+            this.deleteItemFile({item_id: this.item_id, file_id: file.id}).then(() => {
+                this.$emit("change", this.item_files.filter(f => f.id !== file.id));
+            });
+        },
+        deleteTempFile(file) {
+            this.$emit("change", this.item_files.filter(f => f.hash !== file.hash));
+        },
        only_images(files) {
            return files.filter(file => file.mime_type.startsWith("image/"));
        },
--- a/frontend/src/components/DeletableWrapper.vue
+++ b/frontend/src/components/DeletableWrapper.vue
@ -0,0 +1,36 @@
+<template>
+    <span style="position: relative; display: inline-block;">
+        <div class="delete-button">
+            <button class="btn btn-danger btn-sm" @click="triggerDelete">
+                <b-icon-trash></b-icon-trash>
+            </button>
+        </div>
+        <slot></slot>
+    </span>
+</template>
+
+<style scoped>
+.delete-button {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 1;
+}
+</style>
+
+<script>
+import * as BIcons from "bootstrap-icons-vue";
+
+export default {
+    name: "DeletableWrapper",
+    components: {
+        ...BIcons
+    },
+    emits: ["delete"],
+    methods: {
+        triggerDelete() {
+            this.$emit("delete");
+        }
+    }
+}
+</script>
--- a/frontend/src/components/Sidebar.vue
+++ b/frontend/src/components/Sidebar.vue
@ -21,6 +21,12 @@
                        <span class="align-middle">Friends</span>
                    </router-link>
                </li>
+                <li class="sidebar-item">
+                    <router-link to="/files" class="sidebar-link">
+                        <b-icon-folder class="bi-valign-middle"></b-icon-folder>
+                        <span class="align-middle">Files</span>
+                    </router-link>
+                </li>
                <li class="sidebar-item">
                    <router-link to="/admin" class="sidebar-link">
                        <b-icon-gear class="bi-valign-middle"></b-icon-gear>
--- a/frontend/src/components/WebcamFileSource.vue
+++ b/frontend/src/components/WebcamFileSource.vue
@ -0,0 +1,74 @@
+<template>
+    <div class="d-inline-block">
+        <label @click="show_modal = true">
+            <slot></slot>
+        </label>
+        <div class="modal">
+            <div class="modal-dialog modal-fullscreen">
+                <div class="modal-content">
+                    <select v-model="selectedCamera" v-on:change="openStream" class="form-select position-relative w-75 mx-auto mt-4" aria-label="Select Camera Source">
+                        <option disabled value="">Select Camera Source</option>
+                        <option v-for="camera in availableCameras" :key="camera.deviceId" :value="camera">
+                            {{ camera.label }}
+                        </option>
+                    </select>
+                    <video
+                        v-if="capturing"
+                        ref="video"
+                        class="img-fluid rounded mx-auto d-block mb-3 img-preview w-100"
+                    >
+                        Video stream not available.
+                    </video>
+                    <canvas ref="canvas" class="img-fluid d-none img-preview"/>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+
+</style>
+
+<script>
+export default {
+    name: "WebcamFileSource",
+    data: () => ({
+        show_modal: false,
+        availableCameras: [],
+        selectedCamera: undefined,
+        capturing: false,
+        streaming: false,
+        stream: undefined,
+        dataImage: undefined
+    }),
+    methods: {
+        async openStream() {
+            if (!this.capturing) {
+                this.capturing = true;
+                this.streaming = false;
+                this.stream = await navigator.mediaDevices.getUserMedia({video: {deviceId: this.selectedCamera.deviceId}, audio: false});
+                const {video} = this.$refs;
+                video.srcObject = this.stream;
+                video.play();
+                video.addEventListener('canplay', () => {
+                    this.streaming = true;
+                }, false);
+            }
+        },
+        async open() {
+            await navigator.mediaDevices.getUserMedia({video: true});
+            const devices = await navigator.mediaDevices.enumerateDevices();
+            this.availableCameras = devices.filter(device => device.kind === "videoinput");
+            if (this.availableCameras.length === 0) return;
+            if (this.availableCameras.length === 1) {
+                this.selectedCamera = this.availableCameras[0];
+                await this.openStream();
+            }
+        }
+    },
+    mounted() {
+        this.open();
+    }
+}
+</script>
--- a/frontend/src/components/WebcamFileSourceLegacy.vue
+++ b/frontend/src/components/WebcamFileSourceLegacy.vue
@ -0,0 +1,163 @@
+<template>
+    <div class="d-inline-block">
+        <label @click="show_modal = true">
+            <slot></slot>
+        </label>
+        <div class="modal" :class="{'d-block': show_modal}" tabindex="-1">
+            <div class="modal-dialog modal-fullscreen">
+                <div class="modal-content">
+            <img
+                v-if="!capturing"
+                class="img-fluid rounded mx-auto d-block mb-3"
+                :src="dataImage"
+                alt="Image not available."
+            />
+            <video
+                v-if="capturing"
+                ref="video"
+                class="img-fluid rounded mx-auto d-block mb-3"
+            >
+                Video stream not available.
+            </video>
+            <canvas ref="canvas" class="img-fluid d-none img-preview"/>
+            <div class="row" v-if="capturing && !streaming">
+                <div class="spinner-grow text-danger mx-auto" role="status">
+                    <span class="sr-only">Loading...</span>
+                </div>
+            </div>
+            <div class="row m-auto">
+                <button v-if="!capturing" class="btn my-2 ml-auto btn-secondary" @click="openStream()">
+                    <b-icon-camera></b-icon-camera>
+                </button>
+                <div v-if="capturing" class="btn-group my-2 ml-auto">
+                    <button class="btn btn-success" @click="captureVideoImage()">
+                        <b-icon-camera></b-icon-camera>&nbsp;Capture
+                    </button>
+                    <button
+                        class="btn"
+                        :class="(dataImage) ? 'btn-danger' : 'btn-secondary disabled'"
+                        @click="(dataImage) && closeStream()"
+                    >
+                        <b-icon-stop-fill></b-icon-stop-fill>&nbsp;Abort
+                    </button>
+                </div>
+                <select v-model="selectedCamera" class="form-select" aria-label="Select Camera Source"
+                        @change="chooseDevice(selectedCamera)">
+                    <option disabled value="">Select Camera Source</option>
+                    <option v-for="camera in availableCameras" :key="camera.deviceId" :value="camera">
+                        {{ camera.label }}
+                    </option>
+                </select>
+            </div>
+                    </div> </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {mapMutations} from 'vuex';
+import * as BIcons from "bootstrap-icons-vue";
+
+export default {
+    name: 'WebcamFileSourceLegacy',
+    components: {
+        ...BIcons
+    },
+    emits: ["input"],
+    data: () => ({
+        capturing: false,
+        streaming: false,
+        stream: undefined,
+        dataImage: undefined,
+        show_modal: false,
+        availableCameras: [],
+        selectedCamera: undefined,
+    }),
+    methods: {
+        async openStream() {
+            if (!this.capturing) {
+                //await navigator.mediaDevices.getUserMedia({video: true});
+                this.capturing = true;
+                this.streaming = false;
+                if (this.selectedCamera)
+                    this.stream = await navigator.mediaDevices.getUserMedia({
+                        video: {deviceId: this.selectedCamera.deviceId},
+                        audio: false
+                    });
+                else
+                    this.stream = await navigator.mediaDevices.getUserMedia({
+                        video: {facingMode: "environment"},
+                        audio: false
+                    })
+                const {video} = this.$refs;
+                video.srcObject = this.stream;
+                video.addEventListener('canplay', () => {
+                    this.streaming = true;
+                }, false);
+                await video.play();
+                const devices = await navigator.mediaDevices.enumerateDevices();
+                this.availableCameras = devices.filter(device => device.kind === "videoinput");
+            }
+        },
+        captureVideoImage() {
+            const {video, canvas} = this.$refs;
+            const context = canvas.getContext('2d');
+            const {videoWidth, videoHeight} = video;
+            canvas.width = videoWidth;
+            canvas.height = videoHeight;
+            context.drawImage(video, 0, 0, videoWidth, videoHeight);
+            this.dataImage = canvas.toDataURL('image/jpeg', 0.5);
+            const mimeType = this.dataImage.split(';')[0].split(':')[1];
+            const data = this.dataImage.split(',')[1];
+            const raw_data = atob(data);
+            const hash = nacl.crypto_hash(raw_data).reduce((a, b) => a + b.toString(16).padStart(2, "0"), "");
+            const image = {
+                name: hash.slice(0, 12) + ".jpg",
+                size: raw_data.length,
+                mime_type: mimeType,
+                data: data,
+                hash: hash,
+            };
+            this.show_modal = false;
+            this.$emit('input', [image]);
+            this.closeStream();
+        },
+        chooseDevice(device) {
+            this.closeStream();
+            this.selectedCamera = device;
+            this.openStream();
+        },
+        closeStream() {
+            if (this.capturing) {
+                this.stream.getTracks().forEach(s => s.stop());
+                this.capturing = false;
+                this.streaming = false;
+            }
+        },
+    },
+    mounted() {
+
+        this.openStream();
+    },
+    beforeDestroy() {
+        this.closeStream();
+    }
+};
+</script>
+
+<style>
+
+.camera-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, .5);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+</style>
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@ -12,6 +12,7 @@ import InventoryNew from "@/views/InventoryNew.vue";
 import InventoryEdit from "@/views/InventoryEdit.vue";
 import InventoryDetail from "@/views/InventoryDetail.vue";
 import Admin from "@/views/Admin.vue";
+import Files from "@/views/Files.vue";


 const routes = [
@ -23,6 +24,7 @@ const routes = [
    {path: '/inventory/:id/edit', component: InventoryEdit, meta: {requiresAuth: true}, props: true},
    {path: '/inventory/new', component: InventoryNew, meta: {requiresAuth: true}},
    {path: '/friends', component: Friends, meta: {requiresAuth: true}},
+    {path: '/files', component: Files, meta: {requiresAuth: true}},
    {path: '/admin', component: Admin, meta: {requiresAuth: true}},
    {path: '/search/:query', component: Search, meta: {requiresAuth: true}, props: true},
    {path: '/login', component: Login, meta: {requiresAuth: false}},
--- a/frontend/src/store.js
+++ b/frontend/src/store.js
@ -27,6 +27,7 @@ export default createStore({
        categories: [],
        availability_policies: [],
        domains: [],
+        storage_locations: [],
    },
    mutations: {
        setUser(state, user) {
@ -80,6 +81,9 @@ export default createStore({
        setDomains(state, domains) {
            state.domains = domains;
        },
+        setStorageLocations(state, storage_locations) {
+            state.storage_locations = storage_locations;
+        },
        setFiles(state, files) {
            state.files = files;
        },
@ -187,11 +191,14 @@ export default createStore({
        async createInventoryItem({state, dispatch, getters}, item) {
            const servers = await dispatch('getHomeServers')
            const data = {availability_policy: 'friends', ...item}
-            return await servers.post(getters.signAuth, '/api/inventory_items/', data)
+            const reply = await servers.post(getters.signAuth, '/api/inventory_items/', data)
+            state.last_load.files = 0
+            return reply
        },
        async updateInventoryItem({state, dispatch, getters}, item) {
            const servers = await dispatch('getHomeServers')
            const data = {availability_policy: 'friends', ...item}
+            data.files = data.files.map(file => file.id)
            return await servers.patch(getters.signAuth, '/api/inventory_items/' + item.id + '/', data)
        },
        async deleteInventoryItem({state, dispatch, getters}, item) {
@ -249,9 +256,13 @@ export default createStore({
            })
            return true
        },
-        async declineFriend({state, dispatch}, args) {
-            // TODO implement
-            console.log('declining friend ' + args)
+        async declineFriend({state, dispatch, getters}, {id}) {
+            const servers = await dispatch('getHomeServers')
+            return await servers.delete(getters.signAuth, '/api/friendrequests/' + id + '/')
+        },
+        async dropFriend({state, dispatch, getters}, {id}) {
+            const servers = await dispatch('getHomeServers')
+            return await servers.delete(getters.signAuth, '/api/friends/' + id + '/')
        },
        async fetchFiles({state, commit, dispatch, getters}) {
            if (state.last_load.files > Date.now() - 1000 * 60 * 60 * 24) {
@ -277,6 +288,16 @@ export default createStore({
                return data
            }
        },
+        async deleteFile({state, dispatch, getters}, {id}) {
+            const servers = await dispatch('getHomeServers')
+            await servers.delete(getters.signAuth, '/api/files/' + id + '/')
+            state.files = state.files.filter(file => file.id !== id)
+        },
+        async deleteItemFile({state, dispatch, getters}, {item_id, file_id}) {
+            const servers = await dispatch('getHomeServers')
+            await servers.delete(getters.signAuth, '/api/item_files/' + item_id + '/' + file_id + '/')
+            state.files = state.files.filter(file => file.id !== file_id)
+        },
        async fetchTags({state, commit, dispatch, getters}) {
            if (state.last_load.tags > Date.now() - 1000 * 60 * 60 * 24) {
                return state.tags
@ -317,6 +338,16 @@ export default createStore({
            state.last_load.availability_policies = Date.now()
            return data
        },
+        async fetchStorageLocations({state, commit, dispatch, getters}) {
+            if (state.last_load.storage_locations > Date.now() - 1000 * 60 * 60 * 24) {
+                return state.storage_locations
+            }
+            const servers = await dispatch('getHomeServers')
+            const data = await servers.get(getters.signAuth, '/api/storage_locations/')
+            commit('setStorageLocations', data)
+            state.last_load.storage_locations = Date.now()
+            return data
+        },
        async fetchInfo({state, commit, dispatch, getters}) {
            const last_load_info = Math.min(
                state.last_load.tags,
@ -331,7 +362,7 @@ export default createStore({
            commit('setTags', data.tags)
            commit('setProperties', data.properties)
            commit('setCategories', data.categories)
-            commit('setAvailabilityPolicies', data.policies)
+            commit('setAvailabilityPolicies', data.availability_policies)
            commit('setDomains', data.domains)
            state.last_load.tags = Date.now()
            state.last_load.properties = Date.now()
--- a/frontend/src/views/Admin.vue
+++ b/frontend/src/views/Admin.vue
@ -67,6 +67,18 @@
                                </ul>
                            </div>
                        </div>
+                        <div class="card">
+                            <div class="card-header">
+                                <h5 class="card-title">Storage Locations</h5>
+                            </div>
+                            <div class="card-body">
+                                <ul>
+                                    <li v-for="location in storage_locations.sort()" :key="location.id">
+                                        {{ location.path }}
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
                    </div>
                </div>
            </div>
@ -86,13 +98,14 @@ export default {
        ...BIcons
    },
    computed: {
-        ...mapState(["tags", "properties", "categories", "availability_policies", "domains"]),
+        ...mapState(["tags", "properties", "categories", "availability_policies", "domains", "storage_locations"])
    },
    methods: {
-        ...mapActions(["fetchInfo"]),
+        ...mapActions(["fetchInfo", "fetchStorageLocations"])
    },
    async mounted() {
        await this.fetchInfo();
+        await this.fetchStorageLocations();
    }
 }
 </script>
--- a/frontend/src/views/Files.vue
+++ b/frontend/src/views/Files.vue
@ -0,0 +1,71 @@
+<template>
+    <BaseLayout>
+        <main class="content">
+            <div class="container-fluid p-0">
+                <h1 class="h3 mb-3">Files</h1>
+                <div class="card">
+                    <div class="card-header">
+                        <h5 class="card-title">Images</h5>
+                    </div>
+                    <div class="card-body">
+                        <span v-for="files in only_images(files)" :key="files.id">
+                            <deletable-wrapper @delete="deleteFile(files)">
+                                <authenticated-image :src="files.name" :owner="files.owner"
+                                                     class="img-thumbnail"/>
+                            </deletable-wrapper>
+                        </span>
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="card-header">
+                        <h5 class="card-title">Other files</h5>
+                    </div>
+                    <div class="card-body">
+                        <ul>
+                            <li v-for="file in whithout_images(files)" :key="file.id">
+                                {{ file.name }}
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </BaseLayout>
+</template>
+
+<script>
+import {mapActions, mapState} from "vuex";
+import * as BIcons from "bootstrap-icons-vue";
+import BaseLayout from "@/components/BaseLayout.vue";
+import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
+import DeletableWrapper from "@/components/DeletableWrapper.vue";
+
+export default {
+    name: "Files",
+    components: {
+        AuthenticatedImage,
+        BaseLayout,
+        DeletableWrapper,
+        ...BIcons
+    },
+    computed: {
+        ...mapState(["files"])
+    },
+    methods: {
+        ...mapActions(["fetchFiles", "deleteFile"]),
+        only_images(files) {
+            return files.filter(file => file.mime_type.startsWith("image/"));
+        },
+        whithout_images(files) {
+            return files.filter(file => !file.mime_type.startsWith("image/"));
+        }
+    },
+    mounted() {
+        this.fetchFiles();
+    }
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/frontend/src/views/Friends.vue
+++ b/frontend/src/views/Friends.vue
@ -39,13 +39,13 @@
                                </tr>
                                <tr v-for="friend in friendslist" :key="friend.name">
                                    <td>{{ friend.username }}</td>
-                                    <td class="d-none d-md-table-cell">{{ friend.server.join(', ') }}</td>
+                                    <td class="d-none d-md-table-cell">{{ friend.server.join(', ')}}</td>
                                    <td class="table-action">
-                                        <a href="#" class="align-middle">
+                                        <!--a href="#" class="align-middle">
                                            <b-icon-pencil-square></b-icon-pencil-square>
                                            Edit
-                                        </a>
-                                        <a href="#" class="align-middle">
+                                        </a-->
+                                        <a href="#" class="align-middle" @click="tryDropFriend(friend)">
                                            <b-icon-trash></b-icon-trash>
                                            Delete
                                        </a>
@ -85,7 +85,7 @@
                                            <b-icon-check></b-icon-check>
                                            Accept
                                        </button> &nbsp;
-                                        <button class="btn btn-sm btn-danger" @click="tryRejectFriend(request)">
+                                        <button class="btn btn-sm btn-danger" @click="tryDeclineFriend(request)">
                                            <b-icon-x></b-icon-x>
                                            Decline
                                        </button>
@ -129,7 +129,8 @@ export default {
        }
    },
    methods: {
-        ...mapActions(['fetchFriends', "lookupServer", "requestFriend", "acceptFriend", "fetchFriendRequests", "declineFriend"]),
+        ...mapActions(['fetchFriends', "lookupServer", "requestFriend", "acceptFriend", "fetchFriendRequests",
+            "declineFriend", "dropFriend"]),
        fetchContent() {
            this.fetchFriends().then((friends) => {
                friends.map((friend) => {
@ -163,8 +164,16 @@ export default {
            }).catch(() => {
            })
        },
-        tryRejectFriend(friend) {
-            this.declineFriend({username: friend}).then((ok) => {
+        tryDropFriend(friend) {
+            this.dropFriend(friend).then((ok) => {
+                if (ok) {
+                    delete this.friends[friend.username]
+                }
+            }).catch(() => {
+            })
+        },
+        tryDeclineFriend(request) {
+            this.declineFriend(request).then((ok) => {
                if (ok) {
                    this.fetchContent()
                }
--- a/frontend/src/views/InventoryEdit.vue
+++ b/frontend/src/views/InventoryEdit.vue
@ -31,7 +31,7 @@
                            </div>
                            <div class="mb-3">
                                <label for="image" class="form-label">Image</label>
-                                <combined-file-field :item_files="item.files" :item_id="item.id" @change="addFiles"></combined-file-field>
+                                <combined-file-field :item_files="item.files" :item_id="item.id" @change="changeFiles"></combined-file-field>
                            </div>
                        </div>
                        <div class="card">
@ -85,7 +85,7 @@ export default {
    },
    methods: {
        ...mapActions(["fetchInventoryItems", "updateInventoryItem"]),
-        addFiles(files) {
+        changeFiles(files) {
            this.inventory_items.find(item => item.id === parseInt(this.id)).files = files
        },
    },
--- a/frontend/src/views/InventoryNew.vue
+++ b/frontend/src/views/InventoryNew.vue
@ -6,13 +6,6 @@
                    <div class="card">
                        <div class="card-header">Create New Item</div>
                        <div class="card-body">
-                            <div class="mb-3">
-                                <ul>
-                                    <li v-for="file in item.files" :key="file.name">
-                                        {{ file.name }} ({{ file.hash }})
-                                    </li>
-                                </ul>
-                            </div>
                            <div class="mb-3">
                                <label for="name" class="form-label">Name</label>
                                <input type="text" class="form-control" id="name" name="name"