Refactored frontend to work with the latest mooncore changes

This commit is contained in:
2025-07-16 20:46:45 +02:00
parent 383d4bb24b
commit 61253919cf
93 changed files with 3347 additions and 1661 deletions

View File

@@ -1,8 +1,5 @@
@using MoonCore.Blazor.FlyonUi.Components
@using MoonCore.Blazor.Tailwind.Modals.Components
@using MoonlightServers.Shared.Enums
@using MoonlightServers.Frontend.UI.Components.Forms
@using MoonCore.Blazor.Tailwind.Components
@using MoonlightServers.Shared.Http.Requests.Admin.StarDockerImages
@inherits MoonCore.Blazor.FlyonUi.Modals.Components.BaseModal
@@ -12,17 +9,17 @@
<HandleForm @ref="HandleForm" Model="Form" OnValidSubmit="OnValidSubmit">
<div class="grid grid-cols-2 gap-2">
<div class="col-span-2">
<label class="block text-sm font-medium leading-6 text-white">Display Name</label>
<input @bind="Form.DisplayName" type="text" class="form-input w-full"/>
<label class="block text-sm font-medium leading-6 text-base-content">Display Name</label>
<input @bind="Form.DisplayName" type="text" class="input w-full"/>
</div>
<div class="col-span-2">
<label class="block text-sm font-medium leading-6 text-white">Identifier</label>
<input @bind="Form.Identifier" type="text" class="form-input w-full"/>
<label class="block text-sm font-medium leading-6 text-base-content">Identifier</label>
<input @bind="Form.Identifier" type="text" class="input w-full"/>
</div>
<div class="col-span-2">
<label class="block text-sm font-medium leading-6 text-white">Automatic pulling</label>
<label class="block text-sm font-medium leading-6 text-base-content">Automatic pulling</label>
<Switch @bind-Value="Form.AutoPulling"/>
</div>
</div>

View File

