Mercurial > gemma
view client/src/components/map/contextbox/Bottlenecks.vue @ 1365:da7ee82ad5d6
merge
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Tue, 27 Nov 2018 09:03:27 +0100 |
parents | ca33ad696594 58d41573e530 |
children | b350b0b5cb6c |
line wrap: on
line source
<template> <div> <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center"> <font-awesome-icon icon="ship" class="mr-2"></font-awesome-icon>Bottlenecks </h6> <div class="row p-2 text-left small"> <div class="col-5"> <a href="#" @click="sortBy('name')" class="sort-link">Name</a> <font-awesome-icon :icon="sortIcon" class="ml-1" v-if="sortColumn === 'name'"></font-awesome-icon> </div> <div class="col-2"> <a href="#" @click="sortBy('latestMeasurement')" class="sort-link">Latest <br>Measurement </a> <font-awesome-icon :icon="sortIcon" class="ml-1" v-if="sortColumn === 'latestMeasurement'"></font-awesome-icon> </div> <div class="col-3"> <a href="#" @click="sortBy('chainage')" class="sort-link">Chainage</a> <font-awesome-icon :icon="sortIcon" class="ml-1" v-if="sortColumn === 'chainage'"></font-awesome-icon> </div> <div class="col-2"></div> </div> <div class="bottleneck-list small text-left" v-if="filteredAndSortedBottlenecks().length"> <div v-for="bottleneck in filteredAndSortedBottlenecks()" :key="bottleneck.properties.name" class="border-top row mx-0 py-2" > <div class="col-5 text-left"> <a href="#" class="d-block" @click="moveToBottleneck(bottleneck)" >{{ bottleneck.properties.name }}</a> </div> <div class="col-2">{{ displayCurrentSurvey(bottleneck.properties.current) }}</div> <div class="col-3" >{{ displayCurrentChainage(bottleneck.properties.from, bottleneck.properties.from) }}</div> <div class="col-2 text-right"> <button type="button" class="btn btn-sm btn-outline-secondary" @click="toggleBottleneck(bottleneck.properties.name)" > <font-awesome-icon icon="angle-down"></font-awesome-icon> </button> </div> <div :class="['col-12', 'surveys', {open: openBottleneck === bottleneck.properties.name}]"> <a href="#" class="d-block p-2" v-for="(survey, index) in openBottleneckSurveys" :key="index" @click="selectSurvey(survey, bottleneck)" >{{ survey.date_info }}</a> </div> </div> </div> <div v-else class="small text-center py-3 border-top">No results.</div> </div> </template> <script> /* This is Free Software under GNU Affero General Public License v >= 3.0 * without warranty, see README.md and license for details. * * SPDX-License-Identifier: AGPL-3.0-or-later * License-Filename: LICENSES/AGPL-3.0.txt * * Copyright (C) 2018 by via donau * – Österreichische Wasserstraßen-Gesellschaft mbH * Software engineering by Intevation GmbH * * Author(s): * Markus Kottländer <markus.kottlaender@intevation.de> */ import { mapState } from "vuex"; import { HTTP } from "../../../lib/http"; import { displayError } from "../../../lib/errors.js"; export default { name: "bottlenecks", data() { return { sortColumn: "name", sortDirection: "ASC", openBottleneck: null, openBottleneckSurveys: null }; }, computed: { ...mapState("application", ["searchQuery", "showSearchbarLastState"]), ...mapState("bottlenecks", ["bottlenecks"]), sortIcon() { return this.sortDirection === "ASC" ? "sort-amount-down" : "sort-amount-up"; } }, methods: { filteredAndSortedBottlenecks() { return this.bottlenecks .filter(bn => { return bn.properties.name .toLowerCase() .includes(this.searchQuery.toLowerCase()); }) .sort((bnA, bnB) => { switch (this.sortColumn) { case "name": if ( bnA.properties.name.toLowerCase() < bnB.properties.name.toLowerCase() ) return this.sortDirection === "ASC" ? -1 : 1; if ( bnA.properties.name.toLowerCase() > bnB.properties.name.toLowerCase() ) return this.sortDirection === "ASC" ? 1 : -1; return 0; case "latestMeasurement": { if ( (bnA.properties.current || "") < (bnB.properties.current || "") ) return this.sortDirection === "ASC" ? -1 : 1; if ( (bnA.properties.current || "") > (bnB.properties.current || "") ) return this.sortDirection === "ASC" ? 1 : -1; return 0; } case "chainage": if (bnA.properties.from < bnB.properties.from) return this.sortDirection === "ASC" ? -1 : 1; if (bnA.properties.from > bnB.properties.from) return this.sortDirection === "ASC" ? 1 : -1; return 0; default: return 0; } }); }, selectSurvey(survey, bottleneck) { this.$store.dispatch( "bottlenecks/setSelectedBottleneck", bottleneck.properties.name ); this.$store.commit("bottlenecks/setSelectedSurvey", survey); this.moveToBottleneck(bottleneck); }, moveToBottleneck(bottleneck) { this.$store.commit("map/moveMap", { coordinates: bottleneck.geometry.coordinates, zoom: 17, preventZoomOut: true }); }, sortBy(column) { this.sortColumn = column; this.sortDirection = this.sortDirection === "ASC" ? "DESC" : "ASC"; }, toggleBottleneck(name) { this.openBottleneckSurveys = null; if (name === this.openBottleneck) { this.openBottleneck = null; } else { this.openBottleneck = name; HTTP.get("/surveys/" + name, { headers: { "X-Gemma-Auth": localStorage.getItem("token"), "Content-type": "text/xml; charset=UTF-8" } }) .then(response => { this.openBottleneckSurveys = response.data.surveys; }) .catch(error => { const { status, data } = error.response; displayError({ title: "Backend Error", message: `${status}: ${data.message || data}` }); }); } }, displayCurrentSurvey(current) { return current ? current.substr(0, current.length - 1) : ""; }, displayCurrentChainage(from, to) { return from / 10 + " - " + to / 10; } }, mounted() { this.$store.dispatch("bottlenecks/loadBottlenecks"); } }; </script> <style lang="sass" scoped> .bottleneck-list overflow-y: auto max-height: 500px .surveys max-height: 0 overflow: hidden transition: max-height 0.3s ease .surveys.open max-height: 999px .sort-link color: #444 font-weight: bold </style>