diff --git a/app/components/draggable-dropzone.js b/app/components/draggable-dropzone.js new file mode 100644 index 0000000..aa5c2f1 --- /dev/null +++ b/app/components/draggable-dropzone.js @@ -0,0 +1,26 @@ +import Ember from 'ember'; + +var { set } = Ember; + +export default Ember.Component.extend({ + classNames: [ 'draggableDropzone' ], + classNameBindings: [ 'dragClass' ], + dragClass: 'deactivated', + + dragLeave(event) { + event.preventDefault(); + set(this, 'dragClass', 'deactivated'); + }, + + dragOver(event) { + event.preventDefault(); + set(this, 'dragClass', 'activated'); + }, + + drop(event) { + var data = event.dataTransfer.getData('text/data'); + this.sendAction('dropped', data); + + set(this, 'dragClass', 'deactivated'); + } +}); diff --git a/app/components/draggable-item.js b/app/components/draggable-item.js new file mode 100644 index 0000000..841bd98 --- /dev/null +++ b/app/components/draggable-item.js @@ -0,0 +1,13 @@ +import Ember from 'ember'; + +var { get } = Ember; + +export default Ember.Component.extend({ + classNames: [ 'draggableItem' ], + attributeBindings: [ 'draggable' ], + draggable: 'true', + + dragStart(event) { + return event.dataTransfer.setData('text/data', get(this, 'content')); + } +}); diff --git a/app/components/plot-chart.js b/app/components/plot-chart.js new file mode 100644 index 0000000..926b613 --- /dev/null +++ b/app/components/plot-chart.js @@ -0,0 +1,4 @@ +import Ember from 'ember'; + +export default Ember.Component.extend({ +}); diff --git a/app/components/plot-container.js b/app/components/plot-container.js new file mode 100644 index 0000000..125d433 --- /dev/null +++ b/app/components/plot-container.js @@ -0,0 +1,17 @@ +import Ember from 'ember'; + +export default Ember.Component.extend({ + tagName: 'div', + attributeBindings: [ 'style' ], + + plot: null, + + style: function() { + return 'width: ' + this.get('plot.width') + 'px; height: ' + this.get('plot.height') + 'px; border: 1px solid black;'; + }.property('plot'), + + isTable: function() { + var modelName = this.get('plot.constructor.modelName'); + return modelName === 'plot-table'; + }.property('plot.type') +}); diff --git a/app/components/plot-table.js b/app/components/plot-table.js new file mode 100644 index 0000000..e4b1f11 --- /dev/null +++ b/app/components/plot-table.js @@ -0,0 +1,5 @@ +import Ember from 'ember'; + +export default Ember.Component.extend({ + tagName: 'table' +}); diff --git a/app/components/plot-value.js b/app/components/plot-value.js new file mode 100644 index 0000000..926b613 --- /dev/null +++ b/app/components/plot-value.js @@ -0,0 +1,4 @@ +import Ember from 'ember'; + +export default Ember.Component.extend({ +}); diff --git a/app/controllers/visualization/index.js b/app/controllers/visualization/index.js new file mode 100644 index 0000000..a349f1c --- /dev/null +++ b/app/controllers/visualization/index.js @@ -0,0 +1,31 @@ +import Ember from 'ember'; + +export default Ember.Controller.extend({ + plots: [], + + actions: { + addPlot(name) { + var plot = null; + + if (name === 'chart') { + // create new chart plot + plot = this.store.createRecord('plot', { name: 'Chart 1', signal: 'Signal 1' }); + } else if (name === 'table') { + plot = this.store.createRecord('plot-table', { name: 'Table 1', signal: 'Signal 1', width: 500 }); + } else if (name === 'value') { + plot = this.store.createRecord('plot', { name: 'Value 1', signal: 'Signal 1' }); + } else { + // DEBUG + console.log('Add plot: ' + name); + return; + } + + if (plot != null) { + // add plot to visualization + this.plots.pushObject(plot); + } else { + console.error('Unknown plot type: ' + name); + } + } + } +}); diff --git a/app/models/plot-table.js b/app/models/plot-table.js new file mode 100644 index 0000000..8832e27 --- /dev/null +++ b/app/models/plot-table.js @@ -0,0 +1,7 @@ +import Plot from './plot'; +// import attr from 'ember-data/attr'; +// import { belongsTo, hasMany } from 'ember-data/relationships'; + +export default Plot.extend({ + type: 'table' +}); diff --git a/app/models/plot.js b/app/models/plot.js index 0f3204d..82cf15c 100644 --- a/app/models/plot.js +++ b/app/models/plot.js @@ -5,8 +5,9 @@ import attr from 'ember-data/attr'; export default Model.extend({ name: attr('string'), signal: attr('string'), - //position: - //size: - title: attr('string') - //backgroundColor: + width: attr('number', { defaultValue: 100 }), + height: attr('number', { defaultValue: 100 }), + title: attr('string'), + + type: 'plot' }); diff --git a/app/styles/app.css b/app/styles/app.css index c3f270c..9530318 100644 --- a/app/styles/app.css +++ b/app/styles/app.css @@ -98,9 +98,53 @@ footer { } #login { - + } #login-form { padding: 20px 20px; } + +/** + * Visualization + */ +.plots { + margin-top: 20px; + margin-bottom: 20px; +} + +.plot-toolbox { + margin-top: 20px; +} + +.draggableDropzone { + display: block; + + min-height: 200px; + + padding-top: 5px; + padding-left: 10px; + + border: 3px dashed #aaa; + + &.activated { + border-color: #2ecc71; + } + &.deactivated { + border-color: #e1e1e1; + } +} + +.draggableItem[draggable=true] { + display: inline-block; + background: #e1e1e1; + cursor: move; + + padding: 5px 10px; + + border: 1px solid gray; + + &:hover { + background-color: #aaa; + } +} diff --git a/app/templates/components/draggable-dropzone.hbs b/app/templates/components/draggable-dropzone.hbs new file mode 100644 index 0000000..889d9ee --- /dev/null +++ b/app/templates/components/draggable-dropzone.hbs @@ -0,0 +1 @@ +{{yield}} diff --git a/app/templates/components/draggable-item.hbs b/app/templates/components/draggable-item.hbs new file mode 100644 index 0000000..889d9ee --- /dev/null +++ b/app/templates/components/draggable-item.hbs @@ -0,0 +1 @@ +{{yield}} diff --git a/app/templates/components/plot-chart.hbs b/app/templates/components/plot-chart.hbs new file mode 100644 index 0000000..889d9ee --- /dev/null +++ b/app/templates/components/plot-chart.hbs @@ -0,0 +1 @@ +{{yield}} diff --git a/app/templates/components/plot-container.hbs b/app/templates/components/plot-container.hbs new file mode 100644 index 0000000..53fbc14 --- /dev/null +++ b/app/templates/components/plot-container.hbs @@ -0,0 +1,5 @@ +{{#if isTable}} + {{#plot-table plot=plot}}{{/plot-table}} +{{else}} + Plot +{{/if}} diff --git a/app/templates/components/plot-table.hbs b/app/templates/components/plot-table.hbs new file mode 100644 index 0000000..0a1d321 --- /dev/null +++ b/app/templates/components/plot-table.hbs @@ -0,0 +1,8 @@ + + Name + Value + + + Signal X + 1.234 + diff --git a/app/templates/components/plot-value.hbs b/app/templates/components/plot-value.hbs new file mode 100644 index 0000000..889d9ee --- /dev/null +++ b/app/templates/components/plot-value.hbs @@ -0,0 +1 @@ +{{yield}} diff --git a/app/templates/visualization/index.hbs b/app/templates/visualization/index.hbs index 1156777..b11c764 100644 --- a/app/templates/visualization/index.hbs +++ b/app/templates/visualization/index.hbs @@ -1,5 +1,28 @@

{{model.name}}

+
+

Toolbox

+ {{#draggable-item content='chart'}} + Chart + {{/draggable-item}} + + {{#draggable-item content='table'}} + Table + {{/draggable-item}} + + {{#draggable-item content='value'}} + Value + {{/draggable-item}} +
+ +
+ {{#draggable-dropzone dropped='addPlot'}} + {{#each plots as |plot|}} + {{#plot-container plot=plot}}{{/plot-container}} + {{/each}} + {{/draggable-dropzone}} +
+

{{#link-to "visualization.edit" model.id}}Edit visualization{{/link-to}} {{#link-to "visualization.delete" model.id}}Delete visualization{{/link-to}} diff --git a/tests/integration/components/draggable-dropzone-test.js b/tests/integration/components/draggable-dropzone-test.js new file mode 100644 index 0000000..68c8c69 --- /dev/null +++ b/tests/integration/components/draggable-dropzone-test.js @@ -0,0 +1,24 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('draggable-dropzone', 'Integration | Component | draggable dropzone', { + integration: true +}); + +test('it renders', function(assert) { + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.on('myAction', function(val) { ... }); + + this.render(hbs`{{draggable-dropzone}}`); + + assert.equal(this.$().text().trim(), ''); + + // Template block usage: + this.render(hbs` + {{#draggable-dropzone}} + template block text + {{/draggable-dropzone}} + `); + + assert.equal(this.$().text().trim(), 'template block text'); +}); diff --git a/tests/integration/components/draggable-item-test.js b/tests/integration/components/draggable-item-test.js new file mode 100644 index 0000000..93830ba --- /dev/null +++ b/tests/integration/components/draggable-item-test.js @@ -0,0 +1,24 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('draggable-item', 'Integration | Component | draggable item', { + integration: true +}); + +test('it renders', function(assert) { + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.on('myAction', function(val) { ... }); + + this.render(hbs`{{draggable-item}}`); + + assert.equal(this.$().text().trim(), ''); + + // Template block usage: + this.render(hbs` + {{#draggable-item}} + template block text + {{/draggable-item}} + `); + + assert.equal(this.$().text().trim(), 'template block text'); +}); diff --git a/tests/integration/components/plot-chart-test.js b/tests/integration/components/plot-chart-test.js new file mode 100644 index 0000000..17234e4 --- /dev/null +++ b/tests/integration/components/plot-chart-test.js @@ -0,0 +1,24 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('plot-chart', 'Integration | Component | plot chart', { + integration: true +}); + +test('it renders', function(assert) { + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.on('myAction', function(val) { ... }); + + this.render(hbs`{{plot-chart}}`); + + assert.equal(this.$().text().trim(), ''); + + // Template block usage: + this.render(hbs` + {{#plot-chart}} + template block text + {{/plot-chart}} + `); + + assert.equal(this.$().text().trim(), 'template block text'); +}); diff --git a/tests/integration/components/plot-container-test.js b/tests/integration/components/plot-container-test.js new file mode 100644 index 0000000..a929846 --- /dev/null +++ b/tests/integration/components/plot-container-test.js @@ -0,0 +1,24 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('plot-container', 'Integration | Component | plot container', { + integration: true +}); + +test('it renders', function(assert) { + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.on('myAction', function(val) { ... }); + + this.render(hbs`{{plot-container}}`); + + assert.equal(this.$().text().trim(), ''); + + // Template block usage: + this.render(hbs` + {{#plot-container}} + template block text + {{/plot-container}} + `); + + assert.equal(this.$().text().trim(), 'template block text'); +}); diff --git a/tests/integration/components/plot-table-test.js b/tests/integration/components/plot-table-test.js new file mode 100644 index 0000000..927514e --- /dev/null +++ b/tests/integration/components/plot-table-test.js @@ -0,0 +1,24 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('plot-table', 'Integration | Component | plot table', { + integration: true +}); + +test('it renders', function(assert) { + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.on('myAction', function(val) { ... }); + + this.render(hbs`{{plot-table}}`); + + assert.equal(this.$().text().trim(), ''); + + // Template block usage: + this.render(hbs` + {{#plot-table}} + template block text + {{/plot-table}} + `); + + assert.equal(this.$().text().trim(), 'template block text'); +}); diff --git a/tests/integration/components/plot-value-test.js b/tests/integration/components/plot-value-test.js new file mode 100644 index 0000000..5a65558 --- /dev/null +++ b/tests/integration/components/plot-value-test.js @@ -0,0 +1,24 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('plot-value', 'Integration | Component | plot value', { + integration: true +}); + +test('it renders', function(assert) { + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.on('myAction', function(val) { ... }); + + this.render(hbs`{{plot-value}}`); + + assert.equal(this.$().text().trim(), ''); + + // Template block usage: + this.render(hbs` + {{#plot-value}} + template block text + {{/plot-value}} + `); + + assert.equal(this.$().text().trim(), 'template block text'); +}); diff --git a/tests/unit/controllers/visualization/index-test.js b/tests/unit/controllers/visualization/index-test.js new file mode 100644 index 0000000..d2ee03f --- /dev/null +++ b/tests/unit/controllers/visualization/index-test.js @@ -0,0 +1,12 @@ +import { moduleFor, test } from 'ember-qunit'; + +moduleFor('controller:visualization/index', 'Unit | Controller | visualization/index', { + // Specify the other units that are required for this test. + // needs: ['controller:foo'] +}); + +// Replace this with your real tests. +test('it exists', function(assert) { + let controller = this.subject(); + assert.ok(controller); +}); diff --git a/tests/unit/models/plot-table-test.js b/tests/unit/models/plot-table-test.js new file mode 100644 index 0000000..d1406f5 --- /dev/null +++ b/tests/unit/models/plot-table-test.js @@ -0,0 +1,12 @@ +import { moduleForModel, test } from 'ember-qunit'; + +moduleForModel('plot-table', 'Unit | Model | plot table', { + // Specify the other units that are required for this test. + needs: [] +}); + +test('it exists', function(assert) { + let model = this.subject(); + // let store = this.store(); + assert.ok(!!model); +});