Vue.component('profil-card', { template: ` <div class="profil-card card"> <img class="prof-image" src="img/profil_icon.png" alt="Card image cap"> <div class="logout-item" style="float: right;"> <b-button type="button" class="btn btn-primary" data-dismiss="modal" @click.prevent="logout"> <i class="material-icons" style="float: left; margin: -0.1rem 0.2rem 0 -0.2rem;" @click.prevent="logout">exit_to_app</i> Logout</b-button> </div> <div class="profil-text"> <span style="font-size:120%; display:inline-block; margin: 0.8rem 0 0 0;"><b>{{ auth.name }}</b></span><br><br> <span style="font-size:90%; display:inline-block; margin: 0 0 0.8rem 0;"><b>{{ major }}</b></span> <br><br> </div> <hr class="first"> <div class="btnprofil"> <button @click="isCardModalActive = true"><b>Abonniert: <br/>{{ abo }}</b> <br/></button> <button @click="$router.push('/bookmark')"><b>Gespeichert:<br/> {{ saved }}</b><br/></button> </div> <section> <b-modal :active.sync="isCardModalActive" :width="600" scroll="keep"> <div class="card"> <header class="modal-card-head"> <p class="modal-card-title">Abonnierte Kanäle</p> </header> <div class="card-content"> <div class="content"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> <footer class="modal-card-foot"> <b-button size="is-medium" @click="isCardModalActive = false">Close</b-button> </footer> </div> </b-modal> </section> </div>`, data: function () { return { auth: auth, abo: 7, saved: 3, isCardModalActive: false, }; }, computed: { major: function() { // e.g. ST@B-ME;ST@EFI; var majorID = auth.type.split(';')[0].split('@')[1]; //console.info(majorID); //console.info(majorList); var majorName = 'Studiengang Unbekannt'; majorList.forEach(function(major) { if (major.id == majorID) { majorName = major.name; } }); return majorName; }, }, methods: { logout: function() { clearAuthState(); $.ajax({ url: "api/logout", method: "POST" }); router.push('/profil'); }, } });