readonly/mirror-chhoto-url
1
0
Fork 0
mirror of https://github.com/minoplhy/chhoto-url.git synced 2024-11-22 17:26:45 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improve display of url table

Browse Source
This commit is contained in:
SinTan1729 2022-11-09 18:55:50 -06:00
parent b73148706d
commit a21933d3eb
2 changed files with 24 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/main/resources/public/index.html
View File

@ -40,6 +40,10 @@
form input[name="shortUrl"] {
text-transform: lowercase;
}
td[name="deleteBtn"] {
text-align: center;
}
</style>
</head>
@ -48,7 +52,7 @@
<div class="container">
<form class="pure-form pure-form-aligned" name="new-url-form">
<fieldset>
<legend style="font-size: 32px;"><img src="assets/favicon-32.png" height="26px" alt="logo"> Simply
<legend style="font-size: 32px;"><img src="assets/favicon-32.png" width="26px" alt="logo"> Simply
Shorten</legend>
<div class="pure-control-group">
<label for="longUrl">Long URL</label>
@ -65,13 +69,15 @@
</fieldset>
</form>
<table class="pure-table">
<table class="pure-table" style="visibility: hidden;">
<caption style="font-size: 22px; text-align: left; font-style: normal;">Active links:</caption>
<br>
<thead>
<tr>
<td>Short URL</td>
<td>Long URL</td>
<td>Hits</td>
<td></td>
<td name="deleteBtn">&times;</td>
</tr>
</thead>
<tbody id="url-table">

13
src/main/resources/public/js/main.js
View File

@ -14,10 +14,17 @@ const refreshData = async () => {
};
const displayData = (data) => {
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));
}
};
const addErrBox = async () => {
@ -48,6 +55,7 @@ const A = (s) => `<a href='${s}'>${s}</a>`;
const A_INT = (s) => `<a href='/${s}'>${window.location.host}/${s}</a>`;
const deleteButton = (shortUrl) => {
const td = document.createElement("td");
const btn = document.createElement("button");
btn.innerHTML = "&times;";
@ -60,8 +68,9 @@ const deleteButton = (shortUrl) => {
}).then(_ => refreshData());
}
};
return btn;
td.setAttribute("name", "deleteBtn");
td.appendChild(btn);
return td;
};
const TD = (s) => {