Add nav menu link to servers page with a different icon.

.gitignore

@@ -3,6 +3,9 @@
 ##
 ## Get latest from `dotnet new gitignore`
 
+# static images
+*/wwwroot/images/
+
 # dotenv files
 .env
 

ServerManagement/Components/Controls/ServerComponent.razor

@@ -1,9 +1,10 @@
 @namespace ServerManagement.Components.Controls
 
-<p>
-  Server is online.
+<p
+  style="@($"color:{(server.IsOnline ? "green" : "red")}")">
+  @server.Name is in: @server.City @(server.IsOnline ? "online" : "offline")
 </p>
 
 @code {
-  
+  private Server server = new Server { Name = "Server 1", City = "Einhoven" };
 }

ServerManagement/Components/Layout/NavMenu.razor

@@ -14,6 +14,12 @@
             </NavLink>
         </div>
 
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="/servers">
+                <span class="bi bi-motherboard-fill-nav-menu" aria-hidden="true"></span> Manage Servers
+            </NavLink>
+        </div>
+
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="counter">
                 <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Counter

ServerManagement/Components/Layout/NavMenu.razor.css

@@ -46,6 +46,11 @@
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
 }
 
+/* https://mattfrear.com/2024/02/27/customize-blazors-navmenu/ */
+.bi-motherboard-fill-nav-menu {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-motherboard-fill' viewBox='0 0 16 16'%3E %3Cpath d='M5 7h3V4H5z'/%3E %3Cpath d='M1 2a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-2H.5a.5.5 0 0 1-.5-.5v-1A.5.5 0 0 1 .5 9H1V8H.5a.5.5 0 0 1-.5-.5v-1A.5.5 0 0 1 .5 6H1V5H.5a.5.5 0 0 1-.5-.5v-2A.5.5 0 0 1 .5 2zm11 .5a.5.5 0 0 0-1 0v7a.5.5 0 0 0 1 0zm2 0a.5.5 0 0 0-1 0v7a.5.5 0 0 0 1 0zM3.5 10a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zM4 4h-.5a.5.5 0 0 0 0 1H4v1h-.5a.5.5 0 0 0 0 1H4a1 1 0 0 0 1 1v.5a.5.5 0 0 0 1 0V8h1v.5a.5.5 0 0 0 1 0V8a1 1 0 0 0 1-1h.5a.5.5 0 0 0 0-1H9V5h.5a.5.5 0 0 0 0-1H9a1 1 0 0 0-1-1v-.5a.5.5 0 0 0-1 0V3H6v-.5a.5.5 0 0 0-1 0V3a1 1 0 0 0-1 1m7 7.5v1a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-2a.5.5 0 0 0-.5.5'/%3E%3C/svg%3E");
+}
+
 .nav-item {
     font-size: 0.9rem;
     padding-bottom: 0.5rem;

ServerManagement/Components/Pages/EditServer.razor

@@ -0,0 +1,7 @@
+@page "/servers/edit"
+
+<p>Edit server</p>
+
+@code {
+  
+}

ServerManagement/Components/Pages/Servers.razor

@@ -5,8 +5,39 @@
 <br/>
 <br/>
 
-<ServerComponent></ServerComponent>
+<div class="container-fluid text-center">
+  <div class="row">
+    @foreach(var city in cities)
+    {
+    <div class="col">
+
+      <div class="card">
+        <img src="@($"/images/{city}.png")" class="card-img-top" alt="@city")">
+        <div class="card-body">
+          <button class="btn btn-primary">@city</button>
+        </div>
+      </div>
+    </div>
+    }
+  </div>
+</div>
+
+<br/>
+<ul>
+  @foreach(var server in servers)
+  {
+    <li>
+      @server.Name in @server.City is
+      <span style="color:@(server.IsOnline ? "green" : "red")">
+        @(server.IsOnline ? "online" : "offline")
+      </span>;
+      &nbsp;
+      <a href="/servers/edit" class="btn btn-link">Edit</a>
+    </li>
+  }
+</ul>
 
 @code {
-  
+  private List<string> cities = ServersRepository.GetCities();
+  private List<Server> servers = ServersRepository.GetServersByCity("Eindhoven");
 }

