Help with Dashboard HTML

Dashboard
1

HTML assistance. I'm hoping that I have a good start on it.

I'm trying to populate a table with rows of values from a database query. That is all great. I added code for the CSS Class .warning{ } and .alarm{ } to provide a means of COLOR Rows, alerting to values 5% to 8% being warning and over 8% alarm. I took the javascript from an example, but I believe my repeater and syntax to display values is goofed and I am not sure how to express the same item such that the javascript can actually calculate the values and work.

Dashboard template HTML below

    th {
        text-decoration: underline;
        font-size: 25px;
        font-weight: bold;
    }

    .percent {
        text-align: center;
        font-size: 20px;
        font-weight: bold;
    }

    .numeric {
        text-align: right;
        padding-right: 15px;
        font-size: 20px;
        font-weight: bold;
    }

    .alpha {
        text-align: left;
        padding-left: 20px;
        font-size: 18px;
        font-weight: bold;
    }

    .warning {
        background-color: yellow;
    }

    .alarm {
        background-color: red;
    }
</style>
<body>
<table cellpadding="1" border="1" id="table1" class="table-hover" style="width: 1200;">
    <thead>
        <tr>
            <th>ChScanner</th>
            <th>Total</th>
            <th>Good</th>
            <th>% GD</th>
            <th>Mismatch</th>
            <th>% MM</th>
            <th>NoRead</th>
            <th>% NR</th>

        </tr>
    </thead>
    <tbody>
        <tr class="product-row"; ng-repeat="row in msg.payload">
            <td class=alpha bgcolor=white>{{row.ChScanner}}</td>
            <td class=numeric bgcolor=white>{{row.Total}}</td>
            <td class=numeric bgcolor=white>{{row.Good}}</td>
            <td class=percent bgcolor=white>{{row.PGD}}</td>
            <td class=numeric bgcolor=white>{{row.Mismatch}}</td>
            <td class=percent bgcolor=white>{{row.PMM}}</td>
            <td class=numeric bgcolor=white>{{row.NoRead}}</td>
            <td class=percent bgcolor=white>{{row.PNR}}</td>

        </tr>
    </tbody>
</table>
<script>
    const rows = document.querySelectorAll(".product-row");
 for(let i = 0; i < rows.length; i++){
    const result = rows[i].querySelector(".PNR").textContent;
    if(result >= 5 && result < 8){ 
          rows[i].classList.add("warning");
        } 
    else if(result >= 8 ){ 
          rows[i].classList.add("alarm");
        } 
}
</script>
</body>```
2

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.