aljaz/btcpayserver
1
0
Fork 0
mirror of https://github.com/aljazceru/btcpayserver.git synced 2025-12-17 22:14:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

Improve plugins UI (#2005)

Browse Source
This commit is contained in:
Dennis Reimann
2020-10-22 10:58:22 +02:00
committed by GitHub
parent 4176f3659b
commit 58f0ca3d8a
2 changed files with 128 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
BTCPayServer/Controllers/ServerController.Plugins.cs
View File

@@ -29,7 +29,7 @@ namespace BTCPayServer.Controllers
TempData.SetStatusMessageModel(new StatusMessageModel() TempData.SetStatusMessageModel(new StatusMessageModel()
{ {
Severity = StatusMessageModel.StatusSeverity.Error, Severity = StatusMessageModel.StatusSeverity.Error,
Message = "The remote could not be reached" Message = "Remote plugins lookup failed. Try again later."
}); });
availablePlugins = Array.Empty<PluginService.AvailablePlugin>(); availablePlugins = Array.Empty<PluginService.AvailablePlugin>();
} }
@@ -60,7 +60,7 @@ namespace BTCPayServer.Controllers
pluginService.UninstallPlugin(plugin); pluginService.UninstallPlugin(plugin);
TempData.SetStatusMessageModel(new StatusMessageModel() TempData.SetStatusMessageModel(new StatusMessageModel()
{ {
Message = "Plugin scheduled to be uninstalled", Message = "Plugin scheduled to be uninstalled.",
Severity = StatusMessageModel.StatusSeverity.Success Severity = StatusMessageModel.StatusSeverity.Success
}); });
@@ -73,7 +73,7 @@ namespace BTCPayServer.Controllers
pluginService.CancelCommands(plugin); pluginService.CancelCommands(plugin);
TempData.SetStatusMessageModel(new StatusMessageModel() TempData.SetStatusMessageModel(new StatusMessageModel()
{ {
Message = "Updated", Message = "Plugin action cancelled.",
Severity = StatusMessageModel.StatusSeverity.Success Severity = StatusMessageModel.StatusSeverity.Success
}); });

266
BTCPayServer/Views/Server/ListPlugins.cshtml
View File

