Update: Plugin Framework Install & UI

2013-02-12 17:27:54 +11:00
parent b24253fd64
commit 734b02fa1d
35 changed files with 2792 additions and 1888 deletions
@@ -0,0 +1,144 @@
+@model Disco.Web.Areas.Config.Models.Plugins.InstallModel
+@using Disco.Services.Plugins;
+@{
+    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="http://discoict.com.au/">http://discoict.com.au</a>] was last updated @CommonHelpers.FriendlyDate(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++;
+                            <div class="pageMenuArea pluginItem@(Plugins.PluginInstalled(plugin.Id) ? " pluginInstalled" : string.Empty)">
+                                <a class="pluginInstallLink" href="@(Url.Action(MVC.API.Plugin.Install(plugin.Id)))">
+                                    <h2 class="pluginName">@plugin.Name</h2>
+                                </a>
+                                <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" target="_blank">More Information</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">
+        <span style="margin-right: 0.3em; margin-bottom: 2em; float: left;" class="ui-icon ui-icon-alert"></span>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>
+<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">
+        <span style="margin-right: 0.3em; margin-bottom: 2em; float: left;" class="ui-icon ui-icon-alert"></span>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');
+
+            if ($selectedPlugin.is('.pluginInstalled')) {
+                alert('This plugin is already installed.');
+            } else {
+                $('#dialogInstallPluginName').text($selectedPlugin.find('.pluginName').text());
+                $('#dialogInstallPluginDetails').text($selectedPlugin.find('.pluginId').text() + ' | ' + $selectedPlugin.find('.pluginVersion').text());
+
+                $dialogInstall.dialog('open');
+            }
+            return false;
+        });
+
+        // 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;
+        });
+    });
+</script>
+<div class="actionBar">
+    @Html.ActionLinkButton("Update Catalogue", MVC.API.Plugin.UpdateLibraryCatalogue())
+    @Html.ActionLinkButton("Install Plugin Package", MVC.API.Plugin.InstallLocal(), "buttonUpload")
+</div>