You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 lines
3.5 KiB
120 lines
3.5 KiB
<template>
|
|
<navbar />
|
|
<div class="central-view">
|
|
<sidebar>
|
|
<filter-panel @filter="applyFilters" />
|
|
</sidebar>
|
|
<div class="main-view">
|
|
<va-input v-model="searchQuery"></va-input>
|
|
<overview-screen :items="filteredAndSearchedItems" @mapClick="applyFilters" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import Navbar from "@/components/Navbar.vue";
|
|
import Sidebar from "@/components/Sidebar.vue";
|
|
import OverviewScreen from "@/components/OverviewScreen.vue";
|
|
import FilterPanel from "@/components/FilterPanel.vue";
|
|
export default {
|
|
name: "front-view",
|
|
components: { Navbar, Sidebar, OverviewScreen, FilterPanel },
|
|
data() {
|
|
return {
|
|
items: [],
|
|
currentFilters: {},
|
|
searchQuery: '',
|
|
searchColumns: [
|
|
"basin",
|
|
"deposit",
|
|
"well",
|
|
"stratum",
|
|
"org",
|
|
"samplelist",
|
|
"description",
|
|
"form_dimentions",
|
|
"datalist",
|
|
"resolution",
|
|
],
|
|
}
|
|
},
|
|
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))
|
|
},
|
|
|
|
applyFilters(filter) {
|
|
for (let key in filter) {
|
|
if (filter[key] != "Any") {
|
|
if (key in this.currentFilters)
|
|
this.currentFilters[key].push(filter[key]);
|
|
else
|
|
this.currentFilters[key] = [filter[key]];
|
|
} else {
|
|
delete this.currentFilters[key]
|
|
}
|
|
};
|
|
},
|
|
},
|
|
mounted () {
|
|
this.fetchAllItems()
|
|
},
|
|
computed: {
|
|
filteredItems() {
|
|
return [...this.items].filter(item => {
|
|
for (let [filterParam, filterValues] of Object.entries(this.currentFilters)) {
|
|
if (!filterValues.includes(item[filterParam])){
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
})
|
|
},
|
|
filteredAndSearchedItems(){
|
|
return this.filteredItems.filter(item => {
|
|
if (this.searchQuery.trim() == ''){
|
|
return true
|
|
}
|
|
let result = false;
|
|
// for each word in search query
|
|
word_loop:
|
|
for (let word of this.searchQuery.toLowerCase().trim().split(" ")) {
|
|
// check if the word is present in any of the columns
|
|
for (let searchColumn of this.searchColumns) {
|
|
if (item[searchColumn]?.toLowerCase().includes(word.trim())) {
|
|
// found the word, no need to check other columns
|
|
result = true;
|
|
continue word_loop;
|
|
}
|
|
}
|
|
// haven't found the word in any of the columns, drop this item
|
|
return false;
|
|
}
|
|
return result;
|
|
})
|
|
},
|
|
},
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
<style lang="css">
|
|
.central-view {
|
|
/* height: max(100vh, 100%); */
|
|
flex: 1 0 80vh;
|
|
margin: 0;
|
|
display: flex;
|
|
/* flex-direction: row; */
|
|
}
|
|
|
|
.main-view {
|
|
width: 100%;
|
|
}
|
|
</style> |