mirror-chhoto-url/src/main/resources/public/js/main.js

123 lines
3.2 KiB
JavaScript
Raw Normal View History

2020-02-14 18:52:14 +00:00
const refreshData = async () => {
2020-02-16 14:46:29 +00:00
let data = await fetch("/api/all").then(res => res.text());
2020-02-14 18:52:14 +00:00
data = data
.split("\n")
.filter(line => line !== "")
.map(line => line.split(","))
.map(arr => ({
2022-11-03 21:53:04 +00:00
short: arr[0],
2020-02-14 18:52:14 +00:00
long: arr[1],
2022-11-03 21:53:04 +00:00
hits: arr[2]
2020-02-14 18:52:14 +00:00
}));
displayData(data);
};
const displayData = (data) => {
2022-11-10 00:55:50 +00:00
table_box = document.querySelector(".pure-table");
if (data.length == 0) {
table_box.style.visibility = "hidden";
}
else {
const table = document.querySelector("#url-table");
table_box.style.visibility = "visible";
table.innerHTML = ''; // Clear
data.map(TR)
.forEach(tr => table.appendChild(tr));
}
2020-02-14 18:52:14 +00:00
};
2022-11-11 00:11:57 +00:00
const addAlertBox = async (s, t) => {
2022-11-09 01:18:14 +00:00
const controls = document.querySelector(".pure-controls");
2022-11-11 00:11:57 +00:00
const alertBox = document.createElement("p");
alertBox.setAttribute("id", "alertBox");
alertBox.setAttribute("style", `color:${t}`);
alertBox.innerHTML = s;
controls.appendChild(alertBox);
2022-11-09 01:18:14 +00:00
}
2020-02-14 18:52:14 +00:00
const TR = (row) => {
const tr = document.createElement("tr");
const longTD = TD(A(row.long));
const shortTD = TD(A_INT(row.short));
2022-11-03 21:53:04 +00:00
const hitsTD = TD(row.hits);
2020-02-16 15:52:54 +00:00
const btn = deleteButton(row.short);
2020-02-14 18:52:14 +00:00
tr.appendChild(shortTD);
tr.appendChild(longTD);
2022-11-03 21:53:04 +00:00
tr.appendChild(hitsTD);
2020-02-16 15:52:54 +00:00
tr.appendChild(btn);
2020-02-14 18:52:14 +00:00
return tr;
};
const A = (s) => `<a href='${s}'>${s}</a>`;
const A_INT = (s) => `<a href='/${s}'>${window.location.host}/${s}</a>`;
2020-02-16 15:52:54 +00:00
const deleteButton = (shortUrl) => {
2022-11-10 00:55:50 +00:00
const td = document.createElement("td");
2020-02-16 15:52:54 +00:00
const btn = document.createElement("button");
btn.innerHTML = "&times;";
btn.onclick = e => {
e.preventDefault();
2022-11-09 23:58:15 +00:00
if (confirm("Do you want to delete the entry " + shortUrl + "?")) {
fetch(`/api/${shortUrl}`, {
method: "DELETE"
}).then(_ => refreshData());
}
2020-02-16 15:52:54 +00:00
};
2022-11-10 00:55:50 +00:00
td.setAttribute("name", "deleteBtn");
td.appendChild(btn);
return td;
2020-02-16 15:52:54 +00:00
};
2020-02-14 18:52:14 +00:00
const TD = (s) => {
const td = document.createElement("td");
2022-11-03 20:19:22 +00:00
const div = document.createElement("div");
div.innerHTML = s;
td.appendChild(div);
2020-02-14 18:52:14 +00:00
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`;
2020-02-14 18:52:14 +00:00
fetch(url, {
method: "POST",
body: `${longUrl.value};${shortUrl.value}`
2020-02-14 18:52:14 +00:00
})
2022-11-09 00:23:41 +00:00
.then((res) => {
if (!res.ok) {
2022-11-11 00:11:57 +00:00
if (document.getElementById("alertBox") == null) {
addAlertBox("Short URL not valid or already in use!", "red");
2022-11-09 00:39:23 +00:00
}
2022-11-09 00:23:41 +00:00
}
else {
2022-11-11 00:11:57 +00:00
return res.text();
2022-11-09 00:23:41 +00:00
}
2022-11-11 00:11:57 +00:00
}).then((text) => {
navigator.clipboard.writeText(`${window.location.host}/${text}`);
addAlertBox("Short URL copied to clipboard!", "green");
longUrl.value = "";
shortUrl.value = "";
refreshData();
});
2020-02-14 18:52:14 +00:00
};
(async () => {
await refreshData();
const form = document.forms.namedItem("new-url-form");
form.onsubmit = e => {
e.preventDefault();
submitForm();
}
})();