Change layout of game edit page

This commit is contained in:
Pat Hartl 2023-04-08 15:40:56 -05:00
parent 977d47b998
commit 68caec1c5f
3 changed files with 118 additions and 102 deletions

View file

@ -47,7 +47,7 @@
</Template>;
}
<Modal Visible="@ModalVisible" Title="Upload Archive" OnOk="UploadArchive" OnCancel="Cancel" Footer="@Footer">
<Modal Visible="@ModalVisible" Title="Upload Archive" OnOk="UploadArchiveJS" OnCancel="Cancel" Footer="@Footer">
<Form Model="@Archive" Layout="@FormLayout.Vertical">
<FormItem Label="Version">
<Input @bind-Value="@context.Version" />

View file

@ -3,57 +3,59 @@
@if (Keys != null)
{
<GridRow>
<GridCol Span="8">
<Statistic Title="Available" Value="Keys.Count - AllocatedKeys" Style="text-align: center;" />
</GridCol>
<GridCol Span="8">
<Statistic Title="Allocated" Value="AllocatedKeys" Style="text-align: center;" />
</GridCol>
<GridCol Span="8">
<Statistic Title="Total" Value="Keys.Count" Style="text-align: center;" />
</GridCol>
</GridRow>
<Space Direction="@DirectionVHType.Vertical" Style="width: 100%;">
<SpaceItem>
<GridRow>
<GridCol Span="8">
<Statistic Title="Available" Value="Keys.Count - AllocatedKeys" Style="text-align: center;" />
</GridCol>
<GridCol Span="8">
<Statistic Title="Allocated" Value="AllocatedKeys" Style="text-align: center;" />
</GridCol>
<GridCol Span="8">
<Statistic Title="Total" Value="Keys.Count" Style="text-align: center;" />
</GridCol>
</GridRow>
</SpaceItem>
<Modal Title="View Keys" Visible="ViewModalVisible" Maximizable="false" DefaultMaximized="true" OnCancel="() => ViewModalVisible = false" OnOk="() => ViewModalVisible = false">
<Table TItem="Key" DataSource="@Keys" Bordered>
<PropertyColumn Property="k => k.Value">
<InputPassword @bind-Value="@context.Value" />
</PropertyColumn>
<PropertyColumn Property="k => k.AllocationMethod" />
<Column TData="string">
@switch (context.AllocationMethod)
{
case KeyAllocationMethod.MacAddress:
<text>@context.ClaimedByMacAddress</text>
break;
<SpaceItem>
<Table TItem="Key" DataSource="@Keys">
<PropertyColumn Property="k => k.Value">
<InputPassword @bind-Value="@context.Value" />
</PropertyColumn>
<PropertyColumn Property="k => k.AllocationMethod" Title="Allocation Method" />
<Column TData="string" Title="Claimed By">
@switch (context.AllocationMethod)
{
case KeyAllocationMethod.MacAddress:
<text>@context.ClaimedByMacAddress</text>
break;
case KeyAllocationMethod.UserAccount:
<text>@context.ClaimedByUser?.UserName</text>
break;
}
</Column>
<PropertyColumn Property="g => g.ClaimedOn" Format="MM/dd/yyyy hh:mm tt" Sortable />
<ActionColumn Title="">
<Space>
<SpaceItem>
@if (context.IsAllocated())
{
<Button OnClick="() => Release(context)">Release</Button>
}
</SpaceItem>
</Space>
</ActionColumn>
</Table>
</Modal>
case KeyAllocationMethod.UserAccount:
<text>@context.ClaimedByUser?.UserName</text>
break;
}
</Column>
<PropertyColumn Property="g => g.ClaimedOn" Format="MM/dd/yyyy hh:mm tt" Title="Claimed On" Sortable />
<ActionColumn Title="">
<Space Style="display: flex; justify-content: end">
<SpaceItem>
@if (context.IsAllocated())
{
<Button OnClick="() => Release(context)">Release</Button>
}
</SpaceItem>
</Space>
</ActionColumn>
</Table>
</SpaceItem>
</Space>
<Modal Title="Edit Keys" Visible="EditModalVisible" Maximizable="false" DefaultMaximized="true" OnCancel="() => EditModalVisible = false" OnOk="Save">
<StandaloneCodeEditor @ref="Editor" Id="editor" ConstructionOptions="EditorConstructionOptions" />
</Modal>
}
<style>
.monaco-editor-container {
height: 600px;
@ -67,7 +69,6 @@
int AllocatedKeys;
bool ViewModalVisible = false;
bool EditModalVisible = false;
private StandaloneCodeEditor? Editor;
@ -96,11 +97,6 @@
EditModalVisible = true;
}
public void View()
{
ViewModalVisible = true;
}
private async Task Release(Key key)
{
key = await KeyService.Release(key);

View file

@ -1,4 +1,5 @@
@page "/Games/{id:guid}/Edit"
@page "/Games/{id:guid}/Edit/{panel}"
@page "/Games/Add"
@using LANCommander.Models;
@using System.IO.Compression;
@ -13,10 +14,34 @@
@inject NavigationManager NavigationManager
@inject ModalService ModalService
<Space Direction="DirectionVHType.Vertical" Size="@("large")" Style="width: 100%;">
<SpaceItem>
<Card Title="Game Details">
<Body>
<Layout Class="site-layout-background" Style="padding: 24px 0;">
<Sider Class="site-layout-background" Width="200">
<Menu Mode="@MenuMode.Inline" Style="height: 100%;">
<MenuItem RouterLink="@($"/Games/{Game.Id}/Edit/General")">General</MenuItem>
@if (Game != null && Game.Id != Guid.Empty)
{
<MenuItem RouterLink="@($"/Games/{Game.Id}/Edit/Actions")">Actions</MenuItem>
<MenuItem RouterLink="@($"/Games/{Game.Id}/Edit/Multiplayer")">Multiplayer</MenuItem>
<MenuItem RouterLink="@($"/Games/{Game.Id}/Edit/Saves")">Saves</MenuItem>
<MenuItem RouterLink="@($"/Games/{Game.Id}/Edit/Keys")">Keys</MenuItem>
<MenuItem RouterLink="@($"/Games/{Game.Id}/Edit/Scripts")">Scripts</MenuItem>
<MenuItem RouterLink="@($"/Games/{Game.Id}/Edit/Archives")">Archives</MenuItem>
}
</Menu>
</Sider>
<Content>
<PageHeader>
<PageHeaderTitle>@Panel</PageHeaderTitle>
<PageHeaderExtra>
<Button Type="@ButtonType.Primary" OnClick="Save">Save</Button>
</PageHeaderExtra>
</PageHeader>
<div class="site-layout-content">
@if (Panel == "General" || String.IsNullOrWhiteSpace(Panel))
{
<Form Model="@Game" Layout="@FormLayout.Vertical">
<FormItem Label="Title">
<GameMetadataLookup @ref="GameMetadataLookup" OnResultSelected="OnGameLookupResultSelected" />
@ -67,70 +92,65 @@
<FormItem Label="Tags">
<TagsInput Entities="Tags" @bind-Values="Game.Tags" OptionLabelSelector="c => c.Name" TItem="Data.Models.Tag" />
</FormItem>
<FormItem>
<Button Type="@ButtonType.Primary" OnClick="Save" Icon="@IconType.Fill.Save">Save</Button>
</FormItem>
</Form>
</Body>
</Card>
</SpaceItem>
}
@if (Game != null && Game.Id != Guid.Empty)
{
<SpaceItem>
<Card Title="Actions">
<Body>
@if (Game != null && Game.Id != Guid.Empty)
{
if (Panel == "Actions")
{
<ActionEditor @bind-Actions="Game.Actions" GameId="Game.Id" ArchiveId="@LatestArchiveId" />
</Body>
</Card>
</SpaceItem>
}
<SpaceItem>
<Card Title="Multiplayer Modes">
<Body>
if (Panel == "Multiplayer")
{
<MultiplayerModeEditor @bind-Value="Game.MultiplayerModes" />
</Body>
</Card>
</SpaceItem>
}
<SpaceItem>
<Card Title="Save Paths">
<Body>
if (Panel == "Saves")
{
<SavePathEditor @bind-Value="Game.SavePaths" GameId="Game.Id" ArchiveId="@LatestArchiveId" />
</Body>
</Card>
</SpaceItem>
}
<SpaceItem>
<Card Title="Keys">
<Extra>
<Button OnClick="() => KeysEditor.Edit()">Edit</Button>
<Button OnClick="() => KeysEditor.View()" Type="@ButtonType.Primary">View</Button>
</Extra>
<Body>
if (Panel == "Keys")
{
<KeysEditor @ref="KeysEditor" @bind-Keys="Game.Keys" GameId="Game.Id" />
</Body>
</Card>
</SpaceItem>
<SpaceItem>
<Card Title="Scripts">
<Body>
<Button OnClick="() => KeysEditor.Edit()">Edit</Button>
}
if (Panel == "Scripts")
{
<ScriptEditor @bind-Scripts="Game.Scripts" GameId="Game.Id" ArchiveId="@LatestArchiveId" />
</Body>
</Card>
</SpaceItem>
}
<SpaceItem>
<Card Title="Archives">
<ArchiveUploader Game="Game" />
</Card>
</SpaceItem>
if (Panel == "Archives")
{
<ArchiveUploader Game="Game" />
}
}
</div>
</Content>
</Layout>
<style>
.site-layout-background {
background: #fff;
}
</Space>
.site-layout-content {
padding: 0 24px;
}
.ant-layout-content > .ant-page-header-heading {
padding-top: 0;
}
</style>
@code {
[Parameter] public Guid Id { get; set; }
[Parameter] public string Panel { get; set; }
bool Success;
string[] Errors = { };