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>; </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"> <Form Model="@Archive" Layout="@FormLayout.Vertical">
<FormItem Label="Version"> <FormItem Label="Version">
<Input @bind-Value="@context.Version" /> <Input @bind-Value="@context.Version" />

View file

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

View file

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