kevin/BlazorDeepDive
1
0
Fork 0
Code

Compare commits

base: kevin:21e24945fd98d02ecef2954bf0f5370176e5f874
Branches Tags
kevin:master
..
compare: kevin:a6dea2bc3a0f10e85f7e793c4de599870282473d
Branches Tags
kevin:master

No commits in common. "21e24945fd98d02ecef2954bf0f5370176e5f874" and "a6dea2bc3a0f10e85f7e793c4de599870282473d" have entirely different histories.
21e24945fd ... a6dea2bc3a

10 changed files with 78 additions and 174 deletions
Show Stats Expand all files Collapse all files

24
ServerManagement/Components/Controls/CityComponent.razor
View File

@ -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);
}
}

34
ServerManagement/Components/Controls/CityListComponent.razor
View File

@ -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);
}
}

30
ServerManagement/Components/Controls/SearchBarComponent.razor
View File

@ -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;
}
}

4
ServerManagement/Components/Controls/SearchBarComponent.razor.css
View File

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

59
ServerManagement/Components/Controls/ServerComponent.razor
View File

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

37
ServerManagement/Components/Controls/ServerListComponent.razor
View File

@ -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]
public string SearchFilter { get; set; } = "";
private List<Server>? servers;
protected override void OnParametersSet()
{
if (string.IsNullOrWhiteSpace(this.SearchFilter))
servers = ServersRepository.GetServersByCity(CityName ?? "Eindhoven");
}
private void DeleteServer(int serverId)
{
if (serverId > 0)
{
servers = ServersRepository.GetServersByCity(CityName ?? "Eindhoven");
}
else
{
servers = ServersRepository.SearchServers(SearchFilter);
ServersRepository.DeleteServer(serverId);
NavigationManager.Refresh(forceReload: true);
}
}
}

4
ServerManagement/Components/Pages/EditServer.razor
View File

@ -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">

4
ServerManagement/Components/Pages/EditServer.razor.css
View File

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

56
ServerManagement/Components/Pages/Servers.razor
View File

@ -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
CityName="@this.selectedCity"
SearchFilter="@this.searchFilter">
</ServerListComponent>
<ServerListComponent CityName="@this.selectedCity"></ServerListComponent>
@code {
private List<string> cities = ServersRepository.GetCities();
private string selectedCity = "Eindhoven";
private string searchFilter = "";
private CityListComponent? cityListComponent;
private SearchBarComponent? searchBarComponent;
private string _serverFilter = "";
private string serverFilter {
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;
cityListComponent?.ClearSelection();
//this.servers = ServersRepository.SearchServers(serverFilter);
this.selectedCity = string.Empty;
}
}

0
ServerManagement/Components/Controls/CityComponent.razor.css → ServerManagement/Components/Pages/Servers.razor.css
View File