From ba5418dc39ff66da5b1a1ce849972305d6c40e69 Mon Sep 17 00:00:00 2001
From: Masahiko AMANO <hiko-19@ya.ru>
Date: Wed, 15 Feb 2023 15:19:08 +0300
Subject: [PATCH] feat(web): add database management interface

---
 web/public/css/tdbms.css          |  46 +++++++++++++
 web/public/index.html             |   1 +
 web/public/js/tdbms-management.js |   8 +++
 web/public/js/tdbms-sappyou.js    |   9 +++
 web/public/js/tdbms-sasahyou.js   |   9 +++
 web/public/js/tdbms-settings.js   |  68 +++++++++++++++++++
 web/public/js/tdbms-shoppyou.js   |   9 +++
 web/public/js/tdbms-stats.js      |  16 +++++
 web/public/js/tdbms.js            |  28 ++++----
 web/public/js/tfm-settings.js     |  32 +++++----
 web/public/tdbms/index.html       |  52 +++++++++++++++
 web/public/tdbms/sappyou.html     |  47 +++++++++++++
 web/public/tdbms/sasahyou.html    |  45 +++++++++++++
 web/public/tdbms/settings.html    | 107 ++++++++++++++++++++++++++++++
 web/public/tdbms/shoppyou.html    |  45 +++++++++++++
 web/public/tdbms/stats.html       |  65 ++++++++++++++++++
 16 files changed, 561 insertions(+), 26 deletions(-)
 create mode 100644 web/public/css/tdbms.css
 create mode 100644 web/public/js/tdbms-management.js
 create mode 100644 web/public/js/tdbms-sappyou.js
 create mode 100644 web/public/js/tdbms-sasahyou.js
 create mode 100644 web/public/js/tdbms-settings.js
 create mode 100644 web/public/js/tdbms-shoppyou.js
 create mode 100644 web/public/js/tdbms-stats.js
 create mode 100644 web/public/tdbms/index.html
 create mode 100644 web/public/tdbms/sappyou.html
 create mode 100644 web/public/tdbms/sasahyou.html
 create mode 100644 web/public/tdbms/settings.html
 create mode 100644 web/public/tdbms/shoppyou.html
 create mode 100644 web/public/tdbms/stats.html

diff --git a/web/public/css/tdbms.css b/web/public/css/tdbms.css
new file mode 100644
index 0000000..70983d6
--- /dev/null
+++ b/web/public/css/tdbms.css
@@ -0,0 +1,46 @@
+html,
+body {
+	padding-bottom: 0;
+	padding-left: 0;
+	padding-right: 0;
+}
+
+main {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	max-width: 100vw;
+	background-color: #2c3034;
+	border-bottom-left-radius: 0;
+	border-bottom-right-radius: 0;
+}
+
+main:hover {
+	background-color: #2c3034;
+}
+
+.contents-wrapper {
+	padding: 0;
+	width: 100%;
+	height: 100%;
+	box-shadow: inset -5px 5px 5px #1111, inset -5px -5px 5px #1111;
+	overflow-y: scroll;
+	overflow-x: hidden;
+}
+
+.contents-wrapper:after {
+	content: "";
+	flex: auto;
+}
+
+.button-flex {
+	position: sticky;
+	position: -webkit-sticky;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	margin: 0;
+	padding-top: .5rem;
+	padding-bottom: .8rem;
+	background-color: #334;
+}
diff --git a/web/public/index.html b/web/public/index.html
index 23ef52b..c2f7235 100644
--- a/web/public/index.html
+++ b/web/public/index.html
@@ -32,6 +32,7 @@
 	<div class="contents-wrapper">
 		<a href="/auth" class="btn btn-primary">Authorize</a>
 		<a href="/tfm" class="btn btn-primary">File Manager</a>
+		<a href="/tdbms" class="btn btn-primary">Database Management</a>
 	</div>
 </main>
 </body>
