BlazorDeepDive/ServerManagement/Components/Pages/Servers.razor

@page "/servers"
@using ServerManagement.Components.Controls

@inject NavigationManager NavigationManager

<h3>Servers</h3>
<br/>
<br/>

<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/>
<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/>

<ul>
  @foreach(var server in servers)
  {
    <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>
  }
</ul>

@code {
  private List<string> cities = ServersRepository.GetCities();
  private List<Server> servers = ServersRepository.GetServersByCity("Eindhoven");
  private string selectedCity = "Eindhoven";
  private string _serverFilter = "";
  private string serverFilter {
    get => _serverFilter;
    set
    {
      _serverFilter = value;
      this.servers = ServersRepository.SearchServers(_serverFilter);
      this.selectedCity = string.Empty;
    }
  }

  private void DeleteServer(int serverId)
  {
    if (serverId > 0)
    {
      ServersRepository.DeleteServer(serverId);
      NavigationManager.Refresh();
    }
  }

  private void SelectCity(string cityName)
  {
    this.selectedCity = cityName;
    this.servers = ServersRepository.GetServersByCity(this.selectedCity);
  }

  private void HandleSearch()
  {
    this.servers = ServersRepository.SearchServers(serverFilter);
    this.selectedCity = string.Empty;
  }
}