ServerManagement/Components/_Imports.razor

@@ -8,4 +8,5 @@
 @using Microsoft.JSInterop
 @using ServerManagement
 @using ServerManagement.Components
-@using ServerManagement.Components.Controls
+@using ServerManagement.Components.Controls
+@using ServerManagement.Models

ServerManagement/Models/Server.cs

@@ -0,0 +1,17 @@
+namespace ServerManagement.Models
+{
+  public class Server
+  {
+    public Server() 
+    {
+      Random random = new Random();
+      int randomNumber = random.Next(0, 2);
+      IsOnline = randomNumber != 0;
+    }
+
+    public int Id { get; set; }
+    public bool IsOnline { get; set; }
+    public string? Name { get; set; }
+    public string? City { get; set; }
+  }
+}

ServerManagement/Models/ServersRepository.cs

@@ -0,0 +1,90 @@
+namespace ServerManagement.Models
+{
+  public static class ServersRepository
+    {
+        private static List<Server> servers = new List<Server>()
+        {
+            new Server {  Id = 1, Name = "Server1", City = "Eindhoven" },
+            new Server {  Id = 2, Name = "Server2", City = "Eindhoven" },
+            new Server {  Id = 3, Name = "Server3", City = "Eindhoven" },
+            new Server {  Id = 4, Name = "Server4", City = "Eindhoven" },
+            new Server {  Id = 5, Name = "Server5", City = "Helmond" },
+            new Server {  Id = 6, Name = "Server6", City = "Helmond" },
+            new Server {  Id = 7, Name = "Server7", City = "Helmond" },
+            new Server {  Id = 8, Name = "Server8", City = "Oosterhout" },
+            new Server {  Id = 9, Name = "Server9", City = "Oosterhout" },
+            new Server {  Id = 10, Name = "Server10", City = "Roosendaal" },
+            new Server {  Id = 11, Name = "Server11", City = "Roosendaal" },
+            new Server {  Id = 12, Name = "Server12", City = "Deurne" },
+            new Server {  Id = 13, Name = "Server13", City = "Deurne" },
+        };
+
+        public static void AddServer(Server server)
+        {
+            var maxId = servers.Max(s => s.Id);
+            server.Id = maxId + 1;
+            servers.Add(server);
+        }
+
+        public static List<Server> GetServers() => servers;
+
+        public static List<Server> GetServersByCity(string cityName)
+        {
+            return servers.Where(s => s.City.Equals(cityName, StringComparison.OrdinalIgnoreCase)).ToList();
+        }
+
+        public static Server? GetServerById(int id)
+        {
+            var server = servers.FirstOrDefault(s => s.Id == id);
+            if (server != null)
+            {
+                return new Server
+                {
+                    Id = server.Id,
+                    Name = server.Name,
+                    City = server.City,
+                    IsOnline = server.IsOnline
+                };
+            }
+
+            return null;
+        }
+
+        public static void UpdateServer(int serverId, Server server)
+        {
+            if (serverId != server.Id) return;
+
+            var serverToUpdate = servers.FirstOrDefault(s => s.Id == serverId);
+            if (serverToUpdate != null)
+            {
+                serverToUpdate.IsOnline = server.IsOnline;
+                serverToUpdate.Name = server.Name;
+                serverToUpdate.City = server.City;
+            }
+        }
+
+        public static void DeleteServer(int serverId)
+        {
+            var server = servers.FirstOrDefault(s => s.Id == serverId);
+            if (server != null)
+            {
+                servers.Remove(server);
+            }
+        }
+
+        public static List<Server> SearchServers(string serverFilter)
+        {
+            return servers.Where(s => s.Name.Contains(serverFilter, StringComparison.OrdinalIgnoreCase)).ToList();
+        }
+
+        public static List<string> GetCities()
+        {
+            return servers
+            .Select(s => s.City)
+            .Where(city => !string.IsNullOrEmpty(city))
+            .Select(city => city!) // Null-forgiving operator
+            .Distinct()
+            .ToList();
+        }
+    }
+}