From 56f9603daa58e9210d6efd648f3517eae9e0ef48 Mon Sep 17 00:00:00 2001
From: Masahiko AMANO <hiko-19@ya.ru>
Date: Tue, 7 Jan 2025 14:44:29 +0300
Subject: [PATCH] init(web): add quote create form

---
 web/static/css/skazanull.css |  9 +++++
 web/static/js/quotes.js      | 67 ++++++++++++++++++++++++++++++++++++
 web/templates/quotes.html    | 43 +++++++++++++++++++++++
 3 files changed, 119 insertions(+)

diff --git a/web/static/css/skazanull.css b/web/static/css/skazanull.css
index a8b5116..ed6692b 100644
--- a/web/static/css/skazanull.css
+++ b/web/static/css/skazanull.css
@@ -3,3 +3,12 @@
     margin: 0 auto;
     max-width: 20%;
 }
+
+.quote-form {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: #0008;
+}
diff --git a/web/static/js/quotes.js b/web/static/js/quotes.js
index 369c58d..3920f14 100644
--- a/web/static/js/quotes.js
+++ b/web/static/js/quotes.js
@@ -13,6 +13,34 @@ if (sorting == null) {
 	sorting = "-datetime";
 }
 
+function datetimeToLocalISO(datetime) {
+	var options = {
+		year: "numeric",
+		month: "2-digit",
+		day: "2-digit",
+		hour: "2-digit",
+		minute: "2-digit",
+		second: "2-digit",
+		timeZoneName: "longOffset",
+	};
+
+	var formatter = new Intl.DateTimeFormat("sv-SE", options);
+	var date = new Date(datetime);
+
+	return formatter
+		.formatToParts(date)
+		.map(({ type, value }) => {
+			if (type === "timeZoneName") {
+				return value.slice(3);
+			} else {
+				return value;
+			}
+		})
+		.join("")
+		.replace(" ", "T")
+		.replace(" ", "");
+}
+
 function escapedString(str) {
 	return str
 		.replace("&", "&amp;")
@@ -112,6 +140,45 @@ function reload() {
 	load();
 }
 
+$(document).on("click", "#btn-add-open", function (e) {
+	now = new Date;
+	now = new Date(now.getTime() - now.getTimezoneOffset() * 60000);
+	$("#new-quote-datetime").val(now.toJSON().slice(0,19));
+	$("#quote-creator").removeClass("hidden");
+});
+
+$(document).on("click", "#btn-add-close", function (e) {
+	$("#quote-creator").addClass("hidden");
+});
+
+$(document).on("submit", "#quote-create", function (e) {
+	e.preventDefault();
+	formdata = $("#quote-create").serializeArray();
+	data = {};
+	$(formdata).each(function (index, obj) {
+		data[obj.name] = obj.value;
+	});
+	data.datetime = datetimeToLocalISO(data.datetime);
+	$.ajax({
+		url: "/api/quotes",
+		type: "POST",
+		contentType: "application/json",
+		data: JSON.stringify(data),
+		processData: false,
+		dataType: "json",
+		success: function (resp) {
+			$("#quote-creator").addClass("hidden");
+			reload();
+			$("#new-quote-text").val("");
+			$("#new-quote-author").val("");
+		},
+		error: function (err) {
+			$("#quote-creator-error-message").text(err.responseJSON.error);
+			$("#quote-creator-error").removeClass("hidden");
+		},
+	});
+});
+
 $(window).on("load", function (e) {
 	load();
 });
diff --git a/web/templates/quotes.html b/web/templates/quotes.html
index c37af5f..997d39c 100644
--- a/web/templates/quotes.html
+++ b/web/templates/quotes.html
@@ -59,6 +59,49 @@
 			</p>
 		</div>
 	</div>
+	<div id="quote-creator" class="hidden quote-form flex flex-col items-center justify-center">
+		<div class="max-w-4xl w-full mt-8 p-6">
+			<div class="max-w-4xl w-full space-y-8 bg-white p-10 rounded-lg shadow-lg">
+				<h3 class="text-xl font-bold font-[&#39;Playfair_Display&#39;] text-gray-900 mb-4">Создать цитату</h3>
+				<div id="quote-creator-error" class="hidden mt-4 p-4 rounded-md bg-red-50 border border-red-200">
+					<p id="quote-creator-error-message" class="text-sm text-red-600 font-[&#39;Inter&#39;]"></p>
+				</div>
+				<form id="quote-create" class="space-y-4">
+					<div>
+						<label for="new-quote-text" class="block text-sm font-medium text-gray-700 font-[&#39;Inter&#39;]">
+							Цитата
+						</label>
+						<textarea id="new-quote-text" name="text" rows="3" placeholder="Сказанная цитата может быть сказана тем, кто её сказанул." required
+								  class="!rounded-button mt-1 block w-full px-3 py-2 border border-gray-300 shadow-sm placeholder-gray-400 focus:outline-none focus:ring-custom focus:border-custom sm:text-sm font-[&#39;Inter&#39;]"></textarea>
+					</div>
+					<div>
+						<label for="new-quote-author" class="block text-sm font-medium text-gray-700 font-[&#39;Inter&#39;]">
+							Автор
+						</label>
+						<input type="text" id="new-quote-author" name="author" placeholder="Узбекс" required
+							   class="!rounded-button mt-1 block w-full px-3 py-2 border border-gray-300 shadow-sm placeholder-gray-400 focus:outline-none focus:ring-custom focus:border-custom sm:text-sm font-[&#39;Inter&#39;]" />
+					</div>
+					<div>
+						<label for="new-quote-datetime" class="block text-sm font-medium text-gray-700 font-[&#39;Inter&#39;]">
+							Дата и время
+						</label>
+						<input type="datetime-local" id="new-quote-datetime" name="datetime" step="1"
+							   class="!rounded-button mt-1 block w-full px-3 py-2 border border-gray-300 shadow-sm placeholder-gray-400 focus:outline-none focus:ring-custom focus:border-custom sm:text-sm font-[&#39;Inter&#39;]" />
+					</div>
+					<div class="flex justify-end space-x-3">
+						<button type="button" id="btn-add-close"
+								class="!rounded-button px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-custom font-[&#39;Inter&#39;]">
+							Отмена
+						</button>
+						<button type="submit"
+								class="!rounded-button px-4 py-2 text-sm font-medium text-white bg-custom hover:bg-custom/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-custom font-[&#39;Inter&#39;]">
+							Создать
+						</button>
+					</div>
+				</form>
+			</div>
+		</div>
+	</div>
 	<script src="/static/js/quotes.js"></script>
 </body>