166 lines
4.4 KiB
HTML
166 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="initial-scale=1">
|
|
<link href="/static/style.css" rel="stylesheet" type="text/css" />
|
|
<link href="../static/style.css" rel="stylesheet" type="text/css" />
|
|
<link href="../static/admin.css" rel="stylesheet" type="text/css" />
|
|
<title>igar: zona del admin 😎</title>
|
|
</head>
|
|
<body>
|
|
<h1> Zona del admin 😎 </h1>
|
|
<div class="action-wrap">
|
|
<button class="cajetin">Añadir imagen</button>
|
|
<form class="action" id="add" method="post" target="add" enctype="multipart/form-data">
|
|
<div class="form-elem"> <input name="file" type="file" placeholder="Imagen"/> </div>
|
|
<div class="form-elem"> <input name="desc" type="text" placeholder="Descripción"/> </div>
|
|
<div class="form-elem"> <input name="date" type="date" placeholder="Fecha"/> </div>
|
|
<hr/>
|
|
<input type="submit" value="Añadir">
|
|
</form>
|
|
</div>
|
|
<div class="action-wrap">
|
|
<button class="cajetin">Archivar/Eliminar imagen</button>
|
|
<div class="action list">
|
|
<div class="scroll" id="dellist">
|
|
{{ range . }}
|
|
<div class="action">
|
|
<div class="date"> {{ .Date }} </div>
|
|
<div class="desc"> {{ .Description }} </div>
|
|
<button onclick="open({{ .Post }})">
|
|
Ir a...
|
|
</button>
|
|
<button onclick="archive.call(this, {{ .Post }})">
|
|
Archivar
|
|
</button>
|
|
<button onclick="delpost.call(this, {{ .Post }})">
|
|
Eliminar
|
|
</button>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
<script>
|
|
|
|
</script>
|
|
</div>
|
|
<footer>
|
|
<a href="..">Volver al inicio</a>
|
|
</footer>
|
|
<script>
|
|
function refreshHeight(elem) {
|
|
elem.style.maxHeight = `${elem.scrollHeight}px`;
|
|
}
|
|
|
|
function remove(elem) {
|
|
elem.parentElement.removeChild(elem);
|
|
}
|
|
|
|
function result(elem, msg) {
|
|
elem.closest('.action').setAttribute('result', msg);
|
|
refreshHeight(elem.closest('.action-wrap'));
|
|
}
|
|
|
|
function open(uuid) {
|
|
window.open(`../view?uuid=${uuid}`);
|
|
}
|
|
|
|
async function archive(uuid) {
|
|
if (confirm('Vas a archivar una imagen. ¿Estás seguro?')) {
|
|
response = await fetch(`post?uuid=${uuid}`, { method: 'DELETE' })
|
|
if (response.ok) {
|
|
remove(this);
|
|
result(this, 'Imagen archivada');
|
|
} else {
|
|
error = JSON.parse(response.body);
|
|
alert(`Ha habido un error archivando la imagen: ${error.reason}`);
|
|
}
|
|
}
|
|
}
|
|
|
|
async function delpost(uuid) {
|
|
if (confirm('Vas a eliminar una imagen. ¿Estás seguro?')) {
|
|
response = await fetch(`post?uuid=${uuid}&purge=true`, { method: 'DELETE' });
|
|
if (response.ok) {
|
|
remove(this);
|
|
result(this, 'Imagen eliminada');
|
|
} else {
|
|
error = JSON.parse(response.body);
|
|
alert(`Ha habido un error eliminando la imagen: ${error.reason}`);
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
// case open/close
|
|
document.querySelectorAll('.action-wrap').forEach(elem => {
|
|
let cajetin = elem.querySelector('.cajetin');
|
|
elem.setAttribute('collapsed', true);
|
|
elem.style.maxHeight = `${cajetin.scrollHeight}px`;
|
|
cajetin.onclick = function() {
|
|
if (elem.getAttribute('collapsed')) {
|
|
refreshHeight(elem);
|
|
elem.setAttribute('collapsed', '');
|
|
} else {
|
|
elem.style.maxHeight = `${cajetin.scrollHeight}px`;
|
|
elem.setAttribute('collapsed', true);
|
|
}
|
|
}
|
|
});
|
|
|
|
// form result clear on input update
|
|
document.querySelectorAll('.form-elem > input').forEach(elem => {
|
|
elem.addEventListener('input', () => {
|
|
elem.parentElement.removeAttribute('error');
|
|
elem.closest('form').removeAttribute('result');
|
|
refreshHeight(elem.closest('.action-wrap'));
|
|
});
|
|
});
|
|
|
|
// form AJAX
|
|
let form = document.querySelector('#add')
|
|
form.onsubmit = function(event) {
|
|
event.preventDefault();
|
|
|
|
let files = form.file.files;
|
|
let data = new FormData(form);
|
|
|
|
try {
|
|
if (!files[0] || !files[0].type.match('image.*')) {
|
|
result(form, 'Selecciona una imagen');
|
|
return;
|
|
}
|
|
|
|
result(form, 'Subiendo...');
|
|
|
|
// Set up the request
|
|
let xhr = new XMLHttpRequest();
|
|
|
|
// Open the connection
|
|
xhr.open('POST', 'post', true);
|
|
|
|
xhr.upload.onprogress = (prog) => {
|
|
result(form, `${Math.round(prog.loaded * 100.0 / prog.total)}%`);
|
|
}
|
|
|
|
// Set up a handler for when the task for the request is complete
|
|
xhr.onload = function () {
|
|
if (xhr.status == 201) {
|
|
result(form, 'Imagen publicada');
|
|
} else {
|
|
result(form, 'Error publicando imagen');
|
|
}
|
|
};
|
|
|
|
// Send the data.
|
|
xhr.send(data);
|
|
} catch (e) {
|
|
console.error(e);
|
|
result(form, 'Error publicando imagen');
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|