From b99987171e09cc4203602a981f8fdb38e8d3366d Mon Sep 17 00:00:00 2001
From: BenRoe <mail@benjaminroesner.com>
Date: Tue, 3 Sep 2019 15:25:39 +0200
Subject: [PATCH] Edit form for netlify

---
 src/pages/success.vue         | 16 ++++++++++++++++
 src/pages/switch-database.vue | 27 +++++++++++++++++++++++++--
 2 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100755 src/pages/success.vue

diff --git a/src/pages/success.vue b/src/pages/success.vue
new file mode 100755
index 0000000..69ff174
--- /dev/null
+++ b/src/pages/success.vue
@@ -0,0 +1,16 @@
+<template>
+  <Layout>
+    <div class="container-inner mx-auto text-center py-16">
+      <h2 class="text-4xl font-bold">Thanks for contributing</h2>
+    </div>
+  </Layout>
+</template>
+
+<script>
+export default {
+  metaInfo: {
+    title: "Form successfuly send"
+  }
+};
+</script>
+
diff --git a/src/pages/switch-database.vue b/src/pages/switch-database.vue
index d6b368b..11d1030 100755
--- a/src/pages/switch-database.vue
+++ b/src/pages/switch-database.vue
@@ -6,10 +6,13 @@
       <form
         class="w-full max-w-lg"
         name="addSwitch"
-        method="POST"
-        netlify-honeypot="isRequired"
+        method="post"
+        v-on:submit.prevent="handleFormSubmit"
+        action="/success/"
         data-netlify="true"
+        data-netlify-honeypot="isRequired"
       >
+        <input type="hidden" name="form-name" value="addSwitch" />
         <div class="flex flex-wrap -mx-3 mb-6">
           <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
             <label
@@ -387,6 +390,7 @@ export default {
     return {
       perPage: 3,
       data: [],
+      formData: {},
       detailRow: SwitchDetailRow,
       fields: [
         { name: "id", visible: false },
@@ -442,6 +446,25 @@ export default {
       .then(response => (this.data = response.data));
   },
   methods: {
+    encode(data) {
+      return Object.keys(data)
+        .map(
+          key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key])
+        )
+        .join("&");
+    },
+    handleFormSubmit(e) {
+      fetch("/", {
+        method: "POST",
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+        body: this.encode({
+          "form-name": e.target.getAttribute("name"),
+          ...this.formData
+        })
+      })
+        .then(() => this.$router.push("/success"))
+        .catch(error => alert(error));
+    },
     toggleDetailRow(event) {
       this.$refs.vuetable.toggleDetailRow(event.data.id);
     },