rahix/openflexure-microscope-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added date sorting toggle

Browse source
This commit is contained in:
Joel Collins 2019-02-22 14:52:08 +00:00
parent f3024b94f3
commit 43c75ebb8c
1 changed files with 49 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

73
src/components/paneDisplayComponents/galleryDisplay.vue
View file

@ -1,32 +1,34 @@
<template> <template>
<div class="galleryDisplay uk-padding-remove"> <div class="galleryDisplay uk-padding uk-padding-remove-top">
<nav class="uk-navbar-container" uk-navbar="mode: click"> <nav class="uk-navbar-container navbar" uk-navbar="mode: click">
<div class="uk-navbar-left uk-padding uk-padding-remove-top uk-padding-remove-bottom"> <div class="uk-navbar-left uk-padding-remove-top uk-padding-remove-bottom">
<ul class="uk-navbar-nav"> <ul class="uk-navbar-nav">
<li> <li v-bind:class="[sortDescending ? 'uk-active' : '']"><a v-on:click="sortDescending=true;" class="uk-icon-link" href="#" uk-icon="icon: arrow-down"></a></li>
<a href="#">Filter</a> <li v-bind:class="[!sortDescending ? 'uk-active' : '']"><a v-on:click="sortDescending=false;" class="uk-icon-link" href="#" uk-icon="icon: arrow-up"></a></li>
<div class="uk-navbar-dropdown"> <li>
<ul class="uk-nav uk-navbar-dropdown-nav"> <a href="#">Filter</a>
<form class="uk-form-stacked"> <div class="uk-navbar-dropdown">
<div v-for="tag in allTags" :key="tag" class="uk-margin-small"> <ul class="uk-nav uk-navbar-dropdown-nav">
<label><input class="uk-checkbox" type="checkbox" v-bind:id="tag" v-bind:value="tag" v-model="checkedTags" checked> {{ tag }}</label> <form class="uk-form-stacked">
</div> <div v-for="tag in allTags" :key="tag" class="uk-margin-small">
</form> <label><input class="uk-checkbox" type="checkbox" v-bind:id="tag" v-bind:value="tag" v-model="checkedTags" checked> {{ tag }}</label>
</ul> </div>
</div> </form>
</li> </ul>
</div>
</li>
</ul> </ul>
</div> </div>
</nav> </nav>
<div class="uk-padding uk-padding-remove-top" uk-lightbox="toggle: .lightbox-link"> <div class="uk-padding-remove-top" uk-lightbox="toggle: .lightbox-link">
<div class="uk-grid-medium uk-padding uk-padding-remove-right uk-grid-match" uk-grid> <div class="uk-grid-medium uk-padding uk-padding-remove-right uk-grid-match" uk-grid>
<captureCard <captureCard
v-for="capture in filteredCaptures" v-for="capture in sortedDateCaptures"
:key="capture.metadata.id" :key="capture.metadata.id"
:metadata="capture.metadata" :metadata="capture.metadata"
:temporary="capture.temporary" :temporary="capture.temporary"
@ -54,7 +56,8 @@ export default {
data: function () { data: function () {
return { return {
captureList: [], captureList: [],
checkedTags: [] checkedTags: [],
sortDescending: true
} }
}, },
@ -95,13 +98,13 @@ export default {
for (var i in this.captureList) { for (var i in this.captureList) {
var capture = this.captureList[i] var capture = this.captureList[i]
for (var j in capture.metadata.tags) { for (var j in capture.metadata.tags) {
var tag = capture.metadata.tags[j] var tag = capture.metadata.tags[j];
if (!tags.includes(tag)) { if (!tags.includes(tag)) {
tags.push(tag) tags.push(tag);
}; };
}; };
}; };
return tags return tags.sort()
}, },
filteredCaptures: function () { filteredCaptures: function () {
@ -116,23 +119,43 @@ export default {
var tags = capture.metadata.tags; var tags = capture.metadata.tags;
let checker = (arr, target) => target.every(v => arr.includes(v)); let checker = (arr, target) => target.every(v => arr.includes(v));
// True if all tags match // True if all tags match
includeCapture = checker(tags, this.checkedTags) includeCapture = checker(tags, this.checkedTags);
// Add to capture list if matched // Add to capture list if matched
if (includeCapture == true) { if (includeCapture == true) {
captures.push(capture) captures.push(capture);
} };
}; };
return captures return captures
},
sortedDateCaptures: function () {
function compare(a, b) {
if (a.metadata.time < b.metadata.time)
return -1;
if (a.metadata.time > b.metadata.time)
return 1;
return 0;
}
if (this.sortDescending == true) {
return this.filteredCaptures.sort(compare).reverse();
}
else {
return this.filteredCaptures.sort(compare);
}
} }
} }
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.navbar {
background-color: #fff !important;
border-bottom: 1px solid #e5e5e5;
}
</style> </style>