add: frontend depth slider

frontend/src/components/FilterPanel.vue

@@ -10,6 +10,8 @@
         <org-filter @filter="$emit('filter', $event)" />
         <h3>Stratum</h3>
         <stratum-filter @filter="$emit('filter', $event)" />
+        <h3>Depth</h3>
+        <depth-filter @filter="$emit('filter', $event)" />
     </div>
 </template>
 
@@ -20,9 +22,10 @@ import GisCategoryFilter from "@/components/filters/GisCategoryFilter.vue";
 import ScannerFilter from "@/components/filters/ScannerFilter.vue";
 import OrgFilter from "@/components/filters/OrgFilter.vue";
 import StratumFilter from "@/components/filters/StratumFilter.vue";
+import DepthFilter from "@/components/filters/DepthFilter.vue";
 export default {
     name: "filter-panel",
-    components: { CategoryFilter, GisCategoryFilter, ScannerFilter, OrgFilter, StratumFilter },
+    components: { CategoryFilter, GisCategoryFilter, ScannerFilter, OrgFilter, StratumFilter, DepthFilter },
     methods: {},
     data() {
         return {}

frontend/src/components/filters/DepthFilter.vue

@@ -0,0 +1,44 @@
+<template>
+    <div class="depth_selector__container">
+        <va-slider class="mr-5" v-model="rangeValue" vertical range pins :step="5" track-label-visible color="success"
+            @update:model-value="applyFilter">
+            <template #trackLabel="{ value, order }">
+                <va-chip size="small" :color="order === 0 ? 'danger' : 'success' ">
+                    {{ computeDepth(value) }}
+                </va-chip>
+            </template>
+        </va-slider>
+    </div>
+</template>
+
+
+<script>
+export default {
+    name: "depth-filter",
+    data() {
+        return {
+            rangeValue: [0,80]
+        }
+    },
+    methods: {
+        computeDepth(sliderValue){
+            return (3000 - sliderValue*30)
+        },
+        applyFilter() {
+            // range values are inverted inthe model, 
+            // so invert them back and compute depth values
+            const depthValue = [ 3000-this.rangeValue[1]*30, 3000-this.rangeValue[0]*30 ]
+            console.log(depthValue);
+            const filter = { "depth": depthValue }
+            this.$emit('filter', filter, this.name)
+        },
+    },
+}
+</script>
+
+
+<style lang="css">
+.depth_selector__container {
+    height: 200px;
+}
+</style>

frontend/src/main.js

@@ -26,6 +26,8 @@ import {
     VaSelect,
     VaPagination,
     VaProgressCircle,
+    VaSlider,
+    VaChip,
 } from 'vuestic-ui'
 import 'vuestic-ui/dist/styles/essential.css'
 import 'vuestic-ui/dist/styles/grid.css'
@@ -66,6 +68,8 @@ app.use(createVuesticEssential({
         VaSelect,
         VaPagination,
         VaProgressCircle,
+        VaSlider,
+        VaChip,
     }
 }));
 

frontend/src/views/FrontView.vue

@@ -83,7 +83,11 @@ export default {
         filteredItems() {
             return [...this.items].filter(item => {
                 for (let [filterParam, filterValues]  of Object.entries(this.currentFilters)) {
-                    if (!filterValues.includes(item[filterParam])){
+                    if(filterParam === "depth"){
+                        if (item.depthMax < filterValues[0] || item.depthMin > filterValues[1]){
+                            return false;
+                        }
+                    } else if (!filterValues.includes(item[filterParam])){
                         return false;
                     }
                 }