fix(web): fix settings handling

web/public/js/tdbms-load.js

@@ -0,0 +1,7 @@
+var db_name = localStorage["db_name"];
+
+$(window).on("load", function (e) {
+	if (db_name != null) {
+		$(".db_name").text(db_name);
+	}
+});

web/public/js/tdbms-settings.js

@@ -1,32 +1,34 @@
-var db_name = localStorage["db_name"];
-
 function settings_load() {
 	if (db_name != null) {
-		$("#db_name").val(db_name);
+		$(`#db_name option[value="${db_name}"]`).prop("selected", true);
 	} else {
-		$("#db_name").val("");
+		$("#db_name option[value=\"\"]").prop("selected", true);
 	}
 	if (sort_sasa != null) {
-		if (sort_sasa[0] === '-') {
+		let sort_s = sort_sasa;
-			$("#sasa-reverse").prop("checked", true);
+		if (sort_s[0] === '!') {
-			sort_sasa = sort_sasa.slice(1);
+			sort_s = sort_s.slice(1);
 		}
-		$(`#sasa-by-${sort_sasa}`).prop("checked", true);
+		if (sort_s[0] === '-') {
+			$("#sasa-reverse").prop("checked", true);
+			sort_s = sort_s.slice(1);
+		}
+		$(`#sasa-by-${sort_s}`).prop("checked", true);
 	}
 	if (sort_tanzaku != null) {
-		if (sort_tanzaku[0] === '-') {
+		let sort_t = sort_tanzaku;
-			$("#tanzaku-reverse").prop("checked", true);
+		if (sort_t[0] === '!') {
-			sort_tanzaku = sort_tanzaku.slice(1);
+			sort_t = sort_t.slice(1);
 		}
-		$(`#tanzaku-by-${sort_tanzaku}`).prop("checked", true);
+		if (sort_t[0] === '-') {
+			$("#tanzaku-reverse").prop("checked", true);
+			sort_t = sort_t.slice(1);
+		}
+		$(`#tanzaku-by-${sort_t}`).prop("checked", true);
 	}
 }
 
 $(window).on("load", function () {
-	settings_load();
-	if (db_name != null) {
-		$(".db_name").text(db_name);
-	}
 	let resp = tdb_query();
 	if (!resp.status) {
 		alert("Failed to fetch databases");
@@ -39,6 +41,7 @@ $(window).on("load", function () {
 		}));
 		return true;
 	});
+	settings_load();
 });
 
 $(document).on("reset", "#settings", function (e) {

web/public/js/tfm-management.js

@@ -2,6 +2,14 @@ db_name = localStorage["tfm_db_name"];
 if (db_name == null) {
 	location.href = "/tfm/settings";
 }
+sort_sasa = localStorage["sort_files"];
+sort_tanzaku = localStorage["sort_tags"];
+if (sort_sasa == null) {
+	localStorage["sort_files"] = sort_sasa = "id";
+}
+if (sort_tanzaku == null) {
+	localStorage["sort_tags"] = sort_tanzaku = "id";
+}
 var current_sasa = null, current_tanzaku = null;
 var current_sasa_index = -1;
 var menu_count = 0;

web/public/js/tfm-settings.js

@@ -10,27 +10,47 @@ if (sort_tanzaku == null) {
 
 function settings_load() {
 	if (db_name != null) {
-		$("#db_name").val(db_name);
+		$(`#db_name option[value="${db_name}"]`).prop("selected", true);
 	} else {
-		$("#db_name").val("");
+		$("#db_name option[value=\"\"]").prop("selected", true);
 	}
 	if (sort_sasa != null) {
-		if (sort_sasa[0] === '-') {
+		let sort_s = sort_sasa;
-			$("#files-reverse").prop("checked", true);
+		if (sort_s[0] === '!') {
-			sort_sasa = sort_sasa.slice(1);
+			sort_s = sort_s.slice(1);
 		}
-		$(`#files-by-${sort_sasa}`).prop("checked", true);
+		if (sort_s[0] === '-') {
+			$("#files-reverse").prop("checked", true);
+			sort_s = sort_s.slice(1);
+		}
+		$(`#files-by-${sort_s}`).prop("checked", true);
 	}
 	if (sort_tanzaku != null) {
-		if (sort_tanzaku[0] === '-') {
+		let sort_t = sort_tanzaku;
-			$("#tags-reverse").prop("checked", true);
+		if (sort_t[0] === '!') {
-			sort_tanzaku = sort_tanzaku.slice(1);
+			sort_t = sort_t.slice(1);
 		}
-		$(`#tags-by-${sort_tanzaku}`).prop("checked", true);
+		if (sort_t[0] === '-') {
+			$("#tags-reverse").prop("checked", true);
+			sort_t = sort_t.slice(1);
+		}
+		$(`#tags-by-${sort_t}`).prop("checked", true);
 	}
 }
 
 $(window).on("load", function () {
+	let resp = tdb_query();
+	if (!resp.status) {
+		alert("Failed to fetch databases");
+		throw new Error("Failed to fetch databases");
+	}
+	resp.data.every(tdb => {
+		$("#db_name").append($("<option>", {
+			value: tdb.name,
+			text: tdb.name
+		}));
+		return true;
+	});
 	settings_load();
 });
 

web/public/tdbms/index.html

@@ -25,7 +25,7 @@
 	<link rel="stylesheet" href="/css/general.css">
 	<script src="/js/jquery-3.6.0.min.js"></script>
 	<script src="/js/tdbms.js"></script>
-	<script src="/js/tdbms-settings.js"></script>
+	<script src="/js/tdbms-load.js"></script>
 </head>
 <body>
 <h1>Tanabata Database Management</h1>

web/public/tdbms/sappyou.html

@@ -25,6 +25,7 @@
 	<link rel="stylesheet" href="/css/tdbms.css">
 	<script src="/js/jquery-3.6.0.min.js"></script>
 	<script src="/js/tdbms.js"></script>
+	<script src="/js/tdbms-load.js"></script>
 </head>
 <body>
 <h1><a href="/tdbms"><span class="db_name"></span>: sappyou</a></h1>

web/public/tdbms/sasahyou.html

@@ -25,6 +25,7 @@
 	<link rel="stylesheet" href="/css/tdbms.css">
 	<script src="/js/jquery-3.6.0.min.js"></script>
 	<script src="/js/tdbms.js"></script>
+	<script src="/js/tdbms-load.js"></script>
 </head>
 <body>
 <h1><a href="/tdbms"><span class="db_name"></span>: sasahyou</a></h1>

web/public/tdbms/settings.html

@@ -24,6 +24,7 @@
 	<link rel="stylesheet" href="/css/general.css">
 	<script src="/js/jquery-3.6.0.min.js"></script>
 	<script src="/js/tdbms.js"></script>
+	<script src="/js/tdbms-load.js"></script>
 </head>
 <body>
 <h1>TDBMS: Settings</h1>
@@ -32,7 +33,9 @@
 		<form id="settings">
 			<div class="form-group">
 				<label for="db_name">Database name</label>
-				<select name="db_name" id="db_name" class="form-select form-select-sm"></select>
+				<select name="db_name" id="db_name" class="form-select form-select-sm">
+					<option value=""></option>
+				</select>
 			</div>
 			<table class="form-group">
 				<tr>

web/public/tdbms/shoppyou.html

@@ -25,6 +25,7 @@
 	<link rel="stylesheet" href="/css/tdbms.css">
 	<script src="/js/jquery-3.6.0.min.js"></script>
 	<script src="/js/tdbms.js"></script>
+	<script src="/js/tdbms-load.js"></script>
 </head>
 <body>
 <h1><a href="/tdbms"><span class="db_name"></span>: shoppyou</a></h1>

web/public/tdbms/stats.html

@@ -25,6 +25,7 @@
 	<link rel="stylesheet" href="/css/tdbms.css">
 	<script src="/js/jquery-3.6.0.min.js"></script>
 	<script src="/js/tdbms.js"></script>
+	<script src="/js/tdbms-load.js"></script>
 </head>
 <body>
 <h1><a href="/tdbms"><span class="db_name"></span>: stats</a></h1>

web/public/tfm/settings.html

@@ -32,8 +32,9 @@
 		<form id="settings">
 			<div class="form-group">
 				<label for="db_name">Database name</label>
-				<input type="text" name="db_name" class="form-control" id="db_name" placeholder="Enter TFM database name">
+				<select name="db_name" id="db_name" class="form-select form-select-sm">
-				<div class="invalid-feedback">Database not found</div>
+					<option value=""></option>
+				</select>
 			</div>
 			<table class="form-group">
 				<tr>