const refreshData = async () => { let data = await fetch("/api/all").then(res => res.text()); data = data .split("\n") .filter(line => line !== "") .map(line => line.split(",")) .map(arr => ({ short: arr[0], long: arr[1], hits: arr[2] })); displayData(data); }; const displayData = (data) => { const table = document.querySelector("#url-table"); table.innerHTML = ''; // Clear data.map(TR) .forEach(tr => table.appendChild(tr)); }; const TR = (row) => { const tr = document.createElement("tr"); const longTD = TD(A(row.long)); const shortTD = TD(A_INT(row.short)); const hitsTD = TD(row.hits); const btn = deleteButton(row.short); tr.appendChild(shortTD); tr.appendChild(longTD); tr.appendChild(hitsTD); tr.appendChild(btn); return tr; }; const A = (s) => `${s}`; const A_INT = (s) => `${window.location.host}/${s}`; const deleteButton = (shortUrl) => { const btn = document.createElement("button"); btn.innerHTML = "×"; btn.onclick = e => { e.preventDefault(); fetch(`/api/${shortUrl}`, { method: "DELETE" }).then(_ => refreshData()); }; return btn; }; const TD = (s) => { const td = document.createElement("td"); const div = document.createElement("div"); div.innerHTML = s; td.appendChild(div); return td; }; const submitForm = () => { const form = document.forms.namedItem("new-url-form"); const longUrl = form.elements["longUrl"]; const shortUrl = form.elements["shortUrl"]; const url = `/api/new`; fetch(url, { method: "POST", body: `${longUrl.value};${shortUrl.value}` }) .then((res) => { if (!res.ok) { controls = document.querySelector(".pure-controls"); errBox = document.createElement("p"); errBox.setAttribute("id", "errBox"); errBox.setAttribute("style", "color:red"); errBox.innerHTML = "Short URL not valid or already in use"; controls.appendChild(errBox); } else { document.getElementById("errBox")?.remove(); longUrl.value = ""; shortUrl.value = ""; refreshData(); } }); }; (async () => { await refreshData(); const form = document.forms.namedItem("new-url-form"); form.onsubmit = e => { e.preventDefault(); submitForm(); } })();