add: resolution filter

frontend/src/components/FilterPanel.vue

@@ -25,6 +25,12 @@
             <datalist-filter @filter="$emit('filter', $event)" />
         </div>
 
+        <div class="sidebar-item">
+            <h3>Разрешение съемки</h3>
+            <resolution-filter @filter="$emit('filter', $event)" />
+        </div>
+
+
         <div class="sidebar-item">
             <h3>Глубины</h3>
             <depth-filter @filter="$emit('filter', $event)" />
@@ -45,9 +51,14 @@ import BasinFilter from "@/components/filters/BasinFilter.vue";
 import ProjectFilter from "@/components/filters/ProjectFilter.vue";
 import DescriptionFilter from "@/components/filters/DescriptionFilter.vue";
 import DatalistFilter from "@/components/filters/DatalistFilter.vue";
+import ResolutionFilter from "@/components/filters/ResolutionFilter.vue";
 export default {
     name: "filter-panel",
-    components: { CategoryFilter, GisCategoryFilter, ScannerFilter, OrgFilter, StratumFilter, DepthFilter, BasinFilter, ProjectFilter, DescriptionFilter, DatalistFilter },
+    components: {
+        CategoryFilter, GisCategoryFilter, ScannerFilter, OrgFilter,
+        StratumFilter, DepthFilter, BasinFilter, ProjectFilter,
+        DescriptionFilter, DatalistFilter, ResolutionFilter
+    },
     methods: {},
     data() {
         return {}

frontend/src/components/filters/ResolutionFilter.vue

@@ -0,0 +1,44 @@
+<template>
+    <div class="range-input">
+        <va-input placeholder="1.59" v-model="reso_min" input-class="text--center"
+            :mask="{ numeral: true, delimiter: '', numeralDecimalMark: ',' }" @change="applyFilter" />
+        <va-input placeholder="264" v-model="reso_max" input-class="text--center"
+            :mask="{ numeral: true, delimiter: '', numeralDecimalMark: ',' }" @change="applyFilter" />
+    </div>
+</template>
+
+
+<script>
+export default {
+    name: "resolution-filter",
+    data() {
+        return {
+            // SELECT MIN(resolution), MAX(resolution)  FROM geodata;
+            reso_min: "1.59",
+            reso_max: "264",
+        }
+    },
+    methods: {
+        applyFilter() {
+            console.log("asd");
+            const filter = { "resolution": [this.reso_min, this.reso_max] }
+            this.$emit('filter', filter, this.name)
+        },
+    },
+}
+</script>
+
+
+<style lang="css">
+.range-input {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 5rem
+}
+
+.range-input>div {
+    --va-input-wrapper-min-width: 4rem;
+    width: 4rem;
+}
+</style>

frontend/src/views/FrontView.vue

@@ -91,6 +91,17 @@ export default {
                         if (item.depth_max < filterValues[0] || item.depth_min > filterValues[1]) {
                             return false;
                         }
+                    } else if (filterParam === "resolution") {
+                        if (
+                            // we control resolution input format, so we can be reasonbly sure 
+                            // it has upto one comma to denote decimal point and no dots
+                            // therefore it's safe to normalize it into
+                            // JavaScript definition of a decimal literal
+                            item.resolution < parseFloat(filterValues[0].replace(/,/, '.'))
+                            || item.resolution > parseFloat(filterValues[1].replace(/,/, '.'))
+                        ) {
+                            return false;
+                        }
                     } else if (filterParam === "datalist") {
                         // for all selected datalist options check if we can find it in the datalist string
                         for (let datalistOption of filterValues) {