+ Better save system

This commit is contained in:
Daniel Legt 2022-05-21 14:33:32 +03:00
parent a61b9962c6
commit b9716c87ed
1 changed files with 25 additions and 8 deletions

View File

@ -17,7 +17,7 @@
</div> </div>
<textarea name="pad-content" id="pad-content" onchange="sendMyData(this)" onkeydown="updateStatus(`Not Saved`, `text-danger`)" class="form-control">{{.post_content}}</textarea> <textarea name="pad-content" id="pad-content" onchange="sendMyData(this)" onkeydown="updateStatus(`Not Saved`, `text-warning`); toggleWritingWatch(this)" class="form-control">{{.post_content}}</textarea>
<div id="pad-status" class="my-4 row"> <div id="pad-status" class="my-4 row">
<div class="col-md-12 col-lg-4 col-xl-4" title="Status"> <div class="col-md-12 col-lg-4 col-xl-4" title="Status">
@ -74,6 +74,12 @@
function sendMyData(el) { function sendMyData(el) {
const formData = new FormData(); const formData = new FormData();
// Check if the writing watch was sending something already
if ( !!window.writingWatch ) {
// Clear old timeout
clearTimeout(window.writingWatch);
}
el.setAttribute(`readonly`, `1`); el.setAttribute(`readonly`, `1`);
formData.set("content", el.value); formData.set("content", el.value);
@ -85,36 +91,47 @@
method: "post", method: "post",
}) })
.then( resp => { .then( resp => {
console.log(resp);
resp.json() resp.json()
.then( e => { .then( e => {
console.log(e.pad);
document.getElementById(`last_modified_`).value = e.pad.last_modified; document.getElementById(`last_modified_`).value = e.pad.last_modified;
updateStatus(`Succesfully Saved`, `text-success`); updateStatus(`Succesfully Saved`, `text-success`);
}) })
.catch( err => { .catch( err => {
console.error(err);
updateStatus(`Failed to Save`, `text-error`); updateStatus(`Failed to Save`, `text-error`);
console.error(err);
}) })
}) })
.catch( err => { .catch( err => {
console.error(err);
updateStatus(`Failed to Save`, `text-error`); updateStatus(`Failed to Save`, `text-error`);
console.error(err);
}) })
.finally( () => { .finally( () => {
el.removeAttribute(`readonly`); el.removeAttribute(`readonly`);
}) })
} }
function toggleWritingWatch(el) {
// Check if the writing watch was sending something already
if ( !!window.writingWatch ) {
// Clear old timeout
clearTimeout(window.writingWatch);
}
// Set a timeout for the action
window.writingWatch = setTimeout( () => {
// Send out the data
sendMyData(el)
}, 750)
}
function updateStatus(txt, cls) { function updateStatus(txt, cls) {
const loading_status = document.getElementById(`loading_status`) const loading_status = document.getElementById(`loading_status`)
loading_status.value = txt; loading_status.value = txt;
loading_status.classList.remove("text-danger", "text-warning", "text-success", "text-white", "text-primary"); loading_status.classList.remove("text-danger", "text-warning", "text-success", "text-white", "text-primary");
loading_status.classList.add(cls); loading_status.classList.add(cls);
} }