73 lines
2.9 KiB
JavaScript
73 lines
2.9 KiB
JavaScript
Vue.component('ProfilCard', {
|
|
template: `<div>
|
|
<div class="profil-card card">
|
|
<br/>
|
|
<img class="prof-image" src="img/profil_icon.png" alt="Card image cap">
|
|
|
|
<div class="logout-item"><i class="material-icons" @click="$router.push('/login')">exit_to_app</i></div>
|
|
|
|
<div class="profil-text">
|
|
<h6><b>Benutzername:</b><br><br>
|
|
<b>{{ profil.user }}</b><br><br>
|
|
<b>Studiengang:</b><br><br>
|
|
{{ profil.major }}<br><br>
|
|
<b>Semester:</b><br><br>
|
|
{{ profil.semester }}<br></h6>
|
|
</div>
|
|
|
|
<hr class="first">
|
|
|
|
<div class="btnprofil">
|
|
<button @click="isCardModalActive = true"><b>Abonniert: <br/>{{ profil.abos }}</b> <br/></button>
|
|
<button @click="$router.push('/bookmark')"><b>Gespeichert:<br/> {{ profil.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>
|
|
</div>`,
|
|
|
|
props: ['profil'],
|
|
|
|
data: function () {
|
|
return {
|
|
isCardModalActive: false
|
|
};
|
|
},
|
|
methods: {
|
|
close: function () {
|
|
|
|
}
|
|
}
|
|
});
|