--- 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">&nbsp;</th>
+            <th class="tools">&nbsp;</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 => {