Kevin Matsubara
7159c8ffed
Improves performance greatly when lots of li elements are to be created. Note that every li should have the same height in pixels in order for the Virtualize component to work properly.
93 lines
2.5 KiB
Plaintext
93 lines
2.5 KiB
Plaintext
@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>
|
|
<Virtualize Items="this.servers" Context="server">
|
|
<li @key="server.Id">
|
|
@server.Name in @server.City is
|
|
<span style="color:@(server.IsOnline ? "green" : "red")">
|
|
@(server.IsOnline ? "online" : "offline")
|
|
</span>;
|
|
|
|
<a href="@($"/servers/{server.Id}")" class="btn btn-primary">Edit</a>
|
|
|
|
<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<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;
|
|
}
|
|
} |