Move toggeling of selected user names to the client

This way we don't need a postback to update the display.

1 files changed, 57 insertions, 6 deletions

diff --git a/index.php b/index.php
index 81f3ade..82f9068 100644
--- a/index.php
+++ b/index.php
@@ -76,7 +76,8 @@ html>body #setupdiv { position: fixed; }
 include_once("analyticstracking.php");
 
 if (isset($date)) {
-	echo '  <script language="javascript" type="text/javascript">
+	echo '	<script type="text/javascript" src="http://crypto-js.googlecode.com/files/2.5.3-crypto-sha1.js"></script>
+	<script type="text/javascript">
 <!--
 
 function showHideMenu() {
@@ -107,20 +108,60 @@ function nextDay() {
 }
 
 function addUser(username) {
+
 	// The user was already in the list
 	if (document.setup.highlight_names.value.indexOf(username) >= 0) {
+
+		// Remove the username from the list
 		var myvalue = document.setup.highlight_names.value;
-		// Remove the username
 		myvalue = myvalue.replace(username, "");
 		myvalue = myvalue.replace(/;;/g,";");
 		myvalue = myvalue.replace(/^;/, "");
 		myvalue = myvalue.replace(/;$/, "");
 		document.setup.highlight_names.value = myvalue;
+
+		// Unmark the lines of the user
+		for (var k = 0; k < document.styleSheets.length; k++) {
+			var rules = document.styleSheets[k].cssRules || document.styleSheets[k].rules;
+			for (var x = 0; x < rules.length; x++) {
+				if (rules[x].selectorText == (\'span.user_\' + username)) {
+					rules[x].style.color = \'\';
+				}
+			}
+		}
+
+		// Now drop the username from the colorlist
+		var colorlist = document.getElementById(\'usernames\');
+		var colorlistelement = document.getElementById(\'user_\' + username);
+		colorlist.removeChild(colorlistelement);
+
 	} else {
+
+		// Add the username to the list
 		if (document.setup.highlight_names.value != \'\') {
 			document.setup.highlight_names.value += \';\';
 		}
 		document.setup.highlight_names.value += username;
+
+		// Mark all the lines of the newly selected user
+		var color = Crypto.SHA1(username).substr(0, 6);
+		var styleSheet = document.styleSheets[0];
+		if (styleSheet.addRule) {
+			styleSheet.addRule(\'span.user_\' + username , \'color: #\' + color, 0);
+		} else if (styleSheet.insertRule) {
+			styleSheet.insertRule(\'span.user_\' + username + \' { color: #\' + color + \'; }\', 0);
+		} else {
+			document.getElementById("datepick").submit();
+		}
+
+		// Now add the username to the colorlist
+		var colorlist = document.getElementById(\'usernames\');
+		var colorlistelement = document.createElement(\'span\');
+		colorlistelement.setAttribute(\'id\', \'user_\' + username);
+		colorlistelement.setAttribute(\'class\', \'user_\' + username);
+		colorlistelement.style.display = \'block\';
+		colorlistelement.innerHTML = \'<a href="javascript:addUser(\\\'\' + username + \'\\\');" style="color: inherit;">\' + username + \'</a>\';
+		colorlist.appendChild(colorlistelement);
 	}
 }
 
@@ -174,6 +215,14 @@ function drag(ereignis) {
 
 //-->
   </script>'.PHP_EOL;
+
+	if (count($users) > 0) {
+		echo '	<style type="text/css">'.PHP_EOL;
+		foreach ($users as $user) {
+			echo '		span.user_'.$user.' { '.get_color($user).'; }'.PHP_EOL;
+		}
+		echo '	</style>'.PHP_EOL;
+	}
 }
 
 echo ' </head>
@@ -255,11 +304,13 @@ if (!isset($date)) {
     <input name="show_irssi" value="true" type="checkbox"'.($show_irssi ? ' checked="checked"' : '').'/>Show IRSSI<br/>
     <input name="show_html" value="true"'.($show_html ? ' checked="checked"' : '').' type="checkbox"/>Linkify HTML<br/>
     <label for="highlight_names">Highlight names:</label><input id="highlight_names" name="highlight_names" type="text" value="'.$highlight_names.'"/>
-    <input value="Update" type="submit"/>'.PHP_EOL;
+    <input value="Update" type="submit"/>
+    <div id="usernames">'.PHP_EOL;
 	foreach ($users as $user) {
-		echo '<br/><span style="'.get_color($user).'"><a style="color: inherit;" href="javascript:addUser(\''.$user.'\');">'.$user.'</a></span>'.PHP_EOL;
+		echo '<span class="user_'.$user.'" id="user_'.$user.'" style="display: block;"><a style="color: inherit;" href="javascript:addUser(\''.$user.'\');">'.$user.'</a></span>'.PHP_EOL;
 	}
-	echo '  </div>
+	echo '    </div>
+  </div>
    <label for="date">Enter date of the log to open:</label>'.PHP_EOL;
 	if (file_exists(LOG_DIR.'dri-devel-' . $prevday . '.log')) {
 		echo '<a href="#" title="Previous day" onclick="prevDay(); return false;"><img src="images/play_blue_rev.png" /></a>';
@@ -293,7 +344,7 @@ if (!isset($date)) {
 					echo '<hr/>';
 					unset($last_visit);
 				}
-				echo '<span style="'.get_color($user_clean).'">';
+				echo '<span class="user_'.$user_clean.'">';
 				$line = htmlentities($line, ENT_QUOTES);
 				if ($show_html == 'true') {
 					$line = preg_replace($pattern, "\\1<a href=\"\\2\\3\">\\2\\3</a>\\4", $line);