stash
This commit is contained in:
parent
7e1b0c7e49
commit
1a96caee1f
8 changed files with 25227 additions and 65 deletions
25141
frontend/src/assets/js/app.js
Normal file
25141
frontend/src/assets/js/app.js
Normal file
File diff suppressed because one or more lines are too long
|
@ -6,7 +6,7 @@
|
||||||
<a class="sidebar-toggle d-flex" @click="toggleSidebar">
|
<a class="sidebar-toggle d-flex" @click="toggleSidebar">
|
||||||
<i class="hamburger align-self-center"></i>
|
<i class="hamburger align-self-center"></i>
|
||||||
</a>
|
</a>
|
||||||
<SearchBox v-if="!hideSearch"/>
|
<SearchBox/>
|
||||||
<div class="navbar-collapse collapse">
|
<div class="navbar-collapse collapse">
|
||||||
<ul class="navbar-nav navbar-align">
|
<ul class="navbar-nav navbar-align">
|
||||||
<Notifications :notifications="notifications"/>
|
<Notifications :notifications="notifications"/>
|
||||||
|
@ -67,8 +67,12 @@ export default {
|
||||||
},
|
},
|
||||||
...mapMutations(['logout'])
|
...mapMutations(['logout'])
|
||||||
},
|
},
|
||||||
async mounted() {
|
methods: {
|
||||||
}
|
toggleSidebar() {
|
||||||
|
closeAllDropdowns();
|
||||||
|
document.getElementById("sidebar").classList.toggle("collapsed");
|
||||||
|
},
|
||||||
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -8,18 +8,25 @@
|
||||||
<ul>
|
<ul>
|
||||||
<img v-for="file in files" :key="file.id" :src="file.name" :alt="file.name" class="img-thumbnail">
|
<img v-for="file in files" :key="file.id" :src="file.name" :alt="file.name" class="img-thumbnail">
|
||||||
</ul>
|
</ul>
|
||||||
<fieldset>
|
<legend>Files</legend>
|
||||||
<legend>Files</legend>
|
<div class="input-group">
|
||||||
<div class="input-group">
|
<input type="file" class="form-control" multiple id="files">
|
||||||
<input type="file" class="form-control" multiple id="files">
|
<button class="btn btn-outline-secondary" type="button">
|
||||||
<button class="btn btn-outline-secondary" type="button">
|
<b-icon-trash></b-icon-trash>
|
||||||
<b-icon-trash></b-icon-trash>
|
</button>
|
||||||
</button>
|
<button class="btn btn-outline-secondary" type="button" @click="uploadFiles">
|
||||||
<button class="btn btn-outline-secondary" type="button" @click="uploadFiles">
|
<b-icon-upload></b-icon-upload>
|
||||||
<b-icon-upload></b-icon-upload>
|
</button>
|
||||||
</button>
|
</div>
|
||||||
</div>
|
<div class="input-group" v-if="show_camera">
|
||||||
</fieldset>
|
<input type="file" class="form-control" accept="image/*" capture="camera" id="photos">
|
||||||
|
<button class="btn btn-outline-secondary" type="button">
|
||||||
|
<b-icon-trash></b-icon-trash>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-outline-secondary" type="button" @click="uploadPhoto">
|
||||||
|
<b-icon-upload></b-icon-upload>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -38,7 +45,9 @@ import {mapActions, mapState} from "vuex";
|
||||||
export default {
|
export default {
|
||||||
name: "CombinedFileField",
|
name: "CombinedFileField",
|
||||||
data() {
|
data() {
|
||||||
return {}
|
return {
|
||||||
|
show_camera: false
|
||||||
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
...BIcons
|
...BIcons
|
||||||
|
@ -55,15 +64,6 @@ export default {
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapState(["files"]),
|
...mapState(["files"]),
|
||||||
/*localValue: {
|
|
||||||
get() {
|
|
||||||
return this.value;
|
|
||||||
},
|
|
||||||
set(value) {
|
|
||||||
this.$emit("input", value);
|
|
||||||
console.log("set", value);
|
|
||||||
}
|
|
||||||
}*/
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
...mapActions(["fetchFiles", "pushFile"]),
|
...mapActions(["fetchFiles", "pushFile"]),
|
||||||
|
@ -84,20 +84,9 @@ export default {
|
||||||
});
|
});
|
||||||
const data = new Uint8Array(buffer);
|
const data = new Uint8Array(buffer);
|
||||||
const hash = nacl.crypto_hash(data);
|
const hash = nacl.crypto_hash(data);
|
||||||
//const hex_hash = Array.from(hash)
|
|
||||||
// .map(b => b.toString(16).padStart(2, "0"))
|
|
||||||
// .join("");
|
|
||||||
//console.log("name", file.name);
|
|
||||||
//console.log("size", file.size);
|
|
||||||
//console.log("type", file.type);
|
|
||||||
//console.log("hash", hex_hash);
|
|
||||||
var base64 = btoa(
|
var base64 = btoa(
|
||||||
data.reduce((a, b) => a + String.fromCharCode(b), '')
|
data.reduce((a, b) => a + String.fromCharCode(b), '')
|
||||||
);
|
);
|
||||||
//console.log("base64", base64.length);
|
|
||||||
//console.log("base64", base64);
|
|
||||||
//console.log("base64", typeof base64);
|
|
||||||
//formData.append("files[]", files[i]);
|
|
||||||
await this.pushFile({
|
await this.pushFile({
|
||||||
file: {
|
file: {
|
||||||
mime_type: file.type,
|
mime_type: file.type,
|
||||||
|
@ -108,10 +97,51 @@ export default {
|
||||||
await this.fetchFiles();
|
await this.fetchFiles();
|
||||||
}
|
}
|
||||||
//console.log("formData", formData);
|
//console.log("formData", formData);
|
||||||
}
|
},
|
||||||
|
async uploadPhoto() {
|
||||||
|
//const formData = new FormData();
|
||||||
|
const files = document.getElementById("photos").files;
|
||||||
|
for (let i = 0; i < files.length; i++) {
|
||||||
|
var reader = new FileReader();
|
||||||
|
const file = files[i];
|
||||||
|
const buffer = await new Promise((resolve, reject) => {
|
||||||
|
reader.onload = (e) => {
|
||||||
|
resolve(e.target.result);
|
||||||
|
};
|
||||||
|
reader.onerror = (e) => {
|
||||||
|
reject(e);
|
||||||
|
};
|
||||||
|
reader.readAsArrayBuffer(file)
|
||||||
|
});
|
||||||
|
const data = new Uint8Array(buffer);
|
||||||
|
const hash = nacl.crypto_hash(data);
|
||||||
|
var base64 = btoa(
|
||||||
|
data.reduce((a, b) => a + String.fromCharCode(b), '')
|
||||||
|
);
|
||||||
|
await this.pushFile({
|
||||||
|
file: {
|
||||||
|
mime_type: file.type,
|
||||||
|
data: base64,
|
||||||
|
},
|
||||||
|
item_id: 1
|
||||||
|
});
|
||||||
|
await this.fetchFiles();
|
||||||
|
}
|
||||||
|
//console.log("formData", formData);
|
||||||
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.fetchFiles();
|
this.fetchFiles();
|
||||||
|
//detect media api
|
||||||
|
if ('capture' in document.createElement('input')) {
|
||||||
|
console.log('capture supported.');
|
||||||
|
this.show_camera = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (navigator.getUserMedia) {
|
||||||
|
console.log('getUserMedia supported.');
|
||||||
|
this.show_camera = true;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
|
@ -1,11 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<li class="nav-item dropdown">
|
<li class="nav-item dropdown">
|
||||||
<a class="nav-icon dropdown-toggle" href="#" id="messagesDropdown" @click.prevent="toggleDropdown">
|
<a class="nav-icon dropdown-toggle" href="#" @click="toggleDropdown">
|
||||||
<div class="position-relative">
|
<div class="position-relative">
|
||||||
<b-icon-chat-left class="bi-valign-middle"></b-icon-chat-left>
|
<b-icon-chat-left class="bi-valign-middle"></b-icon-chat-left>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<div :class="['dropdown-menu','dropdown-menu-right', 'dropdown-menu-lg','py-0', {'show': show_dropdown}]">
|
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right py-0" id="messagesDropdown">
|
||||||
<div class="dropdown-menu-header">
|
<div class="dropdown-menu-header">
|
||||||
<div class="position-relative">
|
<div class="position-relative">
|
||||||
4 New Messages
|
4 New Messages
|
||||||
|
@ -94,11 +94,6 @@ export default {
|
||||||
default: () => []
|
default: () => []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
show_dropdown: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
computed: {
|
||||||
top_messages() {
|
top_messages() {
|
||||||
return this.messages.slice(0, 4);
|
return this.messages.slice(0, 4);
|
||||||
|
@ -106,12 +101,12 @@ export default {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
toggleDropdown() {
|
toggleDropdown() {
|
||||||
this.show_dropdown = !this.show_dropdown;
|
closeAllDropdowns();
|
||||||
|
document.getElementById("messagesDropdown").classList.toggle("show");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
||||||
</style>
|
</style>
|
|
@ -1,14 +1,14 @@
|
||||||
<template>
|
<template>
|
||||||
<li class="nav-item dropdown">
|
<li class="nav-item dropdown">
|
||||||
<a class="nav-icon dropdown-toggle" href="#" id="alertsDropdown" @click.prevent="toggleDropdown">
|
<a class="nav-icon dropdown-toggle" href="#" @click="toggleDropdown">
|
||||||
<div class="position-relative">
|
<div class="position-relative">
|
||||||
<b-icon-bell class="bi-valign-middle"></b-icon-bell>
|
<b-icon-bell class="bi-valign-middle"></b-icon-bell>
|
||||||
<span :class="['indicator', notificationsColor(top_notifications)]">{{
|
<span :class="['indicator', notificationsColor(top_notifications)]">{{
|
||||||
top_notifications.length
|
top_notifications.length
|
||||||
}}</span>
|
}}</span>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<div :class="['dropdown-menu','dropdown-menu-right', 'dropdown-menu-lg','py-0', {'show': show_dropdown}]">
|
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right py-0" id="notificationsDropdown">
|
||||||
<div class="dropdown-menu-header">
|
<div class="dropdown-menu-header">
|
||||||
{{ top_notifications.length }} New Notifications
|
{{ top_notifications.length }} New Notifications
|
||||||
</div>
|
</div>
|
||||||
|
@ -60,11 +60,6 @@ export default {
|
||||||
default: () => []
|
default: () => []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
show_dropdown: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
computed: {
|
||||||
top_notifications() {
|
top_notifications() {
|
||||||
return this.notifications.sort((a, b) => {
|
return this.notifications.sort((a, b) => {
|
||||||
|
@ -90,7 +85,8 @@ export default {
|
||||||
return 'bg-primary';
|
return 'bg-primary';
|
||||||
},
|
},
|
||||||
toggleDropdown() {
|
toggleDropdown() {
|
||||||
this.show_dropdown = !this.show_dropdown
|
closeAllDropdowns();
|
||||||
|
document.getElementById('notificationsDropdown').classList.toggle('show');
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async mounted() {
|
async mounted() {
|
||||||
|
|
|
@ -38,11 +38,6 @@ export default {
|
||||||
components: {
|
components: {
|
||||||
...BIcons
|
...BIcons
|
||||||
},
|
},
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
show_dropdown: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
...mapMutations(['logout']),
|
...mapMutations(['logout']),
|
||||||
toggleDropdown() {
|
toggleDropdown() {
|
||||||
|
|
|
@ -31,7 +31,7 @@ class ServerSet {
|
||||||
if (this.unreachable_neighbors.queryUnreachable(server)) {
|
if (this.unreachable_neighbors.queryUnreachable(server)) {
|
||||||
continue
|
continue
|
||||||
}
|
}
|
||||||
const url = "https://" + server + target // TODO https
|
const url = "http://" + server + target // TODO https
|
||||||
return await fetch(url, {
|
return await fetch(url, {
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
headers: {
|
headers: {
|
||||||
|
@ -59,7 +59,7 @@ class ServerSet {
|
||||||
if (this.unreachable_neighbors.queryUnreachable(server)) {
|
if (this.unreachable_neighbors.queryUnreachable(server)) {
|
||||||
continue
|
continue
|
||||||
}
|
}
|
||||||
const url = "https://" + server + target // TODO https
|
const url = "http://" + server + target // TODO https
|
||||||
return await fetch(url, {
|
return await fetch(url, {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: {
|
headers: {
|
||||||
|
@ -89,7 +89,7 @@ class ServerSet {
|
||||||
if (this.unreachable_neighbors.queryUnreachable(server)) {
|
if (this.unreachable_neighbors.queryUnreachable(server)) {
|
||||||
continue
|
continue
|
||||||
}
|
}
|
||||||
const url = "https://" + server + target // TODO https
|
const url = "http://" + server + target // TODO https
|
||||||
return await fetch(url, {
|
return await fetch(url, {
|
||||||
method: 'PATCH',
|
method: 'PATCH',
|
||||||
headers: {
|
headers: {
|
||||||
|
@ -119,7 +119,7 @@ class ServerSet {
|
||||||
if (this.unreachable_neighbors.queryUnreachable(server)) {
|
if (this.unreachable_neighbors.queryUnreachable(server)) {
|
||||||
continue
|
continue
|
||||||
}
|
}
|
||||||
const url = "https://" + server + target // TODO https
|
const url = "http://" + server + target // TODO https
|
||||||
return await fetch(url, {
|
return await fetch(url, {
|
||||||
method: 'PUT',
|
method: 'PUT',
|
||||||
headers: {
|
headers: {
|
||||||
|
@ -149,7 +149,7 @@ class ServerSet {
|
||||||
if (this.unreachable_neighbors.queryUnreachable(server)) {
|
if (this.unreachable_neighbors.queryUnreachable(server)) {
|
||||||
continue
|
continue
|
||||||
}
|
}
|
||||||
const url = "https://" + server + target // TODO https
|
const url = "http://" + server + target // TODO https
|
||||||
return await fetch(url, {
|
return await fetch(url, {
|
||||||
method: 'DELETE',
|
method: 'DELETE',
|
||||||
headers: {
|
headers: {
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
import {createApp} from 'vue'
|
import {createApp} from 'vue'
|
||||||
|
//import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'
|
||||||
import {BootstrapIconsPlugin} from 'bootstrap-icons-vue';
|
import {BootstrapIconsPlugin} from 'bootstrap-icons-vue';
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue