Mercurial > gemma

comparison client/src/components/Sidebar.vue @ 1272:bc55ffaeb639

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
cleaned up client/src directory better organization of files and directories, better naming, separation of admin and map context
author Markus Kottlaender <markus@intevation.de>
date Thu, 22 Nov 2018 07:07:12 +0100
parents
children a7dd8a3356fc
comparison
equal deleted inserted replaced
1268:aca692e73028 1272:bc55ffaeb639
1 <template>
2 <div :class="sidebarStyle">
3 <div
4 @click="$store.commit('application/showSidebar', !showSidebar)"
5 class="menubutton p-2 bg-white rounded position-absolute d-flex justify-content-center"
6 >
7 <i class="ui-element d-print-none fa fa-bars"></i>
8 </div>
9 <div :class="menuStyle">
10 <div class="menupoints" v-if="this.showSidebar">
11 <router-link to="/" class="text-body d-flex flex-row nav-link">
12 <i class="fa fa-map-o align-self-center navicon"></i>Map
13 </router-link>
14 <div class="d-flex flex-row nav-link">
15 <i class="fa fa-ship align-self-center navicon"></i>
16 <a
17 class="text-body d-flex flex-row"
18 href="#"
19 @click="toggleContextBox('bottlenecks')"
20 >Bottlenecks</a>
21 </div>
22 <div v-if="isSysAdmin">
23 <hr>
24 <div class="nav-link d-flex menupadding text-muted">Administration</div>
25 </div>
26 <div v-if="isWaterwayAdmin">
27 <div class="d-flex flex-row nav-link">
28 <i class="fa fa-upload align-self-center navicon"></i>
29 <a
30 href="#"
31 class="text-body"
32 @click="toggleContextBox('imports')"
33 >Import soundingresults</a>
34 </div>
35 <div class="d-flex flex-row nav-link">
36 <i class="fa fa-list-ol align-self-center navicon"></i>
37 <a
38 href="#"
39 class="text-body"
40 @click="toggleContextBox('staging')"
41 >Staging area</a>
42 </div>
43 <div class="nav-link d-flex menupadding text-muted">Systemadministration</div>
44 <router-link class="text-body d-flex flex-row nav-link" to="usermanagement">
45 <i class="fa fa-address-card-o align-self-center navicon"></i>Users
46 </router-link>
47 </div>
48 <div v-if="isSysAdmin">
49 <router-link
50 class="text-body d-flex flex-row nav-link"
51 to="systemconfiguration"
52 >
53 <i class="fa fa-wrench align-self-center navicon"></i>Systemconfiguration
54 </router-link>
55 <router-link class="text-body d-flex flex-row nav-link" to="logs">
56 <i class="fa fa-book align-self-center navicon"></i>Logs
57 </router-link>
58 <router-link class="text-body d-flex flex-row nav-link" to="importqueue">
59 <i class="fa fa-exchange align-self-center navicon"></i>Importqueue
60 </router-link>
61 </div>
62 <hr>
63 <a href="#" @click="logoff" class="text-body d-flex flex-row nav-link">
64 <i class="fa fa-power-off align-self-center navicon"></i>
65 Logout {{ user }}
66 </a>
67 </div>
68 </div>
69 </div>
70 </template>
71
72 <script>
73 /*
74 * This is Free Software under GNU Affero General Public License v >= 3.0
75 * without warranty, see README.md and license for details.
76 *
77 * SPDX-License-Identifier: AGPL-3.0-or-later
78 * License-Filename: LICENSES/AGPL-3.0.txt
79 *
80 * Copyright (C) 2018 by via donau
81 * – Österreichische Wasserstraßen-Gesellschaft mbH
82 * Software engineering by Intevation GmbH
83 *
84 * Author(s):
85 * Thomas Junk <thomas.junk@intevation.de>
86 * Markus Kottländer <markus.kottlaender@intevation.de>
87 */
88 import { mapGetters, mapState } from "vuex";
89
90 export default {
91 name: "sidebar",
92 props: ["routeName"],
93 computed: {
94 ...mapGetters("user", ["isSysAdmin", "isWaterwayAdmin"]),
95 ...mapState("user", ["user"]),
96 ...mapState("application", [
97 "showSidebar",
98 "showSearchbarLastState",
99 "showInContextBox"
100 ]),
101 menuStyle() {
102 return {
103 menu: true,
104 nav: true,
105 "flex-column": true
106 };
107 },
108 sidebarStyle() {
109 return [
110 "ui-element position-relative sidebar rounded shadow-xs d-print-none mb-auto",
111 {
112 sidebarcollapsed: !this.showSidebar,
113 sidebarextended: this.showSidebar
114 }
115 ];
116 }
117 },
118 methods: {
119 logoff() {
120 this.$store.commit("user/clearAuth");
121 this.$store.commit("application/showSidebar", false);
122 this.$store.commit("application/showUsermenu", false);
123 this.$store.commit("application/showSplitscreen", false);
124 this.$router.push("/login");
125 },
126 toggleContextBox(context) {
127 const SHOW = context;
128 const HIDE = null;
129 const isElementAlreadyShown = this.showInContextBox === context;
130 let toggleState =
131 isElementAlreadyShown && this.routeName === "mainview" ? HIDE : SHOW;
132 this.$router.push("/");
133 this.$store.commit("application/showInContextBox", toggleState);
134 if (this.showInContextBox === context) {
135 this.$store.commit("application/showSearchbar", true);
136 } else {
137 this.$store.commit(
138 "application/showSearchbar",
139 this.showSearchbarLastState
140 );
141 }
142 }
143 }
144 };
145 </script>
146
147 <style lang="sass" scoped>
148
149 a:hover
150 text-decoration: none
151
152 .menupoints
153 text-align: left
154
155 .menubutton
156 height: $icon-height
157 width: $icon-width
158 top: 0
159 left: 0
160 color: #666
161
162 .router-link-exact-active
163 background-color: #f2f2f2
164
165 .navicon
166 margin-right: $small-offset
167 color: #666
168
169 .menu
170 padding-top: $small-offset
171
172 .sidebar
173 background-color: #ffffff
174 padding-top: $large-offset
175 opacity: $slight-transparent
176
177 .sidebarcollapsed
178 height: 30px
179 width: 30px
180 transition: $transition-fast
181
182 .sidebarextended
183 height: 35rem
184 width: $sidebar-width
185 min-width: $sidebar-width
186 </style>