Merge branch 'master' of https://git.xdrm.io/ndli1718/main

.gitignore

@@ -1,3 +1,5 @@
+websocket.out
+ndli1718.jar
 .vscode
 .DS_Store
 node_modules/

package.json

@@ -10,7 +10,11 @@
     "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": "npm run build:clean; npm run build:bundle",
+
+    "ws-start": "java -jar ./ndli1718.jar > ./websocket.out 2>&1 &",
+    "ws-stop": "ps -aux | grep 'java -jar ./ndli1718.jar' | grep -v 'grep' && echo 'killing process..' && kill `ps -aux | grep \"java -jar ./ndli1718.jar\" | grep -v \"grep\" | awk '{print $2}'` && echo 'killed' || return 0",
+	"ws-restart": "npm run ws-stop; npm run ws-start"
   },
   "dependencies": {
     "vue": "^2.5.9"

public_html/css/layout.css

@@ -91,4 +91,29 @@ body{
 #WRAPPER.min #CONTAINER{
 	left: 3.5em;
 	width: calc( 100% - 3.5em );
+}
+
+
+/* Notification Stack */
+#WRAPPER #NOTIF-STACK{
+	display: none;
+	position: absolute;
+		top: 4em;
+		left: calc( 100% - 15em );
+		width: 14em;
+		min-height: 2em;
+		height: auto;
+
+	border: 1px solid #ddd;
+	border-radius: 3px;
+
+	background-color: #fff;
+
+	overflow: hidden;
+
+	z-index: 101;
+}
+
+#WRAPPER #NOTIF-STACK.active{
+	display: block;
 }

public_html/css/notification-stack.css

@@ -0,0 +1,58 @@
+/* Header */
+#NOTIF-STACK > .head{
+	display: block;
+	position: relative;
+		width: 100%;
+
+	padding: .7em 0;
+
+	border-radius: 3px 3px 0 0;
+	border-bottom: 1px solid #ddd;
+
+	text-align: center;
+	color: #888;
+}
+
+/* Container */
+#NOTIF-STACK > .body{
+	display: block;
+	position: relative;
+		width: 100%;
+		min-height: 2em;
+		height: auto;
+		max-height: 12em;
+
+	border-radius: 0 0 3px 3px;
+
+	overflow: auto;
+
+}
+
+/* Items */
+#NOTIF-STACK > .body > span{
+	display: block;
+	position: relative;
+
+	padding: .8em 1em;
+
+	border-bottom: 1px solid #ddd;
+
+	background-color: #fff;
+
+	color: #555;
+
+	cursor: pointer;
+
+	transition: background-color .2s ease-in-out,
+				color            .2s ease-in-out;
+}
+
+#NOTIF-STACK > .body > span:hover{
+	background-color: #eee;
+	color: #333;
+}
+
+#NOTIF-STACK > .body > span:last-child{
+	border: 0;
+	border-radius: 0 0 3px 3px;
+}

view/home.php

@@ -18,6 +18,7 @@
 		<link rel='stylesheet' type='text/css' href='/css/menu.css'>
 		<link rel='stylesheet' type='text/css' href='/css/header.css'>
 		<link rel='stylesheet' type='text/css' href='/css/container.css'>
+		<link rel='stylesheet' type='text/css' href='/css/notification-stack.css'>
 
 	<!-- JS dependencies -->
 	<script type='text/javascript' src='/js/_SERVER.js'></script>

view/main.js

@@ -16,17 +16,18 @@ import wrapper_vue from './vue/wrapper.vue'
 
 /* (2) Initialisation
 ---------------------------------------------------------*/
-/* (1) API */
+/* (1) global store init */
-window.api = new API("http://ndli1718/api/v/1.0/");
-
-/* (2) wsclient */
-window.wsc = new WSClientBuilder("wss://websocket.xdrm.io");
-
-/* (3) global store init */
 require('./vue-config');
 window.gstore.add('server', window._SERVER);
 window.infobox = new InfoBox(gstore.data.info);
 
