From 3ec3f7f8c97bc26fcc8eafd4fad67f9e4b084d3b Mon Sep 17 00:00:00 2001 From: David Schoonover Date: Fri, 6 Jul 2012 16:24:41 -0700 Subject: [PATCH] Updates to multi-dashboard with Evan. --- lib/base/base-model.co | 3 + lib/dashboard/dashboard-model.co | 61 ++------------------ lib/dashboard/dashboard-view.co | 86 ++++++++++++++++++++++------- lib/main-dashboard.co | 11 +++- lib/server/middleware.co | 2 +- lib/template/dashboard/dashboard-tab.jade | 1 + lib/template/dashboard/dashboard.jade | 16 ++---- www/dashboard.jade | 17 ------ www/dashboard/view.jade | 17 ++++++ www/modules.yaml | 1 + 10 files changed, 108 insertions(+), 107 deletions(-) create mode 100644 lib/template/dashboard/dashboard-tab.jade delete mode 100644 www/dashboard.jade create mode 100644 www/dashboard/view.jade diff --git a/lib/base/base-model.co b/lib/base/base-model.co index 260c398..54b725e 100644 --- a/lib/base/base-model.co +++ b/lib/base/base-model.co @@ -25,6 +25,9 @@ BaseModel = exports.BaseModel = Backbone.Model.extend mixinBase do # {{{ ### Accessors + url: -> + "#{@urlRoot}/#{@get('id')}.json" + has: (key) -> @get(key)? diff --git a/lib/dashboard/dashboard-model.co b/lib/dashboard/dashboard-model.co index a1e9544..d4e3fbf 100644 --- a/lib/dashboard/dashboard-model.co +++ b/lib/dashboard/dashboard-model.co @@ -24,65 +24,15 @@ Dashboard = exports.Dashboard = BaseModel.extend do # {{{ initialize: -> BaseModel::initialize ... - @getGraphs() + # @getGraphs() defaults: -> name : null tabs : [ { name:"Main", graph_ids:[] } ] - - graph_ids : <[ - unique_visitors - reach - pageviews - pageviews_mobile - pageviews_mobile_target - commons - articles - articles_per_day - edits - new_editors - active_editors - active_editors_target - very_active_editors - ]> - - - tabs : { - core : - graph_ids : <[ - unique_visitors - pageviews - pageviews_mobile - pageviews_mobile_target - new_editors - active_editors - active_editors_target - ]> - name: ".core-graphs-pane" - - other : - graph_ids : <[ - reach - commons - articles - articles_per_day - edits - very_active_editors - ]> - name: ".other-graphs-pane" - - dev : - graph_ids : <[ - mobile_devices - mobile_devices_browsers - mobile_devices_applications - ]> - name: ".dev-graphs-pane" - } - - addTab: (tabName) -> - ... + load: -> + @once 'fetch-success', (~> @getGraphs()) .loadModel() + this /** @@ -127,7 +77,8 @@ Dashboard = exports.Dashboard = BaseModel.extend do # {{{ graph.once 'ready', -> next.ok tuple .unflatten() .seq_ (next, graph_tuples) ~> - @graphs = _.generate graph_tuples + # @graphs = _.generate graph_tuples + @graphs.reset _.pluck graph_tuples, 1 console.log('[setter]\tcalling ready') @triggerReady() this diff --git a/lib/dashboard/dashboard-view.co b/lib/dashboard/dashboard-view.co index 2831d17..eada37e 100644 --- a/lib/dashboard/dashboard-view.co +++ b/lib/dashboard/dashboard-view.co @@ -2,7 +2,7 @@ Seq = require 'seq' { _, op, } = require 'kraken/util' -{ BaseView, +{ BaseModel, BaseView, } = require 'kraken/base' { Graph, GraphList, GraphDisplayView, } = require 'kraken/graph' @@ -34,17 +34,15 @@ DashboardView = exports.DashboardView = BaseView.extend do # {{{ constructor: function DashboardView(options={}) - @model = options.model - # @subviews = [] - @graphs = new GraphList + @graphs = new GraphList BaseView ... initialize: -> @model or= new Dashboard - BaseView::initialize ... + DashboardView.__super__.initialize ... # @graphs.on 'add', @attachGraphs, this # @graphs.on 'add', @attachGraph, this - @model.on 'ready', @load, this + @model.once 'ready', @load, this .load() # FIXME: @@ -54,28 +52,40 @@ DashboardView = exports.DashboardView = BaseView.extend do # {{{ # - only render graph when scrolling makes it visible load: -> console.log "#this.load! Model ready!", @model - _.map @model.tabs, @addTab + Seq @model.get('tabs') + .seqEach_ @addTab + .seq ~> + console.log "#{this}.load! Done adding tabs!" + @triggerReady() - addTab: (tab) -> + addTab: (nextTab, tab) -> # self = this - graphs = _(tab.graph_ids).map((graph_id) ~> @model.graphs[graph_id]) - Seq(graphs) + # a(href="#core-graphs", data-toggle="tab") Core + tabModel = new BaseModel tab + tabView = @addSubview new DashboardTabView {model:tabModel} + tabId = tabView.getTabId() + @$ "nav > ul.nav" + .append "
  • #{tab.name}
    • " + + graphs = _(tab.graph_ids).map (graph_id) ~> @model.graphs.get graph_id + Seq graphs .parMap_ (next, graph) ~> @graphs.add graph next null, new GraphDisplayView {model:graph} - .parMap_ (next, view) ~> - return next.ok() if view.isAttached - @addSubview view - tabEl = @$ tab.name - if tabEl.length - tabEl.append view.$el - view.isAttached = true - else - console.log "#this.addTab: Unable to find bind-point for #view!", view + .parMap_ (next, graphView) ~> + return next.ok() if graphView.isAttached + tabView.addSubview graphView + # tabEl = @$ tab.name + # if tabEl.length + # tabEl.append view.$el + # view.isAttached = true + # else + # console.log "#this.addTab: Unable to find bind-point for #view!", view next.ok() .seq ~> - console.log "#this.addTab: All graphs added!" - @render() + console.log "#{this}.addTab: All graphs added!" + # @render() + nextTab.ok() this ### Tabs {{{ @@ -128,3 +138,37 @@ DashboardView = exports.DashboardView = BaseView.extend do # {{{ ### }}} + +/** + * @class + * @extends BaseView + */ +DashboardTabView = exports.DashboardTabView = BaseView.extend do # {{{ + __bind__ : <[ ]> + className : 'tab-pane' + tag : 'div' + template : require 'kraken/template/dashboard/dashboard-tab' + + + constructor: function DashboardTabView + BaseView ... + + initialize: -> + BaseView::initialize ... + + getTabId: -> + _.underscored @model.get('name') .toLowerCase() + '-graphs-tab' + + toTemplateLocals: -> + json = DashboardTabView.__super__.toTemplateLocals ... + tab_name = _.underscored @model.get('name') .toLowerCase() + json import + tab_cls : "#tab_name-graphs-pane" + tab_id : "#tab_name-graphs-tab" + +# }}} + + + + + diff --git a/lib/main-dashboard.co b/lib/main-dashboard.co index 9f92800..40aee2b 100644 --- a/lib/main-dashboard.co +++ b/lib/main-dashboard.co @@ -20,10 +20,17 @@ root = this # Create the Graph Scaffold main = -> + # Process URL + loc = String root.location + data = {} + if match = /\/dashboards\/([^\/?]+)/i.exec loc + id = match[1] + data.id = data.slug = id unless _ <[ edit new ]> .contains id + # Instantiate model & view root.app = new AppView -> - @model = root.dashboard = new Dashboard - @view = root.view = new DashboardView {@model} + @model = root.dashboard = new Dashboard data, {+parse} + @view = root.view = new DashboardView {@model} jQuery main diff --git a/lib/server/middleware.co b/lib/server/middleware.co index e6597cc..ba6a37c 100755 --- a/lib/server/middleware.co +++ b/lib/server/middleware.co @@ -232,7 +232,7 @@ application = limn.application = # non-controller endpoints @get '/', (req, res) -> - res.render 'dashboard' + res.render 'dashboard/view' @get '/geo', (req, res) -> res.render 'geo' diff --git a/lib/template/dashboard/dashboard-tab.jade b/lib/template/dashboard/dashboard-tab.jade new file mode 100644 index 0000000..dcb281c --- /dev/null +++ b/lib/template/dashboard/dashboard-tab.jade @@ -0,0 +1 @@ +.tab-pane(id=tab_id, class=tab_cls, data-subview="GraphDisplayView") diff --git a/lib/template/dashboard/dashboard.jade b/lib/template/dashboard/dashboard.jade index 2445010..b2e760c 100644 --- a/lib/template/dashboard/dashboard.jade +++ b/lib/template/dashboard/dashboard.jade @@ -6,18 +6,12 @@ section#dashboard.centered .row .graphs.tabbable nav + //- Dashboard Tab Buttons appended here ul.nav.subnav.nav-pills - li: h3 Graphs - li.active: a(href="#core-graphs", data-toggle="tab") Core - li: a(href="#other-graphs", data-toggle="tab") Others - if IS_DEV - li: a(href="#dev-graphs", data-toggle="tab") Dev - - .tab-content - .core-graphs-pane.tab-pane.active(id="core-graphs") - .other-graphs-pane.tab-pane(id="other-graphs") - if IS_DEV - .dev-graphs-pane.tab-pane(id="dev-graphs") + li: h3 Graphs + + //- Dashboard Tabs (each with a collection of GraphDisplayViews) appended here + .tab-content(data-subview="DashboardTabView") diff --git a/www/dashboard.jade b/www/dashboard.jade deleted file mode 100644 index f7245fa..0000000 --- a/www/dashboard.jade +++ /dev/null @@ -1,17 +0,0 @@ -extends layout - -block title - title Wikimedia Report Card - April 2012 - -append styles - mixin css('graph-display.css') - mixin css('graph-display.css', media='print') - //- graph-display-print contains overrides - //- needed to make printed pages look better - mixin css('graph-display-print.css', media='print') - mixin css('dashboard.css') - mixin css('dashboard.css', media='print') - - -block main-scripts - script(src="/js/kraken/main-dashboard.js?"+version) diff --git a/www/dashboard/view.jade b/www/dashboard/view.jade new file mode 100644 index 0000000..78a56fa --- /dev/null +++ b/www/dashboard/view.jade @@ -0,0 +1,17 @@ +extends ../layout + +block title + title Dashboard | Limn + +append styles + mixin css('graph-display.css') + mixin css('graph-display.css', media='print') + //- graph-display-print contains overrides + //- needed to make printed pages look better + mixin css('graph-display-print.css', media='print') + mixin css('dashboard.css') + mixin css('dashboard.css', media='print') + + +block main-scripts + script(src="/js/kraken/main-dashboard.js?"+version) diff --git a/www/modules.yaml b/www/modules.yaml index b538834..f136df3 100644 --- a/www/modules.yaml +++ b/www/modules.yaml @@ -52,6 +52,7 @@ development: - chart-scaffold.jade - dashboard: - dashboard.jade + - dashboard-tab.jade - data: - dataset.jade - dataset-metric.jade -- 1.7.0.4