Added prototype addable/removable stuff for strength/improvement entries

frontend/src/App.vue

@@ -2,7 +2,7 @@
   <div id="app">
     <div id="nav">
       <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
+      <router-link to="/observation">Observation</router-link>
     </div>
     <router-view/>
   </div>

frontend/src/router.js

@@ -1,6 +1,7 @@
 import Vue from "vue";
 import Router from "vue-router";
 import Home from "./views/Home.vue";
+import Observation from "./views/Observation.vue";
 
 Vue.use(Router);
 
@@ -14,8 +15,7 @@ export default new Router({
     {
       path: "/observation",
       name: "observation",
-      component: () =>
+      component: Observation
-        import(/* webpackChunkName: "about" */ "./views/Observation.vue")
     }
   ]
 });

frontend/src/views/Observation.vue

@@ -1,7 +1,43 @@
 <template>
-  
+  <b-container>
+    <b-container v-for="(item, index) in observations" v-bind:key="index" v-bind:type="item.type" v-bind:rating="item.rating" v-bind:strengths="item.strengths" v-bind:improvements="item.improvements">
+      <b-button v-on:click="deleteObservation(index)">Delete</b-button>
+    </b-container>
+    <b-button v-on:click="this.addAnotherObservation">Add Entry</b-button>
+  </b-container>
 </template>
 
 <script>
-
+export default {
+  name: "observation",
+  data: function() {
+    return {
+      observations: [
+        {
+          type: "",
+          rating: 0,
+          strengths: "",
+          improvements: ""
+        }
+      ]
+    };
+  },
+  methods: {
+    addAnotherObservation: function() {
+      console.log("Adding");
+      this.observations.push({
+        type: "",
+        rating: 0,
+        strengths: "",
+        improvements: ""
+      });
+    },
+    deleteObservation: function(index) {
+      this.observations.splice(index, 1);
+      if (this.observations.length == 0) {
+        this.addAnotherObservation();
+      }
+    }
+  }
+};
 </script>