C3L-NOC/tls-expiry-tracker Changeset - 22d02efb8aa2 · Chaos Computer Club Lëtzebuerg Projects

Changeset - 22d02efb8aa2

Parent rev.

Child rev.

[Not reviewed]

0 2 0

x - 15 months ago 2024-01-05 02:42:39
xbr@c3l.lu

feat: replace appending with replacing of the table

2 files changed with 3 insertions and 1 deletions:

frontend/index.html

frontend/script.js

0 comments (0 inline, 0 general)

frontend/index.html

➞

Show inline comments

 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="UTF-8">
 		<title>TLS Outage Tracker</title>
 		<link rel="stylesheet" type="text/css" href="style.css">
         <script src="script.js"></script>
         <meta name="viewport" content="width=device-width,initial-scale=1" />
 	</head>
 	<body>
     <div class="countup">
 			<p class="countup__item countup__tls"><span id="time__tls">?</span> days</p>
 			<p class="countup__item countup__text">since last outage caused by TLS expiry</p>
     </div>
     <div class="logs" id="logs">
         <p class="logs__title">Last incidents</p>
         <table id="logs__table"></table>
     </div>
 	</body>
 </html>

frontend/script.js

➞

Show inline comments

 function getDateDifference(datePosix) {
     const difference = Date.now() - (datePosix * 1000);
     const days = Math.floor(difference / (1000 * 3600 * 24));
     return days.toString();
+}
 function generateTable(data) {
     try {
     const tableBody = document.createElement("tbody");
     tableBody.classList.add("logs__tbody");
     for (let i = 0; i < data.length; i++) {
         const row = document.createElement("tr");
         row.classList.add("logs__trow");
         const domain = document.createElement("td");
         domain.classList.add("logs__item__name");
         const domainText = document.createTextNode(data[i].domain);
         domain.appendChild(domainText);
         row.appendChild(domain);
         const date = document.createElement("td");
         date.classList.add("logs__item__date");
         const dateData = getDateDifference(data[i].date);
         const dateText = document.createTextNode(dateData + " days ago");
         date.appendChild(dateText);
         row.appendChild(date);
         tableBody.appendChild(row);
+    }
     const table = document.createElement("table");
     table.classList.add("logs__table");
     table.id = "logs__table";
     table.appendChild(tableBody);
-    document.getElementById("logs").appendChild(table);
+    document.getElementById("logs__table").replaceWith(table);
     } catch (e) {}
+}
 function setRecentDate(data) {
     console.log(data);
     let mostRecentDate = 0;
     try {
         mostRecentDate = data.reduce((maxNum, expiredEntry) => {
             return Math.max(expiredEntry.date, maxNum)
         }, 0);
     } catch (e) {}
     if(mostRecentDate === 0) mostRecentDate = "∞";
     else mostRecentDate = getDateDifference(mostRecentDate);
     document.getElementById("time__tls").innerHTML = mostRecentDate;
+}
 fetch("data.json")
     .then(res => res.json())
     .then(data => {
         generateTable(data.incidents);
         setRecentDate(data.incidents);
     });
@@ \ No newline at end of file @@

0 comments (0 inline, 0 general)