SinTan1729/chhoto-url
SinTan1729/chhoto-url
1
0
Fork 0
mirror of https://github.com/SinTan1729/chhoto-url synced 2024-12-26 23:58:35 -06:00
Code Issues Releases Activity

Improve display of url table

Browse source
This commit is contained in:
Sayantan Santra 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"] { form input[name="shortUrl"] {
text-transform: lowercase; text-transform: lowercase;
} }
td[name="deleteBtn"] {
text-align: center;
}
</style> </style>
</head> </head>
@ -48,7 +52,7 @@
<div class="container"> <div class="container">
<form class="pure-form pure-form-aligned" name="new-url-form"> <form class="pure-form pure-form-aligned" name="new-url-form">
<fieldset> <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> Shorten</legend>
<div class="pure-control-group"> <div class="pure-control-group">
<label for="longUrl">Long URL</label> <label for="longUrl">Long URL</label>
@ -65,13 +69,15 @@
</fieldset> </fieldset>
</form> </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> <thead>
<tr> <tr>
<td>Short URL</td> <td>Short URL</td>
<td>Long URL</td> <td>Long URL</td>
<td>Hits</td> <td>Hits</td>
<td></td> <td name="deleteBtn">&times;</td>
</tr> </tr>
</thead> </thead>
<tbody id="url-table"> <tbody id="url-table">

21
src/main/resources/public/js/main.js
View file

@ -14,10 +14,17 @@ const refreshData = async () => {
}; };
const displayData = (data) => { const displayData = (data) => {
const table = document.querySelector("#url-table"); table_box = document.querySelector(".pure-table");
table.innerHTML = ''; // Clear if (data.length == 0) {
data.map(TR) table_box.style.visibility = "hidden";
.forEach(tr => table.appendChild(tr)); }
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 () => { 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 A_INT = (s) => `<a href='/${s}'>${window.location.host}/${s}</a>`;
const deleteButton = (shortUrl) => { const deleteButton = (shortUrl) => {
const td = document.createElement("td");
const btn = document.createElement("button"); const btn = document.createElement("button");
btn.innerHTML = "&times;"; btn.innerHTML = "&times;";
@ -60,8 +68,9 @@ const deleteButton = (shortUrl) => {
}).then(_ => refreshData()); }).then(_ => refreshData());
} }
}; };
td.setAttribute("name", "deleteBtn");
return btn; td.appendChild(btn);
return td;
}; };
const TD = (s) => { const TD = (s) => {