feat(web): initialize sasa info menu

web/public/css/tfm.css

@@ -51,3 +51,42 @@ main {
 	min-width: 100%;
 	min-height: 100%;
 }
+
+.menu-wrapper {
+	display: none;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background-color: #0008;
+}
+
+.menu {
+	background-color: #eee;
+	box-shadow: 0 0 0.5vw black;
+	border-radius: 16px;
+	width: 80vw;
+	height: 80vh;
+	max-width: 700px;
+	transition: 0.3s;
+	overflow: hidden;
+}
+
+form#sasa-menu {
+	margin: 0;
+	padding: 2vw 2vw;
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
+#tanzaku-list {
+	height: 40vh;
+	overflow-y: scroll;
+	overflow-x: hidden;
+}

web/public/js/tfm.js

@@ -1,5 +1,58 @@
+var sasahyou, sappyou, shoppyou;
+
+function sasa_load(id) {
+	resp = tdb_query("$TFM", 16, id < 0 ? "" : `${id}`);
+	if (resp == null) {
+		alert("Unauthorized, go to /auth and authorize");
+		return;
+	}
+	if (!resp.status) {
+		alert("Something went wrong");
+		return;
+	}
+	if (id < 0) {
+		sasahyou = resp.data;
+		sasahyou.forEach((sasa) => {
+			$(".contents-wrapper").append(`<div class="item" id="s${sasa.id}" title="${sasa.path.split('/').slice(-1)}" style="background-image: url(${"/thumbs/" + sasa.path})"><div class="overlay"></div></div>`);
+		});
+	}
+}
+
+function tanzaku_load(id) {
+	resp = tdb_query("$TFM", 32, id < 0 ? "" : `${id}`);
+	if (resp == null) {
+		alert("Unauthorized, go to /auth and authorize");
+		return;
+	}
+	if (!resp.status) {
+		alert("Something went wrong");
+		return;
+	}
+	if (id < 0) {
+		sappyou = resp.data;
+		sappyou.forEach((tanzaku) => {
+			$("#tanzaku-list").append(`<div class="form-check"><input class="form-check-input" type="checkbox" id="ct${tanzaku.id}"><label class="form-check-label" for="ct${tanzaku.id}">${tanzaku.name}</label></div>`);
+		});
+	}
+}
+
+function kazari_load() {
+	resp = tdb_query("$TFM", 8, "");
+	if (resp == null) {
+		alert("Unauthorized, go to /auth and authorize");
+		return;
+	}
+	if (!resp.status) {
+		alert("Something went wrong");
+		return;
+	}
+	shoppyou = resp.data;
+}
+
 $(window).on("load", function () {
 	sasa_load(-1);
+	tanzaku_load(-1);
+	kazari_load();
 })
 
 $(document).keyup(function (e) {
@@ -21,19 +74,28 @@ $(document).on("click", ".item", function (e) {
 	}
 });
 
-function sasa_load(id) {
-	resp = tdb_query("$TFM", 16, id < 0 ? "" : `${id}`);
-	if (resp == null) {
-		alert("Unauthorized, go to /auth and authorize");
-		return;
+$(document).on("dblclick", ".item", function (e) {
+	let id = parseInt($(this).attr("id").slice(1));
+	let sasa;
+	sasahyou.every(current_sasa => {
+		if (current_sasa.id === id) {
+			sasa = current_sasa;
+			return false;
 		}
-	if (!resp.status) {
-		alert("Something went wrong");
-		return;
-	}
-	if (id < 0) {
-		resp.data.forEach((sasa) => {
-			$(".contents-wrapper").append(`<div class="item" id="s${sasa.id}" title="${sasa.path.split('/').slice(-1)}" style="background-image: url(${"/thumbs/" + sasa.path})"><div class="overlay"></div></div>`);
+		return true;
 	});
+	$(".menu-wrapper").css("display", "flex");
+	$("#sasa-name").val(decodeURI(sasa.path));
+	let resp = tdb_query("$TFM", 24, '' + id);
+	if (!resp.status) {
+		alert("Something went wrong!");
+		return;
 	}
-}
+	resp.data.forEach(tanzaku => {
+		$(`#ct${tanzaku.id}`).prop("checked", true);
+	});
+});
+
+$(document).on("click", ".menu-wrapper", function (e) {
+	$(".menu-wrapper").css("display", "none");
+});

web/public/tfm.html

@@ -33,6 +33,21 @@
 	<div class="contents-wrapper">
 	</div>
 </main>
+<div class="menu-wrapper">
+	<div class="menu">
+		<h2>Sasa menu</h2>
+		<form id="sasa-menu">
+			<div class="form-group">
+				<label for="sasa-name">File name</label>
+				<input type="text" name="name" class="form-control" id="sasa-name">
+			</div>
+			<div class="form-group" id="tanzaku-list"></div>
+			<div class="form-group">
+				<button class="btn btn-primary" id="btn-update">Confirm</button>
+			</div>
+		</form>
+	</div>
+</div>
 <script src="/js/tfm.js"></script>
 </body>
 </html>