From 535ef4ea39084fa02883d1eb71c1bb967a9987d3 Mon Sep 17 00:00:00 2001
From: Tyler Cook <tylercook017@gmail.com>
Date: Mon, 9 Apr 2018 00:16:50 -0700
Subject: [PATCH] Create Board Vue page

I've got a bad feeling about this...
---
 src/Router.js                  |   6 ++
 src/assets/js/api.js           |   5 ++
 src/components/CreateBoard.vue | 110 +++++++++++++++++++++++++++++++++
 3 files changed, 121 insertions(+)
 create mode 100644 src/components/CreateBoard.vue

diff --git a/src/Router.js b/src/Router.js
index cd879a7..0578ee1 100644
--- a/src/Router.js
+++ b/src/Router.js
@@ -9,6 +9,7 @@ import NewThread from './components/NewThread.vue'
 import BanList from './components/BanList.vue'
 import Ban from './components/Ban.vue'
 import EditBoard from './components/EditBoard.vue'
+import CreateBoard from './components/CreateBoard.vue'
 import CreateMod from './components/CreateMod.vue'
 
 Vue.use(Router);
@@ -61,6 +62,11 @@ export default new Router({
             name: 'EditBoard',
             component: EditBoard
         },
+        {
+            path: '/create/board',
+            name: 'CreateBoard',
+            component: CreateBoard
+        },
         {
             path: '/create/mod',
             name: 'CreateMod',
diff --git a/src/assets/js/api.js b/src/assets/js/api.js
index 086b612..61223e2 100755
--- a/src/assets/js/api.js
+++ b/src/assets/js/api.js
@@ -19,6 +19,7 @@ axios.defaults.withCredentials = true;
         numRepliesUrl: 'read/numReplies',
         updateBoardUrl: 'update/board',
         deleteThreadUrl: 'delete/thread',
+        createBoardUrl: 'create/board',
         createModUrl: 'create/mod'
     };
 
@@ -124,6 +125,10 @@ axios.defaults.withCredentials = true;
         post(url('deleteThreadUrl'), {_id: id}, fn);
     };
 
+    _api.createBoard = function (name, letter, fn) {
+        post(url('createBoardUrl'), { name: name, letter: letter }, fn);
+    };
+
     _api.createMod = function (username, password, fn) {
         post(url('createModUrl'), { username: username, password: password }, fn);
     };
diff --git a/src/components/CreateBoard.vue b/src/components/CreateBoard.vue
new file mode 100644
index 0000000..4b3bea4
--- /dev/null
+++ b/src/components/CreateBoard.vue
@@ -0,0 +1,110 @@
+<template>
+    <div class="createBoard">
+        <div class="boardBanner">
+            <div class="boardTitle">Image Board Create Board</div>
+        </div>
+        <hr style="width: 90%">
+        <br>
+        <form action="#" method="post">
+            <table class="postForm">
+                <tbody>
+                <tr>
+                    <td style="text-align: center; width: 65px;">Letter</td>
+                    <td>
+                        <input name="letter" style="width: 145px; text-align: center" type="text"
+                               v-model="letter">
+                    </td>
+                </tr>
+                <tr>
+                    <td style="text-align: center; width: 65px;">Name</td>
+                    <td>
+                        <input name="name" style="width: 145px; text-align: center" type="text" v-model="name">
+                    </td>
+                </tr>
+                <tr>
+                    <td colspan="2"
+                        style="padding: 5px 0; border: none; background: none; text-align: center; font-weight: normal; padding-bottom: 20px">
+                        <input value="Submit" style="margin: 0px;" type="button" v-on:click="createBoard">
+                    </td>
+                </tr>
+                </tbody>
+                <p v-if="error">{{ error }}</p>
+            </table>
+        </form>
+    </div>
+</template>
+
+<style scoped>
+    .boardBanner {
+        text-align: center;
+        clear: both;
+    }
+
+    .boardBanner .boardTitle {
+        font-family: Tahoma, sans-serif;
+        font-size: 28px;
+        font-weight: 700;
+        letter-spacing: -2px;
+        margin-top: 0;
+        color: #AF0A0F;
+    }
+
+    body {
+        background: #eef2ff url(http://s.4cdn.org/image/fade-blue.png) top center repeat-x;
+    }
+
+    hr {
+        border: 0;
+        border-top: 1px solid #b7c5d9;
+        height: 0;
+    }
+
+    table {
+        border-spacing: 1px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    td {
+        margin: 0;
+        padding: 0;
+        font-size: 10pt;
+    }
+
+    td:first-child {
+        background-color: #D6DAF0;
+        border: 1px solid #34345C;
+        color: #34345C;
+        font-weight: 700;
+        padding: 0 5px;
+        font-size: 10pt;
+    }
+</style>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: '',
+                letter: '',
+                error: null
+            }
+        },
+        methods: {
+            createBoard() {
+                let vm = this;
+                _api.createBoard(this.name, this.letter, function (err, res) {
+                    if (err) {
+                        vm.error = err;
+                    }
+                    else if (res.result) {
+                        vm.$router.push('/' + this.letter + '/catalog');
+                    }
+                    else if (res.error) {
+                        vm.error = res.error;
+                    }
+                });
+            }
+        }
+    }
+</script>
\ No newline at end of file