hopfma/om
4
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Router Componente erstellt / Navbar bearbeitet

Browse Source
This commit is contained in:
Edwina Barbalan
2019-07-02 14:59:11 +02:00
parent d61def25b9
commit 9375316956
6 changed files with 93 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/routes/bookmark.js
+16 -7
View File
@@ -7,12 +7,13 @@ const BookmarkRouter = {
<b>Betreff</b>
<img src="favicon.ico" width=20px height=20px>
</h6>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <br><br>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br><br>
<a href="#">#beispiel #tag</a></p>
<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" @click="myFilter" v-if="!isActive">bookmark_border</i>
<i class="material-icons" @click="myFilter" v-else="isActive">bookmark</i>
</div></div>
<div class="om-card card">
<h6 class="msg-head">
@@ -23,8 +24,9 @@ const BookmarkRouter = {
<a href="#">#beispiel #tag</a></p>
<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>
Erstellt von User 2</div>
<i class="material-icons" @click="myFilter" v-if="!isActive">bookmark_border</i>
<i class="material-icons" @click="myFilter" v-else="isActive">bookmark</i>
</div></div>
<div class="om-card card">
<h6 class="msg-head">
@@ -35,14 +37,21 @@ const BookmarkRouter = {
<a href="#">#beispiel #tag</a></p>
<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>
Erstellt von User 3</div>
<i class="material-icons" @click="myFilter" v-if="!isActive">bookmark_border</i>
<i class="material-icons" @click="myFilter" v-else="isActive">bookmark</i>
</div></div>
</div>
</div>`,
data: function () {
return { messages: _messages };
return {
messages: _messages,
isActive: false,
}
},
methods: {
myFilter () {
this.isActive = !this.isActive;
}
},
};
public/routes/msgCard.js
+8 -28
View File
@@ -9,40 +9,20 @@ 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>
<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>
<i class="material-icons" @click="myFilter()" v-if="!isActive">bookmark_border</i>
<i class="material-icons" @click="myFilter()" v-else="isActive">bookmark</i>
</div></div>`,
props: ['msg'],
// props: ['post', 'favorited'],
data: function () {
return {
// isFavorited: '',
isActive: false,
};
},
/* 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));
}*/
myFilter: function() {
this.isActive = !this.isActive;
},
}
});
public/routes/navRoutes.js
+42
View File
@@ -0,0 +1,42 @@
Vue.component('nav-router', {
template: `
<div>
<nav class="navbar is-fixed-bottom is-expanded is-primary" role="navigation" aria-label="main navigation">
<div class="navbar-brand is-expanded is-primary">
<router-link to="/home" class="navbar-item is-expanded has-text-centered">
<i class="material-icons">home</i>
</router-link>
<router-link to="/files" class="navbar-item is-expanded">
<i class="material-icons">language</i>
</router-link>
<router-link to="/createMessage" class="navbar-item is-expanded">
<i class="material-icons">add_circle</i>
</router-link>
<router-link to="/bookmark" class="navbar-item is-expanded">
<i class="material-icons">bookmark</i>
</router-link>
<router-link to="/profil" class="navbar-item is-expanded">
<i class="material-icons">person</i>
</router-link>
</div>
</nav>
</div>`,
});
const routes = [
{ path: "/", component: HomeRouter },
{ path: "/home", component: HomeRouter },
{ path: "/files", component: FileRouter },
{ path: "/createMessage", component: CreateMsgRouter },
{ path: "/bookmark", component: BookmarkRouter },
{ path: "/profil", component: ProfilRouter },
];
const router = new VueRouter({
routes,
});