From: Scott Baker Date: Wed, 5 Nov 2014 07:20:48 +0000 (-0800) Subject: tabs working X-Git-Url: http://git.onelab.eu/?a=commitdiff_plain;h=853aa904498d404764ad4e9a15baf5c1399ea220;p=plstackapi.git tabs working --- diff --git a/planetstack/core/xoslib/dashboards/xosAdminSite.html b/planetstack/core/xoslib/dashboards/xosAdminSite.html index 1096a2a..ec37300 100644 --- a/planetstack/core/xoslib/dashboards/xosAdminSite.html +++ b/planetstack/core/xoslib/dashboards/xosAdminSite.html @@ -20,13 +20,15 @@ nav
-
+
+
+
+
-
diff --git a/planetstack/core/xoslib/static/css/xosAdminSite.css b/planetstack/core/xoslib/static/css/xosAdminSite.css index 5148def..1a6680f 100644 --- a/planetstack/core/xoslib/static/css/xosAdminSite.css +++ b/planetstack/core/xoslib/static/css/xosAdminSite.css @@ -56,3 +56,55 @@ .btn-xosnav { width: 120px; } + +.xos-nav-list { + list-style:none; + border-bottom-style: solid; + border-bottom-color: #105E9E; + color: #105E93; + margin: 0px 4px 15px 5px; +} + +.xos-nav-item { + background-color: #E0E0E0; + border-top-left-radius: 3px; + border-top-right-radius: 3px; + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; + + display: inline-block; + content: normal; + clear: none; + + padding:8px 20px 7px; + + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-size: 13px; + font-weight: bold; + color: #105E9E; + border: none; + box-shadow: none; + cursor: pointer; +} + +.xos-nav-item:hover { + background-color: #A0A0A0; + letter-spacing: 1px; +} + +.xos-nav-item.active { + background-color: #105E9E; + color:#ffffff; + font-weight:normal; + padding-top:10px; + text-decoration:none; +} + +.xos-list-title { + display: none; +} + +.xos-detail-title { + display: none; +} + diff --git a/planetstack/core/xoslib/static/js/xosAdminSite.js b/planetstack/core/xoslib/static/js/xosAdminSite.js index 660556e..820459e 100644 --- a/planetstack/core/xoslib/static/js/xosAdminSite.js +++ b/planetstack/core/xoslib/static/js/xosAdminSite.js @@ -90,13 +90,13 @@ XOSAdminApp.initRouter = function() { listViewName = collection_name + "ListView"; detailViewName = collection_name + "DetailView"; - api[api_command] = XOSAdminApp.listViewShower(listViewName, "detail"); + api[api_command] = XOSAdminApp.listViewShower(listViewName, collection_name, "detail", collection_name); routes[nav_url] = api_command; nav_url = collection_name + "/:id"; api_command = "detail" + collection_name.charAt(0).toUpperCase() + collection_name.slice(1); - api[api_command] = XOSAdminApp.detailShower(detailViewName, collection_name, "detail"); + api[api_command] = XOSAdminApp.detailShower(detailViewName, collection_name, "detail", name); routes[nav_url] = api_command; }; diff --git a/planetstack/core/xoslib/static/js/xoslib/xos-backbone.js b/planetstack/core/xoslib/static/js/xoslib/xos-backbone.js index b2395d7..8cac922 100644 --- a/planetstack/core/xoslib/static/js/xoslib/xos-backbone.js +++ b/planetstack/core/xoslib/static/js/xoslib/xos-backbone.js @@ -197,7 +197,7 @@ if (! window.XOSLIB_LOADED ) { this.slice = XOSModel.extend({ urlRoot: SLICE_API, modelName: "slice" }); this.sliceCollection = XOSCollection.extend({ urlRoot: SLICE_API, - relatedCollections: {"slivers": "slice", "sliceDeployments": "slice", "slicePrivileges": "slice"}, + relatedCollections: {"slivers": "slice", "sliceDeployments": "slice", "slicePrivileges": "slice", "networks": "owner"}, foreignCollections: ["services", "sites"], model: this.slice}); this.slices = new this.sliceCollection(); diff --git a/planetstack/core/xoslib/static/js/xoslib/xosHelper.js b/planetstack/core/xoslib/static/js/xoslib/xosHelper.js index 0ba1c3d..c5ec0fe 100644 --- a/planetstack/core/xoslib/static/js/xoslib/xosHelper.js +++ b/planetstack/core/xoslib/static/js/xoslib/xosHelper.js @@ -4,6 +4,10 @@ function assert(outcome, description) { } } +function templateFromId(id) { + return _.template($(id).html()); +} + HTMLView = Marionette.ItemView.extend({ render: function() { this.$el.append(this.options.html); @@ -35,8 +39,9 @@ XOSApplication = Marionette.Application.extend({ } else { $(this.successBoxId).show(); $(this.successBoxId).html(_.template($(this.successTemplate).html())(result)); + var that=this; $(this.successCloseButtonId).unbind().bind('click', function() { - $(this.successBoxId).hide(); + $(that.successBoxId).hide(); }); } }, @@ -48,8 +53,9 @@ XOSApplication = Marionette.Application.extend({ } else { $(this.errorBoxId).show(); $(this.errorBoxId).html(_.template($(this.errorTemplate).html())(result)); + var that=this; $(this.errorCloseButtonId).unbind().bind('click', function() { - $(this.errorBoxId).hide(); + $(that.errorBoxId).hide(); }); } }, @@ -78,8 +84,6 @@ XOSApplication = Marionette.Application.extend({ // We were passed the logMessageId of an informational message, // and the caller wants us to replace that message with our own. // i.e. replace an informational message with a success or an error. - console.log(result["infoMsgId"]); - console.log($("."+result["infoMsgId"])); $("#"+result["infoMsgId"]).replaceWith(newRow); } else { // Create a brand new log message rather than replacing one. @@ -90,32 +94,36 @@ XOSApplication = Marionette.Application.extend({ }, hideLinkedItems: function(result) { - index=0; + var index=0; while (index<4) { this["linkedObjs" + (index+1)].empty(); index = index + 1; } }, - listViewShower: function(listViewName, regionName) { + listViewShower: function(listViewName, collection_name, regionName, title) { var app=this; return function() { app[regionName].show(new app[listViewName]); app.hideLinkedItems(); + $("#contentTitle").html(templateFromId("#xos-title-list")({"title": title})); + $("#detail").show(); + $("#tabs").hide(); } }, - detailShower: function(detailName, collection_name, regionName) { + detailShower: function(detailName, collection_name, regionName, title) { var app=this; showModelId = function(model_id) { showModel = function(model) { - console.log(app); detailViewClass = app[detailName]; detailView = new detailViewClass({model: model}); app[regionName].show(detailView); detailView.showLinkedItems(); } + $("#contentTitle").html(templateFromId("#xos-title-detail")({"title": title})); + collection = xos[collection_name]; model = collection.get(model_id); if (model == undefined) { @@ -193,26 +201,66 @@ XOSDetailView = Marionette.ItemView.extend({ this.dirty = false; }, + tabClick: function(tabId, regionName) { + region = this.app[regionName]; + if (this.currentTabRegion != undefined) { + this.currentTabRegion.$el.hide(); + } + if (this.currentTabId != undefined) { + $(this.currentTabId).removeClass('active'); + } + this.currentTabRegion = region; + this.currentTabRegion.$el.show(); + + this.currentTabId = tabId; + $(tabId).addClass('active'); + }, + + showTabs: function(tabs) { + template = templateFromId("#xos-tabs-template", {tabs: tabs}); + $("#tabs").html(template(tabs)); + var that = this; + + _.each(tabs, function(tab) { + var regionName = tab["region"]; + var tabId = '#xos-nav-'+regionName; + $(tabId).bind('click', function() { that.tabClick(tabId, regionName); }); + }); + + $("#tabs").show(); + }, + showLinkedItems: function() { - index=0; + tabs=[]; + + tabs.push({name: "details", region: "detail"}); + + var index=0; for (relatedName in this.model.collection.relatedCollections) { relatedField = this.model.collection.relatedCollections[relatedName]; + regionName = "linkedObjs" + (index+1); relatedListViewClassName = relatedName + "ListView"; - if (this.app[relatedListViewClassName] == undefined) { - console.log("warning: " + relatedListViewClassName + " not found"); - } + assert(this.app[relatedListViewClassName] != undefined, relatedListViewClassName + " not found"); relatedListViewClass = this.app[relatedListViewClassName].extend({collection: xos[relatedName].filterBy(relatedField,this.model.id)}); - this.app["linkedObjs" + (index+1)].show(new relatedListViewClass()); + this.app[regionName].show(new relatedListViewClass()); + this.app[regionName].$el.hide(); + tabs.push({name: relatedName, region: regionName}); index = index + 1; } + console.log(index); + while (index<4) { this.app["linkedObjs" + (index+1)].empty(); index = index + 1; } - }, -}); + + this.showTabs(tabs); + this.tabClick('#xos-nav-detail', 'detail'); + }, + +}); /* XOSItemView This is for items that will be displayed as table rows. diff --git a/planetstack/core/xoslib/templates/xosAdmin.html b/planetstack/core/xoslib/templates/xosAdmin.html index 8e4588c..57c024e 100644 --- a/planetstack/core/xoslib/templates/xosAdmin.html +++ b/planetstack/core/xoslib/templates/xosAdmin.html @@ -31,6 +31,23 @@ + + + + + + +