--- a/client/src/components/ImportSoundingresults.vue	Fri Mar 01 09:41:40 2019 +0100
+++ b/client/src/components/ImportSoundingresults.vue	Fri Mar 01 10:31:24 2019 +0100
@@ -21,9 +21,11 @@
                 <select v-model="bottleneck" class="custom-select">
                   <option
                     v-for="bottleneck in availableBottlenecks"
-                    :key="bottleneck"
-                    >{{ bottleneck }}</option
+                    :value="bottleneck"
+                    :key="bottleneck.properties.objnam"
                   >
+                    {{ bottleneck.properties.objnam }}
+                  </option>
                 </select>
                 <span class="text-danger">
                   <small v-if="!bottleneck">
@@ -58,7 +60,7 @@
                   id="depthreference"
                 >
                   <option
-                    v-for="option in this.$options.depthReferenceOptions"
+                    v-for="option in this.depthReferenceOptions"
                     :key="option"
                     >{{ option }}</option
                   >
@@ -182,7 +184,7 @@
     initialState() {
       this.importState = IMPORTSTATE.UPLOAD;
       this.depthReference = "";
-      this.bottleneck = "";
+      this.bottleneck = null;
       this.projection = "";
       this.importDate = "";
       this.uploadLabel = this.$gettext("choose .zip- file");
@@ -228,7 +230,9 @@
           if (response.data.meta) {
             const { bottleneck, date, epsg } = response.data.meta;
             const depthReference = response.data.meta["depth-reference"];
-            this.bottleneck = bottleneck;
+            this.bottleneck = this.bottlenecks.find(
+              bn => bn.properties.objnam === bottleneck
+            );
             this.depthReference = depthReference;
             this.importDate = new Date(date).toISOString().split("T")[0];
             this.projection = epsg;
@@ -249,7 +253,8 @@
     confirm() {
       let formData = new FormData();
       formData.append("token", this.token);
-      if (this.bottleneck) formData.append("bottleneck", this.bottleneck);
+      if (this.bottleneck)
+        formData.append("bottleneck", this.bottleneck.properties.objnam);
       if (this.importDate)
         formData.append("date", this.importDate.split("T")[0]);
       if (this.depthReference)
@@ -265,7 +270,9 @@
         .then(() => {
           displayInfo({
             title: this.$gettext("Import"),
-            message: this.$gettext("Starting import for ") + this.bottleneck
+            message:
+              this.$gettext("Starting import for ") +
+              this.bottleneck.properties.objnam
           });
           this.initialState();
         })
@@ -279,7 +286,7 @@
     }
   },
   mounted() {
-    this.$store.dispatch("bottlenecks/loadBottlenecksList");
+    this.$store.dispatch("bottlenecks/loadBottlenecks");
   },
   watch: {
     showContextBox() {
@@ -288,7 +295,7 @@
   },
   computed: {
     ...mapState("application", ["showContextBox"]),
-    ...mapState("bottlenecks", ["bottlenecksList"]),
+    ...mapState("bottlenecks", ["bottlenecks"]),
     disableUploadButton() {
       if (this.importState === IMPORTSTATE.UPLOAD) return this.disableUpload;
       if (
@@ -301,7 +308,7 @@
       return this.disableUpload;
     },
     availableBottlenecks() {
-      return this.bottlenecksList.map(x => x.properties.name);
+      return this.bottlenecks;
     },
     editState() {
       return this.importState === IMPORTSTATE.EDIT;
@@ -321,35 +328,23 @@
         encodeURIComponent(
           JSON.stringify({
             depthReference: this.depthReference,
-            bottleneck: this.bottleneck,
+            bottleneck: this.bottleneck.properties.objnam,
             date: this.importDate
           })
         )
       );
+    },
+    depthReferenceOptions() {
+      if (
+        this.bottleneck &&
+        this.bottleneck.properties.reference_water_levels
+      ) {
+        return Object.keys(
+          JSON.parse(this.bottleneck.properties.reference_water_levels)
+        );
+      }
+      return [];
     }
-  },
-  depthReferenceOptions: [
-    "",
-    // "NAP",
-    // "KP",
-    // "FZP",
-    // "ADR",
-    // "TAW",
-    // "PUL",
-    // "NGM",
-    // "ETRS",
-    // "POT",
-    "LDC",
-    // "HDC",
-    // "ZPG",
-    // "GLW",
-    // "HSW",
-    "LNWL" //,
-    // "HNW",
-    // "IGN",
-    // "WGS",
-    // "RN",
-    // "HBO"
-  ]
+  }
 };
 </script>

--- a/client/src/store/bottlenecks.js	Fri Mar 01 09:41:40 2019 +0100
+++ b/client/src/store/bottlenecks.js	Fri Mar 01 10:31:24 2019 +0100
@@ -20,6 +20,7 @@
 // initial state
 const init = () => {
   return {
+    bottlenecks: [],
     bottlenecksList: [],
     selectedBottleneck: null,
     surveys: [],
@@ -33,6 +34,9 @@
   namespaced: true,
   state: init(),
   mutations: {
+    setBottlenecks: (state, bottlenecks) => {
+      state.bottlenecks = bottlenecks;
+    },
     setBottlenecksList: (state, bottlenecksList) => {
       state.bottlenecksList = bottlenecksList;
     },
@@ -131,6 +135,36 @@
             reject(error);
           });
       });
+    },
+    loadBottlenecks({ commit }) {
+      return new Promise((resolve, reject) => {
+        var bottleneckFeatureCollectionRequest = new WFS().writeGetFeature({
+          srsName: "EPSG:4326",
+          featureNS: "gemma",
+          featurePrefix: "gemma",
+          featureTypes: ["bottlenecks_geoserver"],
+          outputFormat: "application/json"
+        });
+        HTTP.post(
+          "/internal/wfs",
+          new XMLSerializer().serializeToString(
+            bottleneckFeatureCollectionRequest
+          ),
+          {
+            headers: {
+              "X-Gemma-Auth": localStorage.getItem("token"),
+              "Content-type": "text/xml; charset=UTF-8"
+            }
+          }
+        )
+          .then(response => {
+            commit("setBottlenecks", response.data.features);
+            resolve(response);
+          })
+          .catch(error => {
+            reject(error);
+          });
+      });
     }
   }
 };