From 092836359b6f81939ca35440be43244ff136a879 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Mon, 4 Dec 2017 23:29:02 +0100 Subject: [PATCH] maxmod + router-like system with URL --- public_html/image/menu/bell.svg | 48 ++++++++++++++++++++++++++++ public_html/image/menu/messages.svg | 41 +++++++++++++----------- view/main.js | 4 ++- view/vue-config.js | 26 +++++++++++---- view/vue/container/dashboard.vue | 17 ++++++++++ view/vue/container/notifications.vue | 17 ++++++++++ view/vue/container/profile.vue | 17 ++++++++++ view/vue/header.vue | 11 +++++-- view/vue/wrapper.vue | 20 +++++++++--- 9 files changed, 169 insertions(+), 32 deletions(-) create mode 100644 public_html/image/menu/bell.svg create mode 100644 view/vue/container/dashboard.vue create mode 100644 view/vue/container/notifications.vue create mode 100644 view/vue/container/profile.vue diff --git a/public_html/image/menu/bell.svg b/public_html/image/menu/bell.svg new file mode 100644 index 0000000..5687c66 --- /dev/null +++ b/public_html/image/menu/bell.svg @@ -0,0 +1,48 @@ + +image/svg+xml \ No newline at end of file diff --git a/public_html/image/menu/messages.svg b/public_html/image/menu/messages.svg index 6f7dcfc..a476f9d 100644 --- a/public_html/image/menu/messages.svg +++ b/public_html/image/menu/messages.svg @@ -7,17 +7,18 @@ xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - style="enable-background:new 0 0 24 24;" version="1.1" - viewBox="0 0 24 24" + viewBox="0 0 26.324236 19.183594" xml:space="preserve" - id="svg4274" + id="svg4176" inkscape:version="0.91 r13725" - sodipodi:docname="messages.svg">image/svg+xml \ No newline at end of file + inkscape:connector-curvature="0" /> \ No newline at end of file diff --git a/view/main.js b/view/main.js index a583407..7c0d973 100755 --- a/view/main.js +++ b/view/main.js @@ -52,6 +52,7 @@ window.wsc_connect = window.wsc.channel('connect').listen(function(msg, err){ if( msg.connected != null ){ console.log('Detected '+msg.connected.length+' new user(s)'); window.gstore.data.notif[0].data = window.gstore.data.notif[0].data.concat( msg.connected ); + window.gstore.data.notif[0].count += msg.connected.length; } }).send({name: window._SERVER.session.name}); @@ -71,7 +72,8 @@ window.wsc_chat = window.wsc.channel('chat').listen(function(msg, err){ // {3} Manage notification // if( msg.msg != null ){ console.log('Received '+msg.msg.length+' new message(s)'); - window.gstore.data.notif[1].data = window.gstore.data.notif[1].data.concat( msg.msg ); + window.gstore.data.notif[1].data = window.gstore.data.notif[1].data.concat( msg.msg ); + window.gstore.data.notif[1].count += msg.msg.length } }).send({name: window._SERVER.session.name}); diff --git a/view/vue-config.js b/view/vue-config.js index 09f86e1..0117b5f 100644 --- a/view/vue-config.js +++ b/view/vue-config.js @@ -10,10 +10,10 @@ window.gstore.add('info', { message: 'Warning! blabla' }); window.gstore.add('notif', [ - { class: 'bell', link: 'notifications', data: [] }, - { class: 'message', link: 'inbox', data: [] }, - { class: 'search', link: 'search', data: [] }, - { class: 'menu', link: 'menu', data: [] } + { class: 'bell', link: 'notifications', data: [], count: 0 }, + { class: 'message', link: 'inbox', data: [], count: 0 }, + { class: 'search', link: 'search', data: [], count: 0 }, + { class: 'menu', link: 'dashboard', data: [], count: 0 } ]) // Menu @@ -27,11 +27,25 @@ window.gstore.add('menu_item', { }, inbox: { label: 'Messagerie instantannée', icon: 'messages' + }, notifications: { + label: 'Notifications', + icon: 'bell' } }); -window.gstore.add('menu_item_active', 'dashboard'); -window.gstore.add('min_menu', true); +window.gstore.add('URI', document.URL.replace(/^(?:\/\/|[^\/]+)*/, '')); +window.gstore.add('min_menu', false); + +// Proccess current page from url +if( /^\/(\w+)(?:\/?.*)$/.test(window.gstore.data.URI) ){ + var mi_keys = Object.keys( window.gstore.data.menu_item ); + + // if current page exists + if( !!~mi_keys.indexOf(RegExp.$1) ) window.gstore.add('menu_item_active', RegExp.$1); + else window.gstore.add('menu_item_active', 'dashboard'); + +}else + window.gstore.add('menu_item_active', 'dashboard'); // Functions window.gstore.add('func', { diff --git a/view/vue/container/dashboard.vue b/view/vue/container/dashboard.vue new file mode 100644 index 0000000..6fc5afe --- /dev/null +++ b/view/vue/container/dashboard.vue @@ -0,0 +1,17 @@ + + + + \ No newline at end of file diff --git a/view/vue/container/notifications.vue b/view/vue/container/notifications.vue new file mode 100644 index 0000000..a032520 --- /dev/null +++ b/view/vue/container/notifications.vue @@ -0,0 +1,17 @@ + + + + \ No newline at end of file diff --git a/view/vue/container/profile.vue b/view/vue/container/profile.vue new file mode 100644 index 0000000..a61c94a --- /dev/null +++ b/view/vue/container/profile.vue @@ -0,0 +1,17 @@ + + + + \ No newline at end of file diff --git a/view/vue/header.vue b/view/vue/header.vue index b47b435..745135d 100644 --- a/view/vue/header.vue +++ b/view/vue/header.vue @@ -12,7 +12,7 @@
-
+
@@ -25,7 +25,14 @@ export default { name: 'HEADER', data(){ return { gstore: window.gstore.data }; }, methods: { - show_notif(){ + show_notif(index, link){ + + // {1} Load link // + window.gstore.data.menu_item_active = link; + + // {2} Reset notification count to 0 // + window.gstore.data.notif[index].count = 0; + } } diff --git a/view/vue/wrapper.vue b/view/vue/wrapper.vue index fc79c59..7dbfd4b 100755 --- a/view/vue/wrapper.vue +++ b/view/vue/wrapper.vue @@ -8,7 +8,10 @@ - + + + + @@ -21,7 +24,11 @@ import header_vue from './header.vue'; import menu_vue from './menu.vue'; -import messageContainer_vue from './container/message.vue'; + +import dashboardContainer_vue from './container/dashboard.vue'; +import profileContainer_vue from './container/profile.vue'; +import messageContainer_vue from './container/message.vue'; +import notificationsContainer_vue from './container/notifications.vue'; export default { @@ -30,9 +37,12 @@ export default { gstore: window.gstore.data }; }, components: { - 'HeaderComp': header_vue, - 'MenuComp': menu_vue, - 'MessageContainer': messageContainer_vue + 'HeaderComp': header_vue, + 'MenuComp': menu_vue, + 'DashboardContainer': dashboardContainer_vue, + 'ProfileContainer': profileContainer_vue, + 'MessageContainer': messageContainer_vue, + 'NotificationsContainer': notificationsContainer_vue } } \ No newline at end of file