diff --git a/frontend/src/components/Header.vue b/frontend/src/components/Header.vue
index 33469434..b0415e1b 100644
--- a/frontend/src/components/Header.vue
+++ b/frontend/src/components/Header.vue
@@ -77,41 +77,12 @@
@@ -266,6 +237,7 @@ import Button from 'primevue/button';
import Dropdown from 'primevue/dropdown';
import InputText from 'primevue/inputtext';
import MultiSelect from 'primevue/multiselect';
+import SpeedDial from '@/components/SpeedDial.vue';
import Constants from '@/util/constants.util';
import ApiService from '@/services/api.service';
@@ -277,9 +249,10 @@ export default {
InputText,
MultiSelect,
FileUpload,
+ SpeedDial,
},
data: () => ({
- headerHeight: 0,
+ speedDial: [],
pagination: {
page: 1,
total: 0,
@@ -318,6 +291,46 @@ export default {
mounted() {
this.get().folders();
+ this.speedDial = [
+ {
+ label: 'Filters',
+ icon: 'pi pi-cog',
+ command: () => {
+ this.showFilter = !this.showFilter;
+ },
+ },
+ {
+ label: 'Refresh',
+ icon: 'pi pi-refresh',
+ command: () => {
+ if (this.loading.files || this.loading.status) return;
+ if (this.type === 'match') this.$parent.get().matches({ delay: 500 });
+ if (this.type === 'train') this.$parent.init();
+ },
+ },
+ {
+ label: 'Toggle All',
+ icon: 'far fa-check-square',
+ command: () => {
+ if (!this.matches.source.length || this.loading.status) return;
+ this.$parent.toggleAll(!this.areAllSelected);
+ },
+ },
+ {
+ label: 'Trash',
+ icon: 'pi pi-trash',
+ command: () => {
+ if (!this.matches.selected.length) return;
+ this.$parent.remove().files();
+ },
+ },
+ ];
+
+ if (this.type === 'train') {
+ const index = this.speedDial.findIndex(({ label }) => label.toLowerCase() === 'filters');
+ if (index > -1) this.speedDial.splice(index, 1);
+ }
+
if (this.socket) {
this.socket.on('connect', () => {
this.socketClass = 'p-badge-success';
@@ -398,10 +411,6 @@ export default {
},
};
},
- refresh() {
- if (this.type === 'match') this.$parent.get().matches({ delay: 500 });
- if (this.type === 'train') this.$parent.init();
- },
addComma(length, index) {
return length - 1 === index ? ' ' : ',';
},
@@ -410,6 +419,14 @@ export default {
},
},
watch: {
+ 'loading.files': function (value) {
+ const target = this.speedDial.find(({ label }) => label.toLowerCase() === 'refresh');
+ target.icon = value ? 'pi pi-spin pi-spinner' : 'pi pi-refresh';
+ },
+ areAllSelected(value) {
+ const target = this.speedDial.find(({ label }) => label.toLowerCase() === 'toggle all');
+ target.icon = value ? 'fa fa-check-square' : 'far fa-check-square';
+ },
dropdowns: {
handler(value) {
['names', 'detectors', 'matches', 'cameras', 'types'].forEach((key) => {
@@ -452,6 +469,41 @@ export default {