ServerManagement/Components/Controls/CityComponent.razor

@@ -1,24 +0,0 @@
-<div class="col">
-  <div class="card @((city == selectedCity) ? "border-primary" : "")">
-    <img src=@($"/images/{@city}.png") class="card-img-top" alt="@city">
-    <div class="card-body @((city == selectedCity) ? "active" : "")">
-      <button class="btn btn-primary" @onclick="@(() => { SelectCity(city); })">@city</button>
-    </div>
-  </div>
-</div>
-
-@code {
-  [Parameter]
-  public string? city { get; set; } = "";
-
-  [Parameter]
-  public string? selectedCity { get; set; } = "Eindhoven";
-
-  [Parameter]
-  public EventCallback<string> SelectCityCallBack { get; set; }
-
-  private void SelectCity(string cityName)
-  {
-    SelectCityCallBack.InvokeAsync(cityName);
-  }
-}

ServerManagement/Components/Controls/CityListComponent.razor

@@ -1,34 +0,0 @@
-
-@if (cities != null && cities.Count > 0)
-{
-  <div class="container-fluid text-center">
-    <div class="row">
-      @foreach(var city in cities)
-      {
-      <CityComponent
-        city="@city"
-        selectedCity="@this.selectedCity"
-        SelectCityCallBack="HandleCitySelection">
-        </CityComponent>
-      }
-    </div>
-  </div>
-}
-
-@code {
-  private string selectedCity = "Eindhoven";
-  private List<string> cities = ServersRepository.GetCities();
-
-  [Parameter]
-  public EventCallback<string> SelectCityCallBack { get; set; }
-
-  public void ClearSelection()
-  {
-    this.selectedCity = string.Empty;
-  }
-  private void HandleCitySelection(string cityName)
-  {
-    this.selectedCity = cityName;
-    SelectCityCallBack.InvokeAsync(cityName);
-  }
-}

ServerManagement/Components/Controls/SearchBarComponent.razor

@@ -1,30 +0,0 @@
-<div class="input-group mb-3 input-width">
-  <input type="text" class="form-control" placeholder="Search servers"
-    @bind-value="serverFilter"
-    @bind-value:event="oninput" />
-  <button class="btn btn-outline-secondary" type="button" id="button-search" @onclick="HandleSearch">Search</button>
-</div>
-
-@code {
-  private string _serverFilter = "";
-  private string serverFilter {
-    get => _serverFilter;
-    set
-    {
-      _serverFilter = value;
-    }
-  }
-
-  [Parameter]
-  public EventCallback<string> FilterSearchTerm { get; set; }
-
-  private void HandleSearch()
-  {
-    FilterSearchTerm.InvokeAsync(serverFilter);
-  }
-
-  public void ClearFilter()
-  {
-    this.serverFilter = string.Empty;
-  }
-}

ServerManagement/Components/Controls/SearchBarComponent.razor.css

@@ -1,4 +0,0 @@
-
-.input-width {
-    width: 30%;
-}

ServerManagement/Components/Controls/ServerComponent.razor

@@ -1,62 +1,23 @@
 @namespace ServerManagement.Components.Controls
 