+/* (2) API */
+window.api = new API(gstore.data.is_local ? 'http://ndli1718/api/v/1.0/' : 'https://ndli1718.xdrm.io/api/v/1.0/');
+
+/* (3) wsclient */
+window.wsc = new WSClientBuilder(gstore.data.is_local ? 'ws://localhost:9999' : 'wss://websocket.xdrm.io');
+
+
 /* (4) Init vue router */
 Vue.use(VueRouter);
 const router = new VueRouter({
@@ -74,7 +75,7 @@ window.wsc_connect = wsc.channel('connect').listen(function(msg, err){
 		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' )
+		if( router.app.$route.path != '/notifications' )
 			gstore.data.notif[0].count += gstore.data.notif[0].data.length - lastLen;
 
 	}
@@ -88,7 +89,7 @@ window.wsc_connect = wsc.channel('connect').listen(function(msg, err){
 		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' )
+		if( router.app.$route.path != '/notifications' )
 			gstore.data.notif[0].count += lastLen - gstore.data.notif[0].data.length;
 
 	}
@@ -112,23 +113,15 @@ window.wsc_chat = wsc.channel('chat').listen(function(msg, err){
 		return;
 
 	// {4} Play sound if 1msg received + not already on page //
-	if( msg.msg.length == 1 && router.app.$route.path != 'inbox' )
+	// note: 1msg means a new message but not the page load past buffer
-		( new Audio('/sound/notification.mp3') ).play();
+	if( msg.msg.length == 1 && router.app.$route.path != '/inbox' )
+		( 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 );
 
 	// {6} Add notification count if not already on page //
-	if( router.app.$route.path != 'inbox' )
+	if( router.app.$route.path != '/inbox' )
-		gstore.data.notif[1].count += msg.msg.length
+		gstore.data.notif[1].count += msg.msg.length;
 
-}).send({name: _SERVER.session.name});
+}).send({name: _SERVER.session.name});
-
-
-
-/* (4) Clean sockets before page quit
----------------------------------------------------------*/
-window.onbeforeunload = function() {
-    wsc_chat.send('{"close": true}');
-    wsc_connect.send('{"close": true}');
-};

view/vue-config.js

@@ -34,6 +34,7 @@ gstore.add('menu_item', {
 });
 
 gstore.add('URI', document.URL.replace(/^(?:\/\/|[^\/]+)*/, ''));
+gstore.add('is_local', document.URL.replace(/^http:\/\/([^\/]+).*$/, '$1') == 'ndli1718');
 gstore.add('min_menu', false);
 
 // Proccess current page from url
@@ -89,4 +90,7 @@ gstore.add('func', {
 
 
 // new-message container
-gstore.add('new_msg', '');
+gstore.add('new_msg', '');
+
+// notification stack visibility
+gstore.add('nstack', false);

view/vue/notification-stack.vue

@@ -0,0 +1,24 @@
+<template>
+
+	<div id='NOTIF-STACK' :class='gstore.nstack ? "active" : ""'>
+
+		<!-- Header -->
+		<div class='head'>Notifications</div>
+
+		<!-- Body -->
+		<div class='body'>
+			<span v-for='n in gstore.notif[0].data'><b>{{ n }}</b> est connecté</span>
+		</div>
+
+	</div>
+
+</template>
+
+
+<script>
+export default {
+	name: 'NOTIFICATION_STACK',
+	data(){ return { gstore: gstore.data }; },
+	methods: {}
+}
+</script>

view/vue/wrapper.vue

@@ -10,6 +10,13 @@
 		<!-- Container -->
 		<router-view></router-view>
 
+
+		<!-- Notification Stack -->
+		<notifstack-comp></notifstack-comp>
+
+		<!-- Login form -->
+		<!-- <loginform-comp></loginform-comp> -->
+
 	</div>
 </template>
 
@@ -18,13 +25,16 @@
 
 	import header_vue from './header.vue'
 	import menu_vue   from './menu.vue'
+	import notifstack_vue  from './notification-stack.vue'
+	// import loginform_vue   from './login-form.vue'
 
 	export default {
 		name: 'wrapper',
 		data(){ return { gstore: gstore.data }; },
 		components: {
-			'HeaderComp': header_vue,
+			'HeaderComp':     header_vue,
-			'MenuComp':   menu_vue
+			'MenuComp':       menu_vue,
+			'NotifstackComp': notifstack_vue
 		}
 	}