kevin/BlazorDeepDive
1
0
Fork 0
Code

Replace ul with table for server items.

Browse Source
This commit is contained in:
Kevin Matsubara 2025-03-28 21:07:32 +01:00
parent e4ac3ab0d9
commit 2c8b50e8c5
2 changed files with 68 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,47 +4,57 @@
@if (Server != null) @if (Server != null)
{ {
<li @key="Server.Id" style="background-color: @GetBackgroundColor();"> <tr @key="Server.Id" style="background-color: @GetBackgroundColor();">
@Server.Name in @Server.City is <td>
<span style="color:@(Server.IsOnline ? "green" : "red")"> @Server.Name
@(Server.IsOnline ? "online" : "offline") </td>
</span>; <td>
&nbsp; @Server.City
@if (Server.IsOnline) </td>
{ <td>
<button type="button" class="btn btn-outline-danger" <span style="color:@(Server.IsOnline ? "green" : "red")">
@onclick="@(() => { Server.IsOnline = false; })"> @(Server.IsOnline ? "online" : "offline")
Turn off </span>
</button> </td>
} <td>
else @if (Server.IsOnline)
{ {
<button type="button" class="btn btn-outline-success" Random random = new Random();
@onclick="@(() => { Server.IsOnline = true; })"> int randomNumber = random.Next(0, 500);
Turn on <text>@randomNumber users online</text>
</button> }
} else
&nbsp; {
@if (Server.IsOnline) <text>N/A</text>
{ }
Random random = new Random(); </td>
int randomNumber = random.Next(0, 500); <td>
<text>@randomNumber users online</text> @if (Server.IsOnline)
} {
else <button type="button" class="btn btn-outline-danger"
{ @onclick="@(() => { Server.IsOnline = false; })">
<text>N/A</text> Turn off
} </button>
&nbsp; }
<a href="@($"/servers/{Server.Id}")" class="btn btn-primary">Edit</a> else
&nbsp; {
<EditForm <button type="button" class="btn btn-outline-success"
Model="Server" @onclick="@(() => { Server.IsOnline = true; })">
FormName="@($"formDeleteServer{Server.Id}")" Turn on
OnValidSubmit="@(() => { DeleteServer(Server.Id); })"> </button>
<button type="submit" class="btn btn-danger">Delete</button> }
</EditForm> &nbsp;
</li> <a href="@($"/servers/{Server.Id}")" class="btn btn-primary">Edit</a>
</td>
<td>
<EditForm
Model="Server"
FormName="@($"formDeleteServer{Server.Id}")"
OnValidSubmit="@(() => { DeleteServer(Server.Id); })">
<button type="submit" class="btn btn-danger">Delete</button>
</EditForm>
</td>
</tr>
} }
@code { @code {

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

@ -1,10 +1,25 @@
<ul class="list-unstyled"> <table class="table table-striped">
<RepeaterComponent Items="this.servers"> <RepeaterComponent Items="this.servers">
<Header>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Status</th>
<th>People online</th>
<th></th>
<th></th>
</tr>
</thead>
</Header>
<Row Context="server"> <Row Context="server">
<ServerComponent server="server"></ServerComponent> <ServerComponent server="server"></ServerComponent>
</Row> </Row>
<Footer>
</Footer>
</RepeaterComponent> </RepeaterComponent>
</ul> </table>
@code { @code {
private List<Server>? servers; private List<Server>? servers;