Mercurial > gemma
comparison client/src/components/Sidebar.vue @ 2382:c28971cd70ce
client: indicator for imports waiting for review
The main menu button and the staging area menu item now show an indicator for open imports
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Mon, 25 Feb 2019 08:35:47 +0100 |
parents | eebe0a8ddc82 |
children | 8d025f85a3fe |
comparison
equal
deleted
inserted
replaced
2381:99274fed6f3d | 2382:c28971cd70ce |
---|---|
1 <template> | 1 <template> |
2 <div :class="sidebarStyle"> | 2 <div class="position-relative"> |
3 <div | 3 <span class="indicator" v-if="!showSidebar && staging.length"> |
4 @click="$store.commit('application/showSidebar', !showSidebar)" | 4 {{ staging.length }} |
5 class="menubutton ui-element d-print-none p-2 bg-white rounded position-absolute d-flex justify-content-center" | 5 </span> |
6 > | 6 <div :class="sidebarStyle"> |
7 <font-awesome-icon class="fa-fw" icon="bars"></font-awesome-icon> | 7 <div |
8 </div> | 8 @click="$store.commit('application/showSidebar', !showSidebar)" |
9 <div class="menu text-nowrap text-left"> | 9 class="menubutton ui-element d-print-none p-2 bg-white rounded position-absolute d-flex justify-content-center" |
10 <router-link to="/"> | 10 > |
11 <font-awesome-icon | 11 <font-awesome-icon class="fa-fw" icon="bars"></font-awesome-icon> |
12 class="fa-fw mr-2" | 12 </div> |
13 fixed-width | 13 <div class="menu text-nowrap text-left"> |
14 icon="map-marked-alt" | 14 <router-link to="/"> |
15 ></font-awesome-icon> | |
16 <span class="fix-trans-space" v-translate>Map</span> | |
17 </router-link> | |
18 <router-link to="/bottlenecks"> | |
19 <font-awesome-icon | |
20 class="fa-fw mr-2" | |
21 fixed-width | |
22 icon="ship" | |
23 ></font-awesome-icon> | |
24 <span class="fix-trans-space" v-translate>Bottlenecks</span> | |
25 </router-link> | |
26 <div v-if="isWaterwayAdmin"> | |
27 <router-link to="/review"> | |
28 <font-awesome-icon | 15 <font-awesome-icon |
29 class="fa-fw mr-2" | 16 class="fa-fw mr-2" |
30 fixed-width | 17 fixed-width |
31 icon="clipboard-check" | 18 icon="map-marked-alt" |
32 ></font-awesome-icon> | 19 ></font-awesome-icon> |
33 <span class="fix-trans-space" v-translate>Staging area</span> | 20 <span class="fix-trans-space" v-translate>Map</span> |
34 </router-link> | 21 </router-link> |
35 </div> | 22 <router-link to="/bottlenecks"> |
36 <div v-if="isSysAdmin"> | |
37 <router-link to="/stretches"> | |
38 <font-awesome-icon | 23 <font-awesome-icon |
39 class="fa-fw mr-2" | 24 class="fa-fw mr-2" |
40 fixed-width | 25 fixed-width |
41 icon="road" | 26 icon="ship" |
42 ></font-awesome-icon> | 27 ></font-awesome-icon> |
43 <span class="fix-trans-space" v-translate>Define stretches</span> | 28 <span class="fix-trans-space" v-translate>Bottlenecks</span> |
44 </router-link> | 29 </router-link> |
45 </div> | 30 <div v-if="isWaterwayAdmin"> |
46 <div v-if="isWaterwayAdmin"> | 31 <router-link to="/review" class="position-relative"> |
47 <small class="text-muted pl-3"> <translate>Import</translate> </small> | 32 <font-awesome-icon |
33 class="fa-fw mr-2" | |
34 fixed-width | |
35 icon="clipboard-check" | |
36 ></font-awesome-icon> | |
37 <span class="fix-trans-space" v-translate>Staging area</span> | |
38 <span class="indicator" v-if="showSidebar && staging.length"> | |
39 {{ staging.length }} | |
40 </span> | |
41 </router-link> | |
42 </div> | |
43 <div v-if="isSysAdmin"> | |
44 <router-link to="/stretches"> | |
45 <font-awesome-icon | |
46 class="fa-fw mr-2" | |
47 fixed-width | |
48 icon="road" | |
49 ></font-awesome-icon> | |
50 <span class="fix-trans-space" v-translate>Define stretches</span> | |
51 </router-link> | |
52 </div> | |
53 <div v-if="isWaterwayAdmin"> | |
54 <small class="text-muted pl-3"> <translate>Import</translate> </small> | |
55 <hr class="m-0" /> | |
56 <router-link to="/importsoundingresults"> | |
57 <font-awesome-icon | |
58 class="fa-fw mr-2" | |
59 fixed-width | |
60 icon="upload" | |
61 ></font-awesome-icon> | |
62 <span class="fix-trans-space" v-translate | |
63 >Import soundingresults</span | |
64 > | |
65 </router-link> | |
66 <router-link to="/importapprovedgaugemeasurement"> | |
67 <font-awesome-icon | |
68 class="fa-fw mr-2" | |
69 fixed-width | |
70 icon="upload" | |
71 ></font-awesome-icon> | |
72 <span class="fix-trans-space" v-translate | |
73 >Import approved gaugemeasurements</span | |
74 > | |
75 </router-link> | |
76 <router-link to="/importwaterwayprofiles"> | |
77 <font-awesome-icon | |
78 class="fa-fw mr-2" | |
79 fixed-width | |
80 icon="upload" | |
81 ></font-awesome-icon> | |
82 <span class="fix-trans-space" v-translate | |
83 >Import waterway profiles</span | |
84 > | |
85 </router-link> | |
86 <router-link to="/importschedule"> | |
87 <font-awesome-icon | |
88 class="fa-fw mr-2" | |
89 fixed-width | |
90 icon="clock" | |
91 ></font-awesome-icon> | |
92 <translate class="fix-trans-space">Imports</translate> | |
93 </router-link> | |
94 <small class="text-muted pl-3"> | |
95 <translate>Systemadministration</translate> | |
96 </small> | |
97 <hr class="m-0" /> | |
98 </div> | |
99 <div v-if="isSysAdmin"> | |
100 <router-link to="/usermanagement"> | |
101 <font-awesome-icon | |
102 class="fa-fw mr-2" | |
103 fixed-width | |
104 icon="users-cog" | |
105 ></font-awesome-icon> | |
106 <span class="fix-trans-space" v-translate>Users</span> | |
107 </router-link> | |
108 </div> | |
109 <div v-if="isWaterwayAdmin"> | |
110 <router-link to="/systemconfiguration"> | |
111 <font-awesome-icon | |
112 class="fa-fw mr-2" | |
113 fixed-width | |
114 icon="wrench" | |
115 ></font-awesome-icon> | |
116 <span class="fix-trans-space" v-translate>Configuration</span> | |
117 </router-link> | |
118 </div> | |
119 <div v-if="isSysAdmin"> | |
120 <router-link to="/logs"> | |
121 <font-awesome-icon | |
122 class="fa-fw mr-2" | |
123 fixed-width | |
124 icon="book" | |
125 ></font-awesome-icon> | |
126 <span class="fix-trans-space" v-translate>Logs</span> | |
127 </router-link> | |
128 </div> | |
129 <div v-if="isWaterwayAdmin"> | |
130 <router-link to="/importqueue"> | |
131 <font-awesome-icon | |
132 class="fa-fw mr-2" | |
133 fixed-width | |
134 icon="tasks" | |
135 ></font-awesome-icon> | |
136 <span class="fix-trans-space" v-translate>Importqueue</span> | |
137 </router-link> | |
138 </div> | |
48 <hr class="m-0" /> | 139 <hr class="m-0" /> |
49 <router-link to="/importsoundingresults"> | 140 <a @click="logoff" href="#" class="logout"> |
50 <font-awesome-icon | 141 <font-awesome-icon |
51 class="fa-fw mr-2" | 142 class="fa-fw mr-2" |
52 fixed-width | 143 fixed-width |
53 icon="upload" | 144 icon="power-off" |
54 ></font-awesome-icon> | 145 ></font-awesome-icon> |
55 <span class="fix-trans-space" v-translate | 146 <span class="fix-trans-space" v-translate>Logout</span> {{ user }} |
56 >Import soundingresults</span | 147 </a> |
57 > | |
58 </router-link> | |
59 <router-link to="/importapprovedgaugemeasurement"> | |
60 <font-awesome-icon | |
61 class="fa-fw mr-2" | |
62 fixed-width | |
63 icon="upload" | |
64 ></font-awesome-icon> | |
65 <span class="fix-trans-space" v-translate | |
66 >Import approved gaugemeasurements</span | |
67 > | |
68 </router-link> | |
69 <router-link to="/importwaterwayprofiles"> | |
70 <font-awesome-icon | |
71 class="fa-fw mr-2" | |
72 fixed-width | |
73 icon="upload" | |
74 ></font-awesome-icon> | |
75 <span class="fix-trans-space" v-translate | |
76 >Import waterway profiles</span | |
77 > | |
78 </router-link> | |
79 <router-link to="/importschedule"> | |
80 <font-awesome-icon | |
81 class="fa-fw mr-2" | |
82 fixed-width | |
83 icon="clock" | |
84 ></font-awesome-icon> | |
85 <translate class="fix-trans-space">Imports</translate> | |
86 </router-link> | |
87 <small class="text-muted pl-3"> | |
88 <translate>Systemadministration</translate> | |
89 </small> | |
90 <hr class="m-0" /> | |
91 </div> | 148 </div> |
92 <div v-if="isSysAdmin"> | |
93 <router-link to="/usermanagement"> | |
94 <font-awesome-icon | |
95 class="fa-fw mr-2" | |
96 fixed-width | |
97 icon="users-cog" | |
98 ></font-awesome-icon> | |
99 <span class="fix-trans-space" v-translate>Users</span> | |
100 </router-link> | |
101 </div> | |
102 <div v-if="isWaterwayAdmin"> | |
103 <router-link to="/systemconfiguration"> | |
104 <font-awesome-icon | |
105 class="fa-fw mr-2" | |
106 fixed-width | |
107 icon="wrench" | |
108 ></font-awesome-icon> | |
109 <span class="fix-trans-space" v-translate>Configuration</span> | |
110 </router-link> | |
111 </div> | |
112 <div v-if="isSysAdmin"> | |
113 <router-link to="/logs"> | |
114 <font-awesome-icon | |
115 class="fa-fw mr-2" | |
116 fixed-width | |
117 icon="book" | |
118 ></font-awesome-icon> | |
119 <span class="fix-trans-space" v-translate>Logs</span> | |
120 </router-link> | |
121 </div> | |
122 <div v-if="isWaterwayAdmin"> | |
123 <router-link to="/importqueue"> | |
124 <font-awesome-icon | |
125 class="fa-fw mr-2" | |
126 fixed-width | |
127 icon="tasks" | |
128 ></font-awesome-icon> | |
129 <span class="fix-trans-space" v-translate>Importqueue</span> | |
130 </router-link> | |
131 </div> | |
132 <hr class="m-0" /> | |
133 <a @click="logoff" href="#" class="logout"> | |
134 <font-awesome-icon | |
135 class="fa-fw mr-2" | |
136 fixed-width | |
137 icon="power-off" | |
138 ></font-awesome-icon> | |
139 <span class="fix-trans-space" v-translate>Logout</span> {{ user }} | |
140 </a> | |
141 </div> | 149 </div> |
142 </div> | 150 </div> |
143 </template> | 151 </template> |
144 | 152 |
145 <script> | 153 <script> |
164 name: "sidebar", | 172 name: "sidebar", |
165 props: ["routeName"], | 173 props: ["routeName"], |
166 computed: { | 174 computed: { |
167 ...mapGetters("user", ["isSysAdmin", "isWaterwayAdmin"]), | 175 ...mapGetters("user", ["isSysAdmin", "isWaterwayAdmin"]), |
168 ...mapState("user", ["user"]), | 176 ...mapState("user", ["user"]), |
177 ...mapState("imports", ["staging"]), | |
169 ...mapState("application", [ | 178 ...mapState("application", [ |
170 "showSidebar", | 179 "showSidebar", |
171 "showSearchbarLastState", | 180 "showSearchbarLastState", |
172 "contextBoxContent", | 181 "contextBoxContent", |
173 "showContextBox" | 182 "showContextBox" |
211 top: 0; | 220 top: 0; |
212 left: 0; | 221 left: 0; |
213 color: #666; | 222 color: #666; |
214 } | 223 } |
215 | 224 |
225 .indicator { | |
226 font-size: 11px; | |
227 line-height: 11px; | |
228 padding: 2px 4px 1px; | |
229 position: absolute; | |
230 top: 18px; | |
231 left: 0px; | |
232 z-index: 10; | |
233 color: #fff; | |
234 background: #17a2b8; | |
235 border-top-right-radius: 0.25rem; | |
236 border-bottom-left-radius: 0.25rem; | |
237 } | |
238 | |
216 .menu a { | 239 .menu a { |
217 display: block; | 240 display: block; |
218 text-align: left; | 241 text-align: left; |
219 padding: 0.5rem 1rem; | 242 padding: 0.5rem 1rem; |
220 color: #333; | 243 color: #333; |
221 text-decoration: none; | 244 text-decoration: none; |
245 .indicator { | |
246 left: auto; | |
247 right: 10px; | |
248 top: 10px; | |
249 border-radius: 0.25rem; | |
250 } | |
222 } | 251 } |
223 | 252 |
224 .menu a svg path { | 253 .menu a svg path { |
225 fill: #666; | 254 fill: #666; |
226 } | 255 } |