From 3b524fbe9384fac0f3524bf1629f5e4135d8b149 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Tue, 5 Dec 2017 00:00:22 +0100 Subject: [PATCH 01/27] Added vue-router --- package.json | 9 +++++---- view/main.js | 21 ++++++++++++++------- view/routes.js | 19 +++++++++++++++++++ view/vue/wrapper.vue | 19 +++---------------- 4 files changed, 41 insertions(+), 27 deletions(-) create mode 100644 view/routes.js diff --git a/package.json b/package.json index 5d50f98..dab4121 100755 --- a/package.json +++ b/package.json @@ -6,11 +6,11 @@ "license": "MIT", "private": true, "scripts": { - "build:clean": "rm ./public_html/js/bundle@*.js*", + "build:clean": "rm ./public_html/js/bundle@*.js*", "build:bundle": "cross-env NODE_ENV=production webpack --progress --hide-modules", - "build:dev": "cross-env NODE_ENV=development webpack --progress --hide-modules", - "dev": "npm run build:clean; npm run build:dev", - "build": "npm run build:clean; npm run build:bundle" + "build:dev": "cross-env NODE_ENV=development webpack --progress --hide-modules", + "dev": "npm run build:clean; npm run build:dev", + "build": "npm run build:clean; npm run build:bundle" }, "dependencies": { "vue": "^2.5.9" @@ -30,6 +30,7 @@ "file-loader": "^1.1.4", "vue-loader": "^13.0.5", "vue-template-compiler": "^2.5.9", + "vue-router": "^2.5.3", "webpack": "^3.8.1", "webpack-dev-server": "^2.9.5" } diff --git a/view/main.js b/view/main.js index 7c0d973..7f099df 100755 --- a/view/main.js +++ b/view/main.js @@ -2,11 +2,13 @@ ---------------------------------------------------------*/ /* (1) NPM libs */ import Vue from 'vue' +import VueRouter from 'vue-router' /* (2) Internal libs */ -import {API} from './lib/api-es6' -import {InfoBox} from './lib/infobox-es6' +import {API} from './lib/api-es6' +import {InfoBox} from './lib/infobox-es6' import {WSClient,WSClientBuilder} from './lib/ws-client-es6' +import routes from './routes' /* (3) Vues */ import wrapper_vue from './vue/wrapper.vue' @@ -25,13 +27,18 @@ require('./vue-config'); window.gstore.add('server', window._SERVER); window.infobox = new InfoBox(window.gstore.data.info); -/* (4) Render view */ +/* (4) Init vue router */ +Vue.use(VueRouter); +window.router = new VueRouter({ + mode: 'history', + routes: routes[0] +}); + +/* (5) Render view */ new Vue({ el: '#main-vue', - render: h => h(wrapper_vue), - data: { - gstore: window.gstore.data - } + router: window.router, + render: h => h(wrapper_vue) }) diff --git a/view/routes.js b/view/routes.js new file mode 100644 index 0000000..6820dcf --- /dev/null +++ b/view/routes.js @@ -0,0 +1,19 @@ +export default { 0: [ + + { + path: '/dashboard/', + component: require('./vue/container/dashboard.vue') + }, { + path: '/profile/', + component: require('./vue/container/profile.vue') + }, { + path: '/message/', + component: require('./vue/container/message.vue') + }, { + path: '/notifications/', + component: require('./vue/container/notifications.vue') + }, { + path: '*', + redirect: '/dashboard/' + } +]} \ No newline at end of file diff --git a/view/vue/wrapper.vue b/view/vue/wrapper.vue index 7dbfd4b..3d24162 100755 --- a/view/vue/wrapper.vue +++ b/view/vue/wrapper.vue @@ -8,10 +8,7 @@ - - - - + @@ -25,24 +22,14 @@ import header_vue from './header.vue'; import menu_vue from './menu.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 { name: 'wrapper', data(){ return { gstore: window.gstore.data }; }, components: { - 'HeaderComp': header_vue, - 'MenuComp': menu_vue, - 'DashboardContainer': dashboardContainer_vue, - 'ProfileContainer': profileContainer_vue, - 'MessageContainer': messageContainer_vue, - 'NotificationsContainer': notificationsContainer_vue + 'HeaderComp': header_vue, + 'MenuComp': menu_vue } } \ No newline at end of file From 7363f6ea1adeda6ad54816cb925271246af15f42 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Tue, 5 Dec 2017 08:39:24 +0100 Subject: [PATCH 02/27] fix: vue-router now works (require(...).default) --- view/main.js | 9 +++---- view/routes.js | 10 ++++---- view/vue/container/dashboard.vue | 2 +- view/vue/container/{message.vue => inbox.vue} | 4 ++-- view/vue/container/notifications.vue | 2 +- view/vue/container/profile.vue | 2 +- view/vue/menu.vue | 3 ++- view/vue/wrapper.vue | 24 ++++++++----------- 8 files changed, 27 insertions(+), 29 deletions(-) rename view/vue/container/{message.vue => inbox.vue} (78%) diff --git a/view/main.js b/view/main.js index 7f099df..beddbed 100755 --- a/view/main.js +++ b/view/main.js @@ -29,17 +29,18 @@ window.infobox = new InfoBox(window.gstore.data.info); /* (4) Init vue router */ Vue.use(VueRouter); -window.router = new VueRouter({ +const router = new VueRouter({ mode: 'history', routes: routes[0] }); + /* (5) Render view */ new Vue({ - el: '#main-vue', - router: window.router, + el: '#main-vue', + router, render: h => h(wrapper_vue) -}) +}); /* (3) Set WebSocket channels diff --git a/view/routes.js b/view/routes.js index 6820dcf..2b77d41 100644 --- a/view/routes.js +++ b/view/routes.js @@ -2,16 +2,16 @@ export default { 0: [ { path: '/dashboard/', - component: require('./vue/container/dashboard.vue') + component: require('./vue/container/dashboard.vue').default }, { path: '/profile/', - component: require('./vue/container/profile.vue') + component: require('./vue/container/profile.vue').default }, { - path: '/message/', - component: require('./vue/container/message.vue') + path: '/inbox/', + component: require('./vue/container/inbox.vue').default }, { path: '/notifications/', - component: require('./vue/container/notifications.vue') + component: require('./vue/container/notifications.vue').default }, { path: '*', redirect: '/dashboard/' diff --git a/view/vue/container/dashboard.vue b/view/vue/container/dashboard.vue index 6fc5afe..38aaa1c 100644 --- a/view/vue/container/dashboard.vue +++ b/view/vue/container/dashboard.vue @@ -12,6 +12,6 @@ \ No newline at end of file diff --git a/view/vue/container/message.vue b/view/vue/container/inbox.vue similarity index 78% rename from view/vue/container/message.vue rename to view/vue/container/inbox.vue index 9dab11f..d2dda18 100644 --- a/view/vue/container/message.vue +++ b/view/vue/container/inbox.vue @@ -14,7 +14,7 @@ \ No newline at end of file diff --git a/view/vue/container/notifications.vue b/view/vue/container/notifications.vue index a032520..387662b 100644 --- a/view/vue/container/notifications.vue +++ b/view/vue/container/notifications.vue @@ -12,6 +12,6 @@ \ No newline at end of file diff --git a/view/vue/container/profile.vue b/view/vue/container/profile.vue index a61c94a..998cef4 100644 --- a/view/vue/container/profile.vue +++ b/view/vue/container/profile.vue @@ -12,6 +12,6 @@ \ No newline at end of file diff --git a/view/vue/menu.vue b/view/vue/menu.vue index 46940fc..286fe20 100644 --- a/view/vue/menu.vue +++ b/view/vue/menu.vue @@ -24,7 +24,8 @@ export default { // (1) Update URL console.log('Loading page \''+page+'\''); - window.history.pushState(page, page, '/'+page+'/'); + console.log(this.$router) + this.$router.push('/'+page); // (2) Activate current element this.gstore.menu_item_active = page; diff --git a/view/vue/wrapper.vue b/view/vue/wrapper.vue index 3d24162..cc25e66 100755 --- a/view/vue/wrapper.vue +++ b/view/vue/wrapper.vue @@ -14,22 +14,18 @@ - - - \ No newline at end of file From 47d9dfac0b12bbabe2f1a4972ddc8d1b6b6ed149 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Tue, 5 Dec 2017 13:32:42 +0100 Subject: [PATCH 03/27] Now message input --- public_html/css/container.css | 60 +++++++++++++++++++++++- public_html/image/container/send-msg.svg | 47 +++++++++++++++++++ view/vue-config.js | 6 ++- view/vue/container/inbox.vue | 5 ++ 4 files changed, 115 insertions(+), 3 deletions(-) create mode 100644 public_html/image/container/send-msg.svg diff --git a/public_html/css/container.css b/public_html/css/container.css index 4790a49..17fe786 100644 --- a/public_html/css/container.css +++ b/public_html/css/container.css @@ -3,7 +3,6 @@ flex-direction: column; justify-content: flex-start; flex-wrap: nowrap; - } #CONTAINER.message div{ /* Message item */ @@ -26,6 +25,10 @@ color: #222; } + #CONTAINER.message > div:last-of-type{ /* Margin bottom to last */ + margin-bottom: 5em; + } + #CONTAINER.message div.me{ /* Message Item (self) */ background: #13d89d; align-self: flex-end; @@ -55,4 +58,57 @@ #CONTAINER.message div.me span.author{ /* Hide message author if self */ display: none; - } \ No newline at end of file + } + + + #CONTAINER.message form.msg-input{ /* Message Input */ + display: block; + position: fixed; + top: calc( 100% - 3em ); + left: 15em; + width: calc( 100% - 2*1px ); + height: 3em; + + border-top: 1px solid #ddd; + + background: #fff; + + overflow: hidden; + } + + #CONTAINER.message form.msg-input input{ /* form Input */ + display: inline-block; + position: absolute; + top: 0; + left: 0; + width: calc( 100vw - 15em - 2em - 3em ); + height: calc( 100% - 2*.5em ); + + padding: .5em 1em; + + border: none; + + font-size: inherit; + } + + #CONTAINER.message form.msg-input button{ /* form send button */ + display: inline-block; + position: absolute; + top: 0; + left: calc( 100vw - 15em - 3em ); + width: 3em; + height: 3em; + + background: url('/image/container/send-msg.svg@777777') center center no-repeat; + background-size: 50%; + + border: none; + + font-size: inherit; + + cursor: pointer; + } + + #CONTAINER.message form.msg-input button:hover{ + background-image: url('/image/container/send-msg.svg@000000'); + } \ No newline at end of file diff --git a/public_html/image/container/send-msg.svg b/public_html/image/container/send-msg.svg new file mode 100644 index 0000000..b380911 --- /dev/null +++ b/public_html/image/container/send-msg.svg @@ -0,0 +1,47 @@ + +image/svg+xml \ No newline at end of file diff --git a/view/vue-config.js b/view/vue-config.js index 0117b5f..2eaf861 100644 --- a/view/vue-config.js +++ b/view/vue-config.js @@ -57,4 +57,8 @@ window.gstore.add('func', { /* (2) Add locally */ window.gstore.data.notif[1].data.push([ window.gstore.data.server.session.name, msg ]); } -}); \ No newline at end of file +}); + + +// new-message container +window.gstore.add('new_msg', ''); \ No newline at end of file diff --git a/view/vue/container/inbox.vue b/view/vue/container/inbox.vue index d2dda18..e7f0312 100644 --- a/view/vue/container/inbox.vue +++ b/view/vue/container/inbox.vue @@ -7,8 +7,13 @@ {{ msg[1] }} +
+ + +
+ From dd7bad469ca77169b376c393916d64b5c412ed37 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Tue, 5 Dec 2017 14:00:27 +0100 Subject: [PATCH 04/27] Fix notification associated pages count=0 --- view/vue-config.js | 14 ++++++++++++++ view/vue/header.vue | 13 +++---------- view/vue/menu.vue | 14 +++----------- 3 files changed, 20 insertions(+), 21 deletions(-) diff --git a/view/vue-config.js b/view/vue-config.js index 2eaf861..aeab430 100644 --- a/view/vue-config.js +++ b/view/vue-config.js @@ -49,6 +49,20 @@ if( /^\/(\w+)(?:\/?.*)$/.test(window.gstore.data.URI) ){ // Functions window.gstore.add('func', { + nav: function(router, uri){ + + // {1} Update view (vue-router) // + router.push('/'+uri); + + // {2} Activate current menu_item // + window.gstore.data.menu_item_active = uri; + + // {3} Manage notifications // + for( var notif of window.gstore.data.notif ) + if( notif.link == uri ) // if notif links to current page + notif.count = 0; + + }, toggleMenuSize: function(){ window.gstore.data.min_menu=!window.gstore.data.min_menu; }, sendMessage: function(msg){ /* (1) Send message to WebSocket */ diff --git a/view/vue/header.vue b/view/vue/header.vue index 745135d..b3ea3a9 100644 --- a/view/vue/header.vue +++ b/view/vue/header.vue @@ -12,7 +12,7 @@
-
+
@@ -25,15 +25,8 @@ export default { name: 'HEADER', data(){ return { gstore: window.gstore.data }; }, methods: { - 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; - - + show_notif(uri){ + window.gstore.data.func.nav(this.$router, uri); } } } diff --git a/view/vue/menu.vue b/view/vue/menu.vue index 286fe20..a32b2b7 100644 --- a/view/vue/menu.vue +++ b/view/vue/menu.vue @@ -4,7 +4,7 @@