comparison client/src/components/importconfiguration/types/Soundingresults.vue @ 3281:439e1865a2d2

client: define stretches/imports: code cleanup / style improvements
author Markus Kottlaender <markus@intevation.de>
date Thu, 16 May 2019 09:52:32 +0200
parents cb3b31566e48
children c1c85e70a368
comparison
equal deleted inserted replaced
3280:8fb81b45085f 3281:439e1865a2d2
1 <template> 1 <template>
2 <div> 2 <div>
3 <div v-if="editState" class="mb-3"> 3 <div v-if="editState" class="mb-2 p-2">
4 <div 4 <div
5 v-for="(message, index) in messages" 5 v-for="(message, index) in messages"
6 :key="index" 6 :key="index"
7 class="alert alert-warning small rounded-0" 7 class="alert alert-warning small"
8 > 8 >
9 {{ message }} 9 {{ message }}
10 </div> 10 </div>
11 <div class="d-flex flex-row w-100"> 11 <div class="d-flex w-100">
12 <div class="w-50 mr-2 text-left"> 12 <div class="w-50 mr-2 text-left">
13 <small class="text-muted"> 13 <small class="text-muted">
14 <translate>Bottleneck</translate> 14 <translate>Bottleneck</translate>
15 </small> 15 </small>
16 <select v-model="bottleneck" class="custom-select"> 16 <select v-model="bottleneck" class="custom-select custom-select-sm">
17 <option 17 <option
18 v-for="bottleneck in availableBottlenecks" 18 v-for="bottleneck in availableBottlenecks"
19 :value="bottleneck" 19 :value="bottleneck"
20 :key="bottleneck.properties.objnam" 20 :key="bottleneck.properties.objnam"
21 > 21 >
31 <div class="w-50 ml-3 text-left"> 31 <div class="w-50 ml-3 text-left">
32 <small class="text-muted"> 32 <small class="text-muted">
33 <translate>Projection</translate>&nbsp;(EPSG) 33 <translate>Projection</translate>&nbsp;(EPSG)
34 </small> 34 </small>
35 <input 35 <input
36 class="form-control" 36 class="form-control form-control-sm"
37 v-model="projection" 37 v-model="projection"
38 value="4326" 38 value="4326"
39 placeholder="e.g. 4326" 39 placeholder="e.g. 4326"
40 type="number" 40 type="number"
41 /> 41 />
51 <small class="text-muted"> 51 <small class="text-muted">
52 <translate>Depthreference</translate> 52 <translate>Depthreference</translate>
53 </small> 53 </small>
54 <select 54 <select
55 v-model="depthReference" 55 v-model="depthReference"
56 class="custom-select" 56 class="custom-select custom-select-sm"
57 id="depthreference" 57 id="depthreference"
58 > 58 >
59 <option 59 <option
60 v-for="option in this.depthReferenceOptions" 60 v-for="option in this.depthReferenceOptions"
61 :key="option" 61 :key="option"
71 <div class="w-50 ml-3 text-left"> 71 <div class="w-50 ml-3 text-left">
72 <small class="text-muted"> <translate>Date</translate> </small> 72 <small class="text-muted"> <translate>Date</translate> </small>
73 <input 73 <input
74 id="importdate" 74 id="importdate"
75 type="date" 75 type="date"
76 class="form-control" 76 class="form-control form-control-sm"
77 placeholder="Date of import" 77 placeholder="Date of import"
78 aria-label="bottleneck" 78 aria-label="bottleneck"
79 aria-describedby="bottlenecklabel" 79 aria-describedby="bottlenecklabel"
80 v-model="importDate" 80 v-model="importDate"
81 /> 81 />
85 </small> 85 </small>
86 </span> 86 </span>
87 </div> 87 </div>
88 </div> 88 </div>
89 </div> 89 </div>
90 <div class="mt-3"> 90 <div class="mt-2">
91 <div v-if="uploadState" class="input-group"> 91 <div v-if="uploadState" class="input-group px-2">
92 <div :key="1" class="flex-column mr-4"> 92 <div :key="1" class="flex-column mr-4">
93 <div class="flex-row text-left"> 93 <div class="flex-row text-left">
94 <small class="text-muted"> 94 <small class="text-muted">
95 <translate>Email Notification</translate> 95 <translate>Email Notification</translate>
96 </small> 96 </small>
120 <label class="pointer custom-file-label" for="uploadFile"> 120 <label class="pointer custom-file-label" for="uploadFile">
121 {{ uploadLabel }} 121 {{ uploadLabel }}
122 </label> 122 </label>
123 </div> 123 </div>
124 </div> 124 </div>
125 <div class="d-flex justify-content-between mt-3" v-if="editState"> 125 <div
126 <a 126 class="d-flex justify-content-between mt-2 p-2 border-top"
127 download="meta.json" 127 v-if="editState"
128 :href="dataLink" 128 >
129 :class="[ 129 <button
130 'btn btn-outline-info', 130 :key="1"
131 { disabled: !bottleneck || !importDate || !depthReference } 131 @click="deleteTempData()"
132 ]" 132 class="btn btn-sm btn-warning"
133 > 133 >
134 <translate>Download Meta.json</translate> 134 Back
135 </a> 135 </button>
136 <span> 136 <span>
137 <a
138 download="meta.json"
139 :href="dataLink"
140 :class="[
141 'btn btn-sm btn-outline-info',
142 { disabled: !bottleneck || !importDate || !depthReference }
143 ]"
144 >
145 <translate>Download Meta.json</translate>
146 </a>
137 <button 147 <button
138 :disabled="disableUploadButton" 148 :disabled="disableUploadButton"
139 @click="confirm" 149 @click="confirm"
140 class="btn btn-info mr-2" 150 class="btn btn-sm btn-info ml-2"
141 type="button" 151 type="button"
142 > 152 >
143 <translate>Confirm</translate> 153 <translate>Confirm</translate>
144 </button> 154 </button>
145 <button :key="1" @click="deleteTempData()" class="btn btn-warning">
146 Back
147 </button>
148 </span> 155 </span>
149 </div> 156 </div>
150 <div v-if="uploadState" class="d-flex flex-row-100 mt-3"> 157 <div v-if="uploadState" class="d-flex mt-2 p-2 border-top">
151 <button :key="2" @click="back()" class="ml-auto btn btn-warning"> 158 <button :key="2" @click="back()" class="btn btn-sm btn-warning">
152 Back 159 Back
153 </button> 160 </button>
154 </div> 161 </div>
155 </div> 162 </div>
156 </div> 163 </div>