Skip to content

Commit

Permalink
Style the repository queue properly.
Browse files Browse the repository at this point in the history
  • Loading branch information
davebx committed Feb 16, 2017
1 parent afc7b1c commit 233b90c
Show file tree
Hide file tree
Showing 18 changed files with 153 additions and 28 deletions.
1 change: 0 additions & 1 deletion client/galaxy/scripts/admin.toolshed.js
Expand Up @@ -59,7 +59,6 @@ define(["mvc/toolshed/shed-list-view",
initialize: function() {
Galaxy.admintoolshedapp = this;
this.admin_toolshed_router = new AdminToolshedRouter();
$("#panel_header").append('<div class="unified-panel-header-inner"><a href="#/queue">Repository Queue</a></div>');

this.admin_toolshed_router.on('route:queue', function() {
if (Galaxy.admintoolshedapp.adminRepoQueueView) {
Expand Down
2 changes: 2 additions & 0 deletions client/galaxy/scripts/mvc/toolshed/categories-view.js
Expand Up @@ -22,6 +22,7 @@ define(['mvc/toolshed/toolshed-model', 'mvc/toolshed/util'], function(toolshed_m
render: function(options) {
this.options = _.extend(this.options, options);
this.options.categories = this.model.models;
this.options.queue = toolshed_util.queueLength();
var category_list_template = this.templateCategoryList;
this.$el.html(category_list_template(this.options));
$("#center").css('overflow', 'auto');
Expand Down Expand Up @@ -65,6 +66,7 @@ define(['mvc/toolshed/toolshed-model', 'mvc/toolshed/util'], function(toolshed_m
templateCategoryList: _.template([
'<div class="unified-panel-header" id="panel_header" unselectable="on">',
'<div class="unified-panel-header-inner" style="layout: inline;">Categories in <%= tool_shed.replace(/%2f/g, "/") %></div>',
'<div class="unified-panel-header-inner" style="position: absolute; right: 5px; top: 0px;"><a href="#/queue">Repository Queue (<%= queue %>)</a></div>',
'</div>',
'<div class="unified-panel-body" id="list_categories">',
'<div id="standard-search" style="height: 2em; margin: 1em;">',
Expand Down
8 changes: 6 additions & 2 deletions client/galaxy/scripts/mvc/toolshed/repo-status-view.js
@@ -1,4 +1,4 @@
define(['mvc/toolshed/toolshed-model'], function(toolshed_model) {
define(['mvc/toolshed/toolshed-model', 'mvc/toolshed/util'], function(toolshed_model, toolshed_util) {

var ToolShedRepoStatusView = Backbone.View.extend({

Expand Down Expand Up @@ -38,7 +38,7 @@ define(['mvc/toolshed/toolshed-model'], function(toolshed_model) {
render: function(options) {
this.options = _.extend(this.options, options);
var repo_status_template = this.templateRepoStatus;
this.$el.html(repo_status_template({repositories: this.model.models}));
this.$el.html(repo_status_template({title: 'Repository Status', repositories: this.model.models, queue: toolshed_util.queueLength()}));
$("#center").css('overflow', 'auto');
this.bindEvents();
},
Expand All @@ -53,6 +53,10 @@ define(['mvc/toolshed/toolshed-model'], function(toolshed_model) {
},

templateRepoStatus: _.template([
'<div class="unified-panel-header" id="panel_header" unselectable="on">',
'<div class="unified-panel-header-inner"><%= title %></div>',
'<div class="unified-panel-header-inner" style="position: absolute; right: 5px; top: 0px;"><a href="#/queue">Repository Queue (<%= queue %>)</a></div>',
'</div>',
'<style type="text/css">',
'.state-color-new,',
'.state-color-deactivated,',
Expand Down
3 changes: 2 additions & 1 deletion client/galaxy/scripts/mvc/toolshed/repositories-view.js
Expand Up @@ -18,7 +18,7 @@ define(['mvc/toolshed/toolshed-model', 'mvc/toolshed/util'], function(toolshed_m
render: function(options) {
this.options = _.extend(this.options, options);
var category_contents_template = this.templateCategoryContents;
this.$el.html(category_contents_template({category: this.model.models[0], tool_shed: this.model.tool_shed}));
this.$el.html(category_contents_template({category: this.model.models[0], tool_shed: this.model.tool_shed, queue: toolshed_util.queueLength()}));
$("#center").css('overflow', 'auto');
this.bindEvents();
},
Expand Down Expand Up @@ -54,6 +54,7 @@ define(['mvc/toolshed/toolshed-model', 'mvc/toolshed/util'], function(toolshed_m
templateCategoryContents: _.template([
'<div class="unified-panel-header" id="panel_header" unselectable="on">',
'<div class="unified-panel-header-inner">Repositories in <%= category.get("name") %></div>',
'<div class="unified-panel-header-inner" style="position: absolute; right: 5px; top: 0px;"><a href="#/queue">Repository Queue (<%= queue %>)</a></div>',
'</div>',
'<div class="unified-panel-body" id="list_repositories">',
'<div id="standard-search" style="height: 2em; margin: 1em;">',
Expand Down
6 changes: 5 additions & 1 deletion client/galaxy/scripts/mvc/toolshed/repository-queue-view.js
Expand Up @@ -18,7 +18,7 @@ define(['mvc/toolshed/toolshed-model', 'mvc/toolshed/util'], function(toolshed_m
var that = this;
var repo_queue_template = that.templateRepoQueue;
var repositories = that.model.models;
that.$el.html(repo_queue_template({repositories: repositories}));
that.$el.html(repo_queue_template({title: 'Repository Installation Queue', repositories: repositories, queue: toolshed_util.queueLength()}));
$("#center").css('overflow', 'auto');
that.bindEvents();
},
Expand Down Expand Up @@ -98,6 +98,10 @@ define(['mvc/toolshed/toolshed-model', 'mvc/toolshed/util'], function(toolshed_m
},

templateRepoQueue: _.template([
'<div class="unified-panel-header" id="panel_header" unselectable="on">',
'<div class="unified-panel-header-inner"><%= title %></div>',
'<div class="unified-panel-header-inner" style="position: absolute; right: 5px; top: 0px;"><a href="#/queue">Repository Queue (<%= queue %>)</a></div>',
'</div>',
'<div class="tab-pane" id="panel_header" id="repository_queue">',
'<table id="queued_repositories" class="grid" border="0" cellpadding="2" cellspacing="2" width="100%">',
'<thead id="grid-table-header">',
Expand Down
2 changes: 2 additions & 0 deletions client/galaxy/scripts/mvc/toolshed/repository-view.js
Expand Up @@ -33,6 +33,7 @@ define(['mvc/toolshed/toolshed-model',
this.options = {
repository: models.get('repository'),
tool_shed: this.model.tool_shed,
queue: toolshed_util.queueLength(),
}
var changesets = Object.keys(this.options.repository.metadata);
this.options.current_changeset = (this.options.current_changeset || changesets[changesets.length - 1]);
Expand Down Expand Up @@ -261,6 +262,7 @@ define(['mvc/toolshed/toolshed-model',
templateRepoDetails: _.template([
'<div class="unified-panel-header" id="panel_header" unselectable="on">',
'<div class="unified-panel-header-inner">Repository information for <strong><%= repository.name %></strong> from <strong><%= repository.owner %></strong></div>',
'<div class="unified-panel-header-inner" style="position: absolute; right: 5px; top: 0px;"><a href="#/queue">Repository Queue (<%= queue %>)</a></div>',
'</div>',
'<div class="unified-panel-body" id="repository_details" data-tsrid="<%= repository.id %>">',
'<form id="repository_installation" name="install_repository" method="post" action="<%= api_url %>">',
Expand Down
8 changes: 4 additions & 4 deletions client/galaxy/scripts/mvc/toolshed/shed-list-view.js
@@ -1,4 +1,4 @@
define(['mvc/toolshed/toolshed-model',], function(toolshed_model) {
define(['mvc/toolshed/toolshed-model', 'mvc/toolshed/util'], function(toolshed_model, toolshed_util) {

var View = Backbone.View.extend({

Expand All @@ -19,7 +19,7 @@ define(['mvc/toolshed/toolshed-model',], function(toolshed_model) {
render: function(options) {
this.options = _.defaults(this.options || {}, options, this.defaults);
var toolshed_list_template = this.templateToolshedList;
this.$el.html(toolshed_list_template({tool_sheds: this.model.models}));
this.$el.html(toolshed_list_template({title: 'Accessible Galaxy ToolSheds', tool_sheds: this.model.models, queue: toolshed_util.queueLength()}));
},

reDraw: function(options){
Expand All @@ -29,8 +29,8 @@ define(['mvc/toolshed/toolshed-model',], function(toolshed_model) {

templateToolshedList: _.template([
'<div class="unified-panel-header" id="panel_header" unselectable="on">',
'<div class="unified-panel-header-inner">Accessible Galaxy tool sheds</div>',
'<a href="#queue">Repository Queue</a>',
'<div class="unified-panel-header-inner"><%= title %></div>',
'<div class="unified-panel-header-inner" style="position: absolute; right: 5px; top: 0px;"><a href="#/queue">Repository Queue (<%= queue %>)</a></div>',
'</div>',
'<div class="unified-panel-body" id="list_toolsheds">',
'<div class="form-row">',
Expand Down
13 changes: 12 additions & 1 deletion client/galaxy/scripts/mvc/toolshed/util.js
Expand Up @@ -35,5 +35,16 @@ define([], function() {
localStorage.repositories = JSON.stringify(queued_repos);
}

return {searchShed: searchShed, shedParser: shedParser, addToQueue: addToQueue};
var queueLength = function() {
if (localStorage.hasOwnProperty('repositories')) {
repo_queue = JSON.parse(localStorage.repositories);
queue_length = Object.keys(repo_queue).length;
return queue_length;
}
else {
return 0;
}
}

return {searchShed: searchShed, shedParser: shedParser, addToQueue: addToQueue, queueLength: queueLength};
});
9 changes: 8 additions & 1 deletion client/galaxy/scripts/mvc/toolshed/workflows-view.js
Expand Up @@ -18,7 +18,7 @@ define(['mvc/toolshed/toolshed-model', 'mvc/toolshed/util'], function(toolshed_m
var that = this;
var workflows_missing_tools = that.templateWorkflows;
var workflows = that.model.models;
that.$el.html(workflows_missing_tools({workflows: workflows}));
that.$el.html(workflows_missing_tools({title: 'Workflows Missing Tools', workflows: workflows, queue: toolshed_util.queueLength()}));
$("#center").css('overflow', 'auto');
that.bindEvents();
},
Expand Down Expand Up @@ -66,6 +66,13 @@ define(['mvc/toolshed/toolshed-model', 'mvc/toolshed/util'], function(toolshed_m
},

templateWorkflows: _.template([
'<div class="unified-panel-header" id="panel_header" unselectable="on">',
'<div class="unified-panel-header-inner"><%= title %></div>',
'<div class="unified-panel-header-inner" style="position: absolute; right: 5px; top: 0px;"><a href="#/queue">Repository Queue (<%= queue %>)</a></div>',
'</div>',
'<style type="text/css">',
'.workflow_names, .workflow_tools { list-style-type: none; } ul.workflow_tools, ul.workflow_names { padding-left: 0px; }',
'</style>',
'<table id="workflows_missing_tools" class="grid" border="0" cellpadding="2" cellspacing="2" width="100%">',
'<thead id="grid-table-header">',
'<tr>',
Expand Down
1 change: 0 additions & 1 deletion static/scripts/admin.toolshed.js
Expand Up @@ -28,7 +28,6 @@ define([ "mvc/toolshed/shed-list-view", "mvc/toolshed/categories-view", "mvc/too
},
initialize: function() {
Galaxy.admintoolshedapp = this, this.admin_toolshed_router = new AdminToolshedRouter(),
$("#panel_header").append('<div class="unified-panel-header-inner"><a href="#/queue">Repository Queue</a></div>'),
this.admin_toolshed_router.on("route:queue", function() {
Galaxy.admintoolshedapp.adminRepoQueueView ? Galaxy.admintoolshedapp.adminRepoQueueView.reDraw() : Galaxy.admintoolshedapp.adminRepoQueueView = new mod_repoqueue_view.RepoQueueView();
}), this.admin_toolshed_router.on("route:toolsheds", function() {
Expand Down
59 changes: 57 additions & 2 deletions static/scripts/mvc/toolshed/categories-view.js
@@ -1,2 +1,57 @@
define(["mvc/toolshed/toolshed-model","mvc/toolshed/util"],function(a,b){var c=Backbone.View.extend({el:"#center",defaults:{tool_shed:"https://toolshed.g2.bx.psu.edu/"},initialize:function(b){var c=b.tool_shed.replace(/\//g,"%2f");this.options=_.defaults(this.options||b,this.defaults),this.model=new a.Categories,this.listenTo(this.model,"sync",this.render),this.model.url=this.model.url+"?tool_shed_url="+this.options.tool_shed,this.model.tool_shed=c,this.model.fetch()},render:function(a){this.options=_.extend(this.options,a),this.options.categories=this.model.models;var b=this.templateCategoryList;this.$el.html(b(this.options)),$("#center").css("overflow","auto"),this.bindEvents()},bindEvents:function(){var a=this;require(["libs/jquery/jquery-ui"],function(){$("#search_box").autocomplete({source:function(c,d){var e=a.model.tool_shed.replace(/%2f/g,"/"),f=Galaxy.root+"api/tool_shed/search",g={term:c.term,tool_shed_url:e};$.post(f,g,function(a){console.log(a),result_list=b.shedParser(a),d(result_list)})},minLength:3,select:function(b,c){var d=c.item.value,e=(Galaxy.root+"api/tool_shed/repository",{tool_shed_url:a.model.tool_shed,tsr_id:d},"repository/s/"+a.model.tool_shed+"/r/"+d);Backbone.history.navigate(e,{trigger:!0,replace:!0})}})})},reDraw:function(a){this.$el.empty(),this.model.url=this.model.url+"?tool_shed_url="+this.options.tool_shed,this.initialize(a)},templateCategoryList:_.template(['<div class="unified-panel-header" id="panel_header" unselectable="on">','<div class="unified-panel-header-inner" style="layout: inline;">Categories in <%= tool_shed.replace(/%2f/g, "/") %></div>',"</div>",'<div class="unified-panel-body" id="list_categories">','<div id="standard-search" style="height: 2em; margin: 1em;">','<span class="ui-widget" >','<input class="search-box-input" id="search_box" data-shedurl="<%= tool_shed.replace(/%2f/g, "/") %>" name="search" placeholder="Search repositories by name or id" size="60" type="text" />',"</span>","</div>",'<div style="clear: both; margin-top: 1em;">','<table class="grid">','<thead id="grid-table-header">',"<tr>","<th>Name</th>","<th>Description</th>","<th>Repositories</th>","</tr>","</thead>","<% _.each(categories, function(category) { %>","<tr>","<td>",'<a href="#/category/s/<%= tool_shed %>/c/<%= category.get("id") %>"><%= category.get("name") %></a>',"</td>",'<td><%= category.get("description") %></td>','<td><%= category.get("repositories") %></td>',"</tr>","<% }); %>","</table>","</div>","</div>"].join(""))});return{CategoryView:c}});
//# sourceMappingURL=../../../maps/mvc/toolshed/categories-view.js.map
define([ "mvc/toolshed/toolshed-model", "mvc/toolshed/util" ], function(toolshed_model, toolshed_util) {
var ToolShedCategories = Backbone.View.extend({
el: "#center",
defaults: {
tool_shed: "https://toolshed.g2.bx.psu.edu/"
},
initialize: function(options) {
var shed = options.tool_shed.replace(/\//g, "%2f");
this.options = _.defaults(this.options || options, this.defaults), this.model = new toolshed_model.Categories(),
this.listenTo(this.model, "sync", this.render), this.model.url = this.model.url + "?tool_shed_url=" + this.options.tool_shed,
this.model.tool_shed = shed, this.model.fetch();
},
render: function(options) {
this.options = _.extend(this.options, options), this.options.categories = this.model.models,
this.options.queue = toolshed_util.queueLength();
var category_list_template = this.templateCategoryList;
this.$el.html(category_list_template(this.options)), $("#center").css("overflow", "auto"),
this.bindEvents();
},
bindEvents: function() {
var that = this;
require([ "libs/jquery/jquery-ui" ], function() {
$("#search_box").autocomplete({
source: function(request, response) {
var shed_url = that.model.tool_shed.replace(/%2f/g, "/"), base_url = Galaxy.root + "api/tool_shed/search", params = {
term: request.term,
tool_shed_url: shed_url
};
$.post(base_url, params, function(data) {
console.log(data), result_list = toolshed_util.shedParser(data), response(result_list);
});
},
minLength: 3,
select: function(event, ui) {
var tsr_id = ui.item.value, new_route = (Galaxy.root + "api/tool_shed/repository",
{
tool_shed_url: that.model.tool_shed,
tsr_id: tsr_id
}, "repository/s/" + that.model.tool_shed + "/r/" + tsr_id);
Backbone.history.navigate(new_route, {
trigger: !0,
replace: !0
});
}
});
});
},
reDraw: function(options) {
this.$el.empty(), this.model.url = this.model.url + "?tool_shed_url=" + this.options.tool_shed,
this.initialize(options);
},
templateCategoryList: _.template([ '<div class="unified-panel-header" id="panel_header" unselectable="on">', '<div class="unified-panel-header-inner" style="layout: inline;">Categories in <%= tool_shed.replace(/%2f/g, "/") %></div>', '<div class="unified-panel-header-inner" style="position: absolute; right: 5px; top: 0px;"><a href="#/queue">Repository Queue (<%= queue %>)</a></div>', "</div>", '<div class="unified-panel-body" id="list_categories">', '<div id="standard-search" style="height: 2em; margin: 1em;">', '<span class="ui-widget" >', '<input class="search-box-input" id="search_box" data-shedurl="<%= tool_shed.replace(/%2f/g, "/") %>" name="search" placeholder="Search repositories by name or id" size="60" type="text" />', "</span>", "</div>", '<div style="clear: both; margin-top: 1em;">', '<table class="grid">', '<thead id="grid-table-header">', "<tr>", "<th>Name</th>", "<th>Description</th>", "<th>Repositories</th>", "</tr>", "</thead>", "<% _.each(categories, function(category) { %>", "<tr>", "<td>", '<a href="#/category/s/<%= tool_shed %>/c/<%= category.get("id") %>"><%= category.get("name") %></a>', "</td>", '<td><%= category.get("description") %></td>', '<td><%= category.get("repositories") %></td>', "</tr>", "<% }); %>", "</table>", "</div>", "</div>" ].join(""))
});
return {
CategoryView: ToolShedCategories
};
});

0 comments on commit 233b90c

Please sign in to comment.