From 6b7d2d98bcfd3d47ec782a993c0c1a75b4a784f3 Mon Sep 17 00:00:00 2001
From: fatchan <tom@69420.me>
Date: Sun, 13 Oct 2019 03:40:11 +0000
Subject: [PATCH] trying some changes to show live status on threads

---
 gulp/res/css/style.css    | 44 +++++++++++++++++++++++++++------------
 gulp/res/js/live.js       |  6 ++++++
 views/pages/boardlist.pug |  8 +++----
 views/pages/thread.pug    |  3 +++
 4 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/gulp/res/css/style.css b/gulp/res/css/style.css
index 45c3987a..bd46793a 100644
--- a/gulp/res/css/style.css
+++ b/gulp/res/css/style.css
@@ -338,7 +338,25 @@ td, th {
 	z-index: 1;
 }
 
-.post-container, .stickynav, .pages, .toggle-summary, .catalog-tile, .modal {
+.dot {
+	height: .75em;
+	width: .75em;
+	background-color: orange;
+	border-radius: 50%;
+	animation: pulsate 2s ease;
+	animation-iteration-count: infinite;
+}
+
+@keyframes pulsate {
+	0% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.5;
+	}
+}
+
+.post-container, .stickynav, .pages, .toggle-summary, .catalog-tile, .modal, .live {
 	background: var(--post-color);
 	border-width: 1px;/*0 1px 1px 0;*/
 	border-style: solid;
@@ -364,21 +382,21 @@ td, th {
 .modal {
 	display: flex;
 	flex-direction: column;
-    max-width: calc(100% - 10px);
-    max-height: calc(100% - 50px);
-    position: fixed;
-    top: 38px;
-    background-color: var(--post-color);
-    z-index: 4;
-    box-sizing: border-box;
-    padding: 5px;
-    border: 1px solid var(--post-outline-color);
+	max-width: calc(100% - 10px);
+	max-height: calc(100% - 50px);
+	position: fixed;
+	top: 38px;
+	background-color: var(--post-color);
+	z-index: 4;
+	box-sizing: border-box;
+	padding: 5px;
+	border: 1px solid var(--post-outline-color);
 	align-self: center;
 }
 
 details.actions div {
-    display: flex;
-    flex-direction: column;
+	display: flex;
+	flex-direction: column;
 }
 
 .actions {
@@ -428,7 +446,7 @@ details.actions div {
 	flex-flow: column wrap;
 	width: max-content;
 	width: -moz-max-content;
-	margin-top: 10px;
+	/*margin-top: 10px;*/
 }
 
 .toggle {
diff --git a/gulp/res/js/live.js b/gulp/res/js/live.js
index d4c58911..d863b5f8 100644
--- a/gulp/res/js/live.js
+++ b/gulp/res/js/live.js
@@ -69,15 +69,21 @@ window.addEventListener('DOMContentLoaded', (event) => {
 		const room = `${roomParts[1]}-${roomParts[3]}`;
 		const thread = document.querySelector('.thread');
 		const socket = io({ transports: ['websocket'] }); //no polling
+		const livedot = document.getElementById('livedot');
+		const livetext = document.getElementById('livetext').childNodes[1];
 		socket.on('connect', () => {
 			console.log('joined room', room);
+			livedot.style.color = '#0de600';
 			socket.emit('room', room);
 		});
 		socket.on('disconnect', () => {
 			console.log('lost connection to room');
+			livedot.style.color = 'orange';
 		});
 		socket.on('reconnect', () => {
 			console.log('reconnected to room');
+			livedot.style.color = '#0de600';
+			livetext.
 			jsonCatchup();
 		});
 		socket.on('newPost', newPost);
diff --git a/views/pages/boardlist.pug b/views/pages/boardlist.pug
index b8c2fc70..38580035 100644
--- a/views/pages/boardlist.pug
+++ b/views/pages/boardlist.pug
@@ -55,9 +55,9 @@ block content
 							span.user-id.sfw SFW
 							|  
 						a(href=board.path) #{board.siteName} /#{board.uri}/ - #{board.title}
-					td #{board.subtitle || '-'}
-					td #{board.postsPerHour || '-'}
-					td #{board.uniqueUsers || '-'}
-					td #{board.totalPosts || '-'}
+					td #{board.subtitle}
+					td #{board.postsPerHour}
+					td #{board.uniqueUsers}
+					td #{board.totalPosts}
 	nav.pages.text-center.mt-5.mv-0
 		include ../includes/boardlistpages.pug
diff --git a/views/pages/thread.pug b/views/pages/thread.pug
index 64462182..1f7f7580 100644
--- a/views/pages/thread.pug
+++ b/views/pages/thread.pug
@@ -34,6 +34,9 @@ block content
 			for post in thread.replies
 				+post(post)
 		hr(size=1)
+		div.jsonly.live#livetext
+			.dot#livecolor
+			| Connecting...
 		nav.pages
 			+boardnav(null, true, true)
 		include ../includes/actionfooter.pug