motorradig/motorradig/resources/js/views/Main.vue

<template>
    <div id="root">

        <div class="title level-item has-text-centered">Motorrad IG
        </div>

        <div class="has-text-centered">
            <button class="button" @click="changeMainText('Über uns')"       >Über uns</button>
            <button class="button" @click="changeMainText('Aktuelles')"      >Aktuelles</button>
            <button class="button" @click="changeMainText('Mitgliedsantrag')">Mitgliedsantrag</button>


            <span v-if="!this.$store.state.user.hasOwnProperty('role')"><button class="button" @click="changeMainText('Tourplan')" >Tourplan (Beispiel)</button></span>
            <span v-else-if="this.$store.state.user.role==='GUEST'"><button class="button" @click="changeMainText('Tourplan')" >Tourplan (Gast)</button></span>
            <span v-else-if="this.$store.state.user.role==='MEMBER'"><button class="button" @click="changeMainText('Tourplan')" >Tourplan (komplett)</button></span>
            <span v-else-if="this.$store.state.user.role==='ADMIN'"><button class="button" @click="changeMainText('Tourplan')" >Tourplan (komplett)</button></span>


            <button class="button" @click="changeMainText('Wetter')"         >Wetter</button>
            <button class="button" @click="changeMainText('Links')"          >Links</button>
            <button class="button" @click="changeMainText('Impressum')"      >Impressum</button>
            <button class="button" @click="savePage()"      >Save Page</button>
            <button class="button" @click="loadPage()"      >Load Page</button>
            <button class="button" @click="logout()"      >Logout</button>

            <router-link class="button" :to="{ name: 'Login' }">Log-In</router-link>




        </div>

        <p>&nbsp;</p>
        <div>
            <p id="main" visible="true" style="text-align:center;">Das alte Problem: Die Sonne scheint und Dein Motorrad
                ruft,<br/>
                doch alle Deine Freunde sind plötzlich verhindert.<br/><br/>
                Die Idee!!<br/><br/>
                Selber anrufen und angerufen werden.<br/>
            </p>
            <p visible="true" style="text-align:center;"> Einmal im Jahr erhältst Du eine Liste aller IG-Mitglieder
                inkl. Telefonnummern.<br/>
                Die Erscheinungstermine unserer Mitgliederliste + News sind natürlich auf die Motorrad-Saison<br/>
                abgestimmt, ca: März, Juni und September (Saisonstart, -mitte, -ende). Für Eure (Urlaubs) Planung
                und<br/>
                damit der Winter nicht zu lange wird, halten wir in der November- Dezember-Ausgabe schon den<br/>
                Tourenkalender für das nächste Jahr für Euch bereit. Zusätzlich eröffnet Dir die Liste die Möglichkeit
                zur<br/>
                Teilnahme an einem regelmäßigen Stammtisch, gemeinsame Ausfahrten an Wochenenden, einer<br/>
                Urlaubsbörse sowie Saisonauftakt- und Jahrestreffen. Eigeninitiative ist hierbei erwünscht.<br/>

                Da leider auch diese Art der Adressenvermittlung nicht ganz ohne Kostenaufwand geht,<br/>
                müssen wir einmal jährlich einen Selbstkostenbeitrag in Höhe von 20,- EUR erheben.<br/>
                Diese Kosten entstehen durch Werbung, Porto, Erfassungsmaterialien etc..<br/>
                Hast Du jetzt immer noch eine positive Einstellung zu dieser Idee? Dann nichts wie hin.<br/>
                Stammtisch Düsseldorf: Wir treffen uns jeden 2. Mittwoch im Monat ab ca. 19 Uhr in:<br/>
                Tannenbaum Düsseldorf:<br/>
                <br/>
                <a href="https://www.tannenbaum-duesseldorf.de/">https://www.tannenbaum-duesseldorf.de/</a>. Das Douro befindet sich
                direkt neben der Kirche.<br/>
                Parkmöglichkeiten sind im Umkreis um den Italiener genügend vorhanden.<br/>

                <span v-if="this.$store.state.user.role==='ADMIN'"><br/><button class="button" @click="editPage">Text bearbeiten</button></span>
            </p>

        </div>
    </div>
</template>



<script>
    export default {
        data ()  {
            return {
                email: '',
                password: ''
            }
        },
        methods: {

            logout() {
                console.log("logging out with token "+this.$store.state.user_token);

                // Empty brackets are an empty object usually containing form data
                axios.post('http://localhost:8000/api/v1/auth/logout',{}, {
                        headers: {
                            'Authorization': 'Bearer ' + this.$store.state.user_token
                        }
                })
                    .then(res => {
                            console.log("Logout successful");
                            this.$store.state.user_token=null;
                            this.$router.go();//Reload page with updated access-based display
                        }
                    )
                    .catch(error => {
                        console.log("Logout unsuccessful.");
                        console.log(error);
                    })
            },
            editPage() {
                this.$router.push('/edit_page');
            },
            loadPage() {
                axios.post('http://localhost:8000/api/v1/auth/load_page',{
                    page: 'testpage'

                }, {
                    headers: {
                        'Authorization': 'Bearer ' + this.$store.state.user_token
                    }
                })
                    .then(res => {
                            console.log("savePage: Loading Testpage");
                            console.log("Body:");
                            console.log(res.data.body);
                        }
                    )
            }
            ,
            savePage() {
                axios.post('http://localhost:8000/api/v1/auth/save_page',{
                    page: 'testpage',
                    body: 'testbody'

                }, {
                    headers: {
                        'Authorization': 'Bearer ' + this.$store.state.user_token
                    }
                })
                    .then(res => {
                            console.log("savePage: Wrote Testpage");
                        }
                    )
            }
        }
        ,
        created() {

            console.log("Main component created");
            /*
            if (!this.$store.state.user.token) {
                console.log("No token on user detected. Waiting for user login.");
                console.log("store.state.user:");
                console.log(this.$store.state.user);
            } else {
                this.$router.push("/main");
            }
            */
        }
    }
</script>