Mercurial > gemma
changeset 3159:4f4905b57fcf
toolbar: added statistics dialog component
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 06 May 2019 13:02:25 +0200 |
parents | f91df0bc4986 |
children | 94935895e6d7 |
files | client/src/components/App.vue client/src/components/Statistics.vue client/src/components/toolbar/Statistics.vue client/src/components/toolbar/Toolbar.vue client/src/main.js client/src/store/application.js |
diffstat | 6 files changed, 117 insertions(+), 2 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/App.vue Mon May 06 12:21:28 2019 +0200 +++ b/client/src/components/App.vue Mon May 06 13:02:25 2019 +0200 @@ -14,6 +14,7 @@ <Profiles v-if="isMapVisible" /> <Gauges v-if="isMapVisible" /> <Pdftool v-if="isMapVisible" /> + <Statistics v-if="isMapVisible" /> </div> <div class="d-flex flex-column align-items-end"> <Identify v-if="isMapVisible" /> @@ -105,7 +106,8 @@ Toolbar: () => import("./toolbar/Toolbar"), Popup: () => import("./Popup"), Splitscreen: () => import("./splitscreen/Splitscreen"), - MinimizedSplitscreens: () => import("./splitscreen/MinimizedSplitscreens") + MinimizedSplitscreens: () => import("./splitscreen/MinimizedSplitscreens"), + Statistics: () => import("./Statistics") } }; </script>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/components/Statistics.vue Mon May 06 13:02:25 2019 +0200 @@ -0,0 +1,67 @@ +<template> + <div + :class="[ + 'box ui-element rounded bg-white text-nowrap', + { expanded: showStatistics } + ]" + > + <div style="width: 18rem"> + <UIBoxHeader icon="chart-line" :title="label" :closeCallback="close" /> + <div class="box-body"> + <UISpinnerOverlay v-if="loading" /> + <div class="d-flex flex-column"> + <select class="form-control font-weight-bold" v-model="type"> + <option :value="null">{{ $options.TYPES.EMPTY }}</option> + <option>{{ $options.TYPES.AVAILABLEFAIRWAYDEPTH }}</option> + </select> + </div> + </div> + </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> + * Thomas Junk <thomas.junk@intevation.de> + */ + +import app from "@/main"; +import { mapState } from "vuex"; + +export default { + data() { + return { + type: null, + loading: false + }; + }, + methods: { + close() { + this.$store.commit("application/showStatistics", false); + } + }, + computed: { + ...mapState("application", ["showStatistics", "paneSetup"]), + label() { + return this.$gettext("Statistics"); + } + }, + TYPES: { + AVAILABLEFAIRWAYDEPTH: app.$gettext("Available Fairway Depth"), + EMPTY: app.$gettext("Please choose statistic") + } +}; +</script> + +<style></style>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/components/toolbar/Statistics.vue Mon May 06 13:02:25 2019 +0200 @@ -0,0 +1,36 @@ +<template> + <div class="toolbar-button" v-tooltip.right="label"> + <font-awesome-icon + @click="$store.commit('application/showStatistics', !showStatistics)" + icon="chart-line" + :class="{ 'text-info': showStatistics }" + /> + </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> + * Thomas Junk <thomas.junk@intevation.de> + */ +import { mapState } from "vuex"; + +export default { + computed: { + ...mapState("application", ["showStatistics"]), + label() { + return this.$gettext("Statistics"); + } + } +}; +</script>
--- a/client/src/components/toolbar/Toolbar.vue Mon May 06 12:21:28 2019 +0200 +++ b/client/src/components/toolbar/Toolbar.vue Mon May 06 13:02:25 2019 +0200 @@ -13,6 +13,7 @@ <Linetool /> <Polygontool /> <Pdftool /> + <Statistics /> </div> <div @click="$store.commit('application/expandToolbar', !expandToolbar)" @@ -126,7 +127,8 @@ Polygontool: () => import("./Polygontool"), Profiles: () => import("./Profiles"), Gauges: () => import("./Gauges"), - Pdftool: () => import("./Pdftool") + Pdftool: () => import("./Pdftool"), + Statistics: () => import("./Statistics.vue") }, computed: { ...mapState("map", ["openLayersMaps"]),
--- a/client/src/main.js Mon May 06 12:21:28 2019 +0200 +++ b/client/src/main.js Mon May 06 13:02:25 2019 +0200 @@ -53,6 +53,8 @@ faBook, faBullseye, faChartArea, + faChartBar, + faChartLine, faCheck, faCity, faClipboardCheck, @@ -118,6 +120,8 @@ faBook, faBullseye, faChartArea, + faChartBar, + faChartLine, faCheck, faCity, faClipboardCheck,
--- a/client/src/store/application.js Mon May 06 12:21:28 2019 +0200 +++ b/client/src/store/application.js Mon May 06 13:02:25 2019 +0200 @@ -40,6 +40,7 @@ showContextBox: false, showProfiles: false, showGauges: false, + showStatistics: false, contextBoxContent: null, // bottlenecks, imports, staging expandToolbar: false, countries: ["AT", "SK", "HU", "HR", "RS", "BiH", "BG", "RO", "UA"], @@ -139,6 +140,9 @@ showGauges: (state, show) => { state.showGauges = show; }, + showStatistics: (state, show) => { + state.showStatistics = show; + }, contextBoxContent: (state, context) => { state.contextBoxContent = context; if (context) {