Mercurial > gemma

comparison client/src/imports/Imports.vue @ 1183:1d4801145a2d

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
import soundingresults context now map instead administration
author Thomas Junk <thomas.junk@intevation.de>
date Thu, 15 Nov 2018 16:33:12 +0100
parents e15850b3a9d1
children b23622905a3f
comparison
equal deleted inserted replaced
1182:936dd3714325 1183:1d4801145a2d
1 <template> 1 <template>
2 <div> 2 <div v-if="showImportSoundingResults">
3 <div class="imports shadow d-flex content flex-column"> 3 <div class="imports shadow d-flex content flex-column ui-element">
4 <div class="card importcard"> 4 <div class="card importcard">
5 <div
6 class="card-header shadow-sm text-white bg-info mb-3"
7 >Import of sounding results</div>
8 <div class="card-body importcardbody"> 5 <div class="card-body importcardbody">
6 <div
7 @click="$store.commit('application/showImportSoundingResults', !showImportSoundingResults);"
8 class="ui-element close-showImportSoundingResults"
9 >
10 <i class="fa fa-close"></i>
11 </div>
12 <div class="card-title mb-4 headline">
13 <h4>Import soundingresults</h4>
14 <hr>
15 </div>
9 <div class="d-flex flex-row input-group mb-4"> 16 <div class="d-flex flex-row input-group mb-4">
10 <div class=""> 17 <div class="">
11 <label 18 <label
12 for="bottleneck" 19 for="bottleneck"
13 class="label-text" 20 class="label-text"
80 </template> 87 </template>
81 88
82 <script> 89 <script>
83 import { HTTP } from "../application/lib/http"; 90 import { HTTP } from "../application/lib/http";
84 import { displayError, displayInfo } from "../application/lib/errors.js"; 91 import { displayError, displayInfo } from "../application/lib/errors.js";
92 import { mapState } from "vuex";
85 93
86 const defaultLabel = "Choose file"; 94 const defaultLabel = "Choose file";
87 95
88 export default { 96 export default {
89 name: "imports", 97 name: "imports",
127 }); 135 });
128 }); 136 });
129 } 137 }
130 }, 138 },
131 computed: { 139 computed: {
140 ...mapState("application", ["showImportSoundingResults"]),
132 dataLink() { 141 dataLink() {
133 return ( 142 return (
134 "data:text/json;charset=utf-8," + 143 "data:text/json;charset=utf-8," +
135 encodeURIComponent( 144 encodeURIComponent(
136 JSON.stringify({ 145 JSON.stringify({
167 ] 176 ]
168 }; 177 };
169 </script> 178 </script>
170 179
171 <style lang="scss" scoped> 180 <style lang="scss" scoped>
181 .close-showImportSoundingResults {
182 position: absolute;
183 z-index: 2;
184 right: 0;
185 top: 7px;
186 border-radius: $border-radius;
187 height: $icon-width;
188 width: $icon-height;
189 }
172 .label-text { 190 .label-text {
173 width: 10rem; 191 width: 10rem;
174 text-align: left; 192 text-align: left;
175 line-height: 2.25rem; 193 line-height: 2.25rem;
176 } 194 }
179 } 197 }
180 .importcardbody { 198 .importcardbody {
181 position: relative; 199 position: relative;
182 height: 100%; 200 height: 100%;
183 width: 90%; 201 width: 90%;
184 margin: auto; 202 margin-left: auto;
203 margin-right: auto;
185 } 204 }
186 .imports { 205 .imports {
206 position: relative;
187 background-color: white; 207 background-color: white;
188 width: 40rem; 208 width: 30rem;
189 height: 28rem; 209 height: 28rem;
190 margin-left: auto; 210 margin-left: auto;
191 margin-right: auto; 211 margin-right: auto;
192 margin-top: $offset; 212 border-radius: $border-radius;
213 opacity: $slight-transparent;
193 } 214 }
194 .downloadbtn { 215 .downloadbtn {
195 position: absolute; 216 position: absolute;
196 right: $offset; 217 right: $offset;
197 bottom: $offset; 218 bottom: $offset;