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
}); });

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

@@ -5,170 +5,154 @@
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="col col-12 col-lg-6 mb-4">
<div class="card h-100">
<div class="card-body"> <div class="card-body">
<h3 class="card-title"> <h4 class="card-title">@plugin.Name</h4>
@plugin.Name <span class="badge badge-secondary">@plugin.Version</span> <h5 class="card-subtitle mb-3 text-muted d-flex align-items-center">
</h3> @plugin.Version
@if (plugin.SystemPlugin)
{
<div class="badge badge-secondary ml-2">System plugin</div>
}
else if (updateAvailable)
{
<div class="badge badge-secondary ml-2">@matchedAvailable.Version available</div>
}
</h5>
<p class="card-text">@plugin.Description</p> <p class="card-text">@plugin.Description</p>
</div> </div>
@if (!plugin.SystemPlugin) @if (!plugin.SystemPlugin)
{ {
<ul class="list-group list-group-flush"> <div class="card-footer border-0 pb-3 d-flex">
<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))) @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 action</button>
</form> </form>
</div>
} }
else 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"> <form asp-action="UnInstallPlugin" asp-route-plugin="@plugin.Identifier">
<button type="submit" class="btn btn-link pt-0">Uninstall</button> <button type="submit" class="btn btn-outline-danger">Uninstall</button>
</form>
@if (matchedAvailable != null && plugin.Version < matchedAvailable.Version)
{
<form asp-action="InstallPlugin" asp-route-plugin="@plugin.Identifier" asp-route-remote="@Model.Remote">
<button type="submit" class="btn btn-link pt-0">Update</button>
</form> </form>
} }
}
</div> </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>
} }
@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 h-100">
<div class="card-body"> <div class="card-body">
<h3 class="card-title"> <h4 class="card-title">@plugin.Name</h4>
@plugin.Name <span class="badge badge-secondary">@plugin.Version</span> <h5 class="card-subtitle mb-3 text-muted">@plugin.Version</h5>
</h3>
<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-link pt-0">Install</button> <button type="submit" class="btn btn-primary">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">
<div class="mb-4">
<button class="btn btn-link text-secondary mb-2" type="button" data-toggle="collapse" data-target="#manual-upload">
Upload plugin Upload plugin
</button> </button>
<div class="collapse" id="manual-upload"> <div class="row collapse" id="manual-upload">
<div class="col col-12 col-lg-6 mb-4">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h3 class="card-title">Add plugin manually</h3> <h4 class="card-title">Add plugin manually</h4>
<div class="alert alert-warning">This is an extremely dangerous operation. Do not upload plugins from someone that you do not trust.</div> <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>
<form method="post" enctype="multipart/form-data" asp-action="UploadPlugin"> <form method="post" enctype="multipart/form-data" asp-action="UploadPlugin">
<div class="form-group"> <div class="form-group">
<div class="custom-file"> <div class="custom-file">
<input type="file" class="custom-file-input" required name="files" accept=".btcpay" id="files"> <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> <label class="custom-file-label" for="files">Choose file</label>
</div> </div>
</div> </div>
<div class="form-group">
<button class="btn btn-primary" type="submit">Upload</button> <button class="btn btn-primary" type="submit">Upload</button>
</div>
</form> </form>
</div> </div>
</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">
Pending actions
</button> </button>
<div class="collapse" id="pending-actions"> <div class="row collapse" id="pending-actions">
<div class="col col-12 col-lg-6 mb-4">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h3 class="card-title">Pending actions</h3> <h4 class="card-title">Pending actions</h4>
<ul class="list-group list-group-flush"> <ul class="list-group list-group-flush">
@foreach (var extComm in Model.Commands.GroupBy(tuple => tuple.plugin)) @foreach (var extComm in Model.Commands.GroupBy(tuple => tuple.plugin))
{ {
<li class="list-group-item"> <li class="list-group-item px-0">
<div class="d-flex justify-content-between"> <div class="d-flex flex-wrap align-items-center justify-content-between">
@extComm.Key (@extComm.Last().command) <span class="my-2 mr-3">@extComm.Key</span>
<form asp-action="CancelPluginCommands" asp-route-plugin="@extComm.Key"> <form asp-action="CancelPluginCommands" asp-route-plugin="@extComm.Key">
<button type="submit" class="btn btn-link pt-0">Cancel</button> <button type="submit" class="btn btn-outline-secondary">Cancel pending @extComm.Last().command</button>
</form> </form>
</div> </div>
</li> </li>
@@ -177,15 +161,15 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
} }
@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 label = $(this).next('label');
var el = $(this).get(0); var el = $(this).get(0);
if (el.files.length > 0) { if (el.files.length > 0) {
var fileName = el.files[0].name; var fileName = el.files[0].name;