Mercurial > gemma
comparison client/src/components/Statistics.vue @ 3159:4f4905b57fcf
toolbar: added statistics dialog component
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 06 May 2019 13:02:25 +0200 |
parents | |
children | 975efa874acf |
comparison
equal
deleted
inserted
replaced
3158:f91df0bc4986 | 3159:4f4905b57fcf |
---|---|
1 <template> | |
2 <div | |
3 :class="[ | |
4 'box ui-element rounded bg-white text-nowrap', | |
5 { expanded: showStatistics } | |
6 ]" | |
7 > | |
8 <div style="width: 18rem"> | |
9 <UIBoxHeader icon="chart-line" :title="label" :closeCallback="close" /> | |
10 <div class="box-body"> | |
11 <UISpinnerOverlay v-if="loading" /> | |
12 <div class="d-flex flex-column"> | |
13 <select class="form-control font-weight-bold" v-model="type"> | |
14 <option :value="null">{{ $options.TYPES.EMPTY }}</option> | |
15 <option>{{ $options.TYPES.AVAILABLEFAIRWAYDEPTH }}</option> | |
16 </select> | |
17 </div> | |
18 </div> | |
19 </div> | |
20 </div> | |
21 </template> | |
22 | |
23 <script> | |
24 /* This is Free Software under GNU Affero General Public License v >= 3.0 | |
25 * without warranty, see README.md and license for details. | |
26 * | |
27 * SPDX-License-Identifier: AGPL-3.0-or-later | |
28 * License-Filename: LICENSES/AGPL-3.0.txt | |
29 * | |
30 * Copyright (C) 2018 by via donau | |
31 * – Österreichische Wasserstraßen-Gesellschaft mbH | |
32 * Software engineering by Intevation GmbH | |
33 * | |
34 * Author(s): | |
35 * Markus Kottländer <markus.kottlaender@intevation.de> | |
36 * Thomas Junk <thomas.junk@intevation.de> | |
37 */ | |
38 | |
39 import app from "@/main"; | |
40 import { mapState } from "vuex"; | |
41 | |
42 export default { | |
43 data() { | |
44 return { | |
45 type: null, | |
46 loading: false | |
47 }; | |
48 }, | |
49 methods: { | |
50 close() { | |
51 this.$store.commit("application/showStatistics", false); | |
52 } | |
53 }, | |
54 computed: { | |
55 ...mapState("application", ["showStatistics", "paneSetup"]), | |
56 label() { | |
57 return this.$gettext("Statistics"); | |
58 } | |
59 }, | |
60 TYPES: { | |
61 AVAILABLEFAIRWAYDEPTH: app.$gettext("Available Fairway Depth"), | |
62 EMPTY: app.$gettext("Please choose statistic") | |
63 } | |
64 }; | |
65 </script> | |
66 | |
67 <style></style> |