--- a/client/src/fairway/Fairwayprofile.vue	Tue Oct 23 18:15:14 2018 +0200
+++ b/client/src/fairway/Fairwayprofile.vue	Wed Oct 24 09:12:51 2018 +0200
@@ -4,7 +4,7 @@
         </div>
         <div class="additionalsurveys d-flex flex-column">
             <small class="label">Available Additional Surveys</small>
-            <select>
+            <select v-model="additionalSurvey" @change="selectAdditionalSurveyData">
                 <option value="">None</option>
                 <option v-for="survey in additionalSurveys" :key="survey.date_info">
                     {{survey.date_info}}
@@ -50,6 +50,7 @@
 
 <script>
 import * as d3 from "d3";
+import { mapState } from "vuex";
 
 const GROUND_COLOR = "#4A2F06";
 
@@ -72,6 +73,7 @@
     "additionalSurveys"
   ],
   computed: {
+    ...mapState("fairwayprofile", ["startPoint", "endPoint"]),
     waterColor() {
       const result = this.waterLevels.find(
         x => x.level === this.selectedWaterLevel
@@ -80,7 +82,9 @@
     }
   },
   data() {
-    return {};
+    return {
+      additionalSurvey: ""
+    };
   },
   watch: {
     data() {
@@ -103,8 +107,8 @@
     }
   },
   methods: {
-    selectAdditionalSurveyData(e) {
-      console.log(e);
+    selectAdditionalSurveyData() {
+      //
     },
     drawDiagram() {
       const chartDiv = document.querySelector(".fairwayprofile");