Started working on File Uploader, Vue part

motorradig/resources/js/views/Upload.vue

@@ -0,0 +1,131 @@
+<template>
+    <div id="root">
+
+        <div class="title level-item has-text-centered">Motorrad IG
+        </div>
+
+        <div class="has-text-centered">
+
+            <button class="button" @click=""       >Über uns</button>
+            <button class="button" @click=""      >Aktuelles</button>
+            <button class="button" @click="">Mitgliedsantrag</button>
+
+            <span v-if="!this.$store.state.user.hasOwnProperty('role')"><button class="button" @click="" >Tourplan (Beispiel)</button></span>
+            <span v-else-if="this.$store.state.user.role==='GUEST'"><button class="button" @click="" >Tourplan (Gast)</button></span>
+            <span v-else-if="this.$store.state.user.role==='MEMBER'"><button class="button" @click="" >Tourplan (komplett)</button></span>
+            <span v-else-if="this.$store.state.user.role==='ADMIN'"><button class="button" @click="" >Tourplan (komplett)</button></span>
+
+
+            <button class="button" @click=""         >Wetter</button>
+            <button class="button" @click=""          >Links</button>
+            <button class="button" @click=""      >Impressum</button>
+
+            <button class="button" @click="showContent()"      >Show content</button>
+
+
+            <router-link class="button" :to="{ name: 'Login' }">Log-In</router-link>
+
+
+
+
+            <div>
+
+                    <span>UPLOAD:</span>
+                    <input name="filename" type="file" @change="onFileSelected"></input>
+
+
+            </div>
+
+        </div>
+
+    </div>
+</template>
+
+<script>
+    import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
+    import {
+        Blockquote,
+        CodeBlock,
+        HardBreak,
+        Heading,
+        HorizontalRule,
+        OrderedList,
+        BulletList,
+        ListItem,
+        TodoItem,
+        TodoList,
+        Bold,
+        Code,
+        Italic,
+        Link,
+        Strike,
+        Underline,
+        History,
+    } from 'tiptap-extensions'
+    export default {
+        components: {
+            EditorContent,
+            EditorMenuBar,
+
+        },
+        data() {
+            return {
+                editor: new Editor({
+                    extensions: [
+                        new Blockquote(),
+                        new BulletList(),
+                        new CodeBlock(),
+                        new HardBreak(),
+                        new Heading({ levels: [1, 2, 3] }),
+                        new HorizontalRule(),
+                        new ListItem(),
+                        new OrderedList(),
+                        new TodoItem(),
+                        new TodoList(),
+                        new Link(),
+                        new Bold(),
+                        new Code(),
+                        new Italic(),
+                        new Strike(),
+                        new Underline(),
+                        new History(),
+                    ],
+                    content: this.$store.state.page_content,
+                }),
+            }
+        },
+        beforeDestroy() {
+            this.editor.destroy()
+        },
+        methods: {
+
+            showContent() {
+                console.log(">>" );
+                //console.log(this.editor.view.dom.innerText);
+                //console.log(this.editor.docView.dom.innerHTML);
+                console.log(this.editor.view.docView.dom.innerHTML);
+            },
+            savePage() {
+                console.log('Saving to page:'+this.$store.state.page_name);
+                axios.post('http://localhost:8000/api/v1/auth/save_page',{
+                    page: this.$store.state.page_name,
+                    body: this.editor.view.docView.dom.innerHTML
+                }, {
+                    headers: {
+                        'Authorization': 'Bearer ' + this.$store.state.user_token
+                    }
+                })
+                    .then(res => {
+                            console.log("savePage success: Wrote "+this.$store.state.page_name);
+                            console.log("Going back to main view");
+                            this.$router.push("/");
+                        }
+                    )
+            },
+            onFileSelected(event) {
+                console.log("File changed:");
+                console.log(event.target.files[0].name);
+            }
+        }
+    }
+</script>