Mercurial > gemma
changeset 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 | e57ba9585aaa |
children | 4db1fa4f049c |
files | client/src/components/importschedule/Importscheduledetail.vue |
diffstat | 1 files changed, 71 insertions(+), 5 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/importschedule/Importscheduledetail.vue Tue Feb 12 13:04:48 2019 +0100 +++ b/client/src/components/importschedule/Importscheduledetail.vue Tue Feb 12 14:29:16 2019 +0100 @@ -72,14 +72,33 @@ </div> </div> </div> - + <div v-if="directImportAvailable" class="flex-column"> + <div class="flex-row text-left"> + <small class="text-muted"> + <translate>Import via</translate> + </small> + </div> + <div class="flex-flex-row text-left"> + <toggle-button + v-model="directImport" + class="mt-2" + :speed="100" + :labels="{ + checked: this.$options.FILE, + unchecked: this.$options.URL + }" + :width="60" + :height="30" + /> + </div> + </div> <Availablefairwaydepth v-if="import_ == $options.IMPORTTYPES.FAIRWAYAVAILABILITY" @urlChanged="setUrl" :url="url" ></Availablefairwaydepth> <Bottleneck - v-if="import_ == $options.IMPORTTYPES.BOTTLENECK" + v-if="import_ == $options.IMPORTTYPES.BOTTLENECK && !directImport" @urlChanged="setUrl" :url="url" ></Bottleneck> @@ -153,7 +172,7 @@ :sortBy="sortBy" ></Waterwayaxis> - <div class="d-flex flex-row"> + <div v-if="!directImport" class="d-flex flex-row"> <div class="flex-column mt-3 mr-4"> <div class="flex-row text-left"> <small class="text-muted"> @@ -196,7 +215,7 @@ </div> </div> </div> - <div class="flex-column w-100 mr-2"> + <div v-if="!directImport" class="flex-column w-100 mr-2"> <div class="flex-row text-left"> <small class="text-muted"> <translate>Schedule</translate> @@ -354,7 +373,27 @@ </div> </div> </div> - <button type="submit" class="shadow-sm btn btn-info submit-button"> + <div v-if="directImport" class="d-flex flex-row text-left"> + <div class="mt-3 mb-3 flex-column w-100"> + <div class="custom-file"> + <input + accept=".csv" + type="file" + @change="fileSelected" + class="custom-file-input" + id="uploadFile" + /> + <label class="pointer custom-file-label" for="uploadFile"> + {{ uploadLabel }} + </label> + </div> + </div> + </div> + <button + v-if="!directImport" + type="submit" + class="shadow-sm btn btn-info submit-button" + > <translate>Save</translate> </button> <button @@ -423,7 +462,10 @@ }, data() { return { + directImport: false, passwordVisible: false, + uploadLabel: this.$gettext("choose file to upload"), + uploadFile: null, ...initializeCurrentSchedule() }; }, @@ -470,6 +512,14 @@ if (this.id) return this.$gettext("Import") + " " + this.id; return this.$gettext("New Import"); }, + directImportAvailable() { + switch (this.import_) { + case this.$options.IMPORTTYPES.BOTTLENECK: + return true; + default: + return false; + } + }, isCredentialsRequired() { switch (this.import_) { case this.$options.IMPORTTYPES.WATERWAYGAUGES: @@ -519,6 +569,12 @@ } }, methods: { + fileSelected(e) { + const files = e.target.files || e.dataTransfer.files; + if (!files) return; + this.uploadLabel = files[0].name; + this.uploadFile = files[0]; + }, setUrl(value) { this.url = value; }, @@ -609,6 +665,14 @@ triggerManualImport() { if (!this.triggerActive) return; if (!this.import_) return; + if (this.directImport) { + if (!this.uploadFile) return; + displayInfo({ + title: this.$gettext("Direct Import"), + message: this.$gettext("Not Implemented") + }); + return; + } let data = {}; if (this.isURLRequired) { if (!this.url) return; @@ -785,6 +849,8 @@ IMPORTTYPES: IMPORTTYPES, on: "on", off: "off", + FILE: app.$gettext("File"), + URL: app.$gettext("URL"), EVERY: app.$gettext("Every"), MINUTESPAST: app.$gettext("minutes past"), ON: app.$gettext("on"),