@@ -1,7 +1,5 @@
@using MoonCore.Blazor.FlyonUi.Components
@using MoonCore.Blazor.Tailwind.Modals.Components
@using MoonlightServers.Shared.Enums
@using MoonCore.Blazor.Tailwind.Components
@using MoonlightServers.Shared.Models
@inherits MoonCore.Blazor.FlyonUi.Modals.Components.BaseModal
@@ -11,13 +9,13 @@
<HandleForm @ref="HandleForm" Model="Form" OnValidSubmit="OnValidSubmit">
<div class="grid grid-cols-2 gap-x-2 gap-y-4">
<div class="col-span-1">
<label class="block text-sm font-medium leading-6 text-white">File</label>
<input @bind="Form.File" type="text" class="form-input w-full"/>
<label class="block text-sm font-medium leading-6 text-base-content">File</label>
<input @bind="Form.File" type="text" class="input w-full"/>
</div>
<div class="col-span-1">
<label class="block text-sm font-medium leading-6 text-white">Type</label>
<select @bind="Form.Parser" class="form-select w-full">
<label class="block text-sm font-medium leading-6 text-base-content">Type</label>
<select @bind="Form.Parser" class="select w-full">
@foreach (var val in Enum.GetValues<FileParsers>())
{
<option value="@val">@val</option>
@@ -26,16 +24,16 @@
</div>
<div class="col-span-2">
<button @onclick="AddEntry" class="btn btn-primary w-full">Add entry</button>
<button type="button" @onclick="AddEntry" class="btn btn-primary w-full">Add entry</button>
</div>
@foreach (var entry in Form.Entries)
{
<div class="col-span-2">
<div class="flex flex-row">
<input @bind="entry.Key" placeholder="Key" class="form-input placeholder-gray-500 grow rounded-r-none"/>
<input @bind="entry.Value" placeholder="Value" class="form-input placeholder-gray-500 grow rounded-none"/>
<button @onclick="() => RemoveEntry(entry)" class="btn btn-danger grow-0 rounded-l-none">
<input @bind="entry.Key" placeholder="Key" class="input placeholder-base-content/50 grow rounded-r-none"/>
<input @bind="entry.Value" placeholder="Value" class="input placeholder-base-content/50 grow rounded-none"/>
<button type="button" @onclick="() => RemoveEntry(entry)" class="btn btn-error grow-0 rounded-l-none">
<i class="icon-x"></i>
</button>
</div>

View File

@@ -1,9 +1,7 @@
@using MoonCore.Blazor.FlyonUi.Components
@using MoonCore.Blazor.Tailwind.Modals.Components
@using MoonlightServers.Shared.Enums
@using MoonlightServers.Shared.Http.Requests.Admin.StarVariables
@using MoonlightServers.Frontend.UI.Components.Forms
@using MoonCore.Blazor.Tailwind.Components
@inherits MoonCore.Blazor.FlyonUi.Modals.Components.BaseModal
@@ -12,38 +10,38 @@
<HandleForm @ref="HandleForm" Model="Form" OnValidSubmit="OnValidSubmit">
<div class="grid grid-cols-2 gap-2">
<div class="col-span-1">
<label class="block text-sm font-medium leading-6 text-white">Name</label>
<input @bind="Form.Name" type="text" class="form-input w-full"/>
<label class="block text-sm font-medium leading-6 text-base-content">Name</label>
<input @bind="Form.Name" type="text" class="input w-full"/>
</div>
<div class="col-span-1">
<label class="block text-sm font-medium leading-6 text-white">Description</label>
<input @bind="Form.Description" type="text" class="form-input w-full"/>
<label class="block text-sm font-medium leading-6 text-base-content">Description</label>
<input @bind="Form.Description" type="text" class="input w-full"/>
</div>
<div class="col-span-1">
<label class="block text-sm font-medium leading-6 text-white">Key</label>
<input @bind="Form.Key" type="text" class="form-input w-full"/>
<label class="block text-sm font-medium leading-6 text-base-content">Key</label>
<input @bind="Form.Key" type="text" class="input w-full"/>
</div>
<div class="col-span-1">
<label class="block text-sm font-medium leading-6 text-white">Default Value</label>
<input @bind="Form.DefaultValue" type="text" class="form-input w-full"/>
<label class="block text-sm font-medium leading-6 text-base-content">Default Value</label>
<input @bind="Form.DefaultValue" type="text" class="input w-full"/>
</div>
<div class="col-span-1">
<label class="block text-sm font-medium leading-6 text-white">Allow Viewing</label>
<label class="block text-sm font-medium leading-6 text-base-content">Allow Viewing</label>
<Switch @bind-Value="Form.AllowViewing"/>
</div>
<div class="col-span-1">
<label class="block text-sm font-medium leading-6 text-white">Allow Editing</label>
<label class="block text-sm font-medium leading-6 text-base-content">Allow Editing</label>
<Switch @bind-Value="Form.AllowEditing"/>
</div>
<div class="col-span-1">
<label class="block text-sm font-medium leading-6 text-white">Type</label>
<select @bind="Form.Type" class="form-select w-full">
<label class="block text-sm font-medium leading-6 text-base-content">Type</label>
<select @bind="Form.Type" class="select w-full">
@foreach (var val in Enum.GetValues<StarVariableType>())
{
<option value="@val">@val</option>
@@ -52,8 +50,8 @@
</div>
<div class="col-span-1">
<label class="block text-sm font-medium leading-6 text-white">Filter</label>
<input @bind="Form.Filter" type="text" class="form-input w-full"/>
<label class="block text-sm font-medium leading-6 text-base-content">Filter</label>
<input @bind="Form.Filter" type="text" class="input w-full"/>
</div>
</div>
</HandleForm>

View File

@@ -1,8 +1,5 @@
@using MoonCore.Blazor.FlyonUi.Components
@using MoonCore.Blazor.Tailwind.Modals.Components
@using MoonlightServers.Frontend.UI.Components.Forms
@using MoonCore.Blazor.Tailwind.Components
@using MoonCore.Helpers
@using MoonlightServers.Shared.Http.Requests.Admin.StarDockerImages
@using MoonlightServers.Shared.Http.Responses.Admin.StarDockerImages
@@ -13,17 +10,17 @@
<HandleForm @ref="HandleForm" Model="Form" OnValidSubmit="OnValidSubmit">
<div class="grid grid-cols-2 gap-2">
<div class="col-span-2">
<label class="block text-sm font-medium leading-6 text-white">Display Name</label>
<input @bind="Form.DisplayName" type="text" class="form-input w-full"/>
<label class="block text-sm font-medium leading-6 text-base-content">Display Name</label>
<input @bind="Form.DisplayName" type="text" class="input w-full"/>
</div>
<div class="col-span-2">
<label class="block text-sm font-medium leading-6 text-white">Identifier</label>
<input @bind="Form.Identifier" type="text" class="form-input w-full"/>
<label class="block text-sm font-medium leading-6 text-base-content">Identifier</label>
<input @bind="Form.Identifier" type="text" class="input w-full"/>
</div>
<div class="col-span-2">
<label class="block text-sm font-medium leading-6 text-white">Automatic pulling</label>
<label class="block text-sm font-medium leading-6 text-base-content">Automatic pulling</label>
<Switch @bind-Value="Form.AutoPulling"/>
</div>
</div>
@@ -44,7 +41,12 @@
protected override void OnInitialized()
{
Form = Mapper.Map<UpdateStarDockerImageRequest>(DockerImage);
Form = new UpdateStarDockerImageRequest()
{
AutoPulling = DockerImage.AutoPulling,
DisplayName = DockerImage.DisplayName,
Identifier = DockerImage.Identifier
};
}
private async Task OnValidSubmit()

View File

@@ -1,8 +1,5 @@
@using MoonCore.Blazor.FlyonUi.Components
@using MoonCore.Blazor.Tailwind.Modals.Components
@using MoonlightServers.Shared.Enums
@using MoonCore.Blazor.Tailwind.Components
@using MoonCore.Helpers
@using MoonlightServers.Shared.Models
@inherits MoonCore.Blazor.FlyonUi.Modals.Components.BaseModal
@@ -12,13 +9,13 @@
<HandleForm @ref="HandleForm" Model="Form" OnValidSubmit="OnValidSubmit">
<div class="grid grid-cols-2 gap-x-2 gap-y-4">
<div class="col-span-1">
<label class="block text-sm font-medium leading-6 text-white">File</label>
<input @bind="Form.File" type="text" class="form-input w-full"/>
<label class="block text-sm font-medium leading-6 text-base-content">File</label>
<input @bind="Form.File" type="text" class="input w-full"/>
</div>
<div class="col-span-1">
<label class="block text-sm font-medium leading-6 text-white">Type</label>
<select @bind="Form.Parser" class="form-select w-full">
<label class="block text-sm font-medium leading-6 text-base-content">Type</label>
<select @bind="Form.Parser" class="select w-full">
@foreach (var val in Enum.GetValues<FileParsers>())
{
<option value="@val">@val</option>
@@ -27,16 +24,16 @@
</div>
<div class="col-span-2">
<button @onclick="AddEntry" class="btn btn-primary w-full">Add entry</button>
<button type="button" @onclick="AddEntry" class="btn btn-primary w-full">Add entry</button>
</div>
@foreach (var entry in Form.Entries)
{
<div class="col-span-2">
<div class="flex flex-row">
<input @bind="entry.Key" placeholder="Key" class="form-input placeholder-gray-500 grow rounded-r-none"/>
<input @bind="entry.Value" placeholder="Value" class="form-input placeholder-gray-500 grow rounded-none"/>
<button @onclick="() => RemoveEntry(entry)" class="btn btn-danger grow-0 rounded-l-none">
<input @bind="entry.Key" placeholder="Key" class="input placeholder-base-content/50 grow rounded-r-none"/>
<input @bind="entry.Value" placeholder="Value" class="input placeholder-base-content/50 grow rounded-none"/>
<button type="button" @onclick="() => RemoveEntry(entry)" class="btn btn-error grow-0 rounded-l-none">
<i class="icon-x"></i>
</button>
</div>

View File

@@ -1,10 +1,7 @@
@using MoonCore.Blazor.FlyonUi.Components
@using MoonCore.Blazor.Tailwind.Modals.Components
@using MoonlightServers.Shared.Enums
@using MoonlightServers.Shared.Http.Requests.Admin.StarVariables
@using MoonlightServers.Frontend.UI.Components.Forms
@using MoonCore.Blazor.Tailwind.Components
@using MoonCore.Helpers
@using MoonlightServers.Shared.Http.Responses.Admin.StarVariables
@inherits MoonCore.Blazor.FlyonUi.Modals.Components.BaseModal
@@ -14,38 +11,38 @@
<HandleForm @ref="HandleForm" Model="Form" OnValidSubmit="OnValidSubmit">
<div class="grid grid-cols-1 md:grid-cols-2 gap-2">
<div class="col-span-1">
<label class="block text-sm font-medium leading-6 text-white">Name</label>
<input @bind="Form.Name" type="text" class="form-input w-full"/>
<label class="block text-sm font-medium leading-6 text-base-content">Name</label>
<input @bind="Form.Name" type="text" class="input w-full"/>
</div>
<div class="col-span-1">
<label class="block text-sm font-medium leading-6 text-white">Description</label>
<input @bind="Form.Description" type="text" class="form-input w-full"/>
<label class="block text-sm font-medium leading-6 text-base-content">Description</label>
<input @bind="Form.Description" type="text" class="input w-full"/>
</div>
<div class="col-span-1">
<label class="block text-sm font-medium leading-6 text-white">Key</label>
<input @bind="Form.Key" type="text" class="form-input w-full"/>
<label class="block text-sm font-medium leading-6 text-base-content">Key</label>
<input @bind="Form.Key" type="text" class="input w-full"/>
</div>
<div class="col-span-1">
<label class="block text-sm font-medium leading-6 text-white">Default Value</label>
<input @bind="Form.DefaultValue" type="text" class="form-input w-full"/>
<label class="block text-sm font-medium leading-6 text-base-content">Default Value</label>
<input @bind="Form.DefaultValue" type="text" class="input w-full"/>
</div>
<div class="col-span-1">
<label class="block text-sm font-medium leading-6 text-white">Allow Viewing</label>
<label class="block text-sm font-medium leading-6 text-base-content">Allow Viewing</label>
<Switch @bind-Value="Form.AllowViewing"/>
</div>
<div class="col-span-1">
<label class="block text-sm font-medium leading-6 text-white">Allow Editing</label>
<label class="block text-sm font-medium leading-6 text-base-content">Allow Editing</label>
<Switch @bind-Value="Form.AllowEditing"/>
</div>
<div class="col-span-1">
<label class="block text-sm font-medium leading-6 text-white">Type</label>
<select @bind="Form.Type" class="form-select w-full">
<label class="block text-sm font-medium leading-6 text-base-content">Type</label>
<select @bind="Form.Type" class="select w-full">
@foreach (var val in Enum.GetValues<StarVariableType>())
{
<option value="@val">@val</option>
@@ -54,8 +51,8 @@
</div>
<div class="col-span-1">
<label class="block text-sm font-medium leading-6 text-white">Filter</label>
<input @bind="Form.Filter" type="text" class="form-input w-full"/>
<label class="block text-sm font-medium leading-6 text-base-content">Filter</label>
<input @bind="Form.Filter" type="text" class="input w-full"/>
</div>
</div>
</HandleForm>
@@ -75,7 +72,17 @@
protected override void OnInitialized()
{
Form = Mapper.Map<UpdateStarVariableRequest>(Variable);
Form = new()
{
Name = Variable.Name,
AllowEditing = Variable.AllowEditing,
AllowViewing = Variable.AllowViewing,
DefaultValue = Variable.DefaultValue,
Description = Variable.Description,
Filter = Variable.Filter,
Key = Variable.Key,
Type = Variable.Type
};
}
private async Task OnValidSubmit()

View File

@@ -2,10 +2,6 @@
@using MoonCore.Blazor.FlyonUi.Components
@using MoonCore.Blazor.FlyonUi.Modals
@using MoonCore.Blazor.FlyonUi.Toasts
@using MoonCore.Blazor.Tailwind.Alerts
@using MoonCore.Blazor.Tailwind.Components
@using MoonCore.Blazor.Tailwind.Modals
@using MoonCore.Blazor.Tailwind.Toasts
@using MoonCore.Helpers
@using MoonCore.Models
@using MoonlightServers.Frontend.UI.Components.Stars.Modals
@@ -34,11 +30,11 @@
</div>
<div class="gap-x-2">
<button @onclick="() => UpdateDockerImage(dockerImage)" class="btn btn-primary">
<button type="button" @onclick="() => UpdateDockerImage(dockerImage)" class="btn btn-primary">
<i class="icon-settings text-base"></i>
</button>
<button @onclick="() => DeleteDockerImage(dockerImage)" class="btn btn-danger">
<button type="button" @onclick="() => DeleteDockerImage(dockerImage)" class="btn btn-error">
<i class="icon-trash text-base"></i>
</button>
</div>

View File

@@ -3,33 +3,33 @@
<div>
<div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
<div class="sm:col-span-2">
<label class="block text-sm font-medium leading-6 text-white">Name</label>
<label class="block text-sm font-medium leading-6 text-base-content">Name</label>
<div class="mt-2">
<input @bind="Request.Name" type="text" autocomplete="off" class="form-input w-full">
<input @bind="Request.Name" type="text" autocomplete="off" class="input w-full">
</div>
</div>
<div class="sm:col-span-2">
<label class="block text-sm font-medium leading-6 text-white">Version</label>
<label class="block text-sm font-medium leading-6 text-base-content">Version</label>
<div class="mt-2">
<input @bind="Request.Version" type="text" autocomplete="off" class="form-input w-full">
<input @bind="Request.Version" type="text" autocomplete="off" class="input w-full">
</div>
</div>
<div class="sm:col-span-2">
<label class="block text-sm font-medium leading-6 text-white">Author</label>
<label class="block text-sm font-medium leading-6 text-base-content">Author</label>
<div class="mt-2">
<input @bind="Request.Author" type="text" autocomplete="off" class="form-input w-full">
<input @bind="Request.Author" type="text" autocomplete="off" class="input w-full">
</div>
</div>
<div class="sm:col-span-2">
<label class="block text-sm font-medium leading-6 text-white">Donate Url</label>
<label class="block text-sm font-medium leading-6 text-base-content">Donate Url</label>
<div class="mt-2">
<input @bind="Request.DonateUrl" type="text" autocomplete="off" class="form-input w-full">
<input @bind="Request.DonateUrl" type="text" autocomplete="off" class="input w-full">
</div>
</div>
<div class="sm:col-span-2">
<label class="block text-sm font-medium leading-6 text-white">Update Url</label>
<label class="block text-sm font-medium leading-6 text-base-content">Update Url</label>
<div class="mt-2">
<input @bind="Request.UpdateUrl" type="text" autocomplete="off" class="form-input w-full">
<input @bind="Request.UpdateUrl" type="text" autocomplete="off" class="input w-full">
</div>
</div>
</div>

View File

@@ -1,23 +1,22 @@
@using MoonCore.Blazor.FlyonUi.Ace
@using MoonlightServers.Shared.Http.Requests.Admin.Stars
@using MoonCore.Blazor.Tailwind.Ace
<div>
<div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
<div class="sm:col-span-3">
<label class="block text-sm font-medium leading-6 text-white">Docker Image</label>
<label class="block text-sm font-medium leading-6 text-base-content">Docker Image</label>
<div class="mt-2">
<input @bind="Request.InstallDockerImage" type="text" autocomplete="off" class="form-input w-full">
<input @bind="Request.InstallDockerImage" type="text" autocomplete="off" class="input w-full">
</div>
</div>
<div class="sm:col-span-3">
<label class="block text-sm font-medium leading-6 text-white">Shell</label>
<label class="block text-sm font-medium leading-6 text-base-content">Shell</label>
<div class="mt-2">
<input @bind="Request.InstallShell" type="text" autocomplete="off" class="form-input w-full">
<input @bind="Request.InstallShell" type="text" autocomplete="off" class="input w-full">
</div>
</div>
<div class="sm:col-span-6">
<label class="block text-sm font-medium leading-6 text-white">Script</label>
<label class="block text-sm font-medium leading-6 text-base-content">Script</label>
<div class="mt-2" @onfocusout="OnFocusOut">
<CodeEditor @ref="CodeEditor" InitialContent="@Request.InstallScript" OnConfigure="OnConfigure" />
</div>

View File

@@ -1,5 +1,4 @@
@using MoonCore.Blazor.FlyonUi.Components
@using MoonCore.Blazor.Tailwind.Components
@using MoonCore.Helpers
@using MoonCore.Models
@using MoonlightServers.Shared.Http.Requests.Admin.Stars
@@ -13,15 +12,15 @@
<div>
<div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
<div class="sm:col-span-2">
<label class="block text-sm font-medium leading-6 text-white">Allow docker image change</label>
<label class="block text-sm font-medium leading-6 text-base-content">Allow docker image change</label>
<div class="mt-2">
<Switch @bind-Value="Request.AllowDockerImageChange" />
</div>
</div>
<div class="sm:col-span-2">
<label class="block text-sm font-medium leading-6 text-white">Default docker image</label>
<label class="block text-sm font-medium leading-6 text-base-content">Default docker image</label>
<div class="mt-2">
<select @bind="Request.DefaultDockerImage" class="form-select w-full">
<select @bind="Request.DefaultDockerImage" class="select w-full">
@foreach (var dockerImage in DockerImages)
{
var index = DockerImages.IndexOf(dockerImage);

View File

@@ -1,10 +1,8 @@
@using System.Text.Json
@using Microsoft.Extensions.Logging
@using MoonCore.Blazor.FlyonUi.Alerts
@using MoonCore.Blazor.FlyonUi.Modals
@using MoonCore.Blazor.FlyonUi.Toasts
@using MoonCore.Blazor.Tailwind.Alerts
@using MoonCore.Blazor.Tailwind.Modals
@using MoonCore.Blazor.Tailwind.Toasts
@using MoonlightServers.Frontend.UI.Components.Stars.Modals
@using MoonlightServers.Shared.Http.Requests.Admin.Stars
@using MoonlightServers.Shared.Models
@@ -35,11 +33,11 @@ else
</div>
<div class="gap-x-2">
<button @onclick="() => UpdateConfig(configuration)" class="btn btn-primary">
<button type="button" @onclick="() => UpdateConfig(configuration)" class="btn btn-primary">
<i class="icon-settings text-base"></i>
</button>
<button @onclick="() => DeleteConfig(configuration)" class="btn btn-danger">
<button type="button" @onclick="() => DeleteConfig(configuration)" class="btn btn-error">
<i class="icon-trash text-base"></i>
</button>
</div>

View File

@@ -2,21 +2,21 @@
<div>
<div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
<div class="sm:col-span-4">
<label class="block text-sm font-medium leading-6 text-white">Startup Command</label>
<label class="block text-sm font-medium leading-6 text-base-content">Startup Command</label>
<div class="mt-2">
<input @bind="Request.StartupCommand" type="text" autocomplete="off" class="form-input w-full">
<input @bind="Request.StartupCommand" type="text" autocomplete="off" class="input w-full">
</div>
</div>
<div class="sm:col-span-2">
<label class="block text-sm font-medium leading-6 text-white">Stop Command</label>
<label class="block text-sm font-medium leading-6 text-base-content">Stop Command</label>
<div class="mt-2">
<input @bind="Request.StopCommand" type="text" autocomplete="off" class="form-input w-full">
<input @bind="Request.StopCommand" type="text" autocomplete="off" class="input w-full">
</div>
</div>
<div class="sm:col-span-2">
<label class="block text-sm font-medium leading-6 text-white">Online Detection</label>
<label class="block text-sm font-medium leading-6 text-base-content">Online Detection</label>
<div class="mt-2">
<input @bind="Request.OnlineDetection" type="text" autocomplete="off" class="form-input w-full">
<input @bind="Request.OnlineDetection" type="text" autocomplete="off" class="input w-full">
</div>
</div>
</div>

View File

@@ -2,10 +2,6 @@
@using MoonCore.Blazor.FlyonUi.Components
@using MoonCore.Blazor.FlyonUi.Modals
@using MoonCore.Blazor.FlyonUi.Toasts
@using MoonCore.Blazor.Tailwind.Alerts
@using MoonCore.Blazor.Tailwind.Components
@using MoonCore.Blazor.Tailwind.Modals
@using MoonCore.Blazor.Tailwind.Toasts
@using MoonCore.Helpers
@using MoonCore.Models
@using MoonlightServers.Frontend.UI.Components.Stars.Modals
@@ -34,11 +30,11 @@
</div>
<div class="gap-x-2">
<button @onclick="() => UpdateVariable(variable)" class="btn btn-primary">
<button type="button" @onclick="() => UpdateVariable(variable)" class="btn btn-primary">
<i class="icon-settings text-base"></i>
</button>
<button @onclick="() => DeleteVariable(variable)" class="btn btn-danger">
<button type="button" @onclick="() => DeleteVariable(variable)" class="btn btn-error">
<i class="icon-trash text-base"></i>
</button>
</div>