[scss.layout][setup][vue.auth.wrapper] connection status + [lib.content-controller] connection status management from websocket state

webpack/lib/content-controller.js

@@ -143,6 +143,7 @@ export default class ContentController{
 	ws_connect(){
 
 		console.warn(`new ws(/channel/${this.cid})`);
+		gs.get.connection = 1;
 
 		// 1. Close websocket if exists
 		if( window.csock instanceof wscd ){
@@ -154,6 +155,12 @@ export default class ContentController{
 		window.csock = new wscd(`wss://ws.douscord.xdrm.io/channel/${this.cid}`, { token: auth.token });
 
 		// 3. Bind events
+		csock.onconnected = () => {
+			gs.get.connection = 2;
+			setTimeout( () => {
+				gs.get.connection = null;
+			}, 3000);
+		};
 		csock.onreceive   = gs.get.content.ws_handler.bind({ event: 'receive' });
 		csock.onclose     = gs.get.content.ws_handler.bind({ event: 'close'   });
 
@@ -181,8 +188,10 @@ export default class ContentController{
 
 		/* (2) CLOSE event -> reconnect in 500ms
 		---------------------------------------------------------*/
-		if( this.event === 'close' )
+		if( this.event === 'close' ){
+			gs.get.connection = 0;
 			return setTimeout(gs.get.content.ws_connect.bind(gs.get.content), 500);
+		}
 
 
 		/* (3) RECEIVE event

webpack/scss/layout.scss

@@ -40,6 +40,38 @@ body{
 }
 
 
+body > #WRAPPER > #CONNECTION_STATUS{
+	display: block;
+	position: absolute;
+		top: -2em;
+		left: 0;
+		width: 100%;
+		height: calc( 2em - 2*.3em );
+
+	padding: .3em 0;
+
+	// background-color: #d83636;
+
+	font-size: 1em;
+	text-align: center;
+	text-shadow: 1px 1px 0 #555;
+
+	z-index: 1000;
+
+	transition: top .5s ease-in-out,
+				background-color .2s ease-in-out;
+
+	// offline
+	&[data-online='0']{  top: 0; background-color: #d83636; }
+
+	// connecting
+	&[data-online='1']{  top: 0; background-color: #d86936; }
+
+	// online
+	&[data-online='2']{  top: 0; background-color: #32ce80; }
+}
+
+
 // LOGIN LAYOUT
 body > #WRAPPER.login{
 

webpack/setup.js

@@ -52,7 +52,10 @@ gs.set('router', new VueRouter({
 /* (5) refresh page */
 gs.set('refresh', () => ( document.location = '' ) );
 
-/* (6) Ask for permission API */
+/* (6) Connection status */
+gs.set('connection', 1); // null -> normal, 0 -> offline, 1 -> connecting, 2 -> online
+
+/* (7) Ask for permission API */
 Notification.requestPermission();
 
 

webpack/vue/auth/wrapper.vue

@@ -4,6 +4,15 @@
 
 	<div id="WRAPPER">
 
+		<!-- Connection status bar -->
+		<div id='CONNECTION_STATUS' :data-online='gs.connection'>
+			{{ gs.connection === 0
+				? `You are offline`
+				: ( gs.connection === 1
+					? `Trying to establishing connection...`
+					: `Connection established` ) }}
+		</div>
+
 		<!-- Side Menu -->
 		<menu-comp></menu-comp>