andreitdr/SethDiscordBot
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Updated the web UI to use the API. Reworked the looks of web UI

Browse Source
This commit is contained in:
Andrei Tudor
2024-12-14 17:31:36 +02:00
parent 9102cfaa47
commit 54be74b1cb
27 changed files with 227 additions and 738 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
DiscordBotWebUI/Components/App.razor
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
@@ -9,14 +9,38 @@
<link rel="stylesheet" href="app.css"/>
<link rel="stylesheet" href="DiscordBotWebUI.styles.css"/>
<link rel="icon" type="image/png" href="favicon.png"/>
<RadzenTheme Theme="material" @rendermode="InteractiveServer" />
<link rel="stylesheet" id="theme" href="_content/Radzen.Blazor/css/standard-dark.css"/>
<HeadOutlet/>
</head>
<body>
<Routes @rendermode="InteractiveServer"/>
<script src="_framework/blazor.web.js"></script>
<script src="_content/Radzen.Blazor/Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version)"></script>
<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
</body>
</html>
</html>
@code {
[CascadingParameter]
private HttpContext HttpContext { get; set; }
[Inject]
private ThemeService ThemeService { get; set; }
protected override void OnInitialized()
{
base.OnInitialized();
if (HttpContext != null)
{
var theme = "dark";
if (!string.IsNullOrEmpty(theme))
{
ThemeService.SetTheme(theme, false);
}
}
}
}

43
DiscordBotWebUI/Components/Items/Marketplace.razor
View File

@@ -1,43 +0,0 @@
@using DiscordBotCore
@using DiscordBotCore.Plugin
@using DiscordBotWebUI.Types
<RadzenDataGrid AllowColumnResize="true" PageSize="5" AllowPaging="true" PagerHorizontalAlign="HorizontalAlign.Left" Data="ListedItems">
<Columns>
<RadzenDataGridColumn Property="@nameof(MarketItem.Name)" Title="Item Name"></RadzenDataGridColumn>
<RadzenDataGridColumn Property="@nameof(MarketItem.Author)" Title="Item Author"></RadzenDataGridColumn>
<RadzenDataGridColumn Property="@nameof(MarketItem.Description)" Title="Item Description"></RadzenDataGridColumn>
<RadzenDataGridColumn Title="Item Download">
<Template Context="item">
<RadzenButton Click="() => DownloadPlugin(item.Name)">Download</RadzenButton>
</Template>
</RadzenDataGridColumn>
</Columns>
</RadzenDataGrid>
<RadzenProgressBar Value="_ProgressValue" Visible="_ProgressBarVisible"/>
@code {
private float _ProgressValue = .0f;
private bool _ProgressBarVisible = false;
[Parameter]
public List<MarketItem> ListedItems { get; set; }
private async Task DownloadPlugin(string pluginName)
{
_ProgressBarVisible = true;
IProgress<float> downloadProgress = new Progress<float>(p => {
_ProgressValue = p;
StateHasChanged();
});
PluginOnlineInfo? pluginInfo = await Application.CurrentApplication.PluginManager.GetPluginDataByName(pluginName);
if (pluginInfo is null)
return;
await Application.CurrentApplication.PluginManager.InstallPluginWithProgressBar(pluginInfo, downloadProgress);
_ProgressBarVisible = false;
}
}

8
DiscordBotWebUI/Components/Items/Setup/FinishSetupComponent.razor
View File

@@ -1,8 +0,0 @@
@code {
[Parameter] public Action CompleteSetup { get; set; }
}
<RadzenHeading Size="H4">Final Setup</RadzenHeading>
<p>Your bot is almost ready! Click 'Finish' to complete the setup.</p>
<RadzenButton Text="Finish" Click="CompleteSetup" Style="margin-top: 20px;" />

60
DiscordBotWebUI/Components/Items/Setup/StartupConfigurationComponent.razor
View File

