From 937531695614d3966cea49175835d80c30f615c6 Mon Sep 17 00:00:00 2001
From: Edwina Barbalan <edwinab@roam213094.roam.fh-nuernberg.de>
Date: Tue, 2 Jul 2019 14:59:11 +0200
Subject: [PATCH] Router Componente erstellt / Navbar bearbeitet

---
 public/index.html          | 12 ++++++++---
 public/routes/bookmark.js  | 23 ++++++++++++++-------
 public/routes/msgCard.js   | 36 ++++++++------------------------
 public/routes/navRoutes.js | 42 ++++++++++++++++++++++++++++++++++++++
 public/style/style.css     |  8 ++++++++
 public/style/style.less    | 10 +++++++++
 6 files changed, 93 insertions(+), 38 deletions(-)
 create mode 100644 public/routes/navRoutes.js

diff --git a/public/index.html b/public/index.html
index 3dc8dd6..50a68ea 100644
--- a/public/index.html
+++ b/public/index.html
@@ -87,6 +87,7 @@
 	<script src="routes/profilCard.js"></script>
 	<script src="routes/profilData.js"></script>
 	<script src="routes/login.js"></script>
+    <script src="routes/navRoutes.js"></script>
 
 	<title>OHM News</title>
 </head>
@@ -109,8 +110,10 @@
 
         <div class="om-content">
 			<div id=xxx></div>
+            <nav-router></nav-router>
             <router-view></router-view>
         </div>
+    </div>
 
 		<!--<b-tabs type="is-toggle" expanded>
             <b-tab-item><router-link to="/home" >
@@ -127,7 +130,7 @@
 
         </b-tabs>-->
 
-
+        <!--
 		<nav class="navbar is-fixed-bottom is-expanded is-light is-hoverable" role="navigation" aria-label="main navigation">
   			<div class="navbar-brand is-expanded">
 				<router-link to="/home" class="navbar-item is-expanded has-text-centered is-active">
@@ -148,13 +151,13 @@
 			</div>
 		</nav>
 
-        <!--<nav class="nav nav-tabs nav-justified om-nav" v-if="$route.path !=='/createMessage' ">
+        <nav class="nav nav-tabs nav-justified om-nav" v-if="$route.path !=='/createMessage' ">
             <router-link to="/home" class="navbar-item has-text-centered"><i class="material-icons">home</i></router-link>
             <router-link to="/files" class="navbar-item has-text-centered"><i class="material-icons">language</i></router-link>
             <router-link to="/createMessage" class="navbar-item has-text-centered outlined"><i class="material-icons">add_circle</i></router-link>
             <router-link to="/bookmark" class="navbar-item has-text-centered"><i class="material-icons">bookmark</i></router-link>
             <router-link to="/profil" class="navbar-item has-text-centered"><i class="material-icons">person</i></router-link>
-        </nav>-->
+        </nav>
     </div>
 
     <script>
@@ -170,6 +173,9 @@
         const router = new VueRouter({
 			routes
 		});
+
+        -->
+    <script>
         var app = new Vue({
             router,
             el: '#api',
diff --git a/public/routes/bookmark.js b/public/routes/bookmark.js
index be4d169..ec8e3c8 100644
--- a/public/routes/bookmark.js
+++ b/public/routes/bookmark.js
@@ -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;
+        }
     },
 };
diff --git a/public/routes/msgCard.js b/public/routes/msgCard.js
index e86ecb5..f3e398f 100644
--- a/public/routes/msgCard.js
+++ b/public/routes/msgCard.js
@@ -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;
         },
+    }
 });
diff --git a/public/routes/navRoutes.js b/public/routes/navRoutes.js
new file mode 100644
index 0000000..b6a5958
--- /dev/null
+++ b/public/routes/navRoutes.js
@@ -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,
+});
diff --git a/public/style/style.css b/public/style/style.css
index 19aa627..3282eb7 100644
--- a/public/style/style.css
+++ b/public/style/style.css
@@ -45,6 +45,14 @@
 .om-nav i {
   color: white;
 }
+.navbar-item {
+  display: inline-block;
+  text-align: center;
+}
+.navbar-item i {
+  margin: auto;
+  text-align: center;
+}
 .om-card {
   margin: 10px;
   margin-bottom: 20px;
diff --git a/public/style/style.less b/public/style/style.less
index aeb7cc9..4089208 100644
--- a/public/style/style.less
+++ b/public/style/style.less
@@ -57,6 +57,16 @@ a.nav-item.nav-link{
 
 }
 
+.navbar-item {
+    display: inline-block;
+    text-align: center;
+    i {
+        margin: auto;
+        text-align: center;
+    }
+}
+
+
 //msg-Card
 .om-card{
     margin: 10px;