From 0802aad588692882e3e4df30c6f050afcc7de05f Mon Sep 17 00:00:00 2001
From: Nathan Cannon <nathan.cannon@edf-energy.com>
Date: Mon, 24 Sep 2018 15:15:18 +0100
Subject: [PATCH] Added UI to add a new site.

---
 frontend/src/router.js         |  6 ++++
 frontend/src/views/NewSite.vue | 59 ++++++++++++++++++++++++++++++++++
 2 files changed, 65 insertions(+)
 create mode 100644 frontend/src/views/NewSite.vue

diff --git a/frontend/src/router.js b/frontend/src/router.js
index fc3f801..94d47e9 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -3,6 +3,7 @@ import Router from "vue-router";
 import Home from "./views/Home.vue";
 import Observation from "./views/Observation.vue";
 import Stats from "./views/Stats.vue";
+import NewSite from "./views/NewSite.vue";
 
 Vue.use(Router);
 
@@ -22,6 +23,11 @@ export default new Router({
       path: "/stats",
       name: "stats",
       component: Stats
+    },
+    {
+      path: "/newsite",
+      name: "newSite",
+      component: NewSite
     }
   ]
 });
diff --git a/frontend/src/views/NewSite.vue b/frontend/src/views/NewSite.vue
new file mode 100644
index 0000000..11bb75c
--- /dev/null
+++ b/frontend/src/views/NewSite.vue
@@ -0,0 +1,59 @@
+<template>
+  <b-container>
+    <h2>New Site</h2>
+    <b-form @submit="onSubmit">
+      <b-form-group id="submission-form" label="Site Name">
+        <b-form-input v-model="siteName" type="text" />
+      </b-form-group>
+      <b-button type="submit" size="lg" variant="primary">Submit</b-button>
+    </b-form>
+    <br />
+    <b-alert :show="dismissCountDown" dismissible fade :variant="alertVariant" @dismissed="dismissCountDown=0" @dismiss-count-down="countDownChanged">
+      {{ alertText}}
+    </b-alert>
+  </b-container>
+</template>
+
+<script>
+import Vue from "vue";
+export default {
+  name: "newSite",
+  data: function() {
+    return {
+      siteName: null,
+      dismissSecs: 5,
+      dismissCountDown: 0,
+      alertVariant: "info",
+      alertText: ""
+    };
+  },
+  methods: {
+    countDownChanged: function(dismissCountDown) {
+      this.dismissCountDown = dismissCountDown;
+    },
+    showAlert: function() {
+      this.dismissCountDown = this.dismissSecs;
+    },
+    onSubmit: function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      var form = document.getElementById("submission-form");
+      if (form.checkValidity()) {
+        Vue.axios
+          .post("/api/site", this.siteName)
+          .then(response => {
+            this.alertVariant = "success";
+            this.alertText = "Successfully added " + response.data.name;
+            this.showAlert();
+          })
+          .catch(error => {
+            this.alertVariant = "danger";
+            this.alertText = "Failed to add Site";
+            this.showAlert();
+            console.log(error);
+          });
+      }
+    }
+  }
+};
+</script>