Speicherfunktion / Buefy auf Profil angewendet
This commit is contained in:
Edwina Barbalan
@@ -12,7 +12,7 @@ const BookmarkRouter = {
|
||||
<div class="om-card-footer"> <div class="om-user-line">
|
||||
<i class="material-icons">account_circle</i>
|
||||
Erstellt von User 1</div>
|
||||
<i class="material-icons">bookmark</i>
|
||||
<i class="material-icons">bookmark</i>
|
||||
</div></div>
|
||||
<div class="om-card card">
|
||||
<h6 class="msg-head">
|
||||
|
||||
@@ -9,7 +9,40 @@ Vue.component('MsgCard', {
|
||||
<div class="om-card-footer"> <div class="om-user-line">
|
||||
<i class="material-icons">account_circle</i>
|
||||
Erstellt von {{ msg.user }}</div>
|
||||
<i class="material-icons">bookmark_border</i>
|
||||
|
||||
<a href="#" v-if="isFavorited" @click.prevent="unFavorite(post)">
|
||||
<i class="material-icons">bookmark_border</i></a>
|
||||
|
||||
<a href="#" v-else @click.prevent="favorite(post)">
|
||||
<i class="bookmark"></i>
|
||||
</a>
|
||||
|
||||
</div></div>`,
|
||||
props: ['msg']
|
||||
props: ['msg'],
|
||||
// props: ['post', 'favorited'],
|
||||
data: function () {
|
||||
return {
|
||||
// isFavorited: '',
|
||||
};
|
||||
},
|
||||
/* mounted() {
|
||||
this.isFavorited = this.isFavorite ? true : false;
|
||||
},
|
||||
computed: {
|
||||
isFavorite() {
|
||||
return this.favorited;
|
||||
},
|
||||
},*/
|
||||
methods: {
|
||||
/* favorite(post) {
|
||||
$.ajax({url: "api/ids", method: "POST"})
|
||||
.then(response => this.isFavorited = true)
|
||||
.catch(response => console.log(response.data));
|
||||
},
|
||||
unFavorite(post) {
|
||||
$.ajax({url: "api/ids", method: "POST"})
|
||||
.then(response => this.isFavorited = false)
|
||||
.catch(response => console.log(response.data));
|
||||
}*/
|
||||
},
|
||||
});
|
||||
|
||||
+60
-39
@@ -1,50 +1,71 @@
|
||||
Vue.component('ProfilCard', {
|
||||
template: `<div>
|
||||
<img class="profil-img rounded-circle" src="img/profil_icon.png" width=120px height=120px>
|
||||
<div class="profil-card card">
|
||||
<div class="edit-item"><i class="material-icons" data-toggle="modal" data-target="#myModal">edit</i></div>
|
||||
<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">
|
||||
<h5><b>{{ profil.user }}</b></h5><br>
|
||||
<h6>{{ profil.major }}<br><br>
|
||||
{{ profil.semester }}</h6>
|
||||
<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>
|
||||
<div class="om-tab">
|
||||
<button class="tablinks om-tablinks"><b>Abonniert<br>{{ profil.abos }}</b></button>
|
||||
<button class="tablinks om-tablinks"><b>Gespeichert<br>{{ profil.saved }}</b></button>
|
||||
<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>
|
||||
</div>
|
||||
<section>
|
||||
|
||||
<div class="modal fade" id="myModal" role="dialog">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Profil Bearbeiten</h5>
|
||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="new-msg-form">
|
||||
<div class="form-group">
|
||||
<label class="bmd-label-floating">Benutzername*</label>
|
||||
<input type="text" class="form-control" id="user">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="bmd-label-floating">Studiengang*</label>
|
||||
<input type="text" class="form-control" id="major">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="bmd-label-floating">Semester*</label>
|
||||
<input type="text" class="form-control" id="semester">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class ="btn btn-default" data-dismiss="modal" id="close">Close</button>
|
||||
<button type="submit" class="btn btn-raised om-btn" data-dismiss="modal" id="save">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
<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']
|
||||
|
||||
props: ['profil'],
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
isCardModalActive: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
close: function () {
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
_profilcard = [
|
||||
{
|
||||
id: 1,
|
||||
user: 'Benutzername',
|
||||
major: 'Studiengang',
|
||||
semester: 'Semester',
|
||||
user: '',
|
||||
major: '',
|
||||
semester: '',
|
||||
abos: '7',
|
||||
saved: '3',
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user