From 40598a5418d964601f9954c35693446ff2dddab1 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Thu, 7 Dec 2017 18:17:32 +0100 Subject: [PATCH] UPD: reset page list (menu.items + header.notifs) + UPD: notif now isn't array but object which key is the link + added proper CSS instead of VueJS inline style='...' --- public_html/css/header.css | 16 +++-- public_html/css/menu.css | 12 ++++ public_html/image/header/notif/emergency.svg | 58 +++++++++++++++++ public_html/image/header/notif/event.svg | 47 ++++++++++++++ public_html/image/menu/emergency.svg | 52 +++++++++++++++ public_html/image/menu/event.svg | 63 +++++++++++++++++++ public_html/image/menu/messages.svg | 11 ++-- view/main.js | 55 +--------------- view/routes.js | 8 +-- view/vue-config.js | 40 ++++++------ .../{notifications.vue => emergency.vue} | 4 +- view/vue/container/{profile.vue => event.vue} | 4 +- view/vue/container/inbox.vue | 4 +- view/vue/header.vue | 2 +- view/vue/menu.vue | 2 +- view/vue/notification-stack.vue | 2 +- 16 files changed, 285 insertions(+), 95 deletions(-) create mode 100644 public_html/image/header/notif/emergency.svg create mode 100644 public_html/image/header/notif/event.svg create mode 100644 public_html/image/menu/emergency.svg create mode 100644 public_html/image/menu/event.svg rename view/vue/container/{notifications.vue => emergency.vue} (68%) rename view/vue/container/{profile.vue => event.vue} (73%) diff --git a/public_html/css/header.css b/public_html/css/header.css index ab0ef18..190b772 100644 --- a/public_html/css/header.css +++ b/public_html/css/header.css @@ -110,9 +110,11 @@ transition: background .2s ease-in-out; } -#header-notif .hnotif.message{ background-image: url('/image/header/notif/message.svg@aaaaaa'); } -#header-notif .hnotif.search{ background-image: url('/image/header/notif/search.svg@aaaaaa'); } -#header-notif .hnotif.menu{ background-image: url('/image/header/notif/menu.svg@aaaaaa'); } +#header-notif .hnotif.emergency{ background-image: url('/image/header/notif/emergency.svg@aaaaaa'); } +#header-notif .hnotif.event{ background-image: url('/image/header/notif/event.svg@aaaaaa'); } +#header-notif .hnotif.message{ background-image: url('/image/header/notif/message.svg@aaaaaa'); } +#header-notif .hnotif.search{ background-image: url('/image/header/notif/search.svg@aaaaaa'); } +#header-notif .hnotif.menu{ background-image: url('/image/header/notif/menu.svg@aaaaaa'); } /* HOVER */ #header-notif .hnotif:hover{ @@ -120,9 +122,11 @@ background-image: url('/image/header/notif/bell.svg@ee9a31'); } -#header-notif .hnotif.message:hover{ background-image: url('/image/header/notif/message.svg@23c795'); } -#header-notif .hnotif.search:hover{ background-image: url('/image/header/notif/search.svg@ae51da'); } -#header-notif .hnotif.menu:hover{ background-image: url('/image/header/notif/menu.svg@4a8ad8'); } +#header-notif .hnotif.emergency:hover{ background-image: url('/image/header/notif/emergency.svg@f93e2b'); } +#header-notif .hnotif.event:hover{ background-image: url('/image/header/notif/event.svg@2986d4'); } +#header-notif .hnotif.message:hover{ background-image: url('/image/header/notif/message.svg@23c795'); } +#header-notif .hnotif.search:hover{ background-image: url('/image/header/notif/search.svg@ae51da'); } +#header-notif .hnotif.menu:hover{ background-image: url('/image/header/notif/menu.svg@4a8ad8'); } diff --git a/public_html/css/menu.css b/public_html/css/menu.css index b91dd4d..06b2c06 100644 --- a/public_html/css/menu.css +++ b/public_html/css/menu.css @@ -39,6 +39,11 @@ color .2s ease-in-out; } +#MENU .menu-item[data-theme='emergency']{ background-image: url('/image/menu/emergency.svg@aaaaaa'); } +#MENU .menu-item[data-theme='event']{ background-image: url('/image/menu/event.svg@aaaaaa'); } +#MENU .menu-item[data-theme='inbox']{ background-image: url('/image/menu/messages.svg@aaaaaa'); } + +/* HOVER */ #MENU .menu-item:hover, #MENU .menu-item.active{ color: #444; @@ -46,6 +51,13 @@ background-color: #eef2f5; } +#MENU .menu-item[data-theme='emergency']:hover{ background-image: url('/image/menu/emergency.svg@f93e2b'); } +#MENU .menu-item[data-theme='event']:hover{ background-image: url('/image/menu/event.svg@2986d4'); } +#MENU .menu-item[data-theme='inbox']:hover{ background-image: url('/image/menu/messages.svg@23c795'); } + + + + /****************************/ diff --git a/public_html/image/header/notif/emergency.svg b/public_html/image/header/notif/emergency.svg new file mode 100644 index 0000000..11b0a0c --- /dev/null +++ b/public_html/image/header/notif/emergency.svg @@ -0,0 +1,58 @@ + + + + + + image/svg+xml + + + + + + + + + diff --git a/public_html/image/header/notif/event.svg b/public_html/image/header/notif/event.svg new file mode 100644 index 0000000..b0b192f --- /dev/null +++ b/public_html/image/header/notif/event.svg @@ -0,0 +1,47 @@ + +image/svg+xml \ No newline at end of file diff --git a/public_html/image/menu/emergency.svg b/public_html/image/menu/emergency.svg new file mode 100644 index 0000000..f627fb8 --- /dev/null +++ b/public_html/image/menu/emergency.svg @@ -0,0 +1,52 @@ + +image/svg+xml \ No newline at end of file diff --git a/public_html/image/menu/event.svg b/public_html/image/menu/event.svg new file mode 100644 index 0000000..d37744a --- /dev/null +++ b/public_html/image/menu/event.svg @@ -0,0 +1,63 @@ + + + + + + image/svg+xml + + + + + + + + + + diff --git a/public_html/image/menu/messages.svg b/public_html/image/menu/messages.svg index a476f9d..b92af1a 100644 --- a/public_html/image/menu/messages.svg +++ b/public_html/image/menu/messages.svg @@ -17,7 +17,7 @@ height="19.183594">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 00bd819..bba4694 100755 --- a/view/main.js +++ b/view/main.js @@ -48,56 +48,7 @@ gstore.data.func.nav(router, null); /* (3) Set WebSocket channels ---------------------------------------------------------*/ -/* (1) Connection channel */ -window.wsc_connect = wsc.channel('connect').listen(function(msg, err){ - - // {1} Manage error // - if( msg == null && err != null ) - return infobox.show('Erreur de connexion WebSocket@connect ('+err+')', 'error', 3000); - - // {2} Manage wsclient error // - if( typeof msg.error != 'boolean' || msg.error !== false ) - return infobox.show('Erreur de connexion WebSocket@connect', 'warning', 3000); - - // {3} If no data -> exit // - if( msg.connected == null && msg.disconnected == null ) - return; - - // {4} Add connected users to stack // - if( msg.connected instanceof Array ){ - - // -1- add connected users - console.log('Detected '+msg.connected.length+' connected user(s)'); - var lastLen = gstore.data.notif[0].data.length; - gstore.data.notif[0].data = gstore.data.notif[0].data.concat( msg.connected ); - - // -2- make each user unique - gstore.data.notif[0].data = gstore.data.notif[0].data.filter(function(item, i, arr){ return arr.indexOf(item) === i; }); - - // -3- Update count if not already on page - if( router.app.$route.path != '/notifications' ) - gstore.data.notif[0].count += gstore.data.notif[0].data.length - lastLen; - - } - - // {5} Add disconnected users to stack // - if( msg.disconnected instanceof Array ){ - - // -1- Remove each disconnected user - console.log('Detected '+msg.disconnected.length+' disconnected user(s)'); - var lastLen = gstore.data.notif[0].data.length; - gstore.data.notif[0].data = gstore.data.notif[0].data.filter(function(item){ return msg.disconnected.indexOf(item) === -1; }); - - // -2- Update count if not already on page - if( router.app.$route.path != '/notifications' ) - gstore.data.notif[0].count += lastLen - gstore.data.notif[0].data.length; - - } - -}).send({name: _SERVER.session.name}); - - -/* (2) Message channel */ +/* (1) Message channel */ window.wsc_chat = wsc.channel('chat').listen(function(msg, err){ // {1} Manage error // @@ -118,10 +69,10 @@ window.wsc_chat = wsc.channel('chat').listen(function(msg, err){ ( new Audio('https://notificationsounds.com/message-tones/communication-channel-519/download/mp3') ).play(); // {5} Add messages to stack // - gstore.data.notif[1].data = gstore.data.notif[1].data.concat( msg.msg ); + gstore.data.notif.inbox.data = gstore.data.notif.inbox.data.concat( msg.msg ); // {6} Add notification count if not already on page // if( router.app.$route.path != '/inbox' ) - gstore.data.notif[1].count += msg.msg.length; + gstore.data.notif.inbox.count += msg.msg.length; }).send({name: _SERVER.session.name}); \ No newline at end of file diff --git a/view/routes.js b/view/routes.js index 2b77d41..d382659 100644 --- a/view/routes.js +++ b/view/routes.js @@ -4,14 +4,14 @@ export default { 0: [ path: '/dashboard/', component: require('./vue/container/dashboard.vue').default }, { - path: '/profile/', - component: require('./vue/container/profile.vue').default + path: '/emergency/', + component: require('./vue/container/emergency.vue').default }, { path: '/inbox/', component: require('./vue/container/inbox.vue').default }, { - path: '/notifications/', - component: require('./vue/container/notifications.vue').default + path: '/event/', + component: require('./vue/container/event.vue').default }, { path: '*', redirect: '/dashboard/' diff --git a/view/vue-config.js b/view/vue-config.js index 9e1eecf..a70b1ed 100644 --- a/view/vue-config.js +++ b/view/vue-config.js @@ -9,27 +9,27 @@ gstore.add('info', { type: 'warning', message: 'Warning! blabla' }); -gstore.add('notif', [ - { 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 } -]) +gstore.add('notif', { + emergency: { class: 'emergency', data: [], count: 0 }, + event: { class: 'event', data: [], count: 0 }, + inbox: { class: 'message', data: [], count: 0 }, + dashboard: { class: 'menu', data: [], count: 0 } +}) // Menu gstore.add('menu_item', { dashboard: { - label: 'Dashboard', - icon: 'dashboard' - }, profile: { - label: 'Profil', - icon: 'profile' + label: 'Accueil', + theme: 'dashboard' + }, emergency: { + label: 'Urgences', + theme: 'emergency' + }, event: { + label: 'Signalements', + theme: 'event' }, inbox: { - label: 'Messagerie instantannée', - icon: 'messages' - }, notifications: { - label: 'Notifications', - icon: 'bell' + label: 'Messagerie', + theme: 'inbox' } }); @@ -68,9 +68,9 @@ gstore.add('func', { gstore.data.menu_item_active = uri; // {5} Manage notifications // - for( var notif of gstore.data.notif ) - if( notif.link == uri ) // if notif links to current page - notif.count = 0; + for( var id in gstore.data.notif ) + if( id == uri ) // if notif links to current page + gstore.data.notif[id].count = 0; }, toggleMenuSize: function(){ gstore.data.min_menu=!gstore.data.min_menu; }, @@ -84,7 +84,7 @@ gstore.add('func', { wsc_chat.send(JSON.stringify({message: msg})); /* (3) Add locally */ - gstore.data.notif[1].data.push([ gstore.data.server.session.name, msg ]); + gstore.data.notif.inbox.data.push([ gstore.data.server.session.name, msg ]); } }); diff --git a/view/vue/container/notifications.vue b/view/vue/container/emergency.vue similarity index 68% rename from view/vue/container/notifications.vue rename to view/vue/container/emergency.vue index 05534b6..a2f525f 100644 --- a/view/vue/container/notifications.vue +++ b/view/vue/container/emergency.vue @@ -2,7 +2,7 @@
- NOTIFICATIONS + EMERGENCY
@@ -11,7 +11,7 @@ \ No newline at end of file diff --git a/view/vue/container/profile.vue b/view/vue/container/event.vue similarity index 73% rename from view/vue/container/profile.vue rename to view/vue/container/event.vue index 460dba0..faf453c 100644 --- a/view/vue/container/profile.vue +++ b/view/vue/container/event.vue @@ -2,7 +2,7 @@
- PROFILE + EVENT
@@ -11,7 +11,7 @@ \ No newline at end of file diff --git a/view/vue/container/inbox.vue b/view/vue/container/inbox.vue index ead07db..5c91f2d 100644 --- a/view/vue/container/inbox.vue +++ b/view/vue/container/inbox.vue @@ -2,8 +2,8 @@
-
- +
+
diff --git a/view/vue/header.vue b/view/vue/header.vue index ddf6399..c5913e4 100644 --- a/view/vue/header.vue +++ b/view/vue/header.vue @@ -12,7 +12,7 @@
-
+
diff --git a/view/vue/menu.vue b/view/vue/menu.vue index 65809f6..7b15e69 100644 --- a/view/vue/menu.vue +++ b/view/vue/menu.vue @@ -4,7 +4,7 @@
-
+
{{ item.label }}
diff --git a/view/vue/notification-stack.vue b/view/vue/notification-stack.vue index ae0f4e1..e793202 100644 --- a/view/vue/notification-stack.vue +++ b/view/vue/notification-stack.vue @@ -7,7 +7,7 @@
- {{ n }} est connecté + {{ n }} est connecté