mirror of https://github.com/node-red/node-red.git
Add loading progress bar
This commit is contained in:
Nick O'Leary
parent
f2e2c7e4d0
commit
0c83fa7060
|
|
@ -34,6 +34,13 @@
|
|||
"null": "null"
|
||||
}
|
||||
},
|
||||
"event": {
|
||||
"loadPalette": "Loading Palette",
|
||||
"loadNodeCatalogs": "Loading Node catalogs",
|
||||
"loadNodes": "Loading Nodes __count__",
|
||||
"loadFlows": "Loading Flows",
|
||||
"importFlows": "Adding Flows to workspace"
|
||||
},
|
||||
"workspace": {
|
||||
"defaultName": "Flow __number__",
|
||||
"editFlow": "Edit flow: __name__",
|
||||
|
|
|
|||
|
|
@ -75,6 +75,7 @@ var RED = (function() {
|
|||
}
|
||||
|
||||
function loadNodeList() {
|
||||
loader.reportProgress(RED._("event.loadPalette"), 20)
|
||||
$.ajax({
|
||||
headers: {
|
||||
"Accept":"application/json"
|
||||
|
|
@ -83,6 +84,7 @@ var RED = (function() {
|
|||
url: 'nodes',
|
||||
success: function(data) {
|
||||
RED.nodes.setNodeList(data);
|
||||
loader.reportProgress(RED._("event.loadNodeCatalogs"), 25)
|
||||
RED.i18n.loadNodeCatalogs(function() {
|
||||
loadIconList(loadNodes);
|
||||
});
|
||||
|
|
@ -107,6 +109,7 @@ var RED = (function() {
|
|||
}
|
||||
|
||||
function loadNodes() {
|
||||
loader.reportProgress(RED._("event.loadNodes",{count:""}), 30)
|
||||
var lang = localStorage.getItem("editor-language")||i18n.detectLanguage();
|
||||
|
||||
$.ajax({
|
||||
|
|
@ -118,7 +121,11 @@ var RED = (function() {
|
|||
url: 'nodes',
|
||||
success: function(data) {
|
||||
var configs = data.trim().split(/(?=<!-- --- \[red-module:\S+\] --- -->)/);
|
||||
var totalCount = configs.length;
|
||||
|
||||
var stepConfig = function() {
|
||||
loader.reportProgress(RED._("event.loadNodes",{count:(totalCount-configs.length)+"/"+totalCount}), 30 + ((totalCount-configs.length)/totalCount)*40 )
|
||||
|
||||
if (configs.length === 0) {
|
||||
$("#red-ui-editor").i18n();
|
||||
$("#red-ui-palette > .red-ui-palette-spinner").hide();
|
||||
|
|
@ -159,6 +166,7 @@ var RED = (function() {
|
|||
}
|
||||
|
||||
function loadFlows(done) {
|
||||
loader.reportProgress(RED._("event.loadFlows"),80 )
|
||||
$.ajax({
|
||||
headers: {
|
||||
"Accept":"application/json",
|
||||
|
|
@ -169,6 +177,7 @@ var RED = (function() {
|
|||
if (nodes) {
|
||||
var currentHash = window.location.hash;
|
||||
RED.nodes.version(nodes.rev);
|
||||
loader.reportProgress(RED._("event.importFlows"),90 )
|
||||
RED.nodes.import(nodes.flows);
|
||||
RED.nodes.dirty(false);
|
||||
RED.view.redraw(true);
|
||||
|
|
@ -195,6 +204,7 @@ var RED = (function() {
|
|||
return;
|
||||
}
|
||||
if (notificationId === "project-update") {
|
||||
loader.start("Loading project",0)
|
||||
RED.nodes.clear();
|
||||
RED.history.clear();
|
||||
RED.view.redraw(true);
|
||||
|
|
@ -210,6 +220,7 @@ var RED = (function() {
|
|||
"revert": RED._("notification.project.revert", {project: msg.project}),
|
||||
"merge-complete": RED._("notification.project.merge-complete")
|
||||
}[msg.action];
|
||||
loader.end()
|
||||
RED.notify("<p>"+message+"</p>");
|
||||
RED.sidebar.info.refresh()
|
||||
});
|
||||
|
|
@ -425,6 +436,12 @@ var RED = (function() {
|
|||
var id = topic.substring(9);
|
||||
RED.eventLog.log(id,payload);
|
||||
});
|
||||
|
||||
$(".red-ui-header-toolbar").show();
|
||||
|
||||
setTimeout(function() {
|
||||
loader.end();
|
||||
},100);
|
||||
}
|
||||
|
||||
function showAbout() {
|
||||
|
|
@ -506,7 +523,6 @@ var RED = (function() {
|
|||
}
|
||||
|
||||
function loadEditor() {
|
||||
|
||||
RED.workspaces.init();
|
||||
RED.statusBar.init();
|
||||
RED.view.init();
|
||||
|
|
@ -549,13 +565,14 @@ var RED = (function() {
|
|||
RED.comms.connect();
|
||||
|
||||
$("#red-ui-main-container").show();
|
||||
$(".red-ui-header-toolbar").show();
|
||||
|
||||
|
||||
RED.actions.add("core:show-about", showAbout);
|
||||
|
||||
loadNodeList();
|
||||
}
|
||||
|
||||
|
||||
function buildEditor(options) {
|
||||
var header = $('<div id="red-ui-header"></div>').appendTo(options.target);
|
||||
var logo = $('<span class="red-ui-header-logo"></span>').appendTo(header);
|
||||
|
|
@ -570,6 +587,10 @@ var RED = (function() {
|
|||
'</div>').appendTo(options.target);
|
||||
$('<div id="red-ui-editor-node-configs"></div>').appendTo(options.target);
|
||||
$('<div id="red-ui-full-shade" class="hide"></div>').appendTo(options.target);
|
||||
|
||||
loader.init().appendTo("#red-ui-main-container");
|
||||
loader.start("...",0);
|
||||
|
||||
$.getJSON(options.apiRootUrl+"theme", function(theme) {
|
||||
if (theme.header) {
|
||||
if (theme.header.url) {
|
||||
|
|
@ -602,12 +623,39 @@ var RED = (function() {
|
|||
options.target.addClass("red-ui-editor");
|
||||
|
||||
buildEditor(options);
|
||||
|
||||
RED.i18n.init(options, function() {
|
||||
RED.settings.init(options, loadEditor);
|
||||
})
|
||||
}
|
||||
|
||||
var loader = {
|
||||
init: function() {
|
||||
var wrapper = $('<div id="red-ui-loading-progress"></div>').hide();
|
||||
var container = $('<div>').appendTo(wrapper);
|
||||
var label = $('<div>',{class:"red-ui-loading-bar-label"}).appendTo(container);
|
||||
var bar = $('<div>',{class:"red-ui-loading-bar"}).appendTo(container);
|
||||
var fill =$('<span>').appendTo(bar);
|
||||
return wrapper;
|
||||
},
|
||||
start: function(text, prcnt) {
|
||||
if (text) {
|
||||
loader.reportProgress(text,prcnt)
|
||||
}
|
||||
$("#red-ui-loading-progress").show();
|
||||
},
|
||||
reportProgress: function(text, prcnt) {
|
||||
$(".red-ui-loading-bar-label").text(text);
|
||||
$(".red-ui-loading-bar span").width(prcnt+"%")
|
||||
},
|
||||
end: function() {
|
||||
$("#red-ui-loading-progress").hide();
|
||||
loader.reportProgress("",0);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
init: init
|
||||
init: init,
|
||||
loader: loader
|
||||
}
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -1497,7 +1497,6 @@ RED.projects = (function() {
|
|||
}
|
||||
} else if (projectType === 'open') {
|
||||
return switchProject(selectedProject.name,function(err,data) {
|
||||
dialog.dialog( "close" );
|
||||
if (err) {
|
||||
if (err.code !== 'credentials_load_failed') {
|
||||
console.log(RED._("projects.create.unexpected_error"),err)
|
||||
|
|
@ -1606,6 +1605,7 @@ RED.projects = (function() {
|
|||
},
|
||||
}
|
||||
},{active:true}).then(function() {
|
||||
dialog.dialog( "close" );
|
||||
RED.events.emit("project:change", {name:name});
|
||||
}).always(function() {
|
||||
setTimeout(function() {
|
||||
|
|
|
|||
|
|
@ -172,3 +172,44 @@ button.red-ui-footer-button-toggle {
|
|||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#red-ui-loading-progress {
|
||||
position: absolute;
|
||||
background: $primary-background;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 200;
|
||||
& > div {
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 300px;
|
||||
height:80px;
|
||||
text-align: center;
|
||||
color: $secondary-text-color;
|
||||
|
||||
}
|
||||
}
|
||||
.red-ui-loading-bar {
|
||||
box-sizing: border-box;
|
||||
width: 300px;
|
||||
height: 30px;
|
||||
border: 2px solid $primary-border-color;
|
||||
border-radius: 4px;
|
||||
|
||||
> span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
background: $secondary-border-color;
|
||||
transition: width 0.2s;
|
||||
width: 10%;
|
||||
}
|
||||
}
|
||||
.red-ui-loading-bar-label {
|
||||
font-size: 13px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue