Changeset - 57431ad962e9
Parent rev.
Child rev.
[Not reviewed]
0 2 2
x - 15 months ago 2024-01-05 01:24:32
xbr@c3l.lu
feat: generate table from javascript
4 files changed with 57 insertions and 13 deletions:
frontend/data.json
17
frontend/index.html
8
11
frontend/script.js
30
frontend/style.css
2
2
0 comments (0 inline, 0 general)
frontend/data.json
➞
Show inline comments
 
new file 100644
 
{
 
    "incidents": [
 
      {
 
        "domain": "c3l.lu",
 
        "date": 3
 
      },
 
      {
 
        "domain": "social.c3l.lu",
 
        "date": 5
 
      },
 
      {
 
        "domain": "mail.c3l.lu",
 
        "date": 10
 
      }
 
    ]
 
  }
 
 
\ No newline at end of file
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">0</span> days</p>
 
			<p class="countup__item countup__text">since last outage caused by TLS expiry</p>
 
    </div>
 

			




	
	
	
		
 
    <div class="logs">

			




	
	
	
		
 
        <p class="logs__title">Last incidents</h2>

			




	
	
	
		
 
    <div class="logs" id="logs">

			




	
	
	
		
 
        <p class="logs__title">Last incidents</p>

			




	
	
	
		
 

			




	
	
	
		
 
        <table>

			




	
	
	
		
 
            <tbody>

			




	
	
	
		
 
                <tr>

			




	
	
	
		
 
        <table class="logs__table">

			




	
	
	
		
 
            <tbody class="logs__tbody">

			




	
	
	
		
 
                <tr class="logs__trow">

			




	
	
	
		
 
                    <td class="logs__item__name">c3l.lu</td>

			




	
	
	
		
 
                    <td class="logs__item__date">3 days ago</td>

			




	
	
	
		
 
                </tr>

			




	
	
	
		
 
            </tbody>

			




	
	
	
		
 
            <tbody>

			




	
	
	
		
 
                <tr>

			




	
	
	
		
 
                <tr class="logs__trow">

			




	
	
	
		
 
                    <td class="logs__item__name">social.c3l.lu</td>

			




	
	
	
		
 
                    <td class="logs__item__date">5 days ago</td>

			




	
	
	
		
 
                </tr>

			




	
	
	
		
 
            </tbody>

			




	
	
	
		
 
            <tbody>

			




	
	
	
		
 
                <tr>

			




	
	
	
		
 
                <tr class="logs__trow">

			




	
	
	
		
 
                    <td class="logs__item__name">mail.c3l.lu</td>

			




	
	
	
		
 
                    <td class="logs__item__date">10 days ago</td>

			




	
	
	
		
 
                </tr>

			




	
	
	
		
 
            </tbody>

			




	
	
	
		
 
        </table>

			




	
	
	
		
 
    </div>

			




        

    


    
    

    

        

                

                    frontend/script.js
                

                

                  
                      
                        

                      ➞

                      
                        
                  

                  
                      
                  
                      
                  
                      
                  
                      
                  
                  
                

                

                    Show inline comments
                    
                

        

        

            



	
	
		
 
new file 100644

			




	
	
	
		
 
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

			




        

    


    
    

    

        

                

                    frontend/style.css
                

                

                  
                      
                        

                      ➞

                      
                        
                  

                  
                      
                  
                      
                  
                      
                  
                      
                  
                  
                

                

                    Show inline comments
                    
                

        

        

            



	
	
		
 
@@ -54,13 +54,13 @@ body {

			




	
	
	
		
 

			




	
	
	
		
 
.logs {

			




	
	
	
		
 
    margin:auto;

			




	
	
	
		
 
    max-width: 50vw;

			




	
	
	
		
 
    min-width: 50vw;

			




	
	
	
		
 

			




	
	
	
		
 
    margin-top: 2.5vh;

			




	
	
	
		
 
    margin-top: 3vh;

			




	
	
	
		
 
    border-radius: 0.1rem;

			




	
	
	
		
 
    border-style: solid;

			




	
	
	
		
 
    border-color: #454545;

			




	
	
	
		
 

			




	
	
	
		
 
    display: flex;

			




	
	
	
		
 
    flex-direction: column;

			




	
	
		
 
@@ -70,13 +70,13 @@ body {

			




	
	
	
		
 
    background-image: repeating-linear-gradient(135deg, #393939, #393939 5px, #454545 5px, #454545 9px);

			




	
	
	
		
 
}

			




	
	
	
		
 

			




	
	
	
		
 
.logs__title {

			




	
	
	
		
 
    display: block;

			




	
	
	
		
 
    margin-top: 1vh;

			




	
	
	
		
 
    margin-bottom: 1vh;

			




	
	
	
		
 
    margin-bottom: 2vh;

			




	
	
	
		
 
    font-size: 30px;

			




	
	
	
		
 
    text-decoration: underline;

			




	
	
	
		
 
}

			




	
	
	
		
 

			




	
	
	
		
 
.logs__item {

			




	
	
	
		
 
    display: flex;

			




        

    



    


    



    



      

      





    
    0 comments (0 inline, 0 general)
    





    


  

  







  


    




    








    
        Server instance: saturn-296412
    
    
        This site is powered by
            Kallithea,
        which is
        © 2010–2021 by various authors & licensed under GPLv3.
            – Support