comparison client/src/components/importschedule/Importscheduledetail.vue @ 2197:3203c53a8d29

import_schedule: user is able to choose between file upload or URL as import type for bottleneckimport
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 12 Feb 2019 14:29:16 +0100
parents 35c56ace42b9
children b1735b09df6f
comparison
equal deleted inserted replaced
2196:e57ba9585aaa 2197:3203c53a8d29
70 :height="30" 70 :height="30"
71 /> 71 />
72 </div> 72 </div>
73 </div> 73 </div>
74 </div> 74 </div>
75 75 <div v-if="directImportAvailable" class="flex-column">
76 <div class="flex-row text-left">
77 <small class="text-muted">
78 <translate>Import via</translate>
79 </small>
80 </div>
81 <div class="flex-flex-row text-left">
82 <toggle-button
83 v-model="directImport"
84 class="mt-2"
85 :speed="100"
86 :labels="{
87 checked: this.$options.FILE,
88 unchecked: this.$options.URL
89 }"
90 :width="60"
91 :height="30"
92 />
93 </div>
94 </div>
76 <Availablefairwaydepth 95 <Availablefairwaydepth
77 v-if="import_ == $options.IMPORTTYPES.FAIRWAYAVAILABILITY" 96 v-if="import_ == $options.IMPORTTYPES.FAIRWAYAVAILABILITY"
78 @urlChanged="setUrl" 97 @urlChanged="setUrl"
79 :url="url" 98 :url="url"
80 ></Availablefairwaydepth> 99 ></Availablefairwaydepth>
81 <Bottleneck 100 <Bottleneck
82 v-if="import_ == $options.IMPORTTYPES.BOTTLENECK" 101 v-if="import_ == $options.IMPORTTYPES.BOTTLENECK && !directImport"
83 @urlChanged="setUrl" 102 @urlChanged="setUrl"
84 :url="url" 103 :url="url"
85 ></Bottleneck> 104 ></Bottleneck>
86 <Distancemarksvirtual 105 <Distancemarksvirtual
87 v-if="import_ == $options.IMPORTTYPES.DISTANCEMARKSVIRTUAL" 106 v-if="import_ == $options.IMPORTTYPES.DISTANCEMARKSVIRTUAL"
151 :url="url" 170 :url="url"
152 :featureType="featureType" 171 :featureType="featureType"
153 :sortBy="sortBy" 172 :sortBy="sortBy"
154 ></Waterwayaxis> 173 ></Waterwayaxis>
155 174
156 <div class="d-flex flex-row"> 175 <div v-if="!directImport" class="d-flex flex-row">
157 <div class="flex-column mt-3 mr-4"> 176 <div class="flex-column mt-3 mr-4">
158 <div class="flex-row text-left"> 177 <div class="flex-row text-left">
159 <small class="text-muted"> 178 <small class="text-muted">
160 <translate>Scheduled</translate>? 179 <translate>Scheduled</translate>?
161 </small> 180 </small>
194 :height="30" 213 :height="30"
195 /> 214 />
196 </div> 215 </div>
197 </div> 216 </div>
198 </div> 217 </div>
199 <div class="flex-column w-100 mr-2"> 218 <div v-if="!directImport" class="flex-column w-100 mr-2">
200 <div class="flex-row text-left"> 219 <div class="flex-row text-left">
201 <small class="text-muted"> 220 <small class="text-muted">
202 <translate>Schedule</translate> 221 <translate>Schedule</translate>
203 </small> 222 </small>
204 </div> 223 </div>
352 type="text" 371 type="text"
353 /> 372 />
354 </div> 373 </div>
355 </div> 374 </div>
356 </div> 375 </div>
357 <button type="submit" class="shadow-sm btn btn-info submit-button"> 376 <div v-if="directImport" class="d-flex flex-row text-left">
377 <div class="mt-3 mb-3 flex-column w-100">
378 <div class="custom-file">
379 <input
380 accept=".csv"
381 type="file"
382 @change="fileSelected"
383 class="custom-file-input"
384 id="uploadFile"
385 />
386 <label class="pointer custom-file-label" for="uploadFile">
387 {{ uploadLabel }}
388 </label>
389 </div>
390 </div>
391 </div>
392 <button
393 v-if="!directImport"
394 type="submit"
395 class="shadow-sm btn btn-info submit-button"
396 >
358 <translate>Save</translate> 397 <translate>Save</translate>
359 </button> 398 </button>
360 <button 399 <button
361 @click="triggerManualImport" 400 @click="triggerManualImport"
362 type="button" 401 type="button"
421 Waterwayaxis: () => 460 Waterwayaxis: () =>
422 import("@/components/importschedule/importtypes/Waterwayaxis") 461 import("@/components/importschedule/importtypes/Waterwayaxis")
423 }, 462 },
424 data() { 463 data() {
425 return { 464 return {
465 directImport: false,
426 passwordVisible: false, 466 passwordVisible: false,
467 uploadLabel: this.$gettext("choose file to upload"),
468 uploadFile: null,
427 ...initializeCurrentSchedule() 469 ...initializeCurrentSchedule()
428 }; 470 };
429 }, 471 },
430 mounted() { 472 mounted() {
431 this.initialize(); 473 this.initialize();
467 "currentSchedule" 509 "currentSchedule"
468 ]), 510 ]),
469 dialogLabel() { 511 dialogLabel() {
470 if (this.id) return this.$gettext("Import") + " " + this.id; 512 if (this.id) return this.$gettext("Import") + " " + this.id;
471 return this.$gettext("New Import"); 513 return this.$gettext("New Import");
514 },
515 directImportAvailable() {
516 switch (this.import_) {
517 case this.$options.IMPORTTYPES.BOTTLENECK:
518 return true;
519 default:
520 return false;
521 }
472 }, 522 },
473 isCredentialsRequired() { 523 isCredentialsRequired() {
474 switch (this.import_) { 524 switch (this.import_) {
475 case this.$options.IMPORTTYPES.WATERWAYGAUGES: 525 case this.$options.IMPORTTYPES.WATERWAYGAUGES:
476 case this.$options.IMPORTTYPES.DISTANCEMARKSVIRTUAL: 526 case this.$options.IMPORTTYPES.DISTANCEMARKSVIRTUAL:
517 return false; 567 return false;
518 } 568 }
519 } 569 }
520 }, 570 },
521 methods: { 571 methods: {
572 fileSelected(e) {
573 const files = e.target.files || e.dataTransfer.files;
574 if (!files) return;
575 this.uploadLabel = files[0].name;
576 this.uploadFile = files[0];
577 },
522 setUrl(value) { 578 setUrl(value) {
523 this.url = value; 579 this.url = value;
524 }, 580 },
525 setFeatureType(value) { 581 setFeatureType(value) {
526 this.featureType = value; 582 this.featureType = value;
607 this.dayOfMonth = null; 663 this.dayOfMonth = null;
608 }, 664 },
609 triggerManualImport() { 665 triggerManualImport() {
610 if (!this.triggerActive) return; 666 if (!this.triggerActive) return;
611 if (!this.import_) return; 667 if (!this.import_) return;
668 if (this.directImport) {
669 if (!this.uploadFile) return;
670 displayInfo({
671 title: this.$gettext("Direct Import"),
672 message: this.$gettext("Not Implemented")
673 });
674 return;
675 }
612 let data = {}; 676 let data = {};
613 if (this.isURLRequired) { 677 if (this.isURLRequired) {
614 if (!this.url) return; 678 if (!this.url) return;
615 data["url"] = this.url; 679 data["url"] = this.url;
616 data["insecure"] = this.insecure; 680 data["insecure"] = this.insecure;
783 } 847 }
784 }, 848 },
785 IMPORTTYPES: IMPORTTYPES, 849 IMPORTTYPES: IMPORTTYPES,
786 on: "on", 850 on: "on",
787 off: "off", 851 off: "off",
852 FILE: app.$gettext("File"),
853 URL: app.$gettext("URL"),
788 EVERY: app.$gettext("Every"), 854 EVERY: app.$gettext("Every"),
789 MINUTESPAST: app.$gettext("minutes past"), 855 MINUTESPAST: app.$gettext("minutes past"),
790 ON: app.$gettext("on"), 856 ON: app.$gettext("on"),
791 OF: app.$gettext("of"), 857 OF: app.$gettext("of"),
792 AT: app.$gettext("at"), 858 AT: app.$gettext("at"),