@@ -1,60 +0,0 @@
@using DiscordBotCore
@code {
[Parameter] public Action NextStep { get; set; }
private string BotToken { get; set; }
private string BotPrefix { get; set; }
private List<ulong> BotServers { get; set; }
private string BotServersString { get; set; }
private async void DoNextStep()
{
if(string.IsNullOrEmpty(BotToken) || string.IsNullOrEmpty(BotPrefix) || string.IsNullOrEmpty(BotServersString))
{
return;
}
if(BotServersString.Contains(","))
{
BotServersString = BotServersString.Replace(",", ";");
}
var stringList = BotServersString.Split(';');
BotServers = new List<ulong>();
foreach(var serverId in stringList)
{
if(ulong.TryParse(serverId, out ulong id))
{
BotServers.Add(id);
}
}
if (!BotServers.Any())
{
return;
}
Application.CurrentApplication.ApplicationEnvironmentVariables.Add("token", BotToken);
Application.CurrentApplication.ApplicationEnvironmentVariables.Add("prefix", BotPrefix);
Application.CurrentApplication.ApplicationEnvironmentVariables.Add("ServerID", BotServers);
await Application.CurrentApplication.ApplicationEnvironmentVariables.SaveToFile();
NextStep.Invoke();
}
}
<RadzenHeading Size="H4">Basic Configuration</RadzenHeading>
<p>Please provide some basic settings to get started.</p>
<RadzenLabel Text="Token" />
<RadzenTextBox @bind-Value="BotToken" Placeholder="Enter bot token here" Style="width: 100%;" />
<RadzenLabel Text="Prefix" Style="margin-top: 10px;" />
<RadzenTextBox @bind-Value="BotPrefix" Placeholder="Enter the prefix here" Style="width: 100%;" />
<RadzenLabel Text="Server Ids separated by ;" Style="margin-top: 20px;" />
<RadzenTextBox @bind-Value="BotServersString" Placeholder="Enter Server Ids here. Separated by commas (;)" Style="width: 100%;" />
<RadzenButton Text="Next" Click="DoNextStep" Style="margin-top: 30px;" />

7
DiscordBotWebUI/Components/Items/Setup/WelcomeComponent.razor
View File

@@ -1,7 +0,0 @@
@code {
[Parameter] public Action NextStep { get; set; }
}
<RadzenHeading Size="H4">Welcome to the Bot Setup Wizard</RadzenHeading>
<p>This setup wizard will guide you through the process of configuring your bot and downloading the necessary dependencies.</p>
<RadzenButton Text="Start Setup" Click="NextStep" Style="margin-top: 20px;" />

6
DiscordBotWebUI/Components/Layout/MainLayout.razor
View File

@@ -1,4 +1,5 @@
@inherits LayoutComponentBase
@inject CookieThemeService CookieThemeService
<RadzenComponents @rendermode="InteractiveServer" />
<div class="page">
@@ -7,12 +8,11 @@
</div>
<main>
<RadzenPanel Style="height: 100%; width: 100%">
<RadzenBody Expanded="true">
<article class="content px-4">
@Body
</article>
</RadzenPanel>
</RadzenBody>
</main>
</div>

4
DiscordBotWebUI/Components/Layout/NavMenu.razor
View File

@@ -3,7 +3,7 @@
<div class="top-row ps-3 navbar navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="">DiscordBotWebUI</a>
<a class="navbar-brand" href="">Seth Web Interface</a>
</div>
</div>
@@ -24,7 +24,7 @@
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="/market/plugins" Match="NavLinkMatch.All">
<NavLink class="nav-link" href="/plugins" Match="NavLinkMatch.All">
<span class="bi bi-database-fill" style="position: relative; top: -.75rem; font-size: 1rem;" aria-hidden="true"></span> Plugins
</NavLink>
</div>

48
DiscordBotWebUI/Components/Pages/Setup/SetupWizard.razor
View File

@@ -1,48 +0,0 @@
@page "/setup-wizard"
@inject DialogService DialogService
@using DiscordBotWebUI.Components.Items.Setup
@using DiscordBotWebUI.Components.Pages.SidebarPages
<RadzenCard Style="max-width: 600px; margin: auto; margin-top: 50px; padding: 20px;">
<RadzenSteps @bind-Value="currentStep" ShowStepsButtons="false">
<RadzenStepsItem Text="Welcome" />
<RadzenStepsItem Text="Basic Configuration" />
<RadzenStepsItem Text="Download Plugins" />
<RadzenStepsItem Text="Final Setup" />
</RadzenSteps>
<div>
@if (currentStep == 0)
{
<WelcomeComponent NextStep="NextStep" />
}
else if (currentStep == 1)
{
<StartupConfigurationComponent NextStep="NextStep" />
}
else if (currentStep == 2)
{
<PluginsMarket/>
}
else if (currentStep == 3)
{
<FinishSetupComponent CompleteSetup="FinishSetup" />
}
</div>
</RadzenCard>
@code {
private int currentStep = 0;
private void NextStep()
{
currentStep++;
StateHasChanged();
}
private void FinishSetup()
{
DialogService.Close(true);
}
}

