Disco/Disco.Web/Areas/Config/Views/Plugins/Install.cshtml

@model Disco.Web.Areas.Config.Models.Plugins.InstallModel
@using Disco.Services.Plugins;
@{
    Authorization.Require(Claims.Config.Plugin.Install);

    var canInstallLocal = Authorization.Has(Claims.Config.Plugin.InstallLocal);

    ViewBag.Title = Html.ToBreadcrumb("Configuration", MVC.Config.Config.Index(), "Plugins", MVC.Config.Plugins.Index(), "Install Plugin");
}
<div id="pluginCatalog">
    <h4 id="pluginCatalogHeading">The plugin catalogue [<a href="https://discoict.com.au/">https://discoict.com.au</a>] was last updated @CommonHelpers.FriendlyDate((Model.Catalogue.ResponseTimestamp > DateTime.Now ? DateTime.Now : Model.Catalogue.ResponseTimestamp))
    </h4>
    @if (Model.Catalogue.Plugins.Count == 0)
    { 
        <div class="form" style="width: 450px; padding: 100px 0;">
            <h2>No Plugins are Available</h2>
        </div>  
    }
    else
    {
        var plugins = Model.Catalogue.Plugins;
        int itemsPerColumn = plugins.Count / 3;
        var itemNextId = 0;
        <table id="pageMenu">
            <tr>
                @for (int i = 0; i < 3; i++)
                {
                    <td>
                        @{
                    int itemsForThisColumn = itemsPerColumn + (plugins.Count % 3 > i ? 1 : 0);
                    for (int i2 = 0; i2 < itemsForThisColumn && itemNextId < plugins.Count; i2++)
                    {
                        var plugin = plugins[itemNextId];
                        itemNextId++;
                        var installedPlugin = Plugins.PluginInstalled(plugin.Id) ? Plugins.GetPlugin(plugin.Id) : null;
                            <div class="pageMenuArea pluginItem@(installedPlugin != null ? " pluginInstalled" : string.Empty)">
                                <h2 class="pluginName"><i class="fa fa-cogs"></i>@plugin.Name
                                    @if (installedPlugin == null)
                                    {
                                        <a class="pluginInstallLink button" href="@(Url.Action(MVC.API.Plugin.Install(plugin.Id)))">Install</a>
                                    }
                                    else
                                    {
                                        if (Version.Parse(plugin.LatestVersion) > installedPlugin.Version)
                                        {
                                        <a class="pluginUpdateLink button" href="@(Url.Action(MVC.API.Plugin.Update(plugin.Id)))">Update</a>    
                                        }
                                        else
                                        {
                                        <a class="pluginInstalledLink button disabled" href="#">Installed</a>    
                                        }
                                    }
                                </h2>
                                <div class="pluginItemBlurb">@(new HtmlString(plugin.Blurb))</div>
                                <div class="pageMenuBlurb">
                                    <span class="pluginId">@plugin.Id</span> | <span class="pluginVersion">v@(plugin.LatestVersion)</span> | @plugin.Author | <a href="@plugin.Url" title="More Information" target="_blank"><i class="fa fa-external-link"></i></a>
                                </div>
                            </div>
                    }
                        }
                    </td>
                }
            </tr>
        </table>
    }
</div>
<div id="dialogInstallPlugin" title="Install this Plugin?">
    <h2 id="dialogInstallPluginName"></h2>
    <h4 id="dialogInstallPluginDetails"></h4>

    <div style="padding: 0.7em 0.7em; margin-top: 8px;" class="ui-state-highlight ui-corner-all">
        <i class="fa fa-exclamation-triangle fa-lg information"></i>&nbsp;Warning: All plugins run with the same level of network privileges as the Disco Web App.<br />
        <strong>Only Install plugins from a trusted source.</strong>
    </div>
</div>
@if (canInstallLocal)
{
    <div id="dialogUploadPlugin" title="Install Plugin Package">
        <div style="padding-bottom: 10px;">
            @using (Html.BeginForm(MVC.API.Plugin.InstallLocal(), FormMethod.Post, new { enctype = "multipart/form-data" }))
            {
                <label for="pluginFile">Plugin Package: </label>
                <input id="pluginFile" name="Plugin" type="file" />
            }
        </div>
        <div style="padding: 0.7em 0.7em; margin-top: 8px;" class="ui-state-error ui-corner-all">
            <i class="fa fa-exclamation-triangle fa-lg"></i>&nbsp;Warning: All plugins run with the same level of network privileges as the Disco Web App.<br />
            <strong>Only install plugins from a trusted source.</strong>
        </div>
    </div>
}
<script>
    $(function () {
        var $selectedPlugin;
        var $selectedPluginUrl;

        // Install
        var $dialogInstall = $('#dialogInstallPlugin').dialog({
            resizable: false,
            modal: true,
            width: 350,
            autoOpen: false,
            buttons: {
                "Install": function () {
                    if ($selectedPlugin == null || !$selectedPluginUrl) {
                        $(this).dialog("close");
                        return;
                    }
                    $(this).dialog("disable");

                    window.location.href = $selectedPluginUrl;
                },
                Cancel: function () {
                    $selectedPlugin = null;
                    $(this).dialog("close");
                }
            }
        });
        $('#pageMenu').find('a.pluginInstallLink').click(function () {
            $this = $(this);

            $selectedPlugin = $this.closest('.pluginItem');
            $selectedPluginUrl = $this.attr('href');

            $('#dialogInstallPluginName').text($selectedPlugin.find('.pluginName').text());
            $('#dialogInstallPluginDetails').text($selectedPlugin.find('.pluginId').text() + ' | ' + $selectedPlugin.find('.pluginVersion').text());

            $dialogInstall.dialog('option', 'title', 'Install this Plugin?');
            $dialogInstall.dialog('open');

            return false;
        });
        $('#pageMenu').find('a.pluginUpdateLink').click(function () {
            $this = $(this);

            $selectedPlugin = $this.closest('.pluginItem');
            $selectedPluginUrl = $this.attr('href');

            $('#dialogInstallPluginName').text($selectedPlugin.find('.pluginName').text());
            $('#dialogInstallPluginDetails').text($selectedPlugin.find('.pluginId').text() + ' | ' + $selectedPlugin.find('.pluginVersion').text());

            $dialogInstall.dialog('option', 'title', 'Update this Plugin?');
            $dialogInstall.dialog('open');

            return false;
        });

        @if (canInstallLocal)
        {<text>
        // Upload
        var $dialogUpload = $('#dialogUploadPlugin').dialog({
            resizable: false,
            modal: true,
            width: 350,
            autoOpen: false,
            buttons: {
                "Upload & Install": function () {
                    var pluginFile = $('#pluginFile');
                    if (pluginFile.val()) {
                        pluginFile.closest('form').submit();
                        $(this).dialog('disable');
                    } else {
                        alert('Choose a Plugin Package to Upload');
                    }
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
        $('#buttonUpload').click(function () {
            $dialogUpload.dialog('open');
            return false;
        });
        </text>}
    });
</script>
<div class="actionBar">
    @Html.ActionLinkButton("Update Catalogue", MVC.API.Plugin.UpdateLibraryCatalogue())
    @if (canInstallLocal)
    {
        @Html.ActionLinkButton("Install Plugin Package", MVC.API.Plugin.InstallLocal(), "buttonUpload")
    }
</div>