-@inject NavigationManager NavigationManager
+@if (server != null)
-
-@if (Server != null)
 {
-  <li @key="Server.Id">
+  <div
-    @Server.Name in @Server.City is
+    style="@($"color:{(server.IsOnline ? "green" : "red")}")">
-    <span style="color:@(Server.IsOnline ? "green" : "red")">
+    @server.Name is in: @server.City @(server.IsOnline ? "online" : "offline")
-      @(Server.IsOnline ? "online" : "offline")
-    </span>;
     &nbsp;
-    @if (Server.IsOnline)
+    <button type="submit" class="btn btn-primary" @onclick="ChangeStatus">Turn On/Off</button>
-    {
+  </div>
-      <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>
 }
 
 @code {
-  [Parameter]
+  private Server? server { get; set; } = new Server { Name = "Server 1", City = "Einhoven" };
-  public Server? Server { get; set; }
 
-  private void DeleteServer(int serverId)
+  private void ChangeStatus()
   {
-    if (serverId > 0)
+    if (server != null)
     {
-      ServersRepository.DeleteServer(serverId);
+      this.server.IsOnline = !this.server.IsOnline;
-      NavigationManager.Refresh(forceReload: true);
     }
   }
 }

ServerManagement/Components/Controls/ServerListComponent.razor

@@ -1,29 +1,44 @@
+@inject NavigationManager NavigationManager
+
 @if (this.servers != null && this.servers.Count > 0)
 {
   <ul>
     <Virtualize Items="this.servers" Context="server">
-      <ServerComponent server="server"></ServerComponent>
+      <li @key="server.Id">
+        @server.Name in @server.City is
+        <span style="color:@(server.IsOnline ? "green" : "red")">
+          @(server.IsOnline ? "online" : "offline")
+        </span>;
+        &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>
     </Virtualize>
   </ul>
 }
 
 @code {
-  private List<Server>? servers;
-
   [Parameter]
   public string? CityName { get; set; }
-  [Parameter]
+  private List<Server>? servers;
-  public string SearchFilter { get; set; } = "";
 
   protected override void OnParametersSet()
-  {
-    if (string.IsNullOrWhiteSpace(this.SearchFilter))
   {
     servers = ServersRepository.GetServersByCity(CityName ?? "Eindhoven");
   }
-    else
+
+  private void DeleteServer(int serverId)
   {
-      servers = ServersRepository.SearchServers(SearchFilter);
+    if (serverId > 0)
+    {
+      ServersRepository.DeleteServer(serverId);
+      NavigationManager.Refresh(forceReload: true);
     }
   }
 }

ServerManagement/Components/Pages/EditServer.razor

@@ -19,7 +19,7 @@
       <div class="col-2">
         <label class="col-form-label">Name</label>
       </div>
-      <div class="col-6 input-width">
+      <div class="col-6">
         <InputText @bind-Value="server.Name" class="form-control"></InputText>
       </div>
       <div class="col">
@@ -31,7 +31,7 @@
       <div class="col-2">
         <label class="col-form-label">City</label>
       </div>
-      <div class="col-6 input-width">
+      <div class="col-6">
         <InputText @bind-Value="server.City" class="form-control"></InputText>
       </div>
       <div class="col">

ServerManagement/Components/Pages/EditServer.razor.css

@@ -1,4 +0,0 @@
-
-.input-width {
-    width: 40%;
-}

ServerManagement/Components/Pages/Servers.razor

@@ -4,35 +4,59 @@
 <h3>Servers</h3>
 <br/>
 <br/>
-<CityListComponent @ref="cityListComponent" SelectCityCallBack="HandleCitySelection"></CityListComponent>
+
+<div class="container-fluid text-center">
+  <div class="row">
+    @foreach(var city in cities)
+    {
+    <div class="col">
+
+      <div class="card @((city == selectedCity) ? "border-primary" : "")">
+        <img src=@($"/images/{@city}.png") class="card-img-top" alt="@city">
+        <div class="card-body @((city == selectedCity) ? "active" : "")">
+          <button class="btn btn-primary" @onclick="@(() => { SelectCity(city); })">@city</button>
+        </div>
+      </div>
+    </div>
+    }
+  </div>
+</div>
+
 <br/>
-<SearchBarComponent @ref="searchBarComponent" FilterSearchTerm="HandleSearch"></SearchBarComponent>
+<div class="input-group mb-3">
+  <input type="text" class="form-control" placeholder="Search servers"
+    @bind-value="serverFilter"
+    @bind-value:event="oninput" />
+  <button class="btn btn-outline-secondary" type="button" id="button-search" @onclick="HandleSearch">Search</button>
+</div>
 <br/>
 <a href="@($"/servers/add")" class="btn btn-primary">Add</a>
 <br/>
 
-<ServerListComponent
+<ServerListComponent CityName="@this.selectedCity"></ServerListComponent>
-  CityName="@this.selectedCity"
-  SearchFilter="@this.searchFilter">
-
-</ServerListComponent>
 
 @code {
+  private List<string> cities = ServersRepository.GetCities();
   private string selectedCity = "Eindhoven";
-  private string searchFilter = "";
+  private string _serverFilter = "";
-  private CityListComponent? cityListComponent;
+  private string serverFilter {
-  private SearchBarComponent? searchBarComponent;
+    get => _serverFilter;
+    set
+    {
+      _serverFilter = value;
+      //this.servers = ServersRepository.SearchServers(_serverFilter);
+      this.selectedCity = string.Empty;
+    }
+  }
 
-  private void HandleCitySelection(string cityName)
+  private void SelectCity(string cityName)
   {
     this.selectedCity = cityName;
-    this.searchFilter = string.Empty;
-    searchBarComponent?.ClearFilter();
   }
 
-  private void HandleSearch(string searchFilter)
+  private void HandleSearch()
   {
-    this.searchFilter = searchFilter;
+    //this.servers = ServersRepository.SearchServers(serverFilter);
-    cityListComponent?.ClearSelection();
+    this.selectedCity = string.Empty;
   }
 }