From 57431ad962e920931bed9d7bf69d30c055c639dd 2024-01-05 01:24:32 From: x Date: 2024-01-05 01:24:32 Subject: [PATCH] feat: generate table from javascript --- diff --git a/frontend/data.json b/frontend/data.json new file mode 100644 index 0000000000000000000000000000000000000000..cffb009d36b0aef52e40897f11e9ab0d92355e69 --- /dev/null +++ b/frontend/data.json @@ -0,0 +1,17 @@ +{ + "incidents": [ + { + "domain": "c3l.lu", + "date": 3 + }, + { + "domain": "social.c3l.lu", + "date": 5 + }, + { + "domain": "mail.c3l.lu", + "date": 10 + } + ] + } + \ No newline at end of file diff --git a/frontend/index.html b/frontend/index.html index fcf54e05aa5539c1f4e6b9f19429a053f5860326..54f151ab27432bb05f7376e7b4a931a295f301b4 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -4,6 +4,7 @@ TLS Outage Tracker + @@ -12,24 +13,20 @@

since last outage caused by TLS expiry

-
-

Last incidents +

+

Last incidents

- - - +
+ + - - - + - - - + diff --git a/frontend/script.js b/frontend/script.js new file mode 100644 index 0000000000000000000000000000000000000000..82ace72bfda72f0420341d1d2c865bc75955bb7f --- /dev/null +++ b/frontend/script.js @@ -0,0 +1,30 @@ +function generateTable(data) { + 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 dateText = document.createTextNode(data[i].date + " days ago"); + date.appendChild(dateText); + row.appendChild(date); + + tableBody.appendChild(row); + } + + const table = document.createElement("table"); + table.classList.add("logs__table"); + table.appendChild(tableBody); + document.getElementById("logs").appendChild(table); +} + +fetch("data.json").then(res => res.json()).then(data => generateTable(data.incidents)); \ No newline at end of file diff --git a/frontend/style.css b/frontend/style.css index f953d4e275eca5fd3249e5c7c2fb66ccbf1ec2be..e91c86c5f2a2e5a72418d5177caf1c7467f6cd4d 100644 --- a/frontend/style.css +++ b/frontend/style.css @@ -57,7 +57,7 @@ body { max-width: 50vw; min-width: 50vw; - margin-top: 2.5vh; + margin-top: 3vh; border-radius: 0.1rem; border-style: solid; border-color: #454545; @@ -73,7 +73,7 @@ body { .logs__title { display: block; margin-top: 1vh; - margin-bottom: 1vh; + margin-bottom: 2vh; font-size: 30px; text-decoration: underline; }
c3l.lu 3 days ago
social.c3l.lu 5 days ago
mail.c3l.lu 10 days ago