#21 Styleing the table

Cantara · Nov 12, 2023 · 2749602 · 2749602
1 parent 25d3160
commit 2749602
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 14 deletions.
diff --git a/src/main/resources/static/styles/cssandjs/systemStatus.css b/src/main/resources/static/styles/cssandjs/systemStatus.css
@@ -30,6 +30,23 @@
 .error {
     background-color: #f99;
 }
+/* Table styles */
+table {
+    border-collapse: collapse;
+    width: 100%;
+}
+
+th, td {
+    text-align: left;
+    padding: 8px;
+}
+
+tr:nth-child(even){background-color: #f2f2f2}
+
+th {
+    background-color: #04AA6D;
+    color: white;
+}
 
 /* Additional styles for positioning and visual separation */
 .component-group {

diff --git a/src/main/resources/templates/RepositoryStatus.html b/src/main/resources/templates/RepositoryStatus.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <title>Application Status</title>
     <!-- Include any CSS or JS here -->
-    <style th:insert="~{../static/styles/cssandjs/main.css}"></style>
+    <style th:insert="~{../static/styles/cssandjs/systemStatus.css}"></style>
 </head>
 <body>
 
@@ -13,22 +13,32 @@ <h1>Repository Status</h1>
 <div>
     <h2 th:text="${count} + ' Sensors'"/>
     <table style="border: solid 1px black;">
+        <thead>
+        <tr>
+            <th>SensorId</th><th>TrendId</th><th>Type</th>
+        </tr>
+        </thead>
         <th:block th:each="sensorDetail : ${sensorList}">
-<!--            <tr th:each="e : ${map}">-->
-<!--        <thead>-->
-<!--        <tr>-->
-<!--            <th>Key</th>-->
-<!--            <th>Value</th>-->
-<!--        </tr>-->
-<!--        </thead>-->
-<!--        <tbody>-->
-
-        <tr th:each="property: ${sensorDetail}">
-            <td th:text="${property.key}"/>
-            <td th:text="${property.value}"/>
+            <tr>
+                <td th:text="${sensorDetail.sensorId}"/>
+                <td th:text="${sensorDetail.trendId}"/>
+                <td th:text="${sensorDetail.type}"/>
+            </tr>
+        </th:block>
+    </table>
+    <h3>Details</h3>
+    <table>
+        <thead>
+        <tr>
+            <th>Key</th><th>Value</th>
         </tr>
+        </thead>
+        <th:block th:each="sensorDetail : ${sensorList}">
+            <tr th:each="property: ${sensorDetail}">
+                <td th:text="${property.key}"/>
+                <td th:text="${property.value}"/>
+            </tr>
         </th:block>
-<!--        </tbody>-->
     </table>
 </div>