Mercurial > gemma
changeset 1942:d1b7b1c70410
import stretch: listview with edit-function
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 21 Jan 2019 16:53:12 +0100 |
parents | d4249b07e719 |
children | 52a6e63d5dcc |
files | client/src/components/ImportStretches.vue client/src/store/imports.js |
diffstat | 2 files changed, 102 insertions(+), 55 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/ImportStretches.vue Mon Jan 21 15:49:51 2019 +0100 +++ b/client/src/components/ImportStretches.vue Mon Jan 21 16:53:12 2019 +0100 @@ -4,23 +4,45 @@ <font-awesome-icon icon="road" class="mr-2"></font-awesome-icon> <translate>Define stretches</translate> </h6> - <div v-if="!edit" class="mb-3"> - <div class="mt-3 mb-2 mr-3 ml-3 d-flex flex-row border-bottom"> - <div class="header id">id</div> - <div class="header funktion">funktion</div> - <div class="header startrhm">startrhm</div> - <div class="header endrhm">endrhm</div> - </div> - <div - class=" mr-3 ml-3 d-flex flex-row" - v-for="stretch in stretches" - :key="stretch.id" - > - <div class="id">{{ stretch.id }}</div> - <div class="funktion">{{ stretch.funktion }}</div> - <div class="startrhm">{{ stretch.startrhm }}</div> - <div class="endrhm">{{ stretch.endrhm }}</div> - </div> + <div v-if="!edit" class="mb-3 mr-3 ml-3 text-left"> + <table v-if="stretches.length > 0" class="table"> + <thead> + <tr> + <th class="header"><translate>Name</translate></th> + <th class="header"><translate>Datum</translate></th> + <th class="header"><translate>Source organization</translate></th> + <th class="tools"> </th> + <th class="tools"> </th> + </tr> + </thead> + <tbody> + <tr class="small" v-for="(stretch, index) in stretches" :key="index"> + <td class=""> + <a @click="moveMapToStretch(index)" href="#">{{ + stretch.properties.name + }}</a> + </td> + <td class=""> + {{ formatSurveyDate(stretch.properties["date_info"]) }} + </td> + <td>{{ stretch.properties["source_organization"] }}</td> + <td> + <font-awesome-icon + @click="editStretch(index)" + icon="pencil-alt" + fixed-width + ></font-awesome-icon> + </td> + <td> + <font-awesome-icon + @click="deleteStretch(index)" + icon="trash" + fixed-width + ></font-awesome-icon> + </td> + </tr> + </tbody> + </table> <div class="mt-3" v-if="stretches.length == 0"> <translate>No results.</translate> </div> @@ -226,6 +248,8 @@ */ import { mapState, mapGetters } from "vuex"; import { displayError, displayInfo } from "@/lib/errors.js"; +import { formatSurveyDate } from "@/lib/date.js"; +import center from "@turf/center"; export default { name: "importstretches", @@ -256,15 +280,46 @@ }, mounted() { this.edit = false; - // this.$store.dispatch("imports/loadStretches").catch(error => { - // const { status, data } = error.response; - // displayError({ - // title: this.$gettext("Backend Error"), - // message: `${status}: ${data.message || data}` - // }); - // }); + this.loadStretches(); }, methods: { + editStretch(index) { + const { date_info, name, objnam, nobjnam } = this.stretches[ + index + ].properties; + this.date_info = date_info; + this.id = name; + this.nobjbn = nobjnam; + this.objbn = objnam; + this.source = this.stretches[index]; + this.edit = true; + }, + deleteStretch(index) { + displayInfo({ + title: this.$gettext("Not implemented"), + message: this.$gettext("Deleting " + this.stretches[index].id) + }); + }, + moveMapToStretch(index) { + const { coordinates } = center(this.stretches[index]).geometry; + this.$store.commit("map/moveMap", { + coordinates: coordinates, + zoom: 17, + preventZoomOut: true + }); + }, + formatSurveyDate(d) { + return formatSurveyDate(d); + }, + loadStretches() { + this.$store.dispatch("imports/loadStretches").catch(error => { + const { status, data } = error.response; + displayError({ + title: this.$gettext("Backend Error"), + message: `${status}: ${data.message || data}` + }); + }); + }, clean() { this.id = ""; this.funktion = ""; @@ -339,6 +394,7 @@ }); this.clean(); this.edit = false; + this.loadStretches(); }) .catch(error => { console.log(error); @@ -375,24 +431,4 @@ }; </script> -<style lang="scss" scoped> -.id { - text-align: left; - width: 25%; -} - -.funktion { - text-align: left; - width: 25%; -} - -.endrhm { - text-align: left; - width: 25%; -} - -.startrhm { - text-align: left; - width: 25%; -} -</style> +<style lang="scss" scoped></style>
--- a/client/src/store/imports.js Mon Jan 21 15:49:51 2019 +0100 +++ b/client/src/store/imports.js Mon Jan 21 16:53:12 2019 +0100 @@ -14,6 +14,7 @@ import { HTTP } from "@/lib/http"; import Vue from "vue"; +import { WFS } from "ol/format.js"; /* eslint-disable no-unused-vars */ /* eslint-disable no-unreachable */ @@ -115,10 +116,6 @@ setStretches: (state, stretches) => { state.stretches = stretches; }, - // only for prototype purposes delete after real backend is active - addStretch: (state, stretch) => { - state.stretches.push(stretch); - }, clearCurrentSchedule: state => { state.currentSchedule = initializeCurrentSchedule(); }, @@ -219,13 +216,28 @@ }, actions: { loadStretches({ commit }) { - throw new Error("Endpoint not activated!"); return new Promise((resolve, reject) => { - HTTP.get("/imports/stretch", { - headers: { "X-Gemma-Auth": localStorage.getItem("token") } - }) + var stretchesFeatureCollectionRequest = new WFS().writeGetFeature({ + srsName: "EPSG:4326", + featureNS: "gemma", + featurePrefix: "gemma", + featureTypes: ["stretches"], + outputFormat: "application/json" + }); + HTTP.post( + "/internal/wfs", + new XMLSerializer().serializeToString( + stretchesFeatureCollectionRequest + ), + { + headers: { + "X-Gemma-Auth": localStorage.getItem("token"), + "Content-type": "text/xml; charset=UTF-8" + } + } + ) .then(response => { - commit("setStretches", response.data); + commit("setStretches", response.data.features); resolve(response); }) .catch(error => { @@ -239,7 +251,6 @@ headers: { "X-Gemma-Auth": localStorage.getItem("token") } }) .then(response => { - commit("setStretches", response.data); resolve(response); }) .catch(error => {