Searchable ancient html (#8143)

# About the pull request Since 516 disables Ctrl+F I was tasked with adding more filtering options to some of the old UIs that really ought to get TGUIfied. But for now this was simple enough to do (even though I spent way too long on it). # Explain why it's good for the game Now those players with too many notes can quickly find old ban reasons! # Testing Photographs and Procedure <details> <summary>Screenshots & Videos</summary> https://youtu.be/XHoxcTzN1k0 </details> # Changelog :cl: Drathek ui: Added search bars to stickyban panel, unban panel, view notes, view other notes, antagonists panel ui: Fixed follow button in antagonists panel ui: Fixed clear button not refreshing filters for old player panel, and view variables /:cl:
cmss13-devs · Jan 19, 2025 · b1078c8 · b1078c8
1 parent 4cc56d0
commit b1078c8
Show file tree

Hide file tree

Showing 9 changed files with 123 additions and 64 deletions.
diff --git a/code/datums/browser.dm b/code/datums/browser.dm
@@ -68,7 +68,6 @@
 
 /datum/browser/proc/get_header()
 	head_content += "<link rel='stylesheet' type='text/css' href='[common_asset.get_url_mappings()[stylesheet]]'>"
-	head_content += "<link rel='stylesheet' type='text/css' href='[other_asset.get_url_mappings()["search.js"]]'>"
 	head_content += "<link rel='stylesheet' type='text/css' href='[other_asset.get_url_mappings()["loading.gif"]]'>"
 
 	for (var/file in stylesheets)
@@ -77,6 +76,7 @@
 
 	for (var/file in scripts)
 		head_content += "<script type='text/javascript' src='[SSassets.transport.get_asset_url(file)]'></script>"
+	head_content += "<script type='text/javascript' src='[other_asset.get_url_mappings()["search.js"]]'></script>"
 
 	var/title_attributes = "class='uiTitle'"
 	if (title_image)
@@ -88,7 +88,7 @@
 	<head>
 		[head_content]
 	</head>
-	<body scroll=auto>
+	<body scroll=auto onload='selectFilterField()'>
 		<div class='uiWrapper'>
 			[title ? "<div class='uiTitleWrapper'><div [title_attributes]><tt>[title]</tt></div><div class='uiTitleButtons'>[title_buttons]</div></div>" : ""]
 			<div class='uiContent'>

diff --git a/code/datums/global_variables.dm b/code/datums/global_variables.dm
@@ -66,7 +66,7 @@
 					</td>
 
 					<td width='80%'>
-						<input type='text' id='filter' name='filter_text' value='' onkeyup='updateSearch()' style='width:100%;'>
+						<input type='search' id='filter' name='filter_text' value='' onkeyup='updateSearch()' onblur='updateSearch()' style='width:100%;'>
 					</td>
 				</tr>
 			</table>

diff --git a/code/game/machinery/computer/groundside_operations.dm b/code/game/machinery/computer/groundside_operations.dm
@@ -201,7 +201,7 @@
 			misc_text += marine_infos
 	dat += "<b>Total: [total_count] Deployed</b><BR>"
 	dat += "<b>Marines detected: [living_count] ([helmetless_count] no helmet, [SSD_count] SSD, [almayer_count] on Almayer)</b><BR>"
-	dat += "<center><b>Search:</b> <input type='text' id='filter' value='' onkeyup='updateSearch();' style='width:300px;'></center>"
+	dat += "<center><b>Search:</b> <input type='search' id='filter' value='' onkeyup='updateSearch()' onblur='updateSearch()' style='width:300px;'></center>"
 	dat += "<table id='marine_list' border='2px' style='width: 100%; border-collapse: collapse;' align='center'><tr>"
 	dat += "<th>Name</th><th>Role</th><th>State</th><th>Location</th></tr>"
 	for(var/job in job_order)

diff --git a/code/game/verbs/records.dm b/code/game/verbs/records.dm
@@ -22,8 +22,22 @@
 		to_chat(usr, "Error: notes not yet migrated for that key. Please try again in 5 minutes.")
 		return
 
-	var/dat = "<html>"
-	dat += "<body>"
+	var/dat = {"
+	<table width='100%'>
+	<tr>
+	<td width='20%'>
+	<div align='center'>
+	<b>Search:</b>
+	</div>
+	</td>
+	<td width='80%'>
+	<input type='search' id='filter' onkeyup='handle_filter()' onblur='handle_filter()' name='filter_text' value='' style='width:99%;'>
+	</td>
+	</tr>
+	</table>
+	<br>
+	<table border=0 rules=all frame=void cellspacing=0 cellpadding=3 id='searchable'>
+	"}
 
 	var/list/datum/view_record/note_view/NL = DB_VIEW(/datum/view_record/note_view, DB_COMP("player_ckey", DB_EQUALS, ckey))
 	for(var/datum/view_record/note_view/N as anything in NL)
@@ -43,12 +57,11 @@
 			if(NOTE_WHITELIST)
 				color = "#324da5"
 
-		dat += "<font color=[color]>[N.text]</font> <i>by [admin_ckey] ([N.admin_rank])</i> on <i><font color=blue>[N.date] [NOTE_ROUND_ID(N)]</i></font> "
-		dat += "<br><br>"
+		dat += "<tr><td><font color=[color]>[N.text]</font> <i>by [admin_ckey] ([N.admin_rank])</i> on <i><font color=blue>[N.date] [NOTE_ROUND_ID(N)]</i></font> "
+		dat += "</td></tr>"
 
-	dat += "<br>"
+	dat += "</table>"
 
-	dat += "</body></html>"
 	show_browser(usr, dat, "Your [category_text] Record", "ownrecords", "size=480x480")
 
 
@@ -111,8 +124,22 @@
 		to_chat(usr, "Error: notes not yet migrated for that key. Please try again in 5 minutes.")
 		return
 
-	var/dat = "<html>"
-	dat += "<body>"
+	var/dat = {"
+	<table width='100%'>
+	<tr>
+	<td width='20%'>
+	<div align='center'>
+	<b>Search:</b>
+	</div>
+	</td>
+	<td width='80%'>
+	<input type='search' id='filter' onkeyup='handle_filter()' onblur='handle_filter()' name='filter_text' value='' style='width:99%;'>
+	</td>
+	</tr>
+	</table>
+	<br>
+	<table border=0 rules=all frame=void cellspacing=0 cellpadding=3 id='searchable'>
+	"}
 
 	var/color = "#008800"
 	var/add_dat = "<A href='byond://?src=\ref[admin_holder];[HrefToken()];add_player_info=[target]'>Add Admin Note</A><br><A href='byond://?src=\ref[admin_holder];[HrefToken()];add_player_info_confidential=[target]'>Add Confidential Admin Note</A><br>"
@@ -134,18 +161,17 @@
 			continue
 		var/admin_ckey = N.admin_ckey
 
-		dat += "<font color=[color]>[N.text]</font> <i>by [admin_ckey] ([N.admin_rank])</i> on <i><font color=blue>[N.date] [NOTE_ROUND_ID(N)]</i></font> "
+		dat += "<tr><td><font color=[color]>[N.text]</font> <i>by [admin_ckey] ([N.admin_rank])</i> on <i><font color=blue>[N.date] [NOTE_ROUND_ID(N)]</i></font> "
 		///Can remove notes from anyone other than yourself, unless you're the host. So long as you have deletion access anyway.
 		if((can_del && target != get_player_from_key(key)) || ishost(usr))
 			dat += "<A href='byond://?_src_=admin_holder;[HrefToken(forceGlobal = TRUE)];remove_wl_info=[key];remove_index=[N.id]'>Remove</A>"
 
-		dat += "<br><br>"
+		dat += "</td></tr>"
 
-	dat += "<br>"
+	dat += "</table><br>"
 	if(can_edit || ishost(src))
 		dat += add_dat
 
-	dat += "</body></html>"
 	show_browser(src, dat, "[target]'s [category_text] Notes", "otherplayersinfo", "size=480x480")
 
 GLOBAL_DATUM_INIT(medals_view_tgui, /datum/medals_view_tgui, new)

diff --git a/code/modules/admin/NewBan.dm b/code/modules/admin/NewBan.dm
@@ -168,7 +168,14 @@ GLOBAL_DATUM(Banlist, /savefile)
 		return timeleftstring
 
 /datum/admins/proc/unbanpanel()
-	var/dat
+	var/data = {"
+	<B>Bans:</B> <span class='[INTERFACE_BLUE]'>(UP) = Unban Perma (UT) = Unban Timed"
+	</span> - <span class='[INTERFACE_GREEN]'>Ban Listing</span>
+	<br>
+	<input type='search' id='filter' onkeyup='handle_filter()' onblur='handle_filter()' name='filter_text' value='' style='width:100%;'>
+	<br>
+	<table border=1 rules=all frame=void cellspacing=0 cellpadding=3 id='searchable'>
+	"}
 
 	var/list/datum/view_record/players/PBV = DB_VIEW(/datum/view_record/players, DB_OR(DB_COMP("is_permabanned", DB_EQUALS, 1), DB_COMP("is_time_banned", DB_EQUALS, 1))) // a filter
 
@@ -186,18 +193,23 @@ GLOBAL_DATUM(Banlist, /savefile)
 		else
 			unban_link = "<A href='byond://?src=\ref[src];[HrefToken(forceGlobal = TRUE)];unbanf=[ban.ckey]'>(UT)</A>"
 
-		dat += "<tr><td>[unban_link] Key: <B>[ban.ckey]</B></td><td>ComputerID: <B>[ban.last_known_cid]</B></td><td>IP: <B>[ban.last_known_ip]</B></td><td> [expiry]</td><td>(By: [ban.admin ? ban.admin : "AdminBot"])</td><td>(Reason: [ban.reason])</td></tr>"
+		data += "<tr><td>[unban_link] Key: <B>[ban.ckey]</B></td><td>ComputerID: <B>[ban.last_known_cid]</B></td><td>IP: <B>[ban.last_known_ip]</B></td><td> [expiry]</td><td>(By: [ban.admin ? ban.admin : "AdminBot"])</td><td>(Reason: [ban.reason])</td></tr>"
 
-	dat += "</table>"
-	var/dat_header = "<HR><B>Bans:</B> <span class='[INTERFACE_BLUE]'>(UP) = Unban Perma (UT) = Unban Timed"
-	dat_header += "</span> - <span class='[INTERFACE_GREEN]'>Ban Listing</span><HR><table border=1 rules=all frame=void cellspacing=0 cellpadding=3 >[dat]"
-	show_browser(usr, dat_header, "Unban Panel", "unbanp", "size=875x400")
+	data += "</table>"
+
+	show_browser(usr, data, "Unban Panel", "unbanp", "size=875x400")
 
 /datum/admins/proc/stickypanel()
 	var/add_sticky = "<a href='byond://?src=\ref[src];[HrefToken()];sticky=1;new_sticky=1'>Add Sticky Ban</a>"
 	var/find_sticky = "<a href='byond://?src=\ref[src];[HrefToken()];sticky=1;find_sticky=1'>Find Sticky Ban</a>"
 
-	var/data = "<hr><b>Sticky Bans:</b> [add_sticky] [find_sticky] <table border=1 rules=all frame=void cellspacing=0 cellpadding=3>"
+	var/data = {"
+	<b>Sticky Bans:</b> [add_sticky] [find_sticky]
+	<br>
+	<input type='search' id='filter' onkeyup='handle_filter()' onblur='handle_filter()' name='filter_text' value='' style='width:100%;'>
+	<br>
+	<table border=1 rules=all frame=void cellspacing=0 cellpadding=3 id='searchable'>
+	"}
 
 	var/list/datum/view_record/stickyban/stickies = DB_VIEW(/datum/view_record/stickyban,
 		DB_COMP("active", DB_EQUALS, TRUE)

diff --git a/code/modules/admin/player_panel/player_panel.dm b/code/modules/admin/player_panel/player_panel.dm
@@ -172,7 +172,7 @@
 			</tr>
 			<tr id='search_tr'>
 				<td align='center'>
-					<b>Search:</b> <input type='text' id='filter' value='' onkeyup='updateSearch();' style='width:300px;'>
+					<b>Search:</b> <input type='search' id='filter' value='' onkeyup='updateSearch()' onblur='updateSearch()' style='width:300px;'>
 				</td>
 			</tr>
 		</table>
@@ -269,7 +269,7 @@
 	</body></html>
 	"}
 
-	show_browser(usr, dat, "User Panel", "players", "size=600x480")
+	show_browser(usr, dat, "User Panel", "players", "size=640x480")
 
 //Extended panel with ban related things
 /datum/admins/proc/player_panel_extended()
@@ -321,60 +321,51 @@
 		alert("The game hasn't started yet!")
 		return
 
-	var/dat = "<html><body><h1><B>Antagonists</B></h1>"
-	dat += "Current Game Mode: <B>[SSticker.mode.name]</B><BR>"
-	dat += "Round Duration: <B>[floor(world.time / 36000)]:[add_zero(world.time / 600 % 60, 2)]:[world.time / 100 % 6][world.time / 100 % 10]</B><BR>"
+	var/dat = {"
+	Current Game Mode: <b>[SSticker.mode.name]</b>
+	<br>
+	Round Duration: <b>[floor(world.time / 36000)]:[add_zero(world.time / 600 % 60, 2)]:[world.time / 100 % 6][world.time / 100 % 10]</b>
+	<br>
+	<input type='search' id='filter' onkeyup='handle_filter()' onblur='handle_filter()' name='filter_text' value='' style='width:100%;'>
+	<table rules=all frame=void border=0 cellspacing=5 cellpadding=3 id='searchable'>
+	"}
 
 	if(length(GLOB.other_factions_human_list))
-		dat += "<br><table cellspacing=5><tr><td><B>Other human factions</B></td><td></td><td></td></tr>"
+		dat += "<tr class='title'><td><h2>Other human factions</h2></td></tr>"
 		for(var/i in GLOB.other_factions_human_list)
 			var/mob/living/carbon/human/H = i
 			var/location = get_area(H.loc)
 			if(H)
 				dat += "<tr><td><A href='byond://?src=\ref[usr];priv_msg=[H.ckey]'>[H.real_name]</a>[H.client ? "" : " <i>(logged out)</i>"][H.stat == DEAD ? " <b><font color=red>(DEAD)</font></b>" : ""]</td>"
 				dat += "<td>[location]</td>"
 				dat += "<td>[H.faction]</td>"
-				dat += "<td><a href='byond://?src=\ref[usr];track=\ref[H]'>F</a></td>"
-				dat += "<td><a href='byond://?src=\ref[src];[HrefToken()];adminplayeropts=\ref[H]'>PP</a></td>"
-		dat += "</table>"
+				dat += "<td>[ADMIN_FLW(H)]</td>"
+				dat += "<td>[ADMIN_PP(H)]</tr>"
 
 	if(length(SSticker.mode.survivors))
-		dat += "<br><table cellspacing=5><tr><td><B>Survivors</B></td><td></td><td></td></tr>"
+		dat += "<tr class='title'><td><h2>Survivors</h2></td></tr>"
 		for(var/datum/mind/L in SSticker.mode.survivors)
 			var/mob/M = L.current
 			var/location = get_area(M.loc)
 			if(M)
 				dat += "<tr><td><A href='byond://?src=\ref[usr];priv_msg=[M.ckey]'>[M.real_name]</a>[M.client ? "" : " <i>(logged out)</i>"][M.stat == 2 ? " <b><font color=red>(DEAD)</font></b>" : ""]</td>"
 				dat += "<td>[location]</td>"
-				dat += "<td><a href='byond://?src=\ref[usr];track=\ref[M]'>F</a></td>"
-				dat += "<td><A href='byond://?src=\ref[src];[HrefToken()];adminplayeropts=\ref[M]'>PP</A></td></TR>"
-		dat += "</table>"
+				dat += "<td>[ADMIN_FLW(M)]</td>"
+				dat += "<td>[ADMIN_PP(M)]</tr>"
 
 	if(length(SSticker.mode.xenomorphs))
-		dat += "<br><table cellspacing=5><tr><td><B>Aliens</B></td><td></td><td></td></tr>"
+		dat += "<tr class='title'><td><h2>Aliens</h2></td></tr>"
 		for(var/datum/mind/L in SSticker.mode.xenomorphs)
 			var/mob/M = L.current
 			if(M)
 				var/location = get_area(M.loc)
 				dat += "<tr><td><A href='byond://?src=\ref[usr];priv_msg=[M.ckey]'>[M.real_name]</a>[M.client ? "" : " <i>(logged out)</i>"][M.stat == 2 ? " <b><font color=red>(DEAD)</font></b>" : ""]</td>"
 				dat += "<td>[location]</td>"
-				dat += "<td><a href='byond://?src=\ref[usr];track=\ref[M]'>F</a></td>"
-				dat += "<td><A href='byond://?src=\ref[src];[HrefToken()];adminplayeropts=\ref[M]'>PP</A></td></TR>"
-		dat += "</table>"
+				dat += "<td>[ADMIN_FLW(M)]</td>"
+				dat += "<td>[ADMIN_PP(M)]</tr>"
 
-	if(length(SSticker.mode.survivors))
-		dat += "<br><table cellspacing=5><tr><td><B>Survivors</B></td><td></td><td></td></tr>"
-		for(var/datum/mind/L in SSticker.mode.survivors)
-			var/mob/M = L.current
-			var/location = get_area(M.loc)
-			if(M)
-				dat += "<tr><td><A href='byond://?src=\ref[usr];priv_msg=[M.ckey]'>[M.real_name]</a>[M.client ? "" : " <i>(logged out)</i>"][M.stat == 2 ? " <b><font color=red>(DEAD)</font></b>" : ""]</td>"
-				dat += "<td>[location]</td>"
-				dat += "<td><a href='byond://?src=\ref[usr];track=\ref[M]'>F</a></td>"
-				dat += "<td><A href='byond://?src=\ref[src];[HrefToken()];adminplayeropts=\ref[M]'>PP</A></td></TR>"
-		dat += "</table>"
+	dat += "</table>"
 
-	dat += "</body></html>"
 	show_browser(usr, dat, "Antagonists", "antagonists", "size=600x500")
 
 /datum/admins/proc/check_round_status()

diff --git a/code/modules/admin/tabs/admin_tab.dm b/code/modules/admin/tabs/admin_tab.dm
@@ -153,8 +153,22 @@
 		to_chat(usr, "Error: notes not yet migrated for that key. Please try again in 5 minutes.")
 		return
 
-	var/dat = "<html>"
-	dat += "<body>"
+	var/dat = {"
+	<table width='100%'>
+	<tr>
+	<td width='20%'>
+	<div align='center'>
+	<b>Search:</b>
+	</div>
+	</td>
+	<td width='80%'>
+	<input type='search' id='filter' onkeyup='handle_filter()' onblur='handle_filter()' name='filter_text' value='' style='width:99%;'>
+	</td>
+	</tr>
+	</table>
+	<br>
+	<table border=0 rules=all frame=void cellspacing=0 cellpadding=3 id='searchable'>
+	"}
 
 	var/list/datum/view_record/note_view/NL = DB_VIEW(/datum/view_record/note_view, DB_COMP("player_ckey", DB_EQUALS, key))
 	for(var/datum/view_record/note_view/N as anything in NL)
@@ -166,20 +180,19 @@
 		if(N.is_ban)
 			var/ban_text = N.ban_time ? "Banned for [N.ban_time] | " : ""
 			color = "#880000"
-			dat += "<font color=[color]>[ban_text][N.text]</font> <i>by [admin_ckey] ([N.admin_rank])</i>[confidential_text] on <i><font color=blue>[N.date] [NOTE_ROUND_ID(N)]</i></font> "
+			dat += "<tr><td><font color=[color]>[ban_text][N.text]</font> <i>by [admin_ckey] ([N.admin_rank])</i>[confidential_text] on <i><font color=blue>[N.date] [NOTE_ROUND_ID(N)]</i></font> "
 		else
 			if(N.is_confidential)
 				color = "#AA0055"
 
-			dat += "<font color=[color]>[N.text]</font> <i>by [admin_ckey] ([N.admin_rank])</i>[confidential_text] on <i><font color=blue>[N.date] [NOTE_ROUND_ID(N)]</i></font> "
-		dat += "<br><br>"
+			dat += "<tr><td><font color=[color]>[N.text]</font> <i>by [admin_ckey] ([N.admin_rank])</i>[confidential_text] on <i><font color=blue>[N.date] [NOTE_ROUND_ID(N)]</i></font> "
+		dat += "</td></tr>"
 
-	dat += "<br>"
+	dat += "</table><br>"
 	dat += "<A href='byond://?src=\ref[src];[HrefToken()];add_player_info=[key]'>Add Note</A><br>"
 	dat += "<A href='byond://?src=\ref[src];[HrefToken()];add_player_info_confidential=[key]'>Add Confidential Note</A><br>"
 	dat += "<A href='byond://?src=\ref[src];[HrefToken()];player_notes_all=[key]'>Show Complete Record</A><br>"
 
-	dat += "</body></html>"
 	show_browser(usr, dat, "Admin record for [key]", "adminplayerinfo", "size=480x480")
 
 /datum/admins/proc/check_ckey(target_key as text)

diff --git a/code/modules/admin/view_variables/view_variables.dm b/code/modules/admin/view_variables/view_variables.dm
@@ -106,7 +106,7 @@
 		<link rel="stylesheet" type="text/css" href="[SSassets.transport.get_asset_url("view_variables.css")]">
 		<link rel="stylesheet" type="text/css" href="[SSassets.transport.get_asset_url("common.css")]">
 	</head>
-	<body onload='selectTextField()' onkeydown='return handle_keydown()' onkeyup='handle_keyup()'>
+	<body onload='selectTextField()' onkeydown='return handle_keydown()'>
 		<script type="text/javascript">
 			// onload
 			function selectTextField() {
@@ -256,7 +256,7 @@
 					</div>
 				</td>
 				<td width='80%'>
-					<input type='text' id='filter' name='filter_text' value='' style='width:100%;'>
+					<input type='search' id='filter' name='filter_text' value='' onkeyup='handle_keyup()' onblur='handle_keyup()' style='width:100%;'>
 				</td>
 			</tr>
 		</table>

diff --git a/html/search.js b/html/search.js
@@ -1,12 +1,23 @@
-function selectTextField(){
+function selectFilterField(){
 	var filter_text = document.getElementById('filter');
+	if(!filter_text) {
+		return;
+	}
 	filter_text.focus();
 	filter_text.select();
 }
-function updateSearch(){
+var last_filter = "";
+function updateFilter(){
 	var input_form = document.getElementById('filter');
+	if(!input_form) {
+		return;
+	}
 	var filter = input_form.value.toLowerCase();
 	input_form.value = filter;
+	if (filter === last_filter) {
+		// An event triggered an update but nothing has changed.
+		return;
+	}
 	var table = document.getElementById('searchable');
 	var alt_style = 'norm';
 	for(var i = 0; i < table.rows.length; i++){
@@ -30,4 +41,10 @@ function updateSearch(){
 			}
 		}catch(err) { }
 	}
-}
+
+	last_filter = filter;
+}
+// onkeyup because somereason updateFilter directly won't work
+function handle_filter() {
+	updateFilter();
+}