add: filter proto

package-lock.json

@@ -14,6 +14,7 @@
       },
       "devDependencies": {
         "@vue/cli-service": "~5.0.0",
+        "nodemon": "^2.0.19",
         "vue-cli-plugin-vuestic-ui": "~1.0.8"
       }
     },
@@ -1460,6 +1461,12 @@
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
       "dev": true
     },
+    "node_modules/abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
+      "dev": true
+    },
     "node_modules/accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -3994,6 +4001,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/ignore-by-default": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
+      "integrity": "sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==",
+      "dev": true
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -5029,6 +5042,89 @@
       "integrity": "sha512-maHFz6OLqYxz+VQyCAtA3PTX4UP/53pa05fyDNc9CwjvJ0yEh6+xBwKsgCxMNhS8taUKBFYxfuiaD9U/55iFaw==",
       "dev": true
     },
+    "node_modules/nodemon": {
+      "version": "2.0.19",
+      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.19.tgz",
+      "integrity": "sha512-4pv1f2bMDj0Eeg/MhGqxrtveeQ5/G/UVe9iO6uTZzjnRluSA4PVWf8CW99LUPwGB3eNIA7zUFoP77YuI7hOc0A==",
+      "dev": true,
+      "hasInstallScript": true,
+      "dependencies": {
+        "chokidar": "^3.5.2",
+        "debug": "^3.2.7",
+        "ignore-by-default": "^1.0.1",
+        "minimatch": "^3.0.4",
+        "pstree.remy": "^1.1.8",
+        "semver": "^5.7.1",
+        "simple-update-notifier": "^1.0.7",
+        "supports-color": "^5.5.0",
+        "touch": "^3.1.0",
+        "undefsafe": "^2.0.5"
+      },
+      "bin": {
+        "nodemon": "bin/nodemon.js"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/nodemon"
+      }
+    },
+    "node_modules/nodemon/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/nodemon/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/nodemon/node_modules/semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/nodemon/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/nopt": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
+      "integrity": "sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg==",
+      "dev": true,
+      "dependencies": {
+        "abbrev": "1"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/normalize-package-data": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
@@ -6158,6 +6254,12 @@
       "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=",
       "dev": true
     },
+    "node_modules/pstree.remy": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz",
+      "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==",
+      "dev": true
+    },
     "node_modules/pump": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
@@ -6724,6 +6826,27 @@
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
+    "node_modules/simple-update-notifier": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-1.0.7.tgz",
+      "integrity": "sha512-BBKgR84BJQJm6WjWFMHgLVuo61FBDSj1z/xSFUIozqO6wO7ii0JxCqlIud7Enr/+LhlbNI0whErq96P2qHNWew==",
+      "dev": true,
+      "dependencies": {
+        "semver": "~7.0.0"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/simple-update-notifier/node_modules/semver": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
+      "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/sirv": {
       "version": "1.0.19",
       "resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.19.tgz",
@@ -7203,6 +7326,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/touch": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.0.tgz",
+      "integrity": "sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA==",
+      "dev": true,
+      "dependencies": {
+        "nopt": "~1.0.10"
+      },
+      "bin": {
+        "nodetouch": "bin/nodetouch.js"
+      }
+    },
     "node_modules/tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
@@ -7237,6 +7372,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/undefsafe": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
+      "integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==",
+      "dev": true
+    },
     "node_modules/universalify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
@@ -9199,6 +9340,12 @@
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
       "dev": true
     },
+    "abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
+      "dev": true
+    },
     "accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -11084,6 +11231,12 @@
       "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
       "dev": true
     },
+    "ignore-by-default": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
+      "integrity": "sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==",
+      "dev": true
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -11885,6 +12038,65 @@
       "integrity": "sha512-maHFz6OLqYxz+VQyCAtA3PTX4UP/53pa05fyDNc9CwjvJ0yEh6+xBwKsgCxMNhS8taUKBFYxfuiaD9U/55iFaw==",
       "dev": true
     },