63
DiscordBotWebUI/Components/Pages/SidebarPages/Home.razor
View File

@@ -1,54 +1,17 @@
@page "/"
@using Discord
@using DiscordBotCore
@using DiscordBotCore.Others
@using DiscordBotWebUI.Components.Pages.Setup
@using DiscordBotWebUI.DiscordBot
@page "/"
@inject IJSRuntime JSRuntime
@inject NavigationManager NavigationManager
@inject DialogService DialogService
@inject ContextMenuService ContextMenuService
@inject TooltipService TooltipService
@inject NotificationService NotificationService
<RadzenButton readonly="@Globals.BotIsRunning" Text="Start" Click="Initialize"/>
<RadzenTextArea Placeholder="Logs..." Value="@_TextValue" Style="width: 100%; height: 80%"/>
<PageTitle>Home</PageTitle>
<RadzenRow>
<RadzenColumn Size="12">
<RadzenText Text="Home" TextStyle="TextStyle.H3" TagName="TagName.H1" />
</RadzenColumn>
</RadzenRow>
@code {
private string? _TextValue;
protected override void OnInitialized()
{
base.OnInitialized();
if (Globals.BotIsRunning)
{
_TextValue = Application.CurrentApplication.Logger.GetLogsHistory();
StateHasChanged();
}
}
private async Task Initialize()
{
if (Globals.BotIsRunning)
{
return;
}
Action<string, LogType> logging = async (str, type) => {
_TextValue += $"[{type}] {str} \n";
await InvokeAsync(StateHasChanged);
};
var discordApplication = new DiscordApplication(logging);
bool hasStarted = await discordApplication.Start();
if (!hasStarted)
{
await DialogService.OpenAsync<SetupWizard>(string.Empty, new Dictionary<string, object>());
await Initialize();
return;
}
await discordApplication.RefreshPlugins(false);
Globals.BotIsRunning = true;
await InvokeAsync(StateHasChanged);
}
}
}

5
DiscordBotWebUI/Components/Pages/SidebarPages/PluginMarket.razor Normal file
View File

@@ -0,0 +1,5 @@
@page "/plugins"
@code {
}

42
DiscordBotWebUI/Components/Pages/SidebarPages/PluginsMarket.razor
View File

@@ -1,42 +0,0 @@
@page "/market/plugins"
@using DiscordBotCore
@using DiscordBotWebUI.Types
@using DiscordBotWebUI.Components.Items
@if(_MarketItems is null)
{
<RadzenText Text="There are no plugins available right now ..."></RadzenText>
}
@if(_MarketItems is not null && _MarketItems.Any())
{
<Marketplace ListedItems="_MarketItems"/>
}
@code {
private List<MarketItem>? _MarketItems;
protected override async Task OnInitializedAsync()
{
if(!Application.IsRunning)
{
return;
}
var plugins = await Application.CurrentApplication.PluginManager.GetPluginsList();
if(plugins is null)
{
_MarketItems = null;
return;
}
_MarketItems = new List<MarketItem>();
foreach (var onlinePlugin in plugins)
{
var marketItem = new MarketItem(onlinePlugin.Name, onlinePlugin.Author, onlinePlugin.Description);
_MarketItems.Add(marketItem);
}
}
}

176
DiscordBotWebUI/Components/Pages/SidebarPages/Settings.razor
View File

