diff --git a/src/main/resources/public/index.html b/src/main/resources/public/index.html new file mode 100644 index 0000000..604397a --- /dev/null +++ b/src/main/resources/public/index.html @@ -0,0 +1,71 @@ + + + + + + + Url + + + + + + + + +
+
+
+ Add new URL +
+ + +
+
+ + +
+
+ +
+
+ +
+ + + + + + + + + + + +
Long URLShort url
+
+ + + \ No newline at end of file diff --git a/src/main/resources/public/js/main.js b/src/main/resources/public/js/main.js new file mode 100644 index 0000000..0a9acbf --- /dev/null +++ b/src/main/resources/public/js/main.js @@ -0,0 +1,68 @@ +const refreshData = async () => { + let data = await fetch("/all").then(res => res.text()); + data = data + .split("\n") + .filter(line => line !== "") + .map(line => line.split(",")) + .map(arr => ({ + long: arr[1], + short: arr[0] + })); + + 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)); + + tr.appendChild(longTD); + tr.appendChild(shortTD); + + return tr; +}; + +const A = (s) => `${s}`; +const A_INT = (s) => `${window.location.host}/${s}`; + +const TD = (s) => { + const td = document.createElement("td"); + td.innerHTML = s; + return td; +}; + +const submitForm = () => { + const form = document.forms.namedItem("new-url-form"); + const longUrl = form.elements["longUrl"]; + const shortUrl = form.elements["shortUrl"]; + + const url = `/new?long=${longUrl.value}&short=${shortUrl.value}`; + + fetch(url, { + method: "POST" + }) + .then(_ => { + longUrl.value = ""; + shortUrl.value = ""; + + refreshData(); + }); + +}; + +(async () => { + await refreshData(); + const form = document.forms.namedItem("new-url-form"); + form.onsubmit = e => { + e.preventDefault(); + submitForm(); + } +})();