mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Add tgz upload button to palette manager
This commit is contained in:
Nick O'Leary
parent
6f1ed76b4c
commit
183fa59c83
@ -22,7 +22,8 @@
|
||||
"color": "Color",
|
||||
"position": "Position",
|
||||
"enable": "Enable",
|
||||
"disable": "Disable"
|
||||
"disable": "Disable",
|
||||
"upload": "Upload"
|
||||
},
|
||||
"type": {
|
||||
"string": "string",
|
||||
@ -532,6 +533,7 @@
|
||||
"sortAZ": "a-z",
|
||||
"sortRecent": "recent",
|
||||
"more": "+ __count__ more",
|
||||
"upload": "Upload module tgz file",
|
||||
"errors": {
|
||||
"catalogLoadFailed": "<p>Failed to load node catalogue.</p><p>Check the browser console for more information</p>",
|
||||
"installFailed": "<p>Failed to install: __module__</p><p>__message__</p><p>Check the log for more information</p>",
|
||||
|
||||
@ -542,8 +542,6 @@ RED.palette.editor = (function() {
|
||||
return settingsPane;
|
||||
}
|
||||
|
||||
|
||||
|
||||
function createSettingsPane() {
|
||||
settingsPane = $('<div id="red-ui-settings-tab-palette"></div>');
|
||||
var content = $('<div id="red-ui-palette-editor">'+
|
||||
@ -574,7 +572,11 @@ RED.palette.editor = (function() {
|
||||
minimumActiveTabWidth: 110
|
||||
});
|
||||
|
||||
createNodeTab(content);
|
||||
createInstallTab(content);
|
||||
}
|
||||
|
||||
function createNodeTab(content) {
|
||||
var modulesTab = $('<div>',{class:"red-ui-palette-editor-tab"}).appendTo(content);
|
||||
|
||||
editorTabs.addTab({
|
||||
@ -726,9 +728,9 @@ RED.palette.editor = (function() {
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
function createInstallTab(content) {
|
||||
var installTab = $('<div>',{class:"red-ui-palette-editor-tab hide"}).appendTo(content);
|
||||
|
||||
editorTabs.addTab({
|
||||
@ -761,7 +763,6 @@ RED.palette.editor = (function() {
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$('<span>').text(RED._("palette.editor.sort")+' ').appendTo(toolBar);
|
||||
var sortGroup = $('<span class="button-group"></span>').appendTo(toolBar);
|
||||
var sortRelevance = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle selected"><i class="fa fa-sort-amount-desc"></i></a>').appendTo(sortGroup);
|
||||
@ -795,6 +796,7 @@ RED.palette.editor = (function() {
|
||||
loadedIndex = {};
|
||||
initInstallTab();
|
||||
})
|
||||
RED.popover.tooltip(refreshButton,"NLS-TODO: Refresh module list");
|
||||
|
||||
packageList = $('<ol>',{style:"position: absolute;top: 79px;bottom: 0;left: 0;right: 0px;"}).appendTo(installTab).editableList({
|
||||
addButton: false,
|
||||
@ -878,8 +880,87 @@ RED.palette.editor = (function() {
|
||||
}
|
||||
});
|
||||
|
||||
if (RED.settings.theme('palette.upload') !== false) {
|
||||
var uploadSpan = $('<span class="button-group">').prependTo(toolBar);
|
||||
var uploadButton = $('<button type="button" class="red-ui-sidebar-header-button red-ui-palette-editor-upload-button"><label><i class="fa fa-upload"></i><form id="red-ui-palette-editor-upload-form" enctype="multipart/form-data"><input name="tarball" type="file" accept=".tgz"></label></button>').appendTo(uploadSpan);
|
||||
|
||||
var uploadInput = uploadButton.find('input[type="file"]');
|
||||
uploadInput.on("change", function(evt) {
|
||||
if (this.files.length > 0) {
|
||||
uploadFilenameLabel.text(this.files[0].name)
|
||||
uploadToolbar.slideDown(200);
|
||||
}
|
||||
})
|
||||
|
||||
var uploadToolbar = $('<div class="red-ui-palette-editor-upload"></div>').appendTo(installTab);
|
||||
var uploadForm = $('<div>').appendTo(uploadToolbar);
|
||||
var uploadFilename = $('<div class="placeholder-input"><i class="fa fa-upload"></i> </div>').appendTo(uploadForm);
|
||||
var uploadFilenameLabel = $('<span></span>').appendTo(uploadFilename);
|
||||
var uploadButtons = $('<div class="red-ui-palette-editor-upload-buttons"></div>').appendTo(uploadForm);
|
||||
$('<button class="editor-button"></button>').text(RED._("common.label.cancel")).appendTo(uploadButtons).on("click", function(evt) {
|
||||
evt.preventDefault();
|
||||
uploadToolbar.slideUp(200);
|
||||
uploadInput.val("");
|
||||
});
|
||||
$('<button class="editor-button primary"></button>').text(RED._("common.label.upload")).appendTo(uploadButtons).on("click", function(evt) {
|
||||
evt.preventDefault();
|
||||
|
||||
var spinner = RED.utils.addSpinnerOverlay(uploadToolbar, true);
|
||||
var buttonRow = $('<div style="position: relative;bottom: calc(50% + 17px); padding-right: 10px;text-align: right;"></div>').appendTo(spinner);
|
||||
$('<button class="red-ui-button"></button>').text(RED._("eventLog.view")).appendTo(buttonRow).on("click", function(evt) {
|
||||
evt.preventDefault();
|
||||
RED.actions.invoke("core:show-event-log");
|
||||
});
|
||||
RED.eventLog.startEvent(RED._("palette.editor.confirm.button.install")+" : "+uploadInput[0].files[0].name);
|
||||
|
||||
var data = new FormData();
|
||||
data.append("tarball",uploadInput[0].files[0]);
|
||||
var filename = uploadInput[0].files[0].name;
|
||||
$.ajax({
|
||||
url: 'nodes',
|
||||
data: data,
|
||||
cache: false,
|
||||
contentType: false,
|
||||
processData: false,
|
||||
method: 'POST',
|
||||
}).always(function(data,textStatus,xhr) {
|
||||
spinner.remove();
|
||||
uploadInput.val("");
|
||||
uploadToolbar.slideUp(200);
|
||||
}).fail(function(xhr,textStatus,err) {
|
||||
var message = textStatus;
|
||||
if (xhr.responseJSON) {
|
||||
message = xhr.responseJSON.message;
|
||||
}
|
||||
var notification = RED.notify(RED._('palette.editor.errors.installFailed',{module: filename,message:message}),{
|
||||
type: 'error',
|
||||
modal: true,
|
||||
fixed: true,
|
||||
buttons: [
|
||||
{
|
||||
text: RED._("common.label.close"),
|
||||
click: function() {
|
||||
notification.close();
|
||||
}
|
||||
},{
|
||||
text: RED._("eventLog.view"),
|
||||
click: function() {
|
||||
notification.close();
|
||||
RED.actions.invoke("core:show-event-log");
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
uploadInput.val("");
|
||||
uploadToolbar.slideUp(200);
|
||||
})
|
||||
})
|
||||
RED.popover.tooltip(uploadButton,RED._("palette.editor.upload"));
|
||||
}
|
||||
|
||||
$('<div id="red-ui-palette-module-install-shade" class="red-ui-palette-module-shade hide"><div class="red-ui-palette-module-shade-status"></div><img src="red/images/spin.svg" class="red-ui-palette-spinner"/></div>').appendTo(installTab);
|
||||
}
|
||||
|
||||
function update(entry,version,url,container,done) {
|
||||
if (RED.settings.theme('palette.editable') === false) {
|
||||
done(new Error('Palette not editable'));
|
||||
|
||||
@ -237,3 +237,41 @@ ul.red-ui-palette-module-error-list {
|
||||
#red-ui-palette-module-install-shade {
|
||||
padding-top: 80px;
|
||||
}
|
||||
button.red-ui-palette-editor-upload-button {
|
||||
padding: 0;
|
||||
height: 25px;
|
||||
margin-top: -1px;
|
||||
|
||||
input[type="file"] {
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
.red-ui-settings-tabs-content & label {
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
padding: 2px 8px;
|
||||
}
|
||||
}
|
||||
.red-ui-palette-editor-upload {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 44px;
|
||||
padding: 20px;
|
||||
background: $secondary-background;
|
||||
border-bottom: 1px $secondary-border-color solid;
|
||||
box-shadow: 1px 1px 4px $shadow;
|
||||
|
||||
.placeholder-input {
|
||||
width: calc(100% - 180px);
|
||||
}
|
||||
}
|
||||
.red-ui-palette-editor-upload-buttons {
|
||||
float: right;
|
||||
button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user