init(web): add quote create form
This commit is contained in:
parent
ffc249a9f8
commit
56f9603daa
@ -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;
|
||||
}
|
||||
|
||||
@ -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("&", "&")
|
||||
@ -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();
|
||||
});
|
||||
|
||||
@ -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-['Playfair_Display'] 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-['Inter']"></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-['Inter']">
|
||||
Цитата
|
||||
</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-['Inter']"></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<label for="new-quote-author" class="block text-sm font-medium text-gray-700 font-['Inter']">
|
||||
Автор
|
||||
</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-['Inter']" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="new-quote-datetime" class="block text-sm font-medium text-gray-700 font-['Inter']">
|
||||
Дата и время
|
||||
</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-['Inter']" />
|
||||
</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-['Inter']">
|
||||
Отмена
|
||||
</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-['Inter']">
|
||||
Создать
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/static/js/quotes.js"></script>
|
||||
</body>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user