stash
This commit is contained in:
parent
a7515d366c
commit
fa7d5f40a9
5 changed files with 44 additions and 33 deletions
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<img :src="image_data" :alt="owner + '/' + src"/>
|
<img :src="image_data" :alt="owner + ':' + src"/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
@ -42,7 +42,9 @@ export default {
|
||||||
this.servers = await this.getFriendServers({username: this.owner});
|
this.servers = await this.getFriendServers({username: this.owner});
|
||||||
const response = await this.servers.getRaw(this.signAuth, this.src);
|
const response = await this.servers.getRaw(this.signAuth, this.src);
|
||||||
const mime_type = response.headers.get("content-type");
|
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) {
|
} catch (e) {
|
||||||
console.log(e);
|
console.log(e);
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,10 +11,10 @@
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<hr>
|
<hr>
|
||||||
<div>
|
<div style="position: relative;">
|
||||||
<img v-for="file in only_images(files)" :key="file.id" :src="file.name" :alt="file.name"
|
<authenticated-image v-for="file in only_images(item_files).filter(file => file.owner)" :key="file.id"
|
||||||
class="img-thumbnail" :title="file.mime_type">
|
:owner="file.owner" :src="file.name" class="img-thumbnail"/>
|
||||||
<img v-for="file in only_images(item_files)" :key="file.id" :alt="file.name"
|
<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">
|
:src="'data:' + file.mime_type + ';base64,' + file.data" class="img-thumbnail border-info">
|
||||||
<fs-file-source @input="addFiles">
|
<fs-file-source @input="addFiles">
|
||||||
<div class="img-thumbnail btn btn-outline-primary">
|
<div class="img-thumbnail btn btn-outline-primary">
|
||||||
|
@ -26,6 +26,15 @@
|
||||||
<b-icon-camera></b-icon-camera>
|
<b-icon-camera></b-icon-camera>
|
||||||
</div>
|
</div>
|
||||||
</camera-file-source>
|
</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>
|
</div>
|
||||||
</drag-drop-file-source>
|
</drag-drop-file-source>
|
||||||
</template>
|
</template>
|
||||||
|
@ -41,6 +50,25 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 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>
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -49,11 +77,13 @@ import {mapActions, mapState} from "vuex";
|
||||||
import DragDropFileSource from "@/components/DragDropFileSource.vue";
|
import DragDropFileSource from "@/components/DragDropFileSource.vue";
|
||||||
import FsFileSource from "@/components/FsFileSource.vue";
|
import FsFileSource from "@/components/FsFileSource.vue";
|
||||||
import CameraFileSource from "@/components/CameraFileSource.vue";
|
import CameraFileSource from "@/components/CameraFileSource.vue";
|
||||||
|
import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "CombinedFileField",
|
name: "CombinedFileField",
|
||||||
components: {
|
components: {
|
||||||
...BIcons,
|
...BIcons,
|
||||||
|
AuthenticatedImage,
|
||||||
DragDropFileSource,
|
DragDropFileSource,
|
||||||
CameraFileSource,
|
CameraFileSource,
|
||||||
FsFileSource
|
FsFileSource
|
||||||
|
@ -85,7 +115,6 @@ export default {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
const responses = await Promise.all(jobs);
|
const responses = await Promise.all(jobs);
|
||||||
console.log(responses);
|
|
||||||
return responses;
|
return responses;
|
||||||
},
|
},
|
||||||
addFiles(files) {
|
addFiles(files) {
|
||||||
|
@ -96,11 +125,9 @@ export default {
|
||||||
}
|
}
|
||||||
if (!this.create) {
|
if (!this.create) {
|
||||||
this.uploadFiles(newfiles).then((uploaded) => {
|
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) {
|
only_images(files) {
|
||||||
|
@ -108,7 +135,7 @@ export default {
|
||||||
},
|
},
|
||||||
whithout_images(files) {
|
whithout_images(files) {
|
||||||
return files.filter(file => !file.mime_type.startsWith("image/"));
|
return files.filter(file => !file.mime_type.startsWith("image/"));
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.fetchFiles();
|
this.fetchFiles();
|
||||||
|
|
|
@ -261,6 +261,7 @@ export default createStore({
|
||||||
}
|
}
|
||||||
const servers = await dispatch('getHomeServers')
|
const servers = await dispatch('getHomeServers')
|
||||||
const data = await servers.get(getters.signAuth, '/api/files/')
|
const data = await servers.get(getters.signAuth, '/api/files/')
|
||||||
|
data.map(file => file.owner = state.user)
|
||||||
commit('setFiles', data)
|
commit('setFiles', data)
|
||||||
state.last_load.files = Date.now()
|
state.last_load.files = Date.now()
|
||||||
return data
|
return data
|
||||||
|
@ -272,7 +273,8 @@ export default createStore({
|
||||||
async pushFile({state, dispatch, getters}, {item_id, file}) {
|
async pushFile({state, dispatch, getters}, {item_id, file}) {
|
||||||
const servers = await dispatch('getHomeServers')
|
const servers = await dispatch('getHomeServers')
|
||||||
const data = await servers.post(getters.signAuth, '/api/item_files/' + item_id + '/', file)
|
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)
|
state.files.push(data)
|
||||||
return data
|
return data
|
||||||
}
|
}
|
||||||
|
|
|
@ -35,7 +35,7 @@
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label for="image" class="form-label">Image</label>
|
<label for="image" class="form-label">Image</label>
|
||||||
<div>
|
<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>
|
:owner="file.owner" class="img-thumbnail border-info"></authenticated-image>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -74,11 +74,6 @@ export default {
|
||||||
BaseLayout,
|
BaseLayout,
|
||||||
...BIcons
|
...BIcons
|
||||||
},
|
},
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
files: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: {
|
props: {
|
||||||
id: {
|
id: {
|
||||||
type: String,
|
type: String,
|
||||||
|
@ -96,14 +91,6 @@ export default {
|
||||||
},
|
},
|
||||||
async mounted() {
|
async mounted() {
|
||||||
await this.fetchInventoryItems()
|
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>
|
</script>
|
||||||
|
|
|
@ -6,13 +6,6 @@
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header">Edit Item</div>
|
<div class="card-header">Edit Item</div>
|
||||||
<div class="card-body">
|
<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">
|
<div class="mb-3">
|
||||||
<label for="name" class="form-label">Name</label>
|
<label for="name" class="form-label">Name</label>
|
||||||
<input type="text" class="form-control" id="name" name="name"
|
<input type="text" class="form-control" id="name" name="name"
|
||||||
|
|
Loading…
Reference in a new issue