diff --git a/web/public/js/tdbms-management.js b/web/public/js/tdbms-management.js
new file mode 100644
index 0000000..8f78a3c
--- /dev/null
+++ b/web/public/js/tdbms-management.js
@@ -0,0 +1,8 @@
+db_name = localStorage["db_name"];
+if (db_name == null) {
+	location.href = "/tdbms/settings";
+}
+
+$(window).on("load", function (e) {
+	$(".db_name").text(db_name);
+});
diff --git a/web/public/js/tdbms-sappyou.js b/web/public/js/tdbms-sappyou.js
new file mode 100644
index 0000000..7861619
--- /dev/null
+++ b/web/public/js/tdbms-sappyou.js
@@ -0,0 +1,9 @@
+$(window).on("load", function (e) {
+	sappyou_load();
+	sappyou.every(tanzaku => {
+		$("#content").append(
+			`<tr><td>${tanzaku.id}</td><td>${new Date(tanzaku.cts * 1000).toLocaleDateString()} ${new Date(tanzaku.cts * 1000).toLocaleTimeString()}</td><td>${new Date(tanzaku.mts * 1000).toLocaleDateString()} ${new Date(tanzaku.mts * 1000).toLocaleTimeString()}</td><td>${tanzaku.name}</td><td>${tanzaku.desc}</td></tr>`
+		);
+		return true;
+	});
+});
diff --git a/web/public/js/tdbms-sasahyou.js b/web/public/js/tdbms-sasahyou.js
new file mode 100644
index 0000000..7816f9d
--- /dev/null
+++ b/web/public/js/tdbms-sasahyou.js
@@ -0,0 +1,9 @@
+$(window).on("load", function (e) {
+	sasahyou_load();
+	sasahyou.every(sasa => {
+		$("#content").append(
+			`<tr><td>${sasa.id}</td><td>${new Date(sasa.cts * 1000).toLocaleDateString()} ${new Date(sasa.cts * 1000).toLocaleTimeString()}</td><td>${sasa.path}</td></tr>`
+		);
+		return true;
+	});
+});
diff --git a/web/public/js/tdbms-settings.js b/web/public/js/tdbms-settings.js
new file mode 100644
index 0000000..0e19f70
--- /dev/null
+++ b/web/public/js/tdbms-settings.js
@@ -0,0 +1,68 @@
+var db_name = localStorage["db_name"];
+
+function settings_load() {
+	if (db_name != null) {
+		$("#db_name").val(db_name);
+	} else {
+		$("#db_name").val("");
+	}
+	if (sort_sasa != null) {
+		if (sort_sasa[0] === '-') {
+			$("#sasa-reverse").prop("checked", true);
+			sort_sasa = sort_sasa.slice(1);
+		}
+		$(`#sasa-by-${sort_sasa}`).prop("checked", true);
+	}
+	if (sort_tanzaku != null) {
+		if (sort_tanzaku[0] === '-') {
+			$("#tanzaku-reverse").prop("checked", true);
+			sort_tanzaku = sort_tanzaku.slice(1);
+		}
+		$(`#tanzaku-by-${sort_tanzaku}`).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");
+		throw new Error("Failed to fetch databases");
+	}
+	resp.data.every(tdb => {
+		$("#db_name").append($("<option>", {
+			value: tdb.name,
+			text: tdb.name
+		}));
+		return true;
+	});
+});
+
+$(document).on("reset", "#settings", function (e) {
+	e.preventDefault();
+	settings_load();
+});
+
+$(document).on("submit", "#settings", function (e) {
+	e.preventDefault();
+	let db_name_input = $("#db_name");
+	let db_name_val = db_name_input.val();
+	if (db_name_val !== db_name) {
+		localStorage["db_name"] = db_name = db_name_val;
+		localStorage["sasahyou_mts"] = sasahyou_mts = 0;
+		localStorage["sappyou_mts"] = sappyou_mts = 0;
+		localStorage["shoppyou_mts"] = shoppyou_mts = 0;
+	}
+	let sort_s = ($("#sasa-reverse")[0].checked ? '-' : '') + $("input[type=radio][name=sort-sasa]:checked").attr("id").slice(8);
+	let sort_t = ($("#tanzaku-reverse")[0].checked ? '-' : '') + $("input[type=radio][name=sort-tanzaku]:checked").attr("id").slice(11);
+	if (sort_s !== sort_sasa && '!' + sort_s !== sort_sasa) {
+		localStorage["sort_sasa"] = sort_sasa = '!' + sort_s;
+	}
+	if (sort_t !== sort_tanzaku && '!' + sort_t !== sort_tanzaku) {
+		localStorage["sort_tanzaku"] = sort_tanzaku = '!' + sort_t;
+	}
+	alert("Successfully updated settings!");
+});
diff --git a/web/public/js/tdbms-shoppyou.js b/web/public/js/tdbms-shoppyou.js
new file mode 100644
index 0000000..978dabc
--- /dev/null
+++ b/web/public/js/tdbms-shoppyou.js
@@ -0,0 +1,9 @@
+$(window).on("load", function (e) {
+	shoppyou_load();
+	shoppyou.every(kazari => {
+		$("#content").append(
+			`<tr><td>${new Date(kazari.cts * 1000).toLocaleDateString()} ${new Date(kazari.cts * 1000).toLocaleTimeString()}</td><td>${kazari.sasa_id}</td><td>${kazari.tanzaku_id}</td></tr>`
+		);
+		return true;
+	});
+});
diff --git a/web/public/js/tdbms-stats.js b/web/public/js/tdbms-stats.js
new file mode 100644
index 0000000..e0d7ac4
--- /dev/null
+++ b/web/public/js/tdbms-stats.js
@@ -0,0 +1,16 @@
+$(window).on("load", function (e) {
+	let resp = tdb_query(db_name);
+	if (!resp.status) {
+		alert("Failed to fetch database");
+		throw new Error("Failed to fetch database");
+	}
+	$("#stats-sasahyou").append(
+		`<tr><td>${new Date(resp.data[0].sasahyou.cts * 1000).toLocaleDateString()} ${new Date(resp.data[0].sasahyou.cts * 1000).toLocaleTimeString()}</td><td>${new Date(resp.data[0].sasahyou.mts * 1000).toLocaleDateString()} ${new Date(resp.data[0].sasahyou.mts * 1000).toLocaleTimeString()}</td><td>${resp.data[0].sasahyou.size}</td><td>${resp.data[0].sasahyou.holes}</td></tr>`
+	);
+	$("#stats-sappyou").append(
+		`<tr><td>${new Date(resp.data[0].sappyou.cts * 1000).toLocaleDateString()} ${new Date(resp.data[0].sappyou.cts * 1000).toLocaleTimeString()}</td><td>${new Date(resp.data[0].sappyou.mts * 1000).toLocaleDateString()} ${new Date(resp.data[0].sappyou.mts * 1000).toLocaleTimeString()}</td><td>${resp.data[0].sappyou.size}</td><td>${resp.data[0].sappyou.holes}</td></tr>`
+	);
+	$("#stats-shoppyou").append(
+		`<tr><td>${new Date(resp.data[0].shoppyou.cts * 1000).toLocaleDateString()} ${new Date(resp.data[0].shoppyou.cts * 1000).toLocaleTimeString()}</td><td>${new Date(resp.data[0].shoppyou.mts * 1000).toLocaleDateString()} ${new Date(resp.data[0].shoppyou.mts * 1000).toLocaleTimeString()}</td><td>${resp.data[0].shoppyou.size}</td><td>${resp.data[0].shoppyou.holes}</td></tr>`
+	);
+});
diff --git a/web/public/js/tdbms.js b/web/public/js/tdbms.js
index edda0a1..04c614b 100644
--- a/web/public/js/tdbms.js
+++ b/web/public/js/tdbms.js
@@ -2,8 +2,8 @@ var db_name = null;
 var sasahyou = localStorage["sasahyou"],
 	sappyou = localStorage["sappyou"],
 	shoppyou = localStorage["shoppyou"];
