Mercurial > gemma

comparison client/src/components/map/fairway/Profiles.vue @ 1480:9b81ac91a43e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
fix: linting
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 04 Dec 2018 10:02:31 +0100
parents bb47531bdd22
children cff2cf1f3038
comparison
equal deleted inserted replaced
1479:858af4614209 1480:9b81ac91a43e
1 <template> 1 <template>
2 <div :class="['box ui-element rounded bg-white text-nowrap', { expanded: showProfiles }]"> 2 <div
3 :class="[
4 'box ui-element rounded bg-white text-nowrap',
5 { expanded: showProfiles }
6 ]"
7 >
3 <div style="width: 20rem"> 8 <div style="width: 20rem">
4 <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center"> 9 <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> 10 <font-awesome-icon icon="chart-area" class="mr-2"></font-awesome-icon>
6 <translate>Profiles</translate> 11 <translate>Profiles</translate>
7 <font-awesome-icon 12 <font-awesome-icon
8 icon="times" 13 icon="times"
9 class="ml-auto text-muted" 14 class="ml-auto text-muted"
10 @click="$store.commit('application/showProfiles', false)" 15 @click="$store.commit('application/showProfiles', false)"
11 ></font-awesome-icon> 16 ></font-awesome-icon>
12 </h6> 17 </h6>
13 <div class="d-flex flex-column p-3 flex-grow-1 text-left position-relative"> 18 <div
19 class="d-flex flex-column p-3 flex-grow-1 text-left position-relative"
20 >
14 <div 21 <div
15 class="loading d-flex justify-content-center align-items-center" 22 class="loading d-flex justify-content-center align-items-center"
16 v-if="surveysLoading || profileLoading" 23 v-if="surveysLoading || profileLoading"
17 > 24 >
18 <font-awesome-icon icon="spinner" spin/> 25 <font-awesome-icon icon="spinner" spin />
19 </div> 26 </div>
20 <select 27 <select
21 @click="moveToBottleneck" 28 @click="moveToBottleneck"
22 v-model="selectedBottleneck" 29 v-model="selectedBottleneck"
23 class="form-control font-weight-bold" 30 class="form-control font-weight-bold"
27 </option> 34 </option>
28 <option 35 <option
29 v-for="bn in bottlenecks" 36 v-for="bn in bottlenecks"
30 :key="bn.properties.name" 37 :key="bn.properties.name"
31 :value="bn.properties.name" 38 :value="bn.properties.name"
32 >{{ bn.properties.name }}</option> 39 >{{ bn.properties.name }}</option
40 >
33 </select> 41 </select>
34 <div v-if="selectedBottleneck"> 42 <div v-if="selectedBottleneck">
35 <div class="d-flex mt-2"> 43 <div class="d-flex mt-2">
36 <div class="flex-fill"> 44 <div class="flex-fill">
37 <small class="text-muted"> 45 <small class="text-muted">
38 <translate>Sounding Result</translate>: 46 <translate>Sounding Result</translate>:
39 </small> 47 </small>
40 <select v-model="selectedSurvey" class="form-control form-control-sm"> 48 <select
49 v-model="selectedSurvey"
50 class="form-control form-control-sm"
51 >
41 <option 52 <option
42 v-for="survey in surveys" 53 v-for="survey in surveys"
43 :key="survey.date_info" 54 :key="survey.date_info"
44 :value="survey" 55 :value="survey"
45 >{{ survey.date_info }}</option> 56 >{{ survey.date_info }}</option
57 >
46 </select> 58 </select>
47 </div> 59 </div>
48 <div class="flex-fill ml-3" v-if="selectedSurvey && surveys.length > 1"> 60 <div
61 class="flex-fill ml-3"
62 v-if="selectedSurvey && surveys.length > 1"
63 >
49 <small class="text-muted mt-1"> 64 <small class="text-muted mt-1">
50 <translate>Compare with</translate>: 65 <translate>Compare with</translate>:
51 </small> 66 </small>
52 <select v-model="additionalSurvey" class="form-control form-control-sm"> 67 <select
68 v-model="additionalSurvey"
69 class="form-control form-control-sm"
70 >
53 <option :value="null">None</option> 71 <option :value="null">None</option>
54 <option 72 <option
55 v-for="survey in additionalSurveys" 73 v-for="survey in additionalSurveys"
56 :key="survey.date_info" 74 :key="survey.date_info"
57 :value="survey" 75 :value="survey"
58 >{{ survey.date_info }}</option> 76 >{{ survey.date_info }}</option
77 >
59 </select> 78 </select>
60 </div> 79 </div>
61 </div> 80 </div>
62 <hr class="w-100 mb-0"> 81 <hr class="w-100 mb-0" />
63 <small class="text-muted d-block mt-2"> 82 <small class="text-muted d-block mt-2">
64 <translate>Saved cross profiles</translate>: 83 <translate>Saved cross profiles</translate>:
65 </small> 84 </small>
66 <div class="d-flex"> 85 <div class="d-flex">
67 <select 86 <select
68 :class="['form-control form-control-sm flex-fill', { 'rounded-left-only': selectedCut }]" 87 :class="[
88 'form-control form-control-sm flex-fill',
89 { 'rounded-left-only': selectedCut }
90 ]"
69 v-model="selectedCut" 91 v-model="selectedCut"
70 > 92 >
71 <option></option> 93 <option></option>
72 <option v-for="(cut, index) in previousCuts" :value="cut" :key="index">{{ cut.label }}</option> 94 <option
95 v-for="(cut, index) in previousCuts"
96 :value="cut"
97 :key="index"
98 >{{ cut.label }}</option
99 >
73 </select> 100 </select>
74 <button 101 <button
75 class="btn btn-sm btn-danger input-button-right" 102 class="btn btn-sm btn-danger input-button-right"
76 @click="confirmDeleteSelectedCut = true" 103 @click="confirmDeleteSelectedCut = true"
77 v-if="selectedCut && !confirmDeleteSelectedCut" 104 v-if="selectedCut && !confirmDeleteSelectedCut"
78 > 105 >
79 <font-awesome-icon icon="trash"/> 106 <font-awesome-icon icon="trash" />
80 </button> 107 </button>
81 <button 108 <button
82 class="btn btn-sm btn-info rounded-0" 109 class="btn btn-sm btn-info rounded-0"
83 @click="confirmDeleteSelectedCut = false" 110 @click="confirmDeleteSelectedCut = false"
84 v-if="selectedCut && confirmDeleteSelectedCut" 111 v-if="selectedCut && confirmDeleteSelectedCut"
85 > 112 >
86 <font-awesome-icon icon="times"/> 113 <font-awesome-icon icon="times" />
87 </button> 114 </button>
88 <button 115 <button
89 class="btn btn-sm btn-danger input-button-right" 116 class="btn btn-sm btn-danger input-button-right"
90 @click="deleteSelectedCut" 117 @click="deleteSelectedCut"
91 v-if="selectedCut && confirmDeleteSelectedCut" 118 v-if="selectedCut && confirmDeleteSelectedCut"
92 > 119 >
93 <font-awesome-icon icon="check"/> 120 <font-awesome-icon icon="check" />
94 </button> 121 </button>
95 </div> 122 </div>
96 <small class="text-muted d-block mt-2"> 123 <small class="text-muted d-block mt-2">
97 <translate>Enter coordinates manually</translate>: 124 <translate>Enter coordinates manually</translate>:
98 </small> 125 </small>
99 <div class="position-relative"> 126 <div class="position-relative">
100 <input 127 <input
101 class="form-control form-control-sm pr-5" 128 class="form-control form-control-sm pr-5"
102 placeholder="Lat,Lon,Lat,Lon" 129 placeholder="Lat,Lon,Lat,Lon"
103 v-model="coordinatesInput" 130 v-model="coordinatesInput"
104 > 131 />
105 <button 132 <button
106 class="btn btn-sm btn-info position-absolute input-button-right" 133 class="btn btn-sm btn-info position-absolute input-button-right"
107 @click="applyManualCoordinates" 134 @click="applyManualCoordinates"
108 style="top: 0; right: 0;" 135 style="top: 0; right: 0;"
109 v-if="coordinatesInputIsValid" 136 v-if="coordinatesInputIsValid"
110 > 137 >
111 <font-awesome-icon icon="check"/> 138 <font-awesome-icon icon="check" />
112 </button> 139 </button>
113 </div> 140 </div>
114 <small class="d-flex text-left mt-2" v-if="startPoint && endPoint"> 141 <small class="d-flex text-left mt-2" v-if="startPoint && endPoint">
115 <div class="text-nowrap mr-3"> 142 <div class="text-nowrap mr-3">
116 <b> 143 <b> <translate>Start</translate>: </b> <br />
117 <translate>Start</translate>: 144 Lat: {{ startPoint[1] }} <br />
118 </b>
119 <br>
120 Lat: {{ startPoint[1] }}
121 <br>
122 Lon: {{ startPoint[0] }} 145 Lon: {{ startPoint[0] }}
123 </div> 146 </div>
124 <div class="text-nowrap"> 147 <div class="text-nowrap">
125 <b>End:</b> 148 <b>End:</b> <br />
126 <br> 149 Lat: {{ endPoint[1] }} <br />
127 Lat: {{ endPoint[1] }}
128 <br>
129 Lon: {{ endPoint[0] }} 150 Lon: {{ endPoint[0] }}
130 </div> 151 </div>
131 <button 152 <button
132 v-clipboard:copy="coordinatesForClipboard" 153 v-clipboard:copy="coordinatesForClipboard"
133 v-clipboard:success="onCopyCoordinates" 154 v-clipboard:success="onCopyCoordinates"
134 class="btn btn-info btn-sm ml-auto mt-auto" 155 class="btn btn-info btn-sm ml-auto mt-auto"
135 > 156 >
136 <font-awesome-icon icon="copy"/> 157 <font-awesome-icon icon="copy" />
137 </button> 158 </button>
138 </small> 159 </small>
139 <div class="d-flex mt-3"> 160 <div class="d-flex mt-3">
140 <div class="pr-3 w-50" v-if="startPoint && endPoint && !selectedCut"> 161 <div
141 <button class="btn btn-info btn-sm w-100" @click="showLabelInput = !showLabelInput"> 162 class="pr-3 w-50"
142 <font-awesome-icon :icon="showLabelInput ? 'times' : 'check'"/> 163 v-if="startPoint && endPoint && !selectedCut"
164 >
165 <button
166 class="btn btn-info btn-sm w-100"
167 @click="showLabelInput = !showLabelInput"
168 >
169 <font-awesome-icon :icon="showLabelInput ? 'times' : 'check'" />
143 {{ showLabelInput ? "Cancel" : "Save" }} 170 {{ showLabelInput ? "Cancel" : "Save" }}
144 </button> 171 </button>
145 </div> 172 </div>
146 <div :class="startPoint && endPoint && !selectedCut ? 'w-50' : 'w-100'"> 173 <div
174 :class="startPoint && endPoint && !selectedCut ? 'w-50' : 'w-100'"
175 >
147 <button class="btn btn-info btn-sm w-100" @click="toggleCutTool"> 176 <button class="btn btn-info btn-sm w-100" @click="toggleCutTool">
148 <font-awesome-icon :icon="cutTool && cutTool.getActive() ? 'times' : 'plus'"></font-awesome-icon> 177 <font-awesome-icon
178 :icon="cutTool && cutTool.getActive() ? 'times' : 'plus'"
179 ></font-awesome-icon>
149 {{ cutTool && cutTool.getActive() ? "Cancel" : "New" }} 180 {{ cutTool && cutTool.getActive() ? "Cancel" : "New" }}
150 </button> 181 </button>
151 </div> 182 </div>
152 </div> 183 </div>
153 <div v-if="showLabelInput" class="mt-2"> 184 <div v-if="showLabelInput" class="mt-2">
154 <small class="text-muted"> 185 <small class="text-muted">
155 <translate>Enter label for cross profile</translate>: 186 <translate>Enter label for cross profile</translate>:
156 </small> 187 </small>
157 <div class="position-relative"> 188 <div class="position-relative">
158 <input class="form-control form-control-sm pr-5" v-model="cutLabel"> 189 <input
190 class="form-control form-control-sm pr-5"
191 v-model="cutLabel"
192 />
159 <button 193 <button
160 class="btn btn-sm btn-info position-absolute input-button-right" 194 class="btn btn-sm btn-info position-absolute input-button-right"
161 @click="saveCut" 195 @click="saveCut"
162 v-if="cutLabel" 196 v-if="cutLabel"
163 style="top: 0; right: 0;" 197 style="top: 0; right: 0;"
164 > 198 >
165 <font-awesome-icon icon="check"/> 199 <font-awesome-icon icon="check" />
166 </button> 200 </button>
167 </div> 201 </div>
168 </div> 202 </div>
169 </div> 203 </div>
170 </div> 204 </div>