+    "nodemon": {
+      "version": "2.0.19",
+      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.19.tgz",
+      "integrity": "sha512-4pv1f2bMDj0Eeg/MhGqxrtveeQ5/G/UVe9iO6uTZzjnRluSA4PVWf8CW99LUPwGB3eNIA7zUFoP77YuI7hOc0A==",
+      "dev": true,
+      "requires": {
+        "chokidar": "^3.5.2",
+        "debug": "^3.2.7",
+        "ignore-by-default": "^1.0.1",
+        "minimatch": "^3.0.4",
+        "pstree.remy": "^1.1.8",
+        "semver": "^5.7.1",
+        "simple-update-notifier": "^1.0.7",
+        "supports-color": "^5.5.0",
+        "touch": "^3.1.0",
+        "undefsafe": "^2.0.5"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "dev": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+          "dev": true
+        },
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "nopt": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
+      "integrity": "sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg==",
+      "dev": true,
+      "requires": {
+        "abbrev": "1"
+      }
+    },
     "normalize-package-data": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
@@ -12674,6 +12886,12 @@
       "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=",
       "dev": true
     },
+    "pstree.remy": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz",
+      "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==",
+      "dev": true
+    },
     "pump": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
@@ -13104,6 +13322,23 @@
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
+    "simple-update-notifier": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-1.0.7.tgz",
+      "integrity": "sha512-BBKgR84BJQJm6WjWFMHgLVuo61FBDSj1z/xSFUIozqO6wO7ii0JxCqlIud7Enr/+LhlbNI0whErq96P2qHNWew==",
+      "dev": true,
+      "requires": {
+        "semver": "~7.0.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
+          "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==",
+          "dev": true
+        }
+      }
+    },
     "sirv": {
       "version": "1.0.19",
       "resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.19.tgz",
@@ -13468,6 +13703,15 @@
       "integrity": "sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==",
       "dev": true
     },
+    "touch": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.0.tgz",
+      "integrity": "sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA==",
+      "dev": true,
+      "requires": {
+        "nopt": "~1.0.10"
+      }
+    },
     "tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
@@ -13496,6 +13740,12 @@
         "mime-types": "~2.1.24"
       }
     },
+    "undefsafe": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
+      "integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==",
+      "dev": true
+    },
     "universalify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "nodemon --exec 'vue-cli-service serve'",
     "build": "vue-cli-service build"
   },
   "dependencies": {
@@ -13,6 +13,7 @@
   },
   "devDependencies": {
     "@vue/cli-service": "~5.0.0",
+    "nodemon": "^2.0.19",
     "vue-cli-plugin-vuestic-ui": "~1.0.8"
   }
 }

src/components/OverviewScreen.vue

@@ -4,7 +4,7 @@
             <map-component />
         </va-card>
         <va-card class="content-container">
-            <va-data-table :items="items" />
+            <va-data-table :items="items" :hoverable="true" />
         </va-card>
     </div>
 </template>
@@ -15,24 +15,22 @@ import MapComponent from "./MapComponent.vue";
 export default {
     name: "overview-screen",
     components: { MapComponent },
+    props: {
+        items: {
+            type: Array,
+            required: true,
+        }
+    },
     data() {
         return {
-            items: []
+            // columns: [
+            //     { key: 'gis_category', label: 'cat4gis', sortable: true },
+            //     { key: 'category', sortable: true },
+            // ],
         }
     },
-    methods: {
+    methods: {},
-        fetchItems() {
-            const baseURL = "http://localhost:8080/api/v1"
 
-            fetch(`${baseURL}/items/`)
-                .then(res => res.json())
-                .then(data => this.items = data)
-                .catch((e) => console.log(e))
-        }
-    },
-    created() {
-        this.fetchItems()
-    },
 }
 </script>
 

src/components/Sidebar.vue

@@ -1,26 +1,62 @@
 <template>
     <div>
         <va-sidebar color="primary" text-color="white" gradient class="sidebar-proper">
