chore: Move user selection handling from PHP to JS

3 files changed, 37 insertions, 58 deletions

diff --git a/details.php b/details.php
index e5b1333..640064d 100644
--- a/details.php
+++ b/details.php
@@ -47,7 +47,7 @@ foreach ($lines as $line_num => $line) {
             $anything_displayed = true;
             $user = htmlentities($user, ENT_QUOTES);
             $time = getTime($line);
-            echo '<span class="user_'.str_replace('|', '_', $user_clean).'">';
+            echo '<span class="user_'.preg_replace('/[^A-Za-z0-9]/', '_', $user_clean).'">';
             $line = htmlentities($line, ENT_QUOTES);
             if ($show_html == 'true') {
                 $line = preg_replace($pattern, "\\1<a target=\"_blank\" href=\"\\2\\3\">\\2\\3</a>\\4", $line);
diff --git a/index.php b/index.php
index ef10254..7837a10 100755
--- a/index.php
+++ b/index.php
@@ -43,11 +43,6 @@ $show_html = !isset($_GET['channel']) || (isset($_GET['show_html']) && $_GET['sh
 $show_joins = isset($_GET['show_joins']) && $_GET['show_joins'] == 'true';
 $show_irssi = isset($_GET['show_irssi']) && $_GET['show_irssi'] == 'true';
 $highlight_names = isset($_GET['highlight_names']) ? $_GET['highlight_names'] : (isset($_COOKIE['stored_users']) ? $_COOKIE['stored_users'] : '');
-if ($highlight_names == '') {
-    $users = array();
-} else {
-    $users = explode(';', $highlight_names);
-}
 if (isset($_GET['highlight_names'])) {
     setcookie('stored_users', $highlight_names, time()+2592000);
 }
@@ -83,14 +78,6 @@ div.container-fluid span a { overflow-wrap: break-word; }
 if (isset($date)) {
     echo '  <script type="text/javascript" src="js/script.js"></script>
   </script>'.PHP_EOL;
-
-    if (count($users) > 0) {
-        echo '  <style type="text/css">'.PHP_EOL;
-        foreach ($users as $user) {
-            echo '    span.user_'.str_replace('|', '_', $user).' { '.get_color($user).'; }'.PHP_EOL;
-        }
-        echo '  </style>'.PHP_EOL;
-    }
 }
 
 echo ' </head>
@@ -135,13 +122,10 @@ if (isset($date)) {
       </ul>
       <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
-        <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span id="users_label">Users'.(count($users) > 0 ? ' ('.count($users).')' : '').'</span>
+        <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span id="users_label">Users</span>
         <span class="caret"></span></a>
-        <ul class="dropdown-menu" id="usernames">'.PHP_EOL;
-    foreach ($users as $user) {
-        echo '         <li id="user_'.$user.'"><span class="checkbox user_'.str_replace('|', '_', $user).'"><a href="javascript:toggleUser(\''.$user.'\');">'.$user.'</a></span></li>'.PHP_EOL;
-    }
-    echo '        </ul>
+        <ul class="dropdown-menu" id="usernames">
+        </ul>
        </li>
       </ul>'.PHP_EOL;
 }
@@ -151,22 +135,6 @@ echo '     </form>
   </nav>
   <div class="container-fluid">'.PHP_EOL;
 
-/**
- * Get the CSS representing the color matching for the given user_error
- *
- * @param  string $user the username
- * @return string the CSS representing the color 
- */
-function get_color($user)
-{
-    global $users;
-    $isUser = array_search($user, $users);
-    if ($isUser !== false) {
-        return 'color: #'.substr(sha1($user), 0, 6);
-    }
-    return '';
-}
-
 if (!isset($date)) {
     require_once('overview.php');
 } else {
@@ -184,5 +152,6 @@ echo '  </div>
   $(\'.input-group.date\').datepicker({ format: \'yyyy-mm-dd\', autoclose: true, todayHighlight: true, endDate: \'+1d\' }).on(\'changeDate\', function(e) {
         this.parentElement.parentElement.submit();
     });
+    addStyleForUsers();
  </script>
 </html>'.PHP_EOL;
diff --git a/js/script.js b/js/script.js
index c297b97..0236072 100644
--- a/js/script.js
+++ b/js/script.js
@@ -5,11 +5,27 @@ async function digestMessage(username) {
 	return hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
 }
 
-function toggleUser(username) {
-
-	const colorlist = document.getElementById('usernames');
+function addStyleForUser(username) {
 	const username_clean = username.replace(/[^A-Za-z0-9]/g, '_');
 
+	// Mark all the lines of the newly selected user
+	return digestMessage(username).then((str) => {
+		const color = str.substring(0, 6);
+		const styleSheet = document.styleSheets[0];
+		styleSheet.insertRule('span.user_' + username_clean + ' { color: #' + color + '; }', 0);
+		// Now add the username to the colorlist
+		const listelement = document.createElement('li');
+		listelement.setAttribute('id', 'user_' + username_clean);
+		const spanelement = document.createElement('span');
+		spanelement.setAttribute('class', 'checkbox user_' + username_clean);
+		listelement.appendChild(spanelement);
+		spanelement.innerHTML = '<a href="javascript:toggleUser(\'' + username + '\');">' + username + '</a>';
+		document.getElementById('usernames').appendChild(listelement);
+	});
+}
+
+async function toggleUser(username) {
+
 	// The user was already in the list
 	if (document.mainform.highlight_names.value.indexOf(username) >= 0) {
 
@@ -21,6 +37,8 @@ function toggleUser(username) {
 		myvalue = myvalue.replace(/;$/, "");
 		document.mainform.highlight_names.value = myvalue;
 
+		const username_clean = username.replace(/[^A-Za-z0-9]/g, '_');
+
 		// Unmark the lines of the user
 		for (let k = 0; k < document.styleSheets.length; k++) {
 			const rules = document.styleSheets[k].cssRules || document.styleSheets[k].rules;
@@ -31,8 +49,9 @@ function toggleUser(username) {
 			}
 		}
 
+		console.log('user_' + username_clean);
 		// Now drop the username from the colorlist
-		colorlist.removeChild(document.getElementById('user_' + username_clean));
+		document.getElementById('usernames').removeChild(document.getElementById('user_' + username_clean));
 
 	} else {
 
@@ -42,25 +61,8 @@ function toggleUser(username) {
 		}
 		document.mainform.highlight_names.value += username;
 
-		// Mark all the lines of the newly selected user
-		return digestMessage(username).then((str) => {
-			const color = str.substring(0, 6);
-			const styleSheet = document.styleSheets[0];
-			if (styleSheet.insertRule) {
-				styleSheet.insertRule('span.user_' + username_clean + ' { color: #' + color + '; }', 0);
-			} else {
-				document.mainform.submit();
-			}
+		await addStyleForUser(username);
 
-			// Now add the username to the colorlist
-			const listelement = document.createElement('li');
-			listelement.setAttribute('id', 'user_' + username_clean);
-			const spanelement = document.createElement('span');
-			spanelement.setAttribute('class', 'checkbox user_' + username_clean);
-			listelement.appendChild(spanelement);
-			spanelement.innerHTML = '<a href="javascript:toggleUser(\'' + username + '\');">' + username + '</a>';
-			colorlist.appendChild(listelement);
-		});
 	}
 
 	const semicolons = (document.mainform.highlight_names.value.match(/;/g) || []).length;
@@ -68,3 +70,11 @@ function toggleUser(username) {
 
 	document.cookie = 'stored_users=' + escape(document.mainform.highlight_names.value) + '; path=/';
 }
+
+async function addStyleForUsers() {
+	for (const username of document.mainform.highlight_names.value.split(';')) {
+		if (username) {
+			await addStyleForUser(username);
+		}
+	}
+}
\ No newline at end of file