From 52b54ba7929f316f1235e2d3526141cae1f5cab1 Mon Sep 17 00:00:00 2001
From: Masahiko AMANO <hiko-19@ya.ru>
Date: Tue, 31 Jan 2023 01:21:30 +0300
Subject: [PATCH] feat(web): introduce adding new file (path) to database

---
 web/public/css/tfm.css     |  2 +-
 web/public/js/tfm-files.js | 15 +++++++++++++++
 web/public/js/tfm.js       | 17 +++++++++++++++++
 web/public/tfm/files.html  | 18 +++++++++++++++++-
 4 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/web/public/css/tfm.css b/web/public/css/tfm.css
index 3012e50..85ecf01 100644
--- a/web/public/css/tfm.css
+++ b/web/public/css/tfm.css
@@ -46,7 +46,7 @@ main {
 }
 
 .menu {
-	display: flex;
+	display: none;
 	flex-direction: column;
 	justify-content: flex-start;
 	background-color: #eee;
diff --git a/web/public/js/tfm-files.js b/web/public/js/tfm-files.js
index 8e43966..49c7e4e 100644
--- a/web/public/js/tfm-files.js
+++ b/web/public/js/tfm-files.js
@@ -21,6 +21,7 @@ $(document).on("dblclick", ".item", function (e) {
 	});
 	$(".item.selected").removeClass("selected");
 	$(".menu-wrapper").css("display", "flex");
+	$("#menu-view").css("display", "flex");
 	$("#name").val(decodeURI(current_sasa.path));
 	$("#btn-full").attr("href", "/files/" + current_sasa.path);
 	let resp = tdb_query("$TFM", 24, '' + id);
@@ -68,6 +69,7 @@ $(document).on("click", "#btn-confirm", function (e) {
 		return;
 	}
 	$(".menu-wrapper").css("display", "none");
+	$("#menu-view").css("display", "none");
 	resp.data.forEach(tanzaku => {
 		let current = $(`#t${tanzaku.id}`)
 		if (current.hasClass("selected")) {
@@ -84,4 +86,17 @@ $(document).on("click", "#btn-confirm", function (e) {
 		}
 	});
 	$(".list-item").removeClass("selected").css("display", "block");
+	$("#text-filter").val("");
+});
+
+$(document).on("click", "#btn-add", function (e) {
+	e.preventDefault();
+	let resp = tdb_query("$TFM", 18, $("#new-name").val());
+	if (!resp.status) {
+		alert("Something went wrong!");
+		return;
+	}
+	$(".menu-wrapper").css("display", "none");
+	$("#menu-add").css("display", "none");
+	location.reload(true);
 });
diff --git a/web/public/js/tfm.js b/web/public/js/tfm.js
index 754c33c..ba38437 100644
--- a/web/public/js/tfm.js
+++ b/web/public/js/tfm.js
@@ -63,6 +63,12 @@ $(document).on("click", ".item", function (e) {
 	}
 });
 
+$(document).on("click", "#btn-new", function (e) {
+	e.preventDefault();
+	$(".menu-wrapper").css("display", "flex");
+	$("#menu-add").css("display", "flex");
+});
+
 $(document).on("click", ".list-item", function (e) {
 	if ($(this).hasClass("selected")) {
 		$(this).removeClass("selected");
@@ -82,5 +88,16 @@ $(document).on("click", "#selection-filter", function (e) {
 $(document).on("click", "#btn-close", function (e) {
 	e.preventDefault();
 	$(".menu-wrapper").css("display", "none");
+	$("#menu-view").css("display", "none");
 	$(".list-item").removeClass("selected").css("display", "block");
+	$("#name").val("");
+	$(".menu #text-filter").val("");
+});
+
+$(document).on("click", "#btn-reset", function (e) {
+	e.preventDefault();
+	$(".menu-wrapper").css("display", "none");
+	$("#menu-add").css("display", "none");
+	$("#new-name").val("");
+	$("#new-description").val("");
 });
diff --git a/web/public/tfm/files.html b/web/public/tfm/files.html
index 72f8939..406728e 100644
--- a/web/public/tfm/files.html
+++ b/web/public/tfm/files.html
@@ -32,10 +32,11 @@
 <h1><a href="/tfm" title="TFM: Home">TFM: Files</a></h1>
 <main>
 	<div class="contents-wrapper">
+		<button class="btn btn-outline-secondary sasa" id="btn-new"><b>NEW</b></button>
 	</div>
 </main>
 <div class="menu-wrapper">
-	<div class="menu">
+	<div class="menu" id="menu-view">
 		<h2>File menu</h2>
 		<form>
 			<div class="form-group row">
@@ -62,6 +63,21 @@
 			</div>
 		</form>
 	</div>
+	<div class="menu" id="menu-add">
+		<h2>Add new file</h2>
+		<form>
+			<div class="form-group row">
+				<label class="col-sm-2 col-form-label" for="new-name">File name</label>
+				<div class="col-sm-10">
+					<input type="text" name="new-name" class="form-control" id="new-name">
+				</div>
+			</div>
+			<div class="form-group button-flex">
+				<button class="btn btn-primary" id="btn-add">Add</button>
+				<button class="btn btn-outline-danger" id="btn-reset">Reset</button>
+			</div>
+		</form>
+	</div>
 </div>
 <script src="/js/tfm-files.js"></script>
 </body>