-            <template v-for="item in sidebarItems" :key="item.title">
+            <h3>Category</h3>
+            <category-filter @filter="filter" />
+            <h3>GIS Category</h3>
+            <gis-category-filter @filter="filter" />
+            <h3>Scanner</h3>
+            <scanner-filter @filter="filter" />
+            <h3>Organiztion</h3>
+            <org-filter @filter="filter" />
+            <h3>Stratum</h3>
+            <stratum-filter @filter="filter" />
+
+            <!-- <template v-for="item in sidebarItems" :key="item.title">
                 <va-sidebar-item :active="item.active">
                     <va-sidebar-item-content class="sidebar-item">
                         <va-icon class="sidebar-icon" size="2rem" :name="item.icon" />
                         <va-sidebar-item-title class="sidebar-title">{{ item.title }}</va-sidebar-item-title>
                     </va-sidebar-item-content>
                 </va-sidebar-item>
-            </template>
+            </template>-->
         </va-sidebar>
     </div>
 </template>
 
 
 <script>
+import CategoryFilter from "@/components/filters/CategoryFilter.vue";
+import GisCategoryFilter from "@/components/filters/GisCategoryFilter.vue";
+import ScannerFilter from "./filters/ScannerFilter.vue";
+import OrgFilter from "./filters/OrgFilter.vue";
+import StratumFilter from "./filters/StratumFilter.vue";
 export default {
     name: "sidebar",
     props: {
-        sidebarItems: {
+        // sidebarItems: {
-            type: Array,
+        //     type: Array,
-            required: true,
+        //     required: true,
+        // }
+    },
+    components: { CategoryFilter, GisCategoryFilter, ScannerFilter, OrgFilter, StratumFilter },
+    methods: {
+        filter(filter) {
+            let key;
+            for (key in filter) {
+                if (filter[key] != "Any") {
+                    this.currentFilters[key] = filter[key]
+                } else {
+                    delete this.currentFilters[key]
+                }
+            };
+
+            this.$emit('filter', this.currentFilters);
+        }
+    },
+    data() {
+        return {
+            currentFilters: {}
         }
     },
 }

src/components/filters/CategoryFilter.vue

@@ -0,0 +1,42 @@
+<template>
+    <div>
+        <va-radio
+            class="radio-switcher"
+            v-for="(option, index) in categoryOptions"
+            :key="index"
+            v-model="selectedOption"
+            :option="option"
+            @update:model-value="applyFilter"
+        ></va-radio>
+    </div>
+</template>
+
+
+<script>
+export default {
+    name: "category-filter",
+    data() {
+        return {
+            categoryOptions: [
+                "Geology",
+                "Biology",
+                "Archeology",
+                "Materials",
+                "Any"
+            ],
+            selectedOption: "Any"
+        }
+    },
+    methods: {
+        applyFilter() {
+
+            const filter = { "category": this.selectedOption }
+            this.$emit('filter', filter, this.name)
+        },
+    },
+}
+</script>
+
+
+<style lang="css">
+</style>

src/components/filters/GisCategoryFilter.vue

@@ -0,0 +1,43 @@
+<template>
+    <div>
+        <va-radio
+            class="radio-switcher"
+            v-for="(option, index) in categoryOptions"
+            :key="index"
+            v-model="selectedOption"
+            :option="option"
+            @update:model-value="applyFilter"
+        ></va-radio>
+    </div>
+</template>
+
+
+<script>
+export default {
+    name: "gis-category-filter",
+    data() {
+        return {
+            categoryOptions: [
+                "Archeology",
+                "Biology",
+                "Geology",
+                "Materials",
+                "Soil",
+                "Any",
+            ],
+            selectedOption: "Any"
+        }
+    },
+    methods: {
+        applyFilter() {
+
+            const filter = { "gis_category": this.selectedOption }
+            this.$emit('filter', filter)
+        },
+    },
+}
+</script>
+
+
+<style lang="css">
+</style>

src/components/filters/OrgFilter.vue

@@ -0,0 +1,44 @@
+<template>
+    <div>
+        <va-radio
+            class="radio-switcher"
+            v-for="(option, index) in orgOptions"
+            :key="index"
+            v-model="selectedOption"
+            :option="option"
+            @update:model-value="applyFilter"
+        ></va-radio>
+    </div>
+</template>
+
+
+<script>
+export default {
+    name: "org-filter",
+    data() {
+        return {
+            orgOptions: [
+                "Почвенный ин-т РАН",
+                "Биологический ф-т, МГУ",
+                "Геологический факультет, МГУ",
+                "ОАО \"Газпром Промгаз\"",
+                "ИАЭТ СО РАН, Новосибирск",
+                "ИОНХ РАН",
+                "Any"
+            ],
+            selectedOption: "Any"
+        }
+    },
+    methods: {
+        applyFilter() {
+
+            const filter = { "org": this.selectedOption }
+            this.$emit('filter', filter, this.name)
+        },
+    },
+}
+</script>
+
+
+<style lang="css">
+</style>

src/components/filters/ScannerFilter.vue

@@ -0,0 +1,43 @@
+<template>
+    <div>
+        <va-radio
+            class="radio-switcher"
+            v-for="(option, index) in scannerOptions"
+            :key="index"
+            v-model="selectedOption"
+            :option="option"
+            @update:model-value="applyFilter"
+        ></va-radio>
+    </div>
+</template>
+
+
+<script>
+export default {
+    name: "scanner-filter",
+    data() {
+        return {
+            scannerOptions: [
+                "SkyScan1172",
+                "SkyScan 1172",
+                "v tome x",
+                "РКТ-180",
+                "SIEMENS Somatom Perspective",
+                "Any"
+            ],
+            selectedOption: "Any"
+        }
+    },
+    methods: {
+        applyFilter() {
+
+            const filter = { "scanner": this.selectedOption }
+            this.$emit('filter', filter, this.name)
+        },
+    },
+}
+</script>
+
+
+<style lang="css">
+</style>

src/components/filters/StratumFilter.vue

@@ -0,0 +1,41 @@
+<template>
+    <div>
+        <va-radio
+            class="radio-switcher"
+            v-for="(option, index) in stratumOptions"
+            :key="index"
+            v-model="selectedOption"
+            :option="option"
+            @update:model-value="applyFilter"
+        ></va-radio>
+    </div>
+</template>
+
+
+<script>
+export default {
+    name: "stratum-filter",
+    data() {
+        return {
+            stratumOptions: [
+                "баженовская свита",
+                "тюменская свита",
+                "турон ",
+                "Any"
+            ],
+            selectedOption: "Any"
+        }
+    },
+    methods: {
+        applyFilter() {
+
+            const filter = { "stratum": this.selectedOption }
+            this.$emit('filter', filter, this.name)
+        },
+    },
+}
+</script>
+
+
+<style lang="css">
+</style>

src/views/FrontView.vue

@@ -2,9 +2,9 @@
     <div>
         <navbar />
         <div class="central-view">
-            <sidebar :sidebarItems="sidebarItems" />
+            <sidebar @filter="fetchFiltered" />
             <div class="main-view">
-                <overview-screen />
+                <overview-screen :items="items" />
             </div>
         </div>
     </div>
@@ -20,11 +20,39 @@ export default {
     components: { Navbar, Sidebar, OverviewScreen },
     data() {
         return {
-            sidebarItems: [
+            items: [],
-                {}
-            ],
         }
     },
+    methods: {
+        fetchAllItems() {
+            const baseURL = "http://localhost:8080/api/v1";
+
+            fetch(`${baseURL}/items/?limit=10000`)
+                .then(res => res.json())
+                .then(data => this.items = data)
+                .catch((e) => console.log(e))
+        },
+        fetchFiltered(filter) {
+            const baseURL = "http://localhost:8080/api/v1";
+
+            // request options
+            const options = {
+                method: 'POST',
+                body: JSON.stringify(filter),
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            };
+
+            fetch(`${baseURL}/detailed_search/?limit=10000`, options)
+                .then(res => res.json())
+                .then(data => this.items = data)
+                .catch((e) => console.log(e))
+        }
+    },
+    created() {
+        this.fetchAllItems()
+    },
 }
 
 </script>