-var sort_files = localStorage["sort_files"],
-	sort_tags = localStorage["sort_tags"];
+var sort_sasa = localStorage["sort_sasa"],
+	sort_tanzaku = localStorage["sort_tanzaku"];
 if (sasahyou != null) {
 	sasahyou = JSON.parse(sasahyou);
 }
@@ -25,11 +25,11 @@ if (sappyou_mts != null) {
 if (shoppyou_mts != null) {
 	shoppyou_mts = parseInt(shoppyou_mts);
 }
-if (sort_files == null) {
-	localStorage["sort_files"] = sort_files = "id";
+if (sort_sasa == null) {
+	localStorage["sort_sasa"] = sort_sasa = "id";
 }
-if (sort_tags == null) {
-	localStorage["sort_tags"] = sort_tags = "id";
+if (sort_tanzaku == null) {
+	localStorage["sort_tanzaku"] = sort_tanzaku = "id";
 }
 
 function tdb_query(trdb, trc, trb) {
@@ -81,8 +81,8 @@ function sasahyou_load() {
 		sasahyou = resp.data;
 		localStorage["sasahyou_mts"] = sasahyou_mts = db_info.data[0].sasahyou.mts;
 		localStorage["sasahyou"] = JSON.stringify(sasahyou);
-		if (sort_files[0] !== '!') {
-			sort_files = '!' + sort_files;
+		if (sort_sasa[0] !== '!') {
+			sort_sasa = '!' + sort_sasa;
 		}
 	}
 	sasahyou_sort();
@@ -103,8 +103,8 @@ function sappyou_load() {
 		sappyou = resp.data;
 		localStorage["sappyou_mts"] = sappyou_mts = db_info.data[0].sappyou.mts;
 		localStorage["sappyou"] = JSON.stringify(sappyou);
-		if (sort_tags[0] !== '!') {
-			sort_tags = '!' + sort_tags;
+		if (sort_tanzaku[0] !== '!') {
+			sort_tanzaku = '!' + sort_tanzaku;
 		}
 	}
 	sappyou_sort();
@@ -129,10 +129,10 @@ function shoppyou_load() {
 }
 
 function sasahyou_sort() {
-	if (sort_files[0] !== '!') {
+	if (sort_sasa[0] !== '!') {
 		return;
 	}
-	let sort = localStorage["sort_files"] = sort_files = sort_files.slice(1);
+	let sort = localStorage["sort_sasa"] = sort_sasa = sort_sasa.slice(1);
 	let order = 1;
 	if (sort[0] === '-') {
 		order = -1;
@@ -152,10 +152,10 @@ function sasahyou_sort() {
 }
 
 function sappyou_sort() {
-	if (sort_tags[0] !== '!') {
+	if (sort_tanzaku[0] !== '!') {
 		return;
 	}
-	let sort = localStorage["sort_tags"] = sort_tags = sort_tags.slice(1);
+	let sort = localStorage["sort_tanzaku"] = sort_tanzaku = sort_tanzaku.slice(1);
 	let order = 1;
 	if (sort[0] === '-') {
 		order = -1;
diff --git a/web/public/js/tfm-settings.js b/web/public/js/tfm-settings.js
index 425211a..048e4a8 100644
--- a/web/public/js/tfm-settings.js
+++ b/web/public/js/tfm-settings.js
@@ -1,4 +1,12 @@
 var db_name = localStorage["tfm_db_name"];
+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";
+}
 
 function settings_load() {
 	if (db_name != null) {
@@ -6,19 +14,19 @@ function settings_load() {
 	} else {
 		$("#db_name").val("");
 	}
-	if (sort_files != null) {
-		if (sort_files[0] === '-') {
+	if (sort_sasa != null) {
+		if (sort_sasa[0] === '-') {
 			$("#files-reverse").prop("checked", true);
-			sort_files = sort_files.slice(1);
+			sort_sasa = sort_sasa.slice(1);
 		}
-		$(`#files-by-${sort_files}`).prop("checked", true);
+		$(`#files-by-${sort_sasa}`).prop("checked", true);
 	}
-	if (sort_tags != null) {
-		if (sort_tags[0] === '-') {
+	if (sort_tanzaku != null) {
+		if (sort_tanzaku[0] === '-') {
 			$("#tags-reverse").prop("checked", true);
-			sort_tags = sort_tags.slice(1);
+			sort_tanzaku = sort_tanzaku.slice(1);
 		}
-		$(`#tags-by-${sort_tags}`).prop("checked", true);
+		$(`#tags-by-${sort_tanzaku}`).prop("checked", true);
 	}
 }
 
@@ -61,11 +69,11 @@ $(document).on("submit", "#settings", function (e) {
 	}
 	let sort_f = ($("#files-reverse")[0].checked ? '-' : '') + $("input[type=radio][name=sort-files]:checked").attr("id").slice(9);
 	let sort_t = ($("#tags-reverse")[0].checked ? '-' : '') + $("input[type=radio][name=sort-tags]:checked").attr("id").slice(8);
-	if (sort_f !== sort_files && '!' + sort_f !== sort_files) {
-		localStorage["sort_files"] = sort_files = '!' + sort_f;
+	if (sort_f !== sort_sasa && '!' + sort_f !== sort_sasa) {
+		localStorage["sort_files"] = sort_sasa = '!' + sort_f;
 	}
-	if (sort_t !== sort_tags && '!' + sort_t !== sort_tags) {
-		localStorage["sort_tags"] = sort_tags = '!' + sort_t;
+	if (sort_t !== sort_tanzaku && '!' + sort_t !== sort_tanzaku) {
+		localStorage["sort_tags"] = sort_tanzaku = '!' + sort_t;
 	}
 	alert("Successfully updated settings!");
 });
diff --git a/web/public/tdbms/index.html b/web/public/tdbms/index.html
new file mode 100644
index 0000000..f6f5fe2
--- /dev/null
+++ b/web/public/tdbms/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Database Management | Tanabata</title>
+	<link rel="apple-touch-icon" sizes="57x57" href="/images/apple-icon-57x57.png">
+	<link rel="apple-touch-icon" sizes="60x60" href="/images/apple-icon-60x60.png">
+	<link rel="apple-touch-icon" sizes="72x72" href="/images/apple-icon-72x72.png">
+	<link rel="apple-touch-icon" sizes="76x76" href="/images/apple-icon-76x76.png">
+	<link rel="apple-touch-icon" sizes="114x114" href="/images/apple-icon-114x114.png">
+	<link rel="apple-touch-icon" sizes="120x120" href="/images/apple-icon-120x120.png">
+	<link rel="apple-touch-icon" sizes="144x144" href="/images/apple-icon-144x144.png">
+	<link rel="apple-touch-icon" sizes="152x152" href="/images/apple-icon-152x152.png">
+	<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-icon-180x180.png">
+	<link rel="icon" type="image/png" sizes="192x192" href="/images/android-icon-192x192.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="96x96" href="/images/favicon-96x96.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
+	<link rel="manifest" href="/tanabata.webmanifest">
+	<meta name="msapplication-TileColor" content="#615880">
+	<meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
+	<meta name="theme-color" content="#615880">
+	<link rel="stylesheet" href="/css/bootstrap.min.css">
+	<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>
+</head>
+<body>
+<h1>Tanabata Database Management</h1>
+<main>
+	<h2><span>TDB: 「<span class="db_name"><i>none</i></span>」</span></h2>
+	<div class="contents-wrapper">
+		<a href="/tdbms/stats" class="btn btn-primary">Stats</a>
+		<a href="/tdbms/sasahyou" class="btn btn-primary">Sasahyou</a>
+		<a href="/tdbms/sappyou" class="btn btn-primary">Sappyou</a>
+		<a href="/tdbms/shoppyou" class="btn btn-primary">Shoppyou</a>
+	</div>
+	<div class="contents-wrapper">
+		<button class="btn btn-outline-success" id="btn-save">Save database</button>
+		<button class="btn btn-outline-warning" id="btn-reload">Reload database</button>
+		<a href="/tdbms/new" class="btn btn-outline-info">Create database</a>
+		<button class="btn btn-outline-danger" id="btn-remove">Remove database</button>
+	</div>
+	<div class="contents-wrapper">
+		<a href="/" class="btn btn-secondary">Home</a>
+		<a href="/tdbms/settings" class="btn btn-secondary">Settings</a>
+	</div>
+</main>
+</body>
+</html>
\ No newline at end of file
diff --git a/web/public/tdbms/sappyou.html b/web/public/tdbms/sappyou.html
new file mode 100644
index 0000000..78a3455
--- /dev/null
+++ b/web/public/tdbms/sappyou.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Sappyou | Tanabata Database Management</title>
+	<link rel="apple-touch-icon" sizes="57x57" href="/images/apple-icon-57x57.png">
+	<link rel="apple-touch-icon" sizes="60x60" href="/images/apple-icon-60x60.png">
+	<link rel="apple-touch-icon" sizes="72x72" href="/images/apple-icon-72x72.png">
+	<link rel="apple-touch-icon" sizes="76x76" href="/images/apple-icon-76x76.png">
+	<link rel="apple-touch-icon" sizes="114x114" href="/images/apple-icon-114x114.png">
+	<link rel="apple-touch-icon" sizes="120x120" href="/images/apple-icon-120x120.png">
+	<link rel="apple-touch-icon" sizes="144x144" href="/images/apple-icon-144x144.png">
+	<link rel="apple-touch-icon" sizes="152x152" href="/images/apple-icon-152x152.png">
+	<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-icon-180x180.png">
+	<link rel="icon" type="image/png" sizes="192x192" href="/images/android-icon-192x192.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="96x96" href="/images/favicon-96x96.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
+	<link rel="manifest" href="/tanabata.webmanifest">
+	<meta name="msapplication-TileColor" content="#615880">
+	<meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
+	<meta name="theme-color" content="#615880">
+	<link rel="stylesheet" href="/css/bootstrap.min.css">
+	<link rel="stylesheet" href="/css/general.css">
+	<link rel="stylesheet" href="/css/tdbms.css">
+	<script src="/js/jquery-3.6.0.min.js"></script>
+	<script src="/js/tdbms.js"></script>
+</head>
+<body>
+<h1><a href="/tdbms"><span class="db_name"></span>: sappyou</a></h1>
+<main>
+	<div class="contents-wrapper">
+		<table class="table table-striped table-dark" id="content">
+			<tr>
+				<th>ID</th>
+				<th>Ctime</th>
+				<th>Mtime</th>
+				<th>Name</th>
+				<th>Description</th>
+			</tr>
+		</table>
+	</div>
+</main>
+<script src="/js/tdbms-management.js"></script>
+<script src="/js/tdbms-sappyou.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/web/public/tdbms/sasahyou.html b/web/public/tdbms/sasahyou.html
new file mode 100644
index 0000000..d763f32
--- /dev/null
+++ b/web/public/tdbms/sasahyou.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Sasahyou | Tanabata Database Management</title>
+	<link rel="apple-touch-icon" sizes="57x57" href="/images/apple-icon-57x57.png">
+	<link rel="apple-touch-icon" sizes="60x60" href="/images/apple-icon-60x60.png">
+	<link rel="apple-touch-icon" sizes="72x72" href="/images/apple-icon-72x72.png">
+	<link rel="apple-touch-icon" sizes="76x76" href="/images/apple-icon-76x76.png">
+	<link rel="apple-touch-icon" sizes="114x114" href="/images/apple-icon-114x114.png">
+	<link rel="apple-touch-icon" sizes="120x120" href="/images/apple-icon-120x120.png">
+	<link rel="apple-touch-icon" sizes="144x144" href="/images/apple-icon-144x144.png">
+	<link rel="apple-touch-icon" sizes="152x152" href="/images/apple-icon-152x152.png">
+	<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-icon-180x180.png">
+	<link rel="icon" type="image/png" sizes="192x192" href="/images/android-icon-192x192.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="96x96" href="/images/favicon-96x96.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
+	<link rel="manifest" href="/tanabata.webmanifest">
+	<meta name="msapplication-TileColor" content="#615880">
+	<meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
+	<meta name="theme-color" content="#615880">
+	<link rel="stylesheet" href="/css/bootstrap.min.css">
+	<link rel="stylesheet" href="/css/general.css">
+	<link rel="stylesheet" href="/css/tdbms.css">
+	<script src="/js/jquery-3.6.0.min.js"></script>
+	<script src="/js/tdbms.js"></script>
+</head>
+<body>
+<h1><a href="/tdbms"><span class="db_name"></span>: sasahyou</a></h1>
+<main>
+	<div class="contents-wrapper">
+		<table class="table table-striped table-dark" id="content">
+			<tr>
+				<th>ID</th>
+				<th>Ctime</th>
+				<th>Name</th>
+			</tr>
+		</table>
+	</div>
+</main>
+<script src="/js/tdbms-management.js"></script>
+<script src="/js/tdbms-sasahyou.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/web/public/tdbms/settings.html b/web/public/tdbms/settings.html
new file mode 100644
index 0000000..68ecc11
--- /dev/null
+++ b/web/public/tdbms/settings.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Settings | Tanabata Database Management</title>
+	<link rel="apple-touch-icon" sizes="57x57" href="/images/apple-icon-57x57.png">
+	<link rel="apple-touch-icon" sizes="60x60" href="/images/apple-icon-60x60.png">
+	<link rel="apple-touch-icon" sizes="72x72" href="/images/apple-icon-72x72.png">
+	<link rel="apple-touch-icon" sizes="76x76" href="/images/apple-icon-76x76.png">
+	<link rel="apple-touch-icon" sizes="114x114" href="/images/apple-icon-114x114.png">
+	<link rel="apple-touch-icon" sizes="120x120" href="/images/apple-icon-120x120.png">
+	<link rel="apple-touch-icon" sizes="144x144" href="/images/apple-icon-144x144.png">
+	<link rel="apple-touch-icon" sizes="152x152" href="/images/apple-icon-152x152.png">
+	<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-icon-180x180.png">
+	<link rel="icon" type="image/png" sizes="192x192" href="/images/android-icon-192x192.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="96x96" href="/images/favicon-96x96.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
+	<link rel="manifest" href="/tanabata.webmanifest">
+	<meta name="msapplication-TileColor" content="#615880">
+	<meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
+	<meta name="theme-color" content="#615880">
+	<link rel="stylesheet" href="/css/bootstrap.min.css">
+	<link rel="stylesheet" href="/css/general.css">
+	<script src="/js/jquery-3.6.0.min.js"></script>
+	<script src="/js/tdbms.js"></script>
+</head>
+<body>
+<h1>TDBMS: Settings</h1>
+<main>
+	<div class="contents-wrapper">
+		<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>
+			</div>
+			<table class="form-group">
+				<tr>
+					<td>
+						<fieldset class="form-group">
+							<legend>Sasa sorting</legend>
+							<div class="form-check">
+								<input type="radio" name="sort-sasa" id="sasa-by-id">
+								<label for="sasa-by-id">By ID</label>
+							</div>
+							<div class="form-check">
+								<input type="radio" name="sort-sasa" id="sasa-by-cts">
+								<label for="sasa-by-cts">By ctime</label>
+							</div>
+							<div class="form-check">
+								<input type="radio" name="sort-sasa" id="sasa-by-path">
+								<label for="sasa-by-path">By name</label>
+							</div>
+						</fieldset>
+					</td>
+					<td>
+						<fieldset class="form-group">
+							<legend>Tanzaku sorting</legend>
+							<div class="form-check">
+								<input type="radio" name="sort-tanzaku" id="tanzaku-by-id">
+								<label for="tanzaku-by-id">By ID</label>
+							</div>
+							<div class="form-check">
+								<input type="radio" name="sort-tanzaku" id="tanzaku-by-cts">
+								<label for="tanzaku-by-cts">By ctime</label>
+							</div>
+							<div class="form-check">
+								<input type="radio" name="sort-tanzaku" id="tanzaku-by-mts">
+								<label for="tanzaku-by-mts">By mtime</label>
+							</div>
+							<div class="form-check">
+								<input type="radio" name="sort-tanzaku" id="tanzaku-by-name">
+								<label for="tanzaku-by-name">By name</label>
+							</div>
+							<div class="form-check">
+								<input type="radio" name="sort-tanzaku" id="tanzaku-by-nkazari">
+								<label for="tanzaku-by-nkazari">By kazari count</label>
+							</div>
+						</fieldset>
+					</td>
+				</tr>
+				<tr>
+					<td>
+						<div class="form-group form-check">
+							<input type="checkbox" name="sort-sasa-reverse" class="form-check-input" id="sasa-reverse">
+							<label class="form-check-label" for="sasa-reverse">Reverse sorting</label>
+						</div>
+					</td>
+					<td>
+						<div class="form-group form-check">
+							<input type="checkbox" name="sort-tanzaku-reverse" class="form-check-input" id="tanzaku-reverse">
+							<label class="form-check-label" for="tanzaku-reverse">Reverse sorting</label>
+						</div>
+					</td>
+				</tr>
+			</table>
+			<div class="button-flex">
+				<button type="submit" class="btn btn-primary">Apply</button>
+				<a href="/tdbms" class="btn btn-outline-secondary">TDBMS home</a>
+				<button type="reset" class="btn btn-danger">Reset</button>
+			</div>
+		</form>
+	</div>
+</main>
+<script src="/js/tdbms-settings.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/web/public/tdbms/shoppyou.html b/web/public/tdbms/shoppyou.html
new file mode 100644
index 0000000..a5374d7
--- /dev/null
+++ b/web/public/tdbms/shoppyou.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Shoppyou | Tanabata Database Management</title>
+	<link rel="apple-touch-icon" sizes="57x57" href="/images/apple-icon-57x57.png">
+	<link rel="apple-touch-icon" sizes="60x60" href="/images/apple-icon-60x60.png">
+	<link rel="apple-touch-icon" sizes="72x72" href="/images/apple-icon-72x72.png">
+	<link rel="apple-touch-icon" sizes="76x76" href="/images/apple-icon-76x76.png">
+	<link rel="apple-touch-icon" sizes="114x114" href="/images/apple-icon-114x114.png">
+	<link rel="apple-touch-icon" sizes="120x120" href="/images/apple-icon-120x120.png">
+	<link rel="apple-touch-icon" sizes="144x144" href="/images/apple-icon-144x144.png">
+	<link rel="apple-touch-icon" sizes="152x152" href="/images/apple-icon-152x152.png">
+	<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-icon-180x180.png">
+	<link rel="icon" type="image/png" sizes="192x192" href="/images/android-icon-192x192.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="96x96" href="/images/favicon-96x96.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
+	<link rel="manifest" href="/tanabata.webmanifest">
+	<meta name="msapplication-TileColor" content="#615880">
+	<meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
+	<meta name="theme-color" content="#615880">
+	<link rel="stylesheet" href="/css/bootstrap.min.css">
+	<link rel="stylesheet" href="/css/general.css">
+	<link rel="stylesheet" href="/css/tdbms.css">
+	<script src="/js/jquery-3.6.0.min.js"></script>
+	<script src="/js/tdbms.js"></script>
+</head>
+<body>
+<h1><a href="/tdbms"><span class="db_name"></span>: shoppyou</a></h1>
+<main>
+	<div class="contents-wrapper">
+		<table class="table table-striped table-dark" id="content">
+			<tr>
+				<th>Ctime</th>
+				<th>Sasa ID</th>
+				<th>Tanzaku ID</th>
+			</tr>
+		</table>
+	</div>
+</main>
+<script src="/js/tdbms-management.js"></script>
+<script src="/js/tdbms-shoppyou.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/web/public/tdbms/stats.html b/web/public/tdbms/stats.html
new file mode 100644
index 0000000..d91384d
--- /dev/null
+++ b/web/public/tdbms/stats.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Stats | Tanabata Database Management</title>
+	<link rel="apple-touch-icon" sizes="57x57" href="/images/apple-icon-57x57.png">
+	<link rel="apple-touch-icon" sizes="60x60" href="/images/apple-icon-60x60.png">
+	<link rel="apple-touch-icon" sizes="72x72" href="/images/apple-icon-72x72.png">
+	<link rel="apple-touch-icon" sizes="76x76" href="/images/apple-icon-76x76.png">
+	<link rel="apple-touch-icon" sizes="114x114" href="/images/apple-icon-114x114.png">
+	<link rel="apple-touch-icon" sizes="120x120" href="/images/apple-icon-120x120.png">
+	<link rel="apple-touch-icon" sizes="144x144" href="/images/apple-icon-144x144.png">
+	<link rel="apple-touch-icon" sizes="152x152" href="/images/apple-icon-152x152.png">
+	<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-icon-180x180.png">
+	<link rel="icon" type="image/png" sizes="192x192" href="/images/android-icon-192x192.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="96x96" href="/images/favicon-96x96.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
+	<link rel="manifest" href="/tanabata.webmanifest">
+	<meta name="msapplication-TileColor" content="#615880">
+	<meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
+	<meta name="theme-color" content="#615880">
+	<link rel="stylesheet" href="/css/bootstrap.min.css">
+	<link rel="stylesheet" href="/css/general.css">
+	<link rel="stylesheet" href="/css/tdbms.css">
+	<script src="/js/jquery-3.6.0.min.js"></script>
+	<script src="/js/tdbms.js"></script>
+</head>
+<body>
+<h1><a href="/tdbms"><span class="db_name"></span>: stats</a></h1>
+<main>
+	<div class="contents-wrapper">
+		<h3>Sasahyou</h3>
+		<table class="table table-striped table-dark" id="stats-sasahyou">
+			<tr>
+				<th>Ctime</th>
+				<th>Mtime</th>
+				<th>Number of sasa</th>
+				<th>Number of holes</th>
+			</tr>
+		</table>
+		<h3>Sappyou</h3>
+		<table class="table table-striped table-dark" id="stats-sappyou">
+			<tr>
+				<th>Ctime</th>
+				<th>Mtime</th>
+				<th>Number of tanzaku</th>
+				<th>Number of holes</th>
+			</tr>
+		</table>
+		<h3>Shoppyou</h3>
+		<table class="table table-striped table-dark" id="stats-shoppyou">
+			<tr>
+				<th>Ctime</th>
+				<th>Mtime</th>
+				<th>Number of kazari</th>
+				<th>Number of holes</th>
+			</tr>
+		</table>
+	</div>
+</main>
+<script src="/js/tdbms-management.js"></script>
+<script src="/js/tdbms-stats.js"></script>
+</body>
+</html>
\ No newline at end of file