Mercurial > gemma
changeset 4338:08aef146f95a
Define_stretches: upload etd
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 05 Sep 2019 17:16:54 +0200 |
parents | 086640dc0fba |
children | 46d97ada1ce7 |
files | client/src/components/stretches/StretchForm.vue |
diffstat | 1 files changed, 51 insertions(+), 335 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/stretches/StretchForm.vue Thu Sep 05 16:50:00 2019 +0200 +++ b/client/src/components/stretches/StretchForm.vue Thu Sep 05 17:16:54 2019 +0200 @@ -1,194 +1,17 @@ <template> <div class="d-flex flex-column"> - <div class="d-flex justify-content-between mt-2 px-2"> - <div class="text-left flex-fill mr-1"> - <small class="text-muted"> - <translate>ID</translate> - </small> + <div class="ml-3 mr-3 my-4"> + <div class="custom-file mt-4"> <input - id="id" - type="text" - class="form-control form-control-sm" - placeholder="AT_Stretch_12" - v-model="id" - :disabled="editStretch" - /> - <span class="text-left text-danger"> - <small v-if="errors.id && !id"> - <translate>Please enter an id</translate> - </small> - </span> - </div> - <div class="text-left flex-fill ml-1"> - <small class="text-muted"> - <translate>Countrycode</translate> - </small> - <input - id="countryCode" - type="text" - class="form-control form-control-sm" - placeholder="AT" - v-model="countryCode" + accept=".zip,.txt" + type="file" + @change="fileSelected" + class="custom-file-input" + id="uploadFile" /> - <span class="text-left text-danger"> - <small v-if="errors.countryCode && !countryCode"> - <translate>Please enter a countrycode </translate> - </small> - </span> - </div> - </div> - <div class="d-flex justify-content-between mt-2 px-2"> - <div class="text-left flex-fill"> - <small class="text-muted"> - <translate>Start rhm</translate> - </small> - <div class="d-flex flex-row position-relative"> - <input - id="startrhm" - type="text" - class="form-control form-control-sm" - placeholder="e.g. ATXXX000010000019900" - v-model="startrhm" - ref="startrhm" - @focus="enablePipette('start')" - @blur="disablePipette('start')" - /> - <span - class="input-group-text position-absolute input-button" - @click="$refs.startrhm.focus()" - v-tooltip="pipetteTooltip" - > - <font-awesome-icon - :class="{ 'text-info': pipetteStart }" - icon="crosshairs" - /> - </span> - </div> - <span class="text-left text-danger"> - <small v-if="errors.startrhm && !startrhm"> - <translate>Please enter a start point</translate> - </small> - </span> - </div> - <div class="text-left flex-fill ml-2"> - <small class="text-muted"> - <translate>End rhm</translate> - </small> - <div class="d-flex flex-row position-relative"> - <input - id="endrhm" - type="text" - class="form-control form-control-sm" - placeholder="e.g. ATXXX000010000019900" - v-model="endrhm" - ref="endrhm" - @focus="enablePipette('end')" - @blur="disablePipette('end')" - /> - <span - class="input-group-text position-absolute input-button" - @click="$refs.endrhm.focus()" - v-tooltip="pipetteTooltip" - > - <font-awesome-icon - :class="{ 'text-info': pipetteEnd }" - icon="crosshairs" - /> - </span> - </div> - <span class="text-left text-danger"> - <small v-if="errors.endrhm && !endrhm"> - <translate>Please enter an end point</translate> - </small> - </span> - </div> - <div class="text-left ml-2" v-if="!editStretch"> - <small class="text-muted"> - <translate>Tolerance for snapping to axis</translate> - </small> - <div class="d-flex flex-row position-relative"> - <input - class="form-control form-control-sm" - v-model.number="tolerance" - type="number" - min="0" - step="any" - id="tolerance" - /> - <span class="input-group-text position-absolute input-button"> - m - </span> - </div> - <span class="text-left text-danger"> - <small v-if="errors.tolerance && !tolerance"> - <translate>Please enter a tolerance value</translate> - </small> - </span> - </div> - </div> - <div class="d-flex flex-row justify-content-between px-2"> - <div class="mt-2 mr-2 w-50 text-left"> - <small class="text-muted"> - <translate>Object name</translate> - </small> - <input - id="objbn" - type="text" - class="form-control form-control-sm" - placeholder="" - v-model="objbn" - /> - <span class="text-left text-danger"> - <small v-if="errors.objbn && !objbn"> - <translate>Please enter an objectname</translate> - </small> - </span> - </div> - <div class="mt-2 w-50 text-left"> - <small class="text-muted"> - <translate>National Object name</translate> - </small> - <input - id="nobjbn" - type="text" - class="form-control form-control-sm" - v-model="nobjbn" - /> - </div> - </div> - <div class="d-flex flex-row justify-content-between px-2"> - <div class="mt-2 w-50 text-left"> - <small class="text-muted"> - <translate>Date info</translate> - </small> - <input - id="date_info" - type="date" - class="form-control form-control-sm" - placeholder="date_info" - v-model="date_info" - /> - <span class="text-left text-danger"> - <small v-if="errors.date_info && !date_info"> - <translate>Please enter a date</translate> - </small> - </span> - </div> - <div class="mt-2 ml-2 w-50 text-left"> - <small class="text-muted"> - <translate>Source Organization</translate> - </small> - <input - id="source_organization" - type="text" - class="form-control form-control-sm" - v-model="source_organization" - /> - <span class="text-left text-danger"> - <small v-if="errors.source_organization && !source_organization"> - <translate>Please enter a source organization</translate> - </small> - </span> + <label class="pointer custom-file-label" for="uploadFile"> + {{ uploadLabel }} + </label> </div> </div> <div class="d-flex justify-content-between mt-2 p-2 border-top"> @@ -199,6 +22,7 @@ @click="save" type="submit" class="shadow-sm btn btn-sm btn-info submit-button" + :disabled="!uploadFile" > <translate>Submit</translate> </button> @@ -206,14 +30,6 @@ </div> </template> -<style lang="sass" scoped> -.input-button - border-top-left-radius: 0 - border-bottom-left-radius: 0 - right: 0 - height: 31px -</style> - <script> /* This is Free Software under GNU Affero General Public License v >= 3.0 * without warranty, see README.md and license for details. @@ -230,155 +46,55 @@ * Tom Gottfried <tom.gottfried@intevation.de> * Markus Kottländer <markus.kottlaender@intevation.de> */ -import { mapState, mapGetters } from "vuex"; import { displayError, displayInfo } from "@/lib/errors"; -import { sortTable } from "@/lib/mixins"; +import { HTTP } from "@/lib/http"; export default { - mixins: [sortTable], props: ["editStretch"], data() { return { - pipetteStart: false, - pipetteEnd: false, - id: null, - startrhm: null, - endrhm: null, - tolerance: 5, - objbn: null, - nobjbn: null, - date_info: new Date().toISOString().split("T")[0], - source_organization: null, - countryCode: null, - errors: { - id: false, - startrhm: false, - endrhm: false, - tolerance: false, - objbn: false, - nobjbn: false, - date_info: false, - source_organization: false, - countryCode: false - } + uploadLabel: this.$gettext(this.$options.UPLOADLABEL), + uploadFile: null }; }, - computed: { - ...mapState("map", ["identifiedFeatures"]), - ...mapGetters("map", ["openLayersMap"]), - pipetteTooltip() { - return this.$gettext("Choose a distance mark by clicking on the map."); - } - }, - watch: { - identifiedFeatures() { - const distanceMark = this.identifiedFeatures.find(x => - /^distance_marks_geoserver/.test(x["id_"]) - ); - if (distanceMark) { - const location = distanceMark.get("location"); - this.startrhm = this.pipetteStart ? location : this.startrhm; - this.endrhm = this.pipetteEnd ? location : this.endrhm; - this.pipetteStart = false; - this.pipetteEnd = false; - this.$store.commit("map/mapPopupEnabled", true); - } + computed: {}, + methods: { + initialState() { + this.uploadFile = null; + this.uploadLabel = this.$options.UPLOADLABEL; + this.$parent.showForm = false; + }, + fileSelected(e) { + const files = e.target.files || e.dataTransfer.files; + if (!files) return; + this.uploadLabel = files[0].name; + this.uploadFile = files[0]; + }, + save() { + let formData = new FormData(); + formData.append("stsh", this.uploadFile); + HTTP.post(`/imports/stsh`, formData, { + headers: { + "X-Gemma-Auth": localStorage.getItem("token") + } + }) + .then(() => { + displayInfo({ + title: this.$gettext("Import"), + message: this.$gettext("Upload of stretch complete") + }); + this.initialState(); + }) + .catch(error => { + const { status, data } = error.response; + displayError({ + title: this.$gettext("Backend Error"), + message: `${status}: ${data.message || data}` + }); + }); } }, - methods: { - enablePipette(t) { - this.openLayersMap() - .getLayer("DISTANCEMARKSAXIS") - .setVisible(true); - this.$store.commit("map/mapPopupEnabled", false); - if (t === "start") { - this.pipetteStart = true; - this.pipetteEnd = false; - } else { - this.pipetteStart = false; - this.pipetteEnd = true; - } - }, - disablePipette() { - this.$store.commit("map/mapPopupEnabled", true); - this.pipetteStart = false; - this.pipetteEnd = false; - }, - validate() { - const fields = [ - "id", - "startrhm", - "endrhm", - "objbn", - "countryCode", - "date_info", - "source_organization" - ]; - if (!this.editStretch) fields.push("tolerance"); - fields.forEach(field => { - if (!this[field]) { - this.errors[field] = true; - } else { - this.errors[field] = false; - } - }); - - // return true if no errors - return !Object.values(this.errors).reduce((a, b) => a + b, 0); - }, - save() { - if (this.validate()) { - const data = { - name: this.id, - from: this.startrhm, - to: this.endrhm, - "source-organization": this.source_organization, - "date-info": this.date_info, - objnam: this.objbn, - nobjnam: this.nobjbn, - countries: this.countryCode.split(",").map(x => { - return x.trim(); - }) - }; - if (!this.editStretch) { - data["tolerance"] = this.tolerance; - } - this.$parent.loading = true; - this.$store - .dispatch("imports/saveStretch", data) - .then(() => { - displayInfo({ - title: this.$gettext("Import"), - message: this.$gettext("Starting import of stretch") - }); - this.$store.dispatch("imports/loadStretches").then(() => { - this.$parent.loading = false; - this.$parent.showForm = false; - }); - }) - .catch(error => { - const { status, data } = error.response; - displayError({ - title: this.$gettext("Backend Error"), - message: `${status}: ${data.message || data}` - }); - }); - } - } - }, - mounted() { - if (this.editStretch) { - const props = this.editStretch.properties; - this.id = props.name; - this.startrhm = props.lower.replace(/[,()]/g, ""); - this.endrhm = props.upper.replace(/[,()]/g, ""); - this.tolerance = props.tolerance; - this.objbn = props.objnam; - this.nobjbn = props.nobjnam; - this.date_info = props.date_info.split("T")[0]; - this.source_organization = props.source_organization; - this.countryCode = props.countries; - } - } + mounted() {}, + UPLOADLABEL: "choose a .zip shapefile" }; </script>