diff --git a/frontend/src/components/BaseLayout.vue b/frontend/src/components/BaseLayout.vue
index bbb9854..2231b2e 100644
--- a/frontend/src/components/BaseLayout.vue
+++ b/frontend/src/components/BaseLayout.vue
@@ -17,88 +17,7 @@
<div class="navbar-collapse collapse">
<ul class="navbar-nav navbar-align">
<Notifications :notifications="notifications"/>
- <li class="nav-item dropdown">
- <a class="nav-icon dropdown-toggle" href="#" id="messagesDropdown" data-toggle="dropdown">
- <div class="position-relative">
- <b-icon-chat-left class="bi-valign-middle"></b-icon-chat-left>
- </div>
- </a>
- <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right py-0"
- aria-labelledby="messagesDropdown">
- <div class="dropdown-menu-header">
- <div class="position-relative">
- 4 New Messages
- </div>
- </div>
- <div class="list-group">
- <a href="#" class="list-group-item">
- <div class="row g-0 align-items-center">
- <div class="col-2">
- <!--<img src="/static/assets/img/avatars/avatar-5.png"
- class="avatar img-fluid rounded-circle" alt="Vanessa Tucker">-->
- </div>
- <div class="col-10 pl-2">
- <div class="text-dark">Vanessa Tucker</div>
- <div class="text-muted small mt-1">Nam pretium turpis et arcu. Duis arcu
- tortor.
- </div>
- <div class="text-muted small mt-1">15m ago</div>
- </div>
- </div>
- </a>
- <a href="#" class="list-group-item">
- <div class="row g-0 align-items-center">
- <div class="col-2">
- <!--<img src="/static/assets/img/avatars/avatar-2.png"
- class="avatar img-fluid rounded-circle" alt="William Harris">-->
- </div>
- <div class="col-10 pl-2">
- <div class="text-dark">William Harris</div>
- <div class="text-muted small mt-1">Curabitur ligula sapien euismod
- vitae.
- </div>
- <div class="text-muted small mt-1">2h ago</div>
- </div>
- </div>
- </a>
- <a href="#" class="list-group-item">
- <div class="row g-0 align-items-center">
- <div class="col-2">
- <!--<img src="/static/assets/img/avatars/avatar-4.png"
- class="avatar img-fluid rounded-circle" alt="Christina Mason">-->
- </div>
- <div class="col-10 pl-2">
- <div class="text-dark">Christina Mason</div>
- <div class="text-muted small mt-1">Pellentesque auctor neque nec urna.
- </div>
- <div class="text-muted small mt-1">4h ago</div>
- </div>
- </div>
- </a>
- <!-- {% for messege in top_messages %}-->
- <a href="#" class="list-group-item">
- <div class="row g-0 align-items-center">
- <div class="col-2">
- <!--<img src="/static/assets/img/avatars/avatar-3.png"
- class="avatar img-fluid rounded-circle" alt="Sharon Lessman">-->
- </div>
- <div class="col-10 pl-2">
- <div class="text-dark">Sharon Lessman</div>
- <div class="text-muted small mt-1">Aenean tellus metus, bibendum sed,
- posuere ac,
- mattis non.
- </div>
- <div class="text-muted small mt-1">5h ago</div>
- </div>
- </div>
- </a>
- <!--{% endfor %}-->
- </div>
- <div class="dropdown-menu-footer">
- <a href="#" class="text-muted">Show all messages</a>
- </div>
- </div>
- </li>
+ <Messages :messages="messages"/>
<li class="nav-item dropdown">
<a class="nav-icon dropdown-toggle d-inline-block d-sm-none" href="#"
data-toggle="dropdown">
@@ -144,12 +63,14 @@ import * as BIcons from "bootstrap-icons-vue";
import Footer from "@/components/Footer.vue";
import Sidebar from "@/components/Sidebar.vue";
import Notifications from "@/components/Notifications.vue";
+import Messages from "@/components/Messages.vue";
export default {
name: 'BaseLayout',
components: {
Footer,
Sidebar,
+ Messages,
Notifications,
...BIcons
},
@@ -161,12 +82,11 @@ export default {
},
},
computed: {
- //...mapState(['notifications']),
+ ...mapState(['messages']),
...mapGetters(['notifications']),
username() {
return this.$route.params.username
},
- },
top_notifications() {
return this.notifications.slice(0, 5)
},
diff --git a/frontend/src/components/Messages.vue b/frontend/src/components/Messages.vue
new file mode 100644
index 0000000..99e880b
--- /dev/null
+++ b/frontend/src/components/Messages.vue
@@ -0,0 +1,111 @@
+<template>
+ <li class="nav-item dropdown">
+ <a class="nav-icon dropdown-toggle" href="#" id="messagesDropdown" data-toggle="dropdown">
+ <div class="position-relative">
+ <b-icon-chat-left class="bi-valign-middle"></b-icon-chat-left>
+ </div>
+ </a>
+ <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right py-0"
+ aria-labelledby="messagesDropdown">
+ <div class="dropdown-menu-header">
+ <div class="position-relative">
+ 4 New Messages
+ </div>
+ </div>
+ <div class="list-group">
+ <a href="#" class="list-group-item">
+ <div class="row g-0 align-items-center">
+ <div class="col-2">
+ <!--<img src="/static/assets/img/avatars/avatar-5.png"
+ class="avatar img-fluid rounded-circle" alt="Vanessa Tucker">-->
+ </div>
+ <div class="col-10 pl-2">
+ <div class="text-dark">Vanessa Tucker</div>
+ <div class="text-muted small mt-1">Nam pretium turpis et arcu. Duis arcu
+ tortor.
+ </div>
+ <div class="text-muted small mt-1">15m ago</div>
+ </div>
+ </div>
+ </a>
+ <a href="#" class="list-group-item">
+ <div class="row g-0 align-items-center">
+ <div class="col-2">
+ <!--<img src="/static/assets/img/avatars/avatar-2.png"
+ class="avatar img-fluid rounded-circle" alt="William Harris">-->
+ </div>
+ <div class="col-10 pl-2">
+ <div class="text-dark">William Harris</div>
+ <div class="text-muted small mt-1">Curabitur ligula sapien euismod
+ vitae.
+ </div>
+ <div class="text-muted small mt-1">2h ago</div>
+ </div>
+ </div>
+ </a>
+ <a href="#" class="list-group-item">
+ <div class="row g-0 align-items-center">
+ <div class="col-2">
+ <!--<img src="/static/assets/img/avatars/avatar-4.png"
+ class="avatar img-fluid rounded-circle" alt="Christina Mason">-->
+ </div>
+ <div class="col-10 pl-2">
+ <div class="text-dark">Christina Mason</div>
+ <div class="text-muted small mt-1">Pellentesque auctor neque nec urna.
+ </div>
+ <div class="text-muted small mt-1">4h ago</div>
+ </div>
+ </div>
+ </a>
+ <!-- {% for messege in top_messages %}-->
+ <a href="#" class="list-group-item">
+ <div class="row g-0 align-items-center">
+ <div class="col-2">
+ <!--<img src="/static/assets/img/avatars/avatar-3.png"
+ class="avatar img-fluid rounded-circle" alt="Sharon Lessman">-->
+ </div>
+ <div class="col-10 pl-2">
+ <div class="text-dark">Sharon Lessman</div>
+ <div class="text-muted small mt-1">Aenean tellus metus, bibendum sed,
+ posuere ac,
+ mattis non.
+ </div>
+ <div class="text-muted small mt-1">5h ago</div>
+ </div>
+ </div>
+ </a>
+ <!--{% endfor %}-->
+ </div>
+ <div class="dropdown-menu-footer">
+ <a href="#" class="text-muted">Show all messages</a>
+ </div>
+ </div>
+ </li>
+</template>
+
+<script>
+import {mapGetters, mapMutations} from 'vuex';
+import * as BIcons from "bootstrap-icons-vue";
+
+export default {
+ name: "Messages",
+ components: {
+ ...BIcons
+ },
+ props: {
+ messages: {
+ type: Array,
+ default: () => []
+ }
+ },
+ computed: {
+ top_messages() {
+ return this.messages.slice(0, 4);
+ }
+ }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/Notifications.vue b/frontend/src/components/Notifications.vue
index 1c8daab..329f2c5 100644
--- a/frontend/src/components/Notifications.vue
+++ b/frontend/src/components/Notifications.vue
@@ -54,7 +54,12 @@ export default {
components: {
...BIcons
},
- props: ['notifications'],
+ props: {
+ notifications: {
+ type: Array,
+ default: () => []
+ }
+ },
computed: {
top_notifications() {
return this.notifications.sort((a, b) => {
diff --git a/frontend/src/store.js b/frontend/src/store.js
index d253edd..b18ebff 100644
--- a/frontend/src/store.js
+++ b/frontend/src/store.js
@@ -17,6 +17,7 @@ export default createStore({
item_map: {},
home_servers: null,
all_friends_servers: null,
+ messages: [],
resolver: new FallBackResolver(),
unreachable_neighbors: new NeighborsCache(),
tags: [],