j3d1/toolshed
1
0
Fork 0
Code Issues 9 Pull requests 1 Projects Releases Packages Wiki Activity

stash

Browse source
This commit is contained in:
j3d1 2023-11-01 08:20:24 +01:00
parent a7515d366c
commit fa7d5f40a9
5 changed files with 44 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/components/AuthenticatedImage.vue
View file

@ -1,5 +1,5 @@
<template>
<img :src="image_data" :alt="owner + '/' + src"/>
<img :src="image_data" :alt="owner + ':' + src"/>
</template>
<style scoped>
@ -42,7 +42,9 @@ export default {
this.servers = await this.getFriendServers({username: this.owner});
const response = await this.servers.getRaw(this.signAuth, this.src);
const mime_type = response.headers.get("content-type");
this.image_data = "data:" + mime_type + ";base64," + btoa(String.fromCharCode(...new Uint8Array(await response.arrayBuffer())));
const base64 = btoa(new Uint8Array(await response.arrayBuffer())
.reduce((data, byte) => data + String.fromCharCode(byte), ""));
this.image_data = "data:" + mime_type + ";base64," + base64;
} catch (e) {
console.log(e);
}

45
frontend/src/components/CombinedFileField.vue
View file

@ -11,10 +11,10 @@
</li>
</ul>
<hr>
<div>
<img v-for="file in only_images(files)" :key="file.id" :src="file.name" :alt="file.name"
class="img-thumbnail" :title="file.mime_type">
<img v-for="file in only_images(item_files)" :key="file.id" :alt="file.name"
<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">
@ -26,6 +26,15 @@
<b-icon-camera></b-icon-camera>
</div>
</camera-file-source>
<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>
</div>
</drag-drop-file-source>
</template>
@ -41,6 +50,25 @@
width: 100%;
height: 100%;
}
.invisible-input {
display: none;
}
#file-dropdown:checked ~ .dropdown-menu {
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;
}
</style>
<script>
@ -49,11 +77,13 @@ import {mapActions, mapState} from "vuex";
import DragDropFileSource from "@/components/DragDropFileSource.vue";
import FsFileSource from "@/components/FsFileSource.vue";
import CameraFileSource from "@/components/CameraFileSource.vue";
import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
export default {
name: "CombinedFileField",
components: {
...BIcons,
AuthenticatedImage,
DragDropFileSource,
CameraFileSource,
FsFileSource
@ -85,7 +115,6 @@ export default {
});
});
const responses = await Promise.all(jobs);
console.log(responses);
return responses;
},
addFiles(files) {
@ -96,11 +125,9 @@ export default {
}
if (!this.create) {
this.uploadFiles(newfiles).then((uploaded) => {
console.log(uploaded);
this.$emit("change", [...this.item_files, ...uploaded]);
})
}
this.$emit("change", [...this.item_files, ...newfiles]);
console.log(this.item_files);
},
only_images(files) {
@ -108,7 +135,7 @@ export default {
},
whithout_images(files) {
return files.filter(file => !file.mime_type.startsWith("image/"));
},
}
},
mounted() {
this.fetchFiles();

4
frontend/src/store.js
View file

@ -261,6 +261,7 @@ export default createStore({
}
const servers = await dispatch('getHomeServers')
const data = await servers.get(getters.signAuth, '/api/files/')
data.map(file => file.owner = state.user)
commit('setFiles', data)
state.last_load.files = Date.now()
return data
@ -272,7 +273,8 @@ export default createStore({
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)
if (data.hash) {
if (data.name) {
data.owner = state.user
state.files.push(data)
return data
}

15
frontend/src/views/InventoryDetail.vue
View file

@ -35,7 +35,7 @@
<div class="mb-3">
<label for="image" class="form-label">Image</label>
<div>
<authenticated-image v-for="file in files" :key="file.id" :src="file.name"
<authenticated-image v-for="file in item.files" :key="file.id" :src="file.name"
:owner="file.owner" class="img-thumbnail border-info"></authenticated-image>
</div>
@ -74,11 +74,6 @@ export default {
BaseLayout,
...BIcons
},
data() {
return {
files: []
}
},
props: {
id: {
type: String,
@ -96,14 +91,6 @@ 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>

7
frontend/src/views/InventoryEdit.vue
View file

@ -6,13 +6,6 @@
<div class="card">
<div class="card-header">Edit 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"