Compare commits

..

3 commits

4 changed files with 45 additions and 16 deletions

View file

@ -47,7 +47,6 @@
</template> </template>
<script> <script>
import router from '../router';
export default { export default {
name: 'CollapsableCards', name: 'CollapsableCards',
@ -76,7 +75,15 @@ export default {
}; };
}, },
created() { created() {
const query = this.$router.currentRoute.query.collapsed;
if (query !== null && query !== undefined) {
this.collapsed = this.unpackInt(parseInt(query), this.sections.length);
} else {
this.collapsed = this.sections.map(() => true); this.collapsed = this.sections.map(() => true);
}
//this.$router.push({...this.$router.currentRoute, query: {...this.$router.currentRoute.query, layout}});
//this.collapsed = this.sections.map(() => true);
/*this.columns.map(e => ({ /*this.columns.map(e => ({
k: e, k: e,
v: this.$store.getters.getFilters[e] v: this.$store.getters.getFilters[e]
@ -85,21 +92,31 @@ export default {
computed: { computed: {
grouped_items() { grouped_items() {
return this.sections.map(section => this.items.filter(item => item[this.keyName] === section.slug)); return this.sections.map(section => this.items.filter(item => item[this.keyName] === section.slug));
} },
}, },
methods: { methods: {
toggle(index) { packInt(arr) {
this.collapsed[index] = !this.collapsed[index]; return arr.reduce((a, e, i) => a + (e ? 0 : 2 ** i), 0);
this.$forceUpdate(); },
unpackInt(n, l) {
return [...Array(l)].map((e, i) => (n & 2 ** i) === 0);
},
toggle(index) {
const collapsed = [...this.collapsed]
collapsed[index] = !collapsed[index];
this.collapsed = collapsed;
},
},
watch: {
collapsed: {
handler() {
const encoded = this.packInt(this.collapsed).toString()
if (this.$router.currentRoute.query.collapsed !== encoded)
this.$router.push({...this.$router.currentRoute, query: {...this.$router.currentRoute.query, collapsed: encoded}});
},
deep: true,
}, },
/*changeFilter(col, val) {
this.setFilter(col, val);
let newquery = Object.entries({
...this.$store.getters.getFilters,
[col]: val
}).reduce((a, [k, v]) => (v ? {...a, [k]: v} : a), {});
router.push({query: newquery});
},*/
}, },
}; };
</script> </script>

View file

@ -123,6 +123,7 @@ export default {
}, },
methods: { methods: {
...mapActions(['changeEvent', 'changeView', 'searchEventItems']), ...mapActions(['changeEvent', 'changeView', 'searchEventItems']),
...mapMutations(['logout']),
navigateTo(link) { navigateTo(link) {
if (this.$router.currentRoute.path !== link) if (this.$router.currentRoute.path !== link)
this.$router.push(link); this.$router.push(link);

View file

@ -87,7 +87,6 @@ export default {
methods: { methods: {
openLightboxModalWith(attachment) { openLightboxModalWith(attachment) {
this.lightboxHash = attachment.hash; this.lightboxHash = attachment.hash;
console.log(this.lightboxHash);
}, },
closeLightboxModal() { // Closes the editing modal and discards the edited copy of the item. closeLightboxModal() { // Closes the editing modal and discards the edited copy of the item.
this.lightboxHash = null; this.lightboxHash = null;

View file

@ -3,7 +3,7 @@
<img <img
v-if="!capturing" v-if="!capturing"
class="img-fluid rounded mx-auto d-block mb-3 img-preview" class="img-fluid rounded mx-auto d-block mb-3 img-preview"
:src="dataImage || `https://c3lf.de/api/1/thumbs/${model[field]}`" :src="dataImage"
alt="Image not available." alt="Image not available."
/> />
<video <video
@ -108,11 +108,23 @@ export default {
}); });
console.log('Error: ', error); console.log('Error: ', error);
}; };
},
loadImage() {
this.fetchImage('/media/2/' + this.model[this.field] + '/').then((response) => {
const mime_type = response.headers.get("content-type");
response.arrayBuffer().then((buf) => {
const base64 = btoa(new Uint8Array(buf)
.reduce((data, byte) => data + String.fromCharCode(byte), ""));
this.dataImage = "data:" + mime_type + ";base64," + base64;
});
})
} }
}, },
mounted() { mounted() {
if (!this.model[this.field]) if (!this.model[this.field])
this.openStream(); this.openStream();
else
this.loadImage();
}, },
beforeDestroy() { beforeDestroy() {
this.closeStream(); this.closeStream();