Mercurial > gemma

comparison client/src/components/map/fairway/Profiles.vue @ 1416:3af7ad9717e2

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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>