@@ -1,140 +1,68 @@
@page "/settings"
@using DiscordBotCore
@inject NotificationService NotificationService
@inject DialogService DialogService
@page "/settings"
@inject DialogService DialogService;
@if (Application.IsRunning)
{
<RadzenPanel>
<HeaderTemplate>
<RadzenText>Discord Bot requires a Bot Token, a prefix for normal commands and the server Ids on the servers it will be in</RadzenText>
</HeaderTemplate>
<ChildContent>
<RadzenRow>
<RadzenColumn>
<RadzenText>Discord Bot Token</RadzenText>
</RadzenColumn>
<RadzenColumn>
<RadzenTextBox Placeholder="Token..." Value="@_Token" ValueChanged="TokenValueChanged"></RadzenTextBox>
</RadzenColumn>
</RadzenRow>
<RadzenCard Style="padding: 2rem; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.2);">
<RadzenStack Orientation="Orientation.Vertical" Gap="20px" Style="color: white;">
<RadzenLabel Text="Enter your Discord bot token below:" />
<RadzenLabel
Text="Create token here"
Component="a"
href="https://discord.com/developers/applications"
Style="display: block; margin-bottom: 0.5rem;" />
<RadzenTextBox
id="token"
Name="token"
Placeholder="Enter your token here ..."
Style="width: 100%;"
bind-Value="@TokenString" />
<RadzenLabel Text="Specify the bot's prefix:" />
<RadzenTextBox
id="prefix"
Name="prefix"
Placeholder="Enter your prefix here ..."
Style="width: 100%;"
bind-Value="@PrefixString" />
<RadzenLabel Text="Enter server IDs (separated by semicolons):" />
<RadzenTextBox
id="server"
Name="server"
Placeholder="Enter server IDs here ..."
Style="width: 100%;"
bind-Value="@ServerIdsString" />
<RadzenRow>
<RadzenColumn>
<RadzenText>Bot prefix</RadzenText>
</RadzenColumn>
<RadzenColumn>
<RadzenTextBox Placeholder="Bot prefix ..." MaxLength="1" Value="@_Prefix" ValueChanged="PrefixValueChanged"></RadzenTextBox>
</RadzenColumn>
</RadzenRow>
<RadzenRow>
<RadzenColumn>
<RadzenText>Bot Server Ids:</RadzenText>
</RadzenColumn>
<RadzenColumn>
<RadzenTextArea Placeholder="One per line ..." Value="@_ServerIds" ValueChanged="ServerIDsValueChanged"></RadzenTextArea>
</RadzenColumn>
</RadzenRow>
</ChildContent>
<FooterTemplate>
<RadzenButton Text="Save" Click="SaveChanges"></RadzenButton>
</FooterTemplate>
</RadzenPanel>
}
else
{
<RadzenText>The application is not running. Please start the application first from the Home page</RadzenText>
}
<RadzenButton Text="Save Changes" Click="SaveButtonClick" Style="margin-top: 1rem;" />
</RadzenStack>
</RadzenCard>
@code {
private string _Token = string.Empty;
private string _Prefix = string.Empty;
private string _ServerIds = string.Empty;
private string TokenString { get; set; }
private string PrefixString { get; set; }
private string ServerIdsString { get; set; }
protected override void OnInitialized()
private async void SaveButtonClick()
{
base.OnInitialized();
var response = await DialogService.Confirm("Saving this requires a bot restart.\nRestart now?", "Save Settings", new ConfirmOptions()
{
CloseDialogOnEsc = false,
ShowClose = false,
CloseDialogOnOverlayClick = false,
OkButtonText = "Restart Now",
CancelButtonText = "Don't Save"
});
if (!Application.IsRunning)
if (!response.HasValue)
{
return;
}
if(Application.CurrentApplication.ApplicationEnvironmentVariables.TryGetValue("token", out var token))
{
_Token = token as string;
}
if(Application.CurrentApplication.ApplicationEnvironmentVariables.TryGetValue("prefix", out var prefix))
{
_Prefix = prefix as string;
}
if(Application.CurrentApplication.ApplicationEnvironmentVariables.TryGetValue("ServerID", out var serverIds))
{
if (serverIds is List<object> listServerIds)
{
foreach(var item in listServerIds)
{
_ServerIds += $"{item}\n";
}
_ServerIds.TrimEnd();
}
if (!response.Value)
{
return;
}
StateHasChanged();
//TODO: Restart bot request
}
private async Task SaveChanges()
{
if (_Prefix.Length != 1)
{
DialogService.Close(false);
}
List<ulong> serverIds = new List<ulong>();
string[] values = _ServerIds.Split('\n');
foreach(var value in values)
{
string clearValue = value.TrimEnd().Replace("\r", "");
if(ulong.TryParse(clearValue, out ulong actualValue))
{
serverIds.Add(actualValue);
}
}
if (serverIds.Count == 0)
{
DialogService.Close(false);
}
Application.CurrentApplication.ApplicationEnvironmentVariables.Set("token", _Token);
Application.CurrentApplication.ApplicationEnvironmentVariables.Set("prefix", _Prefix);
Application.CurrentApplication.ApplicationEnvironmentVariables.Set("ServerID", serverIds);
await Application.CurrentApplication.ApplicationEnvironmentVariables.SaveToFile();
NotificationService.Notify(NotificationSeverity.Success, "Configuration", "Configuration has been saved !", 4000);
DialogService.Close(true);
}
private void ServerIDsValueChanged(string obj)
{
_ServerIds = obj;
}
private void PrefixValueChanged(string obj)
{
_Prefix = obj;
}
private void TokenValueChanged(string obj)
{
_Token = obj;
}
}