@@ -5,175 +5,161 @@
var availableAndNotInstalled = Model.Available.Where(plugin => !installed.Contains(plugin.Identifier)); var availableAndNotInstalled = Model.Available.Where(plugin => !installed.Contains(plugin.Identifier));
} }
<partial name="_StatusMessage"/>
@if (Model.Commands.Any()) @if (Model.Commands.Any())
{ {
<div class="alert alert-info"> <div class="alert alert-info mb-5">
You need to restart BTCPay Server in order to update your active plugins. You need to restart BTCPay Server in order to update your active plugins.
@if (Model.CanShowRestart) @if (Model.CanShowRestart)
{ {
<form method="post" asp-action="Maintenance"> <form method="post" asp-action="Maintenance" class="mt-2">
<button type="submit" name="command" value="restart" class="btn btn-outline-info alert-link" asp-action="Maintenance">Restart now</button> <button type="submit" name="command" value="restart" class="btn btn-info" asp-action="Maintenance">Restart now</button>
</form> </form>
} }
</div> </div>
} }
<partial name="_StatusMessage"/>
@if (Model.Installed.Any()) @if (Model.Installed.Any())
{ {
<h4>Installed Plugins</h4> <h3 class="mb-3">Installed Plugins</h3>
<div class="card-columns"> <div class="row mb-4">
@foreach (var plugin in Model.Installed) @foreach (var plugin in Model.Installed)
{ {
var matchedAvailable = Model.Available.SingleOrDefault(availablePlugin => availablePlugin.Identifier == plugin.Identifier); var matchedAvailable = Model.Available.SingleOrDefault(availablePlugin => availablePlugin.Identifier == plugin.Identifier);
<div class="card"> var updateAvailable = matchedAvailable != null && plugin.Version < matchedAvailable.Version;
<div class="card-body"> <div class="col col-12 col-lg-6 mb-4">
<h3 class="card-title"> <div class="card h-100">
@plugin.Name <span class="badge badge-secondary">@plugin.Version</span> <div class="card-body">
</h3> <h4 class="card-title">@plugin.Name</h4>
<p class="card-text">@plugin.Description</p> <h5 class="card-subtitle mb-3 text-muted d-flex align-items-center">
@plugin.Version
</div> @if (plugin.SystemPlugin)
@if (!plugin.SystemPlugin)
{
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between">
<span>Current version</span>
<span>@plugin.Version</span>
</li>
@if (matchedAvailable != null)
{
<li class="list-group-item d-flex justify-content-between">
<span>Remote version</span>
<span>@matchedAvailable.Version</span>
</li>
}
</ul>
<div class="card-footer">
@if (Model.Commands.Any(tuple => tuple.plugin.Equals(plugin.Identifier, StringComparison.InvariantCultureIgnoreCase)))
{
<div class="d-flex justify-content-between">
<div>
<div class="badge badge-info">pending action</div>
</div>
<form asp-action="CancelPluginCommands" asp-route-plugin="@plugin.Identifier">
<button type="submit" class="btn btn-link pt-0">Cancel</button>
</form>
</div>
}
else
{
<form asp-action="UnInstallPlugin" asp-route-plugin="@plugin.Identifier">
<button type="submit" class="btn btn-link pt-0">Uninstall</button>
</form>
@if (matchedAvailable != null && plugin.Version < matchedAvailable.Version)
{ {
<form asp-action="InstallPlugin" asp-route-plugin="@plugin.Identifier" asp-route-remote="@Model.Remote"> <div class="badge badge-secondary ml-2">System plugin</div>
<button type="submit" class="btn btn-link pt-0">Update</button> }
else if (updateAvailable)
{
<div class="badge badge-secondary ml-2">@matchedAvailable.Version available</div>
}
</h5>
<p class="card-text">@plugin.Description</p>
</div>
@if (!plugin.SystemPlugin)
{
<div class="card-footer border-0 pb-3 d-flex">
@if (Model.Commands.Any(tuple => tuple.plugin.Equals(plugin.Identifier, StringComparison.InvariantCultureIgnoreCase)))
{
<form asp-action="CancelPluginCommands" asp-route-plugin="@plugin.Identifier">
<button type="submit" class="btn btn-outline-secondary">Cancel pending action</button>
</form>
}
else
{
@if (updateAvailable)
{
<form asp-action="InstallPlugin" asp-route-plugin="@plugin.Identifier" asp-route-remote="@Model.Remote" class="mr-3">
<button type="submit" class="btn btn-secondary">Update</button>
</form>
}
<form asp-action="UnInstallPlugin" asp-route-plugin="@plugin.Identifier">
<button type="submit" class="btn btn-outline-danger">Uninstall</button>
</form> </form>
} }
}
</div>
}
else if (plugin.SystemPlugin)
{
<div class="card-footer">
<div class="d-flex justify-content-between">
<div>
<div class="badge badge-info">system plugin</div>
</div>
</div> </div>
</div> }
} </div>
</div> </div>
} }
</div> </div>
} }
@if (availableAndNotInstalled.Any()) @if (availableAndNotInstalled.Any())
{ {
<h4>Available Plugins</h4> <h3 class="mb-3">Available Plugins</h3>
<div class="row mb-4">
<div class="card-columns">
@foreach (var plugin in availableAndNotInstalled) @foreach (var plugin in availableAndNotInstalled)
{ {
<div class="card"> <div class="col col-12 col-lg-6 mb-4">
<div class="card-body"> <div class="card h-100">
<h3 class="card-title"> <div class="card-body">
@plugin.Name <span class="badge badge-secondary">@plugin.Version</span> <h4 class="card-title">@plugin.Name</h4>
</h3> <h5 class="card-subtitle mb-3 text-muted">@plugin.Version</h5>
<p class="card-text">@plugin.Description</p> <p class="card-text">@plugin.Description</p>
</div> </div>
<div class="card-footer"> <div class="card-footer border-0 pb-3">
@if (Model.Commands.Any(tuple => tuple.plugin.Equals(plugin.Identifier, StringComparison.InvariantCultureIgnoreCase))) @if (Model.Commands.Any(tuple => tuple.plugin.Equals(plugin.Identifier, StringComparison.InvariantCultureIgnoreCase)))
{ {
<div class="d-flex justify-content-between">
<div>
<div class="badge badge-info">pending action</div>
</div>
<form asp-action="CancelPluginCommands" asp-route-plugin="@plugin.Identifier"> <form asp-action="CancelPluginCommands" asp-route-plugin="@plugin.Identifier">
<button type="submit" class="btn btn-link pt-0">Cancel</button> <button type="submit" class="btn btn-outline-secondary">Cancel pending install</button>
</form> </form>
</div> }
} else
else {
{ <form asp-action="InstallPlugin" asp-route-plugin="@plugin.Identifier" asp-route-remote="@Model.Remote">
<form asp-action="InstallPlugin" asp-route-plugin="@plugin.Identifier" asp-route-remote="@Model.Remote"> <button type="submit" class="btn btn-primary">Install</button>
<button type="submit" class="btn btn-link pt-0">Install</button> </form>
</form> }
} </div>
</div> </div>
</div> </div>
} }
</div> </div>
} }
<button class="btn btn-link mt-4" type="button" data-toggle="collapse" data-target="#manual-upload">
Upload plugin
</button>
<div class="collapse" id="manual-upload">
<div class="card">
<div class="card-body">
<h3 class="card-title">Add plugin manually</h3>
<div class="alert alert-warning">This is an extremely dangerous operation. Do not upload plugins from someone that you do not trust.</div>
<form method="post" enctype="multipart/form-data" asp-action="UploadPlugin">
<div class="form-group"> <div class="mb-4">
<div class="custom-file"> <button class="btn btn-link text-secondary mb-2" type="button" data-toggle="collapse" data-target="#manual-upload">
<input type="file" class="custom-file-input" required name="files" accept=".btcpay" id="files"> Upload plugin
<label class="custom-file-label" for="files">Choose file</label> </button>
<div class="row collapse" id="manual-upload">
<div class="col col-12 col-lg-6 mb-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Add plugin manually</h4>
<div class="alert alert-warning my-3">
<h6 class="mr-1">This is an extremely dangerous operation!</h6>
Only upload plugins from trusted sources.
</div> </div>
<form method="post" enctype="multipart/form-data" asp-action="UploadPlugin">
<div class="form-group">
<div class="custom-file">
<input type="file" class="custom-file-input form-control-file" required name="files" accept=".btcpay" id="files">
<label class="custom-file-label" for="files">Choose file</label>
</div>
</div>
<button class="btn btn-primary" type="submit">Upload</button>
</form>
</div> </div>
<div class="form-group"> </div>
<button class="btn btn-primary" type="submit">Upload</button>
</div>
</form>
</div> </div>
</div> </div>
</div> </div>
@if (Model.Commands.Any()) @if (Model.Commands.Any())
{ {
<button class="btn btn-link mt-4" type="button" data-toggle="collapse" data-target="#pending-actions"> <div class="mb-4">
Pending <button class="btn btn-link text-secondary mb-2" type="button" data-toggle="collapse" data-target="#pending-actions">
</button> Pending actions
<div class="collapse" id="pending-actions"> </button>
<div class="card"> <div class="row collapse" id="pending-actions">
<div class="card-body"> <div class="col col-12 col-lg-6 mb-4">
<h3 class="card-title">Pending actions</h3> <div class="card">
<ul class="list-group list-group-flush"> <div class="card-body">
@foreach (var extComm in Model.Commands.GroupBy(tuple => tuple.plugin)) <h4 class="card-title">Pending actions</h4>
{ <ul class="list-group list-group-flush">
<li class="list-group-item"> @foreach (var extComm in Model.Commands.GroupBy(tuple => tuple.plugin))
<div class="d-flex justify-content-between"> {
@extComm.Key (@extComm.Last().command) <li class="list-group-item px-0">
<form asp-action="CancelPluginCommands" asp-route-plugin="@extComm.Key"> <div class="d-flex flex-wrap align-items-center justify-content-between">
<button type="submit" class="btn btn-link pt-0">Cancel</button> <span class="my-2 mr-3">@extComm.Key</span>
</form> <form asp-action="CancelPluginCommands" asp-route-plugin="@extComm.Key">
</div> <button type="submit" class="btn btn-outline-secondary">Cancel pending @extComm.Last().command</button>
</li> </form>
} </div>
</ul> </li>
}
</ul>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -181,19 +167,17 @@
@section Scripts { @section Scripts {
<script> <script>
$(document).ready(function () { $(document).ready(function () {
$(".custom-file-input").on("change", function () {
$('.custom-file-input').on('change', var label = $(this).next("label");
function () { var el = $(this).get(0);
var label = $(this).next('label'); if (el.files.length > 0) {
var el = $(this).get(0); var fileName = el.files[0].name;
if (el.files.length > 0) { label.addClass("selected").html(fileName);
var fileName = el.files[0].name; } else {
label.addClass("selected").html(fileName); label.removeClass("selected").html("Choose file");
} else { }
label.removeClass("selected").html("Choose file");
}
});
}); });
</script> });
</script>
} }