Mercurial > gemma
diff client/src/components/map/contextbox/Staging.vue @ 1276:aec9ed491dad
more cleanup in client/src
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 22 Nov 2018 07:40:23 +0100 |
parents | |
children | 60e15c2d26a2 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/components/map/contextbox/Staging.vue Thu Nov 22 07:40:23 2018 +0100 @@ -0,0 +1,148 @@ +<template> + <div> + <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center"> + <i class="fa fa-list-ol mr-2"></i> + Staging Area + </h6> + <table class="table mb-0"> + <thead> + <tr> + <th>Name</th> + <th>Datatype</th> + <th>Importdate</th> + <th>ImportID</th> + <th> </th> + </tr> + </thead> + <tbody v-if="filteredData.length"> + <tr v-for="data in filteredData" :key="data.id"> + <td> + <a @click="zoomTo(data.location)" href="#">{{ data.name }}</a> + </td> + <td>{{ data.type }}</td> + <td>{{ data.date }}</td> + <td>{{ data.importID }}</td> + <td> + <button class="btn btn-outline-info"> + <i class="fa fa-thumbs-up"></i> + </button> + + <button class="btn btn-outline-info"> + <i class="fa fa-thumbs-down"></i> + </button> + </td> + </tr> + </tbody> + <tbody v-else> + <tr> + <td class="text-center" colspan="6">No results.</td> + </tr> + </tbody> + </table> + <div class="p-3" v-if="filteredData.length"> + <button class="btn btn-info">Confirm</button> + </div> + </div> +</template> + +<script> +import { mapState } from "vuex"; + +const demodata = [ + { + id: 1, + name: "B1", + date: "2018-11-19 10:23", + location: [16.5364, 48.1471], + status: "Not approved", + importID: "123456789", + type: "bottleneck" + }, + { + id: 2, + name: "B2", + date: "2018-11-19 10:24", + location: [16.5364, 48.1472], + status: "Not approved", + importID: "123456789", + type: "bottleneck" + }, + { + id: 3, + name: "s1", + date: "2018-11-13 10:25", + location: [16.5364, 48.1473], + status: "Not approved", + importID: "987654321", + type: "soundingresult" + }, + { + id: 4, + name: "s2", + date: "2018-11-13 10:26", + location: [16.5364, 48.1474], + status: "Not approved", + importID: "987654321", + type: "soundingresult" + } +]; + +export default { + computed: { + ...mapState("application", ["searchQuery"]), + filteredData() { + return demodata.filter(data => { + const nameFound = data.name + .toLowerCase() + .includes(this.searchQuery.toLowerCase()); + const dateFound = data.date + .toLowerCase() + .includes(this.searchQuery.toLowerCase()); + const locationFound = data.location.find(coord => { + return coord + .toString() + .toLowerCase() + .includes(this.searchQuery.toLowerCase()); + }); + const statusFound = data.status + .toLowerCase() + .includes(this.searchQuery.toLowerCase()); + const importIDFound = data.importID + .toLowerCase() + .includes(this.searchQuery.toLowerCase()); + const typeFound = data.type + .toLowerCase() + .includes(this.searchQuery.toLowerCase()); + + return ( + nameFound || + dateFound || + locationFound || + statusFound || + importIDFound || + typeFound + ); + }); + } + }, + methods: { + zoomTo(coordinates) { + this.$store.commit("map/moveMap", { + coordinates: coordinates, + zoom: 17, + preventZoomOut: true + }); + } + } +}; +</script> + +<style lang="sass" scoped> +.table th, +td + font-size: 0.9rem + border-top: 0px !important + border-bottom-width: 1px + text-align: left + padding: 0.5rem !important +</style>