App.state = new Backbone.Model configure: false
+ App.saveDashboard = ->
+ layout = @widgetsView.getLayout()
+ data =
+ did: App.dashboard.id
+ layout: layout
+ $.post "#{baseUrl}/api/dashboards/save", data
+
+
App.addInitializer ->
@widgetsView = new WidgetsView
collection: @widgets
requestDetails = ->
- $.get "#{baseUrl}/api/dashboards/details", did: App.dashboard, (data) ->
- console.log JSON.stringify data
+ $.get "#{baseUrl}/api/dashboards/details", key: App.dashboard, (data) ->
App.dashboard = new Backbone.Model _.omit data, 'widgets'
App.widgets = new Widgets data.widgets
widgets: [
{
+ id: 1
key: 'measure_filter_list'
name: 'Measure Filter as List'
properties: [
}
}
{
+ id: 2
key: 'my_reviews'
name: 'My Unresolved Issues'
properties: [
}
}
{
+ id: 3
key: 'hotspot_most_violated_rules'
name: 'Most Violated Rules'
properties: [
row: 1
}
}
+
+
+ jQuery.mockjax
+ url: "#{baseUrl}/api/dashboards/save"
+ responseText: JSON.stringify
+ status: 'ok'
class extends Backbone.Model
- idAttribute: 'key'
-
mergeProperties: (properties) ->
props = @get 'properties'
class extends Marionette.ItemView
template: Templates['widget']
+ className: 'block'
events:
@requestContent()
+ onRender: ->
+ @$el.data 'id', @model.id
+ if @options.app.state.get 'configure'
+ @$el.prop 'draggable', true
+
+
requestContent: ->
- payload = id: @model.id
+ payload = id: @model.get 'key'
if @options.app.resource
payload.resource = @options.app.resource
_.extend payload, @getWidgetProps()
editWidget: ->
- $.get "#{baseUrl}/api/dashboards/configure_widget", id: @model.id, (data) =>
+ $.get "#{baseUrl}/api/dashboards/configure_widget", id: @model.get('key'), (data) =>
@model.mergeProperties data.widget.properties
@showEditForm()
WidgetView
) ->
+ $ = jQuery
+
+
class extends Marionette.CompositeView
template: Templates['widgets']
itemView: WidgetView
$container.eq(column).append itemView.el
+ onRender: ->
+ @initializeDragging() if @options.app.state.get 'configure'
+
+
+ initializeDragging: ->
+ blocks = @$('.block')
+ columnHandle = @$('.column-handle')
+ draggable = null
+
+ onDragLeave = (e) ->
+ $(e.currentTarget).removeClass 'block-hover'
+
+ onDrop = (e) =>
+ e.preventDefault()
+ draggable.detach().insertBefore $(e.currentTarget)
+ onDragLeave e
+ @options.app.saveDashboard()
+
+ blocks.on 'selectstart', ->
+ @dragDrop()
+ false
+ blocks.on 'dragstart', (e) ->
+ e.originalEvent.dataTransfer.setData 'Text', 'drag'
+ draggable = $(@)
+ columnHandle.show()
+ blocks.on 'dragover', (e) ->
+ if draggable.data('id') != $(@).data('id')
+ e.preventDefault()
+ $(e.currentTarget).addClass 'block-hover'
+ blocks.on 'drop', onDrop
+ blocks.on 'dragleave', onDragLeave
+
+ columnHandle.on 'dragover', (e) ->
+ e.preventDefault()
+ $(e.currentTarget).addClass 'block-hover'
+ columnHandle.on 'drop', onDrop
+ columnHandle.on 'dragleave', onDragLeave
+
+
configureWidgets: ->
@options.app.state.set configure: true
@options.app.state.set configure: false
+ getLayout: ->
+ layout = $('.dashboard-column').map( ->
+ blocks = $(@).find '.block'
+ blocks.map( -> $(@).data('id')).get().join(',')
+ ).get().join(';')
+
+
serializeData: ->
_.extend super,
dashboard: @options.dashboard.toJSON()
-<div class="block">
+{{#if state.configure}}
- {{#if state.configure}}
-
- <div class="widget-header">
- <div class="widget-actions">
- {{#notEmpty properties}}<a class="js-edit-widget">Edit</a>{{/notEmpty}}
- <a class="js-delete-widget">Delete</a>
- </div>
- <div class="widget-handle">{{name}}</div>
+ <div class="widget-header">
+ <div class="widget-actions">
+ {{#notEmpty properties}}<a class="js-edit-widget">Edit</a>{{/notEmpty}}
+ <a class="js-delete-widget">Delete</a>
</div>
+ <div class="widget-handle">{{name}}</div>
+ </div>
- <div class="widget_props hidden">
- {{> '_widget-props'}}
- </div>
+ <div class="widget_props hidden">
+ {{> '_widget-props'}}
+ </div>
- <div class="configure_widget">
- <div class="transparent"></div>
- <div class="widget">
- {{#if html}}{{{html}}}{{else}}<i class="spinner spinner-margin"></i>{{/if}}
- </div>
+ <div class="configure_widget">
+ <div class="transparent"></div>
+ <div class="widget">
+ {{#if html}}{{{html}}}{{else}}<i class="spinner spinner-margin"></i>{{/if}}
</div>
+ </div>
- {{else}}
+{{else}}
- <div class="widget">
- {{#if html}}{{{html}}}{{else}}<i class="spinner spinner-margin"></i>{{/if}}
- </div>
+ <div class="widget">
+ {{#if html}}{{{html}}}{{else}}<i class="spinner spinner-margin"></i>{{/if}}
+ </div>
- {{/if}}
-</div>
+{{/if}}