273 lines
7.6 KiB
JavaScript
273 lines
7.6 KiB
JavaScript
import {
|
||
login,
|
||
register,
|
||
getLinks,
|
||
createLink,
|
||
deleteLink,
|
||
updateLink
|
||
} from "./api.js";
|
||
|
||
const URL_SVR = "http://192.168.1.4:11001";
|
||
|
||
let token = null;
|
||
let autoIconURL = null;
|
||
let editingId = null;
|
||
|
||
// ===============================
|
||
// MOSTRA DIMENSIONI IMMAGINE
|
||
// ===============================
|
||
function showImageSize(imgElement, sizeElement) {
|
||
const img = new Image();
|
||
img.onload = () => {
|
||
sizeElement.textContent = `${img.width} × ${img.height} px`;
|
||
sizeElement.style.display = "block";
|
||
};
|
||
img.src = imgElement.src;
|
||
}
|
||
|
||
// ===============================
|
||
// AUTH
|
||
// ===============================
|
||
function setToken(t) {
|
||
token = t;
|
||
document.getElementById("authSection").style.display = token ? "none" : "block";
|
||
document.getElementById("linkSection").style.display = token ? "block" : "none";
|
||
if (token) loadLinks();
|
||
}
|
||
|
||
document.getElementById("loginForm").addEventListener("submit", async e => {
|
||
e.preventDefault();
|
||
try {
|
||
const t = await login(e.target.email.value, e.target.password.value);
|
||
setToken(t);
|
||
} catch (err) {
|
||
document.getElementById("authStatus").textContent = err.message;
|
||
}
|
||
});
|
||
|
||
document.getElementById("registerForm").addEventListener("submit", async e => {
|
||
e.preventDefault();
|
||
try {
|
||
await register(e.target.email.value, e.target.password.value);
|
||
document.getElementById("authStatus").textContent = "Registrato! Ora accedi.";
|
||
} catch (err) {
|
||
document.getElementById("authStatus").textContent = err.message;
|
||
}
|
||
});
|
||
|
||
// ===============================
|
||
// LOAD LINKS
|
||
// ===============================
|
||
/*async function loadLinks() {
|
||
const links = await getLinks(token);
|
||
const list = document.getElementById("list");
|
||
|
||
list.innerHTML = links
|
||
.map(
|
||
link => `
|
||
<div class="item" data-id="${link._id}">
|
||
${link.icon ? `<img src="${URL_SVR}${link.icon}">` : ""}
|
||
<div class="info">
|
||
<strong>${link.name}</strong><br>
|
||
<a href="${link.url}" target="_blank">${link.url}</a>
|
||
</div>
|
||
<div class="actions">
|
||
<button class="editBtn" data-id="${link._id}">Modifica</button>
|
||
<button class="deleteBtn" data-id="${link._id}">Elimina</button>
|
||
</div>
|
||
</div>
|
||
`
|
||
)
|
||
.join("");
|
||
}*/
|
||
async function loadLinks() {
|
||
const links = await getLinks(token);
|
||
// alert(links);
|
||
const list = document.getElementById("list");
|
||
|
||
list.innerHTML = links
|
||
.map(link => {
|
||
let iconHtml = "";
|
||
|
||
if (link.icon && link.icon.data && link.icon.mime) {
|
||
const base64 = btoa(
|
||
String.fromCharCode(...link.icon.data.data)
|
||
);
|
||
iconHtml = `<img src="data:${link.icon.mime};base64,${base64}" />`;
|
||
}
|
||
|
||
return `
|
||
<div class="item" data-id="${link._id}">
|
||
${iconHtml}
|
||
<div class="info">
|
||
<strong>${link.name}</strong><br>
|
||
<a href="${link.url}" target="_blank">${link.url}</a>
|
||
</div>
|
||
<div class="actions">
|
||
<button class="editBtn" data-id="${link._id}">Edit</button>
|
||
<button class="deleteBtn" data-id="${link._id}">Delete</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
})
|
||
.join("");
|
||
|
||
/*
|
||
list.innerHTML = links
|
||
.map(link => `
|
||
<div class="item" data-id="${link._id}">
|
||
${link.icon ? `<img src="${URL_SVR}/links/icon/${link._id}" class="icon">` : ""}
|
||
<div class="info">
|
||
<strong>${link.name}</strong><br>
|
||
<a href="${link.url}" target="_blank">${link.url}</a>
|
||
</div>
|
||
<div class="actions">
|
||
<button class="editBtn" data-id="${link._id}">✏️</button>
|
||
<button class="deleteBtn" data-id="${link._id}">🗑️</button>
|
||
</div>
|
||
</div>
|
||
`)
|
||
.join("");*/
|
||
}
|
||
|
||
// ===============================
|
||
// METADATA (icona automatica)
|
||
// ===============================
|
||
document.getElementById("fetchMetaBtn").addEventListener("click", async () => {
|
||
const url = document.getElementById("urlInput").value.trim();
|
||
if (!url) return;
|
||
|
||
const res = await fetch(`${URL_SVR}/metadata?url=${encodeURIComponent(url)}`);
|
||
const data = await res.json();
|
||
|
||
document.getElementById("nameInput").value = data.name || "";
|
||
autoIconURL = data.icon || null;
|
||
|
||
// L’icona automatica è l’ultima scelta → reset input manuale
|
||
const fileInput = document.getElementById("iconInput");
|
||
fileInput.value = "";
|
||
|
||
const preview = document.getElementById("iconPreview");
|
||
const sizeBox = document.getElementById("iconSize");
|
||
|
||
if (autoIconURL) {
|
||
preview.src = autoIconURL;
|
||
preview.style.display = "block";
|
||
sizeBox.style.display = "none";
|
||
showImageSize(preview, sizeBox);
|
||
}
|
||
});
|
||
|
||
// ===============================
|
||
// ANTEPRIMA ICONA MANUALE
|
||
// ===============================
|
||
document.getElementById("iconInput").addEventListener("change", e => {
|
||
const file = e.target.files[0];
|
||
if (!file) return;
|
||
|
||
autoIconURL = null; // manuale vince
|
||
|
||
const preview = document.getElementById("iconPreview");
|
||
const sizeBox = document.getElementById("iconSize");
|
||
|
||
preview.src = URL.createObjectURL(file);
|
||
preview.style.display = "block";
|
||
sizeBox.style.display = "none";
|
||
|
||
showImageSize(preview, sizeBox);
|
||
});
|
||
|
||
// ===============================
|
||
// CREAZIONE LINK
|
||
// ===============================
|
||
document.getElementById("linkForm").addEventListener("submit", async e => {
|
||
e.preventDefault();
|
||
|
||
const raw = new FormData(e.target);
|
||
const manualFile = raw.get("icon");
|
||
const hasManualFile = manualFile instanceof File && manualFile.size > 0;
|
||
|
||
await createLink(token, {
|
||
name: raw.get("name"),
|
||
url: raw.get("url"),
|
||
iconFile: hasManualFile ? manualFile : null,
|
||
iconURL: !hasManualFile ? autoIconURL : null
|
||
});
|
||
|
||
autoIconURL = null;
|
||
document.getElementById("iconPreview").style.display = "none";
|
||
document.getElementById("iconSize").style.display = "none";
|
||
|
||
e.target.reset();
|
||
loadLinks();
|
||
});
|
||
|
||
// ===============================
|
||
// EDIT
|
||
// ===============================
|
||
document.getElementById("list").addEventListener("click", e => {
|
||
const id = e.target.dataset.id;
|
||
if (!id) return;
|
||
|
||
if (e.target.classList.contains("deleteBtn")) {
|
||
deleteLink(token, id).then(loadLinks);
|
||
return;
|
||
}
|
||
|
||
if (e.target.classList.contains("editBtn")) {
|
||
editingId = id;
|
||
|
||
const item = e.target.closest(".item");
|
||
const name = item.querySelector("strong").textContent;
|
||
const url = item.querySelector("a").textContent;
|
||
|
||
const form = document.getElementById("editForm");
|
||
form.name.value = name;
|
||
form.url.value = url;
|
||
|
||
document.getElementById("iconPreviewEdit").style.display = "none";
|
||
document.getElementById("iconSizeEdit").style.display = "none";
|
||
|
||
document.getElementById("editModal").style.display = "flex";
|
||
}
|
||
});
|
||
|
||
// ANTEPRIMA MANUALE IN EDIT
|
||
document.getElementById("iconInputEdit").addEventListener("change", e => {
|
||
const file = e.target.files[0];
|
||
if (!file) return;
|
||
|
||
const preview = document.getElementById("iconPreviewEdit");
|
||
const sizeBox = document.getElementById("iconSizeEdit");
|
||
|
||
preview.src = URL.createObjectURL(file);
|
||
preview.style.display = "block";
|
||
sizeBox.style.display = "none";
|
||
|
||
showImageSize(preview, sizeBox);
|
||
});
|
||
|
||
// SALVA EDIT
|
||
document.getElementById("editForm").addEventListener("submit", async e => {
|
||
e.preventDefault();
|
||
|
||
const name = e.target.name.value;
|
||
const url = e.target.url.value;
|
||
const iconFile = e.target.icon.files[0] || null;
|
||
|
||
await updateLink(token, editingId, {
|
||
name,
|
||
url,
|
||
iconFile,
|
||
iconURL: null
|
||
});
|
||
|
||
document.getElementById("editModal").style.display = "none";
|
||
loadLinks();
|
||
});
|
||
|
||
document.getElementById("closeModal").addEventListener("click", () => {
|
||
document.getElementById("editModal").style.display = "none";
|
||
});
|
||
|
||
setToken(null);
|