Mercurial > gemma
comparison client/src/components/map/fairway/Profiles.vue @ 1416:3af7ad9717e2
Client: add a set fo marked translation
* add some marked transaltions in the templates.
and update the corresponding .po files.
* remove trailing whitespace and improve the formating in some files
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Thu, 29 Nov 2018 11:08:02 +0100 |
parents | 8e2c9e518440 |
children | 7fa030127b05 |
comparison
equal
deleted
inserted
replaced
1415:d4fc5f3c1252 | 1416:3af7ad9717e2 |
---|---|
1 <template> | 1 <template> |
2 <div :class="['box ui-element rounded bg-white text-nowrap', { expanded: showProfiles }]"> | 2 <div :class="['box ui-element rounded bg-white text-nowrap', { expanded: showProfiles }]"> |
3 <div style="width: 20rem"> | 3 <div style="width: 20rem"> |
4 <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center"> | 4 <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center"> |
5 <font-awesome-icon icon="chart-area" class="mr-2"></font-awesome-icon> | 5 <font-awesome-icon icon="chart-area" class="mr-2"></font-awesome-icon> |
6 Profiles | 6 <translate>Profiles</translate> |
7 <font-awesome-icon | 7 <font-awesome-icon |
8 icon="times" | 8 icon="times" |
9 class="ml-auto text-muted" | 9 class="ml-auto text-muted" |
10 @click="$store.commit('application/showProfiles', false)" | 10 @click="$store.commit('application/showProfiles', false)" |
11 ></font-awesome-icon> | 11 ></font-awesome-icon> |
12 </h6> | 12 </h6> |
13 <div class="d-flex flex-column p-3 flex-grow-1 text-left position-relative"> | 13 <div class="d-flex flex-column p-3 flex-grow-1 text-left position-relative"> |
14 <div class="loading d-flex justify-content-center align-items-center" v-if="surveysLoading || profileLoading"> | 14 <div |
15 <font-awesome-icon icon="spinner" spin /> | 15 class="loading d-flex justify-content-center align-items-center" |
16 v-if="surveysLoading || profileLoading" | |
17 > | |
18 <font-awesome-icon icon="spinner" spin/> | |
16 </div> | 19 </div> |
17 <select @click="moveToBottleneck" v-model="selectedBottleneck" class="form-control font-weight-bold"> | 20 <select |
18 <option :value="null">Select Bottleneck</option> | 21 @click="moveToBottleneck" |
22 v-model="selectedBottleneck" | |
23 class="form-control font-weight-bold" | |
24 > | |
25 <option :value="null"> | |
26 <translate>Select Bottleneck</translate> | |
27 </option> | |
19 <option | 28 <option |
20 v-for="bn in bottlenecks" | 29 v-for="bn in bottlenecks" |
21 :key="bn.properties.name" | 30 :key="bn.properties.name" |
22 :value="bn.properties.name" | 31 :value="bn.properties.name" |
23 >{{ bn.properties.name }}</option> | 32 >{{ bn.properties.name }}</option> |
24 </select> | 33 </select> |
25 <div v-if="selectedBottleneck"> | 34 <div v-if="selectedBottleneck"> |
26 <div class="d-flex mt-2"> | 35 <div class="d-flex mt-2"> |
27 <div class="flex-fill"> | 36 <div class="flex-fill"> |
28 <small class="text-muted">Sounding Result:</small> | 37 <small class="text-muted"> |
38 <translate>Sounding Result</translate>: | |
39 </small> | |
29 <select v-model="selectedSurvey" class="form-control form-control-sm"> | 40 <select v-model="selectedSurvey" class="form-control form-control-sm"> |
30 <option | 41 <option |
31 v-for="survey in surveys" | 42 v-for="survey in surveys" |
32 :key="survey.date_info" | 43 :key="survey.date_info" |
33 :value="survey" | 44 :value="survey" |
34 >{{ survey.date_info }}</option> | 45 >{{ survey.date_info }}</option> |
35 </select> | 46 </select> |
36 </div> | 47 </div> |
37 <div class="flex-fill ml-3" v-if="selectedSurvey && surveys.length > 1"> | 48 <div class="flex-fill ml-3" v-if="selectedSurvey && surveys.length > 1"> |
38 <small class="text-muted mt-1">Compare with:</small> | 49 <small class="text-muted mt-1"> |
50 <translate>Compare with</translate>: | |
51 </small> | |
39 <select v-model="additionalSurvey" class="form-control form-control-sm"> | 52 <select v-model="additionalSurvey" class="form-control form-control-sm"> |
40 <option :value="null">None</option> | 53 <option :value="null">None</option> |
41 <option | 54 <option |
42 v-for="survey in additionalSurveys" | 55 v-for="survey in additionalSurveys" |
43 :key="survey.date_info" | 56 :key="survey.date_info" |
45 >{{ survey.date_info }}</option> | 58 >{{ survey.date_info }}</option> |
46 </select> | 59 </select> |
47 </div> | 60 </div> |
48 </div> | 61 </div> |
49 <hr class="w-100 mb-0"> | 62 <hr class="w-100 mb-0"> |
50 <small class="text-muted d-block mt-2">Saved cross profiles:</small> | 63 <small class="text-muted d-block mt-2"> |
64 <translate>Saved cross profiles</translate>: | |
65 </small> | |
51 <div class="d-flex"> | 66 <div class="d-flex"> |
52 <select :class="['form-control form-control-sm flex-fill', { 'rounded-left-only': selectedCut }]" v-model="selectedCut"> | 67 <select |
68 :class="['form-control form-control-sm flex-fill', { 'rounded-left-only': selectedCut }]" | |
69 v-model="selectedCut" | |
70 > | |
53 <option></option> | 71 <option></option> |
54 <option v-for="(cut, index) in previousCuts" :value="cut" :key="index"> | 72 <option v-for="(cut, index) in previousCuts" :value="cut" :key="index">{{ cut.label }}</option> |
55 {{ cut.label }} | |
56 </option> | |
57 </select> | 73 </select> |
58 <button | 74 <button |
59 class="btn btn-sm btn-danger input-button-right" | 75 class="btn btn-sm btn-danger input-button-right" |
60 @click="confirmDeleteSelectedCut = true" | 76 @click="confirmDeleteSelectedCut = true" |
61 v-if="selectedCut && !confirmDeleteSelectedCut" | 77 v-if="selectedCut && !confirmDeleteSelectedCut" |
62 ><font-awesome-icon icon="trash" /></button> | 78 > |
79 <font-awesome-icon icon="trash"/> | |
80 </button> | |
63 <button | 81 <button |
64 class="btn btn-sm btn-info rounded-0" | 82 class="btn btn-sm btn-info rounded-0" |
65 @click="confirmDeleteSelectedCut = false" | 83 @click="confirmDeleteSelectedCut = false" |
66 v-if="selectedCut && confirmDeleteSelectedCut" | 84 v-if="selectedCut && confirmDeleteSelectedCut" |
67 ><font-awesome-icon icon="times" /></button> | 85 > |
86 <font-awesome-icon icon="times"/> | |
87 </button> | |
68 <button | 88 <button |
69 class="btn btn-sm btn-danger input-button-right" | 89 class="btn btn-sm btn-danger input-button-right" |
70 @click="deleteSelectedCut" | 90 @click="deleteSelectedCut" |
71 v-if="selectedCut && confirmDeleteSelectedCut" | 91 v-if="selectedCut && confirmDeleteSelectedCut" |
72 ><font-awesome-icon icon="check" /></button> | 92 > |
93 <font-awesome-icon icon="check"/> | |
94 </button> | |
73 </div> | 95 </div> |
74 <small class="text-muted d-block mt-2">Enter coordinates manually:</small> | 96 <small class="text-muted d-block mt-2"> |
97 <translate>Enter coordinates manually</translate>: | |
98 </small> | |
75 <div class="position-relative"> | 99 <div class="position-relative"> |
76 <input class="form-control form-control-sm pr-5" placeholder="Lat,Lon,Lat,Lon" v-model="coordinatesInput" /> | 100 <input |
101 class="form-control form-control-sm pr-5" | |
102 placeholder="Lat,Lon,Lat,Lon" | |
103 v-model="coordinatesInput" | |
104 > | |
77 <button | 105 <button |
78 class="btn btn-sm btn-info position-absolute input-button-right" | 106 class="btn btn-sm btn-info position-absolute input-button-right" |
79 @click="applyManualCoordinates" | 107 @click="applyManualCoordinates" |
80 style="top: 0; right: 0;" | 108 style="top: 0; right: 0;" |
81 v-if="coordinatesInputIsValid" | 109 v-if="coordinatesInputIsValid" |
82 ><font-awesome-icon icon="check" /></button> | 110 > |
111 <font-awesome-icon icon="check"/> | |
112 </button> | |
83 </div> | 113 </div> |
84 <small class="d-flex text-left mt-2" v-if="startPoint && endPoint"> | 114 <small class="d-flex text-left mt-2" v-if="startPoint && endPoint"> |
85 <div class="text-nowrap mr-3"> | 115 <div class="text-nowrap mr-3"> |
86 <b>Start:</b> | 116 <b> |
117 <translate>Start</translate>: | |
118 </b> | |
87 <br> | 119 <br> |
88 Lat: {{ startPoint[1] }} | 120 Lat: {{ startPoint[1] }} |
89 <br> | 121 <br> |
90 Lon: {{ startPoint[0] }} | 122 Lon: {{ startPoint[0] }} |
91 </div> | 123 </div> |
94 <br> | 126 <br> |
95 Lat: {{ endPoint[1] }} | 127 Lat: {{ endPoint[1] }} |
96 <br> | 128 <br> |
97 Lon: {{ endPoint[0] }} | 129 Lon: {{ endPoint[0] }} |
98 </div> | 130 </div> |
99 <button v-clipboard:copy="coordinatesForClipboard" | 131 <button |
132 v-clipboard:copy="coordinatesForClipboard" | |
100 v-clipboard:success="onCopyCoordinates" | 133 v-clipboard:success="onCopyCoordinates" |
101 class="btn btn-info btn-sm ml-auto mt-auto" | 134 class="btn btn-info btn-sm ml-auto mt-auto" |
102 ><font-awesome-icon icon="copy" /></button> | 135 > |
136 <font-awesome-icon icon="copy"/> | |
137 </button> | |
103 </small> | 138 </small> |
104 <div class="d-flex mt-3"> | 139 <div class="d-flex mt-3"> |
105 <div class="pr-3 w-50" v-if="startPoint && endPoint && !selectedCut"> | 140 <div class="pr-3 w-50" v-if="startPoint && endPoint && !selectedCut"> |
106 <button | 141 <button class="btn btn-info btn-sm w-100" @click="showLabelInput = !showLabelInput"> |
107 class="btn btn-info btn-sm w-100" | 142 <font-awesome-icon :icon="showLabelInput ? 'times' : 'check'"/> |
108 @click="showLabelInput = !showLabelInput" | |
109 > | |
110 <font-awesome-icon :icon="showLabelInput ? 'times' : 'check'" /> | |
111 {{ showLabelInput ? "Cancel" : "Save" }} | 143 {{ showLabelInput ? "Cancel" : "Save" }} |
112 </button> | 144 </button> |
113 </div> | 145 </div> |
114 <div :class="startPoint && endPoint && !selectedCut ? 'w-50' : 'w-100'"> | 146 <div :class="startPoint && endPoint && !selectedCut ? 'w-50' : 'w-100'"> |
115 <button | 147 <button class="btn btn-info btn-sm w-100" @click="toggleCutTool"> |
116 class="btn btn-info btn-sm w-100" | |
117 @click="toggleCutTool" | |
118 > | |
119 <font-awesome-icon :icon="cutTool && cutTool.getActive() ? 'times' : 'plus'"></font-awesome-icon> | 148 <font-awesome-icon :icon="cutTool && cutTool.getActive() ? 'times' : 'plus'"></font-awesome-icon> |
120 {{ cutTool && cutTool.getActive() ? "Cancel" : "New" }} | 149 {{ cutTool && cutTool.getActive() ? "Cancel" : "New" }} |
121 </button> | 150 </button> |
122 </div> | 151 </div> |
123 </div> | 152 </div> |
124 <div v-if="showLabelInput" class="mt-2"> | 153 <div v-if="showLabelInput" class="mt-2"> |
125 <small class="text-muted">Enter label for cross profile:</small> | 154 <small class="text-muted"> |
155 <translate>Enter label for cross profile</translate>: | |
156 </small> | |
126 <div class="position-relative"> | 157 <div class="position-relative"> |
127 <input class="form-control form-control-sm pr-5" v-model="cutLabel" /> | 158 <input class="form-control form-control-sm pr-5" v-model="cutLabel"> |
128 <button | 159 <button |
129 class="btn btn-sm btn-info position-absolute input-button-right" | 160 class="btn btn-sm btn-info position-absolute input-button-right" |
130 @click="saveCut" | 161 @click="saveCut" |
131 v-if="cutLabel" | 162 v-if="cutLabel" |
132 style="top: 0; right: 0;" | 163 style="top: 0; right: 0;" |
133 ><font-awesome-icon icon="check" /></button> | 164 > |
165 <font-awesome-icon icon="check"/> | |
166 </button> | |
134 </div> | 167 </div> |
135 </div> | 168 </div> |
136 </div> | 169 </div> |
137 </div> | 170 </div> |
138 </div> | 171 </div> |
158 .rounded-left-only | 191 .rounded-left-only |
159 border-top-right-radius: 0 !important | 192 border-top-right-radius: 0 !important |
160 border-bottom-right-radius: 0 !important | 193 border-bottom-right-radius: 0 !important |
161 border-top-left-radius: $border-radius | 194 border-top-left-radius: $border-radius |
162 border-bottom-left-radius: $border-radius | 195 border-bottom-left-radius: $border-radius |
163 | 196 |
164 </style> | 197 </style> |
165 | 198 |
166 <script> | 199 <script> |
167 /* This is Free Software under GNU Affero General Public License v >= 3.0 | 200 /* This is Free Software under GNU Affero General Public License v >= 3.0 |
168 * without warranty, see README.md and license for details. | 201 * without warranty, see README.md and license for details. |
169 * | 202 * |
170 * SPDX-License-Identifier: AGPL-3.0-or-later | 203 * SPDX-License-Identifier: AGPL-3.0-or-later |
171 * License-Filename: LICENSES/AGPL-3.0.txt | 204 * License-Filename: LICENSES/AGPL-3.0.txt |
172 * | 205 * |
173 * Copyright (C) 2018 by via donau | 206 * Copyright (C) 2018 by via donau |
174 * – Österreichische Wasserstraßen-Gesellschaft mbH | 207 * – Österreichische Wasserstraßen-Gesellschaft mbH |
175 * Software engineering by Intevation GmbH | 208 * Software engineering by Intevation GmbH |
176 * | 209 * |
177 * Author(s): | 210 * Author(s): |
178 * Markus Kottländer <markus.kottlaender@intevation.de> | 211 * Markus Kottländer <markus.kottlaender@intevation.de> |