From c85b64b8b9e80e5b2556e005853700f118caff20 Mon Sep 17 00:00:00 2001
From: Titus Kristiansen <titusk@stud.ntnu.no>
Date: Tue, 26 Apr 2022 15:47:12 +0200
Subject: [PATCH] Navbar added and navigation upgraded
---
src/App.vue | 19 ++++++++
src/components/HelloWorld.vue | 9 ++++
src/components/LoginForm.vue | 2 +-
src/components/MessagesForm.vue | 13 ++++++
src/components/NavBar.vue | 65 ++++++++++++++++++++++++++++
src/components/NotificationsForm.vue | 13 ++++++
src/router/index.js | 12 +++++
src/views/AboutView.vue | 17 ++++++--
src/views/MessagesView.vue | 20 +++++++++
src/views/NotificationView.vue | 20 +++++++++
10 files changed, 186 insertions(+), 4 deletions(-)
create mode 100644 src/components/MessagesForm.vue
create mode 100644 src/components/NavBar.vue
create mode 100644 src/components/NotificationsForm.vue
create mode 100644 src/views/MessagesView.vue
create mode 100644 src/views/NotificationView.vue
diff --git a/src/App.vue b/src/App.vue
index 98240ae..92ede03 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,3 +1,22 @@
<template>
+ <div>
+ <NavBar />
<router-view />
+ </div>
</template>
+
+<script>
+import { defineComponent } from "vue";
+
+// Components
+
+import NavBar from "./components/NavBar.vue";
+
+export default defineComponent({
+ name: "App",
+
+ components: {
+ NavBar,
+ },
+});
+</script>
\ No newline at end of file
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 29b7bfe..4ca942e 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -5,6 +5,9 @@
<router-link to="/register" class="m-6">Registrer deg</router-link>
<router-link to="/about" class="m-6">Om BoCo</router-link>
+
+<div @click="logout" class="m-6 cursor-pointer"><p>Logout</p></div>
+
</div>
</template>
@@ -13,5 +16,11 @@ export default {
name: "HelloWorld",
data: () => ({}),
+
+ methods: {
+ logout (){
+ this.$store.commit("logout");
+ },
+ }
};
</script>
diff --git a/src/components/LoginForm.vue b/src/components/LoginForm.vue
index 9d8afb4..e4b0c39 100644
--- a/src/components/LoginForm.vue
+++ b/src/components/LoginForm.vue
@@ -165,7 +165,7 @@ export default {
console.log(user);
let id = user.accountId;
console.log(id);
- this.$router.push("/profile/" + id);
+ await this.$router.push("/profile/" + id);
} else {
console.log("Something went wrong");
}
diff --git a/src/components/MessagesForm.vue b/src/components/MessagesForm.vue
new file mode 100644
index 0000000..9c68c2f
--- /dev/null
+++ b/src/components/MessagesForm.vue
@@ -0,0 +1,13 @@
+<template>
+ <div> This is a message page</div>
+</template>
+
+<script>
+export default {
+ name: "MessagesForm"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
new file mode 100644
index 0000000..978e645
--- /dev/null
+++ b/src/components/NavBar.vue
@@ -0,0 +1,65 @@
+<template>
+ <nav class="flex items-center justify-between bg-white h-20 shadow-2xl">
+ <div class="logo">
+ <img class="ml-4 cursor-pointer h-16 " src="../assets/logo3.svg" alt="BoCo logo" @click="$router.push('/')"/>
+ </div>
+ <ul class="flex">
+ <li>
+ <div class="text-black mr-4 bg-gray-100 p-1 hover:bg-gray-600 transition-all rounded" @click="loadMessages">Meldinger</div>
+ </li>
+ <li>
+ <div class="text-black mr-4 bg-gray-100 p-1 hover:bg-gray-600 transition-all rounded" @click="loadNotifications">Varsler</div>
+ </li>
+ <li>
+ <div class="text-black mr-4 bg-gray-100 p-1 hover:bg-gray-600 transition-all rounded" @click="loadProfile">Profil</div>
+ </li>
+ </ul>
+ </nav>
+</template>
+
+<script>
+import {parseUserFromToken} from "@/utils/token-utils";
+
+export default {
+ name: "NavBar.vue",
+
+ methods: {
+ async loadMessages(){
+ if(this.$store.state.user.token !== null){
+ await this.$router.push("/messages")
+ }
+ else {
+ await this.$router.push("/login");
+ }
+
+ },
+ async loadNotifications(){
+ if(this.$store.state.user.token !== null){
+ await this.$router.push("/notifications")
+ }
+ else {
+ await this.$router.push("/login");
+ }
+
+ },
+ async loadProfile() {
+ if(this.$store.state.user.token !== null){
+ let user = parseUserFromToken(this.$store.state.user.token);
+ console.log(user);
+ let id = user.accountId;
+ console.log(id);
+ await this.$router.push("/profile/" + id);
+ }
+ else {
+ await this.$router.push("/login");
+ }
+ }
+ }
+}
+
+
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/NotificationsForm.vue b/src/components/NotificationsForm.vue
new file mode 100644
index 0000000..27879f0
--- /dev/null
+++ b/src/components/NotificationsForm.vue
@@ -0,0 +1,13 @@
+<template>
+<div> This is a notification page</div>
+</template>
+
+<script>
+export default {
+ name: "NotificationsForm"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 44952f1..d052c3a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,6 +4,7 @@ import HomeView from "../views/HomeView.vue";
import LoginView from "../views/LoginView.vue";
import NewPasswordView from "../views/NewPasswordView";
+
const routes = [
{
path: "/", //Endre før push
@@ -57,6 +58,17 @@ const routes = [
name: "addNewItem",
component: () => import("../views/AddNewItemView.vue"),
},
+ {
+ path: "/notifications",
+ name: "notifications",
+ component: () => import("../views/NotificationView.vue"),
+ },
+ {
+ path: "/messages",
+ name: "messages",
+ component: () => import("../views/MessagesView.vue"),
+ },
+
];
const router = createRouter({
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
index 3fa2807..4a2673c 100644
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -1,5 +1,16 @@
<template>
- <div class="about">
- <h1>This is an about page</h1>
- </div>
+ <div>This is an about page</div>
</template>
+
+<script>
+import { defineComponent } from "vue";
+
+// Components
+
+export default defineComponent({
+ name: "HomeView",
+
+ components: {
+ },
+});
+</script>
diff --git a/src/views/MessagesView.vue b/src/views/MessagesView.vue
new file mode 100644
index 0000000..fa142ea
--- /dev/null
+++ b/src/views/MessagesView.vue
@@ -0,0 +1,20 @@
+<template>
+ <div>
+ <MessagesForm/>
+ </div>
+</template>
+
+<script>
+import MessagesForm from "@/components/MessagesForm";
+
+export default {
+ name: "MessagesView.vue",
+ components: {
+ MessagesForm
+ },
+};
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/NotificationView.vue b/src/views/NotificationView.vue
new file mode 100644
index 0000000..1104132
--- /dev/null
+++ b/src/views/NotificationView.vue
@@ -0,0 +1,20 @@
+<template>
+ <div>
+ <NotificationsForm/>
+ </div>
+</template>
+
+<script>
+import NotificationsForm from "@/components/NotificationsForm";
+
+export default {
+ name: "NotificationView.vue",
+ components: {
+ NotificationsForm
+ },
+};
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
--
GitLab