From 2c8b50e8c5dbbef2a8c9b3b1fcc2cd1e48b8bf72 Mon Sep 17 00:00:00 2001
From: Kevin Matsubara <kevin.matsubara@proton.me>
Date: Fri, 28 Mar 2025 21:07:32 +0100
Subject: [PATCH] Replace ul with table for server items.

---
 .../Components/Controls/ServerComponent.razor | 92 ++++++++++---------
 .../Controls/ServerListComponent.razor        | 19 +++-
 2 files changed, 68 insertions(+), 43 deletions(-)

diff --git a/ServerManagement/Components/Controls/ServerComponent.razor b/ServerManagement/Components/Controls/ServerComponent.razor
index 3dd9101..04f9f16 100755
--- a/ServerManagement/Components/Controls/ServerComponent.razor
+++ b/ServerManagement/Components/Controls/ServerComponent.razor
@@ -4,47 +4,57 @@
 
 @if (Server != null)
 {
-  <li @key="Server.Id" style="background-color: @GetBackgroundColor();">
-    @Server.Name in @Server.City is
-    <span style="color:@(Server.IsOnline ? "green" : "red")">
-      @(Server.IsOnline ? "online" : "offline")
-    </span>;
-    &nbsp;
-    @if (Server.IsOnline)
-    {
-      <button type="button" class="btn btn-outline-danger"
-        @onclick="@(() => { Server.IsOnline = false; })">
-      Turn off
-      </button>
-    }
-    else
-    {
-      <button type="button" class="btn btn-outline-success"
-        @onclick="@(() => { Server.IsOnline = true; })">
-      Turn on
-      </button>
-    }
-    &nbsp;
-    @if (Server.IsOnline)
-    {
-      Random random = new Random();
-      int randomNumber = random.Next(0, 500);
-      <text>@randomNumber users online</text>
-    }
-    else
-    {
-      <text>N/A</text>
-    }
-    &nbsp;
-    <a href="@($"/servers/{Server.Id}")" class="btn btn-primary">Edit</a>
-    &nbsp;
-    <EditForm
-      Model="Server"
-      FormName="@($"formDeleteServer{Server.Id}")"
-      OnValidSubmit="@(() => { DeleteServer(Server.Id); })">
-      <button type="submit" class="btn btn-danger">Delete</button>
-    </EditForm>
-  </li>
+  <tr @key="Server.Id" style="background-color: @GetBackgroundColor();">
+    <td>
+      @Server.Name
+    </td>
+    <td>
+      @Server.City
+    </td>
+    <td>
+      <span style="color:@(Server.IsOnline ? "green" : "red")">
+        @(Server.IsOnline ? "online" : "offline")
+      </span>
+    </td>
+    <td>
+      @if (Server.IsOnline)
+      {
+        Random random = new Random();
+        int randomNumber = random.Next(0, 500);
+        <text>@randomNumber users online</text>
+      }
+      else
+      {
+        <text>N/A</text>
+      }
+    </td>
+    <td>
+      @if (Server.IsOnline)
+      {
+        <button type="button" class="btn btn-outline-danger"
+          @onclick="@(() => { Server.IsOnline = false; })">
+        Turn off
+        </button>
+      }
+      else
+      {
+        <button type="button" class="btn btn-outline-success"
+          @onclick="@(() => { Server.IsOnline = true; })">
+        Turn on
+        </button>
+      }
+      &nbsp;
+      <a href="@($"/servers/{Server.Id}")" class="btn btn-primary">Edit</a>
+    </td>
+    <td>
+      <EditForm
+        Model="Server"
+        FormName="@($"formDeleteServer{Server.Id}")"
+        OnValidSubmit="@(() => { DeleteServer(Server.Id); })">
+        <button type="submit" class="btn btn-danger">Delete</button>
+      </EditForm>
+    </td>
+  </tr>
 }
 
 @code {
diff --git a/ServerManagement/Components/Controls/ServerListComponent.razor b/ServerManagement/Components/Controls/ServerListComponent.razor
index 87fe56e..019d424 100644
--- a/ServerManagement/Components/Controls/ServerListComponent.razor
+++ b/ServerManagement/Components/Controls/ServerListComponent.razor
@@ -1,10 +1,25 @@
-<ul class="list-unstyled">
+<table class="table table-striped">
   <RepeaterComponent Items="this.servers">
+    <Header>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>City</th>
+          <th>Status</th>
+          <th>People online</th>
+          <th></th>
+          <th></th>
+        </tr>
+      </thead>
+    </Header>
     <Row Context="server">
       <ServerComponent server="server"></ServerComponent>
     </Row>
+    <Footer>
+
+    </Footer>
   </RepeaterComponent>
-</ul>
+</table>
 
 @code {
   private List<Server>? servers;