Implemented dagskra graphic

app/client.js

@@ -3,6 +3,7 @@ var socket = require('./socket')
 var engines = {
   text: require('./frontend/text'),
   countdown: require('./frontend/countdown'),
+  schedule: require('./frontend/schedule'),
 }
 
 var current = []

app/controller/components.js

@@ -6,6 +6,45 @@ exports.error = function(error) {
   return m('div.error-box', error)
 }
 
+exports.presetOnlyList = function(vm) {
+  return [
+    m('label', 'Presets'),
+    m('ul.panel-graphic-preset', vm.presets.map((item, index) =>
+      m('li', { key: index }, [
+        m('.row', { key: index }, [
+          m('div', { class: 'small-8 columns panel-graphic-property-item' },
+            m('input[type=text]', {
+              readonly: true,
+              value: item.values[graphic.settings.main],
+            })
+          ),
+          m('div', { class: 'small-2 columns' },
+            m('a.panel-graphic-preset-remove.button.success', {
+              onclick: vm.displayPreset.bind(vm, item),
+            }, 'Display')
+          ),
+          m('div', { class: 'small-2 columns' },
+            m('a.panel-graphic-preset-remove.button.alert', {
+              onclick: vm.removePreset.bind(vm, item),
+            }, 'Remove')
+          ),
+        ])
+      ])
+    ))
+  ]
+}
+
+exports.presetButtons = function(vm) {
+  return [
+    m('a.panel-graphic-preset-add.button', {
+      onclick: vm.addPreset.bind(vm),
+    }, 'Save to preset list'),
+    m('a.panel-graphic-display.success.button', {
+      onclick: vm.displayCurrent.bind(vm),
+    }, 'Display'),
+  ]
+}
+
 exports.presetList = function(vm) {
   return [
     m('a.panel-graphic-preset-add.button', {

app/controller/graphic/controller.js

@@ -11,6 +11,7 @@ const Graphic = createModule({
     this.currentView = 'view'
     this.current = {}
     this.newProperty = m.prop('')
+    this.newTextField = m.prop('')
   },
 
   updated: function(name, variable, control) {
@@ -25,24 +26,51 @@ const Graphic = createModule({
     }
   },
 
-  addProperty: function() {
-    if (!this.newProperty()) {
-      this.error = 'Please type in property name'
-      return
-    }
-    if (this.graphic.settings.properties.includes(this.newProperty())) {
-      this.error = 'A property with that name already exists'
-      return
+  addDataField: function(type, name) {
+    if (!name) {
+      return 'Please type in proper name'
     }
 
-    this.graphic.settings.properties.push(this.newProperty())
+    if (this.graphic.settings[type].includes(name)) {
+      return 'A property with that name already exists'
+    }
+
+    this.graphic.settings[type].push(name)
+
+    socket.emit('graphic.update', this.graphic)
+
+    return null
+  },
+
+  addProperty: function() {
+    this.error = this.addDataField('properties', this.newProperty())
+
+    if (!this.error) {
       this.newProperty('')
 
       if (!this.graphic.settings.main) {
         this.graphic.settings.main = this.graphic.settings.properties[0]
-    }
-
         socket.emit('graphic.update', this.graphic)
+      }
+    }
+  },
+
+  addTextField: function() {
+    this.error = this.addDataField('textfields', this.newTextField())
+
+    if (!this.error) {
+      this.newTextField('')
+    }
+  },
+
+  removeDataField: function(type, name) {
+    this.graphic.settings[type].splice(
+      this.graphic.settings[type].indexOf(name), 1)
+    socket.emit('graphic.update', this.graphic)
+  },
+
+  removeProperty: function(prop) {
+    this.removeDataField('properties', prop)
   },
 
   cleanCurrent: function() {
@@ -116,12 +144,6 @@ const Graphic = createModule({
     })
   },
 
-  removeProperty: function(prop) {
-    this.graphic.settings.properties.splice(
-      this.graphic.settings.properties.indexOf(prop), 1)
-    socket.emit('graphic.update', this.graphic)
-  },
-
   switchView: function() {
     if (Graphic.vm.currentView === 'view') {
       Graphic.vm.currentView = 'settings'

app/controller/graphic/engine/schedule.js

@@ -0,0 +1,162 @@
+const m = require('mithril')
+const components = require('../../components')
+
+exports.view = function(ctlr, graphic, vm) {
+  if (!graphic.settings.properties) {
+    graphic.settings.properties = []
+  }
+  if (!graphic.settings.textfields) {
+    graphic.settings.textfields = []
+  }
+  if (graphic.settings.properties.length === 0) {
+    return [
+      m('p', 'No properties have been defined.'),
+      m('p', 'Click settings to create and define properties to display.'),
+    ]
+  }
+  return [
+    components.presetOnlyList(vm),
+    graphic.settings.properties.map((prop, index) =>
+      m('label', { key: index }, [
+        prop,
+        m('input[type=text]', {
+          value: vm.current[prop] || '',
+          oninput: vm.updated.bind(vm, prop, 'current'),
+        }),
+      ])
+    ),
+    graphic.settings.textfields.map((prop, index) =>
+      m('label', { key: index }, [
+        prop,
+        m('textarea', {
+          rows: '6',
+          oninput: vm.updated.bind(vm, prop, 'current'),
+          value: vm.current[prop] || '',
+        }),
+      ])
+    ),
+    components.presetButtons(vm),
+  ]
+}
+
+exports.settings = function(cltr, graphic, vm) {
+  return [
+    m('label', [
+      'Name',
+      m('input[type=text]', {
+        value: graphic.name,
+        oninput: vm.updated.bind(vm, 'name'),
+      }),
+    ]),
+    m('label', [
+      'HTML (',
+          m('a', { href: 'https://lodash.com/docs#template', target: '_blank' }, 'variables'),
+          ' available: ',
+          graphic.settings.properties.map(prop =>
+            `<%- ${prop} %>`
+          ).join(', '),
+          ', ',
+          graphic.settings.textfields.map(prop =>
+            `<%- ${prop} %>`
+          ).join(', '),
+        ')',
+      m('p', `<div id="${graphic.name}">`),
+      m('textarea', {
+        rows: '4',
+        oninput: vm.updated.bind(null, 'settings.html'),
+        value: graphic.settings.html || '',
+      }),
+      m('p', `</div>`),
+    ]),
+    m('label', [
+      'CSS',
+      m('textarea', {
+        rows: '4',
+        oninput: vm.updated.bind(null, 'settings.css'),
+        value: graphic.settings.css || '',
+      })
+    ]),
+    /* -------- Simple Properties -------- */
+    m('label', 'Simple Properties'),
+    m('label', [
+      'Main',
+      m('select', {
+        onchange: vm.updated.bind(vm, 'settings.main'),
+      }, graphic.settings.properties.map((prop, index) =>
+        m('option', {
+          key: 'prop-list-' + index,
+          value: prop,
+          selected: prop === graphic.settings.main,
+        }, prop)
+      ))
+    ]),
+    /* -------- Simple Properties List -------- */
+    m('label', 'List'),
+    m('div', [
+      graphic.settings.properties.map((prop, index) =>
+        m('.row', { key: 'add-prop-' + index }, [
+          m('div', { class: 'small-10 columns panel-graphic-property-item' },
+            m('input[type=text]', {
+              readonly: true,
+              value: prop,
+            })
+          ),
+          m('div', { class: 'small-2 columns' },
+            m('a.panel-graphic-property-remove.button.alert', {
+              onclick: vm.removeProperty.bind(vm, prop),
+            }, 'Remove')
+          )
+        ])
+      ),
+    ]),
+    m('.row', [
+      m('div', { class: 'small-10 columns panel-graphic-property-item' },
+        m('input[type=text]', {
+          value: vm.newProperty(),
+          oninput: m.withAttr('value', vm.newProperty),
+        })
+      ),
+      m('div', { class: 'small-2 columns' },
+        m('a.panel-graphic-property-add.button', {
+          onclick: vm.addProperty.bind(vm),
+        }, 'Add')
+      ),
+    ]),
+    /* -------- Text Properties -------- */
+    m('label', 'Text Fields'),
+    m('div', [
+      graphic.settings.textfields.map((prop, index) =>
+        m('.row', { key: 'add-prop-' + index }, [
+          m('div', { class: 'small-10 columns panel-graphic-property-item' },
+            m('input[type=text]', {
+              readonly: true,
+              value: prop,
+            })
+          ),
+          m('div', { class: 'small-2 columns' },
+            m('a.panel-graphic-property-remove.button.alert', {
+              onclick: vm.removeDataField.bind(vm, 'textfields', prop),
+            }, 'Remove')
+          )
+        ])
+      ),
+    ]),
+    m('.row', [
+      m('div', { class: 'small-10 columns panel-graphic-property-item' },
+        m('input[type=text]', {
+          value: vm.newTextField(),
+          oninput: m.withAttr('value', vm.newTextField),
+        })
+      ),
+      m('div', { class: 'small-2 columns' },
+        m('a.panel-graphic-property-add.button', {
+          onclick: vm.addTextField.bind(vm),
+        }, 'Add')
+      ),
+    ]),
+    /* -------- Delete -------- */
+    m('a.panel-graphic-delete.button.alert', {
+      onclick: vm.remove.bind(vm),
+    }, 'Delete graphic'),
+  ]
+}

app/controller/graphic/engine/text.js

@@ -12,6 +12,7 @@ exports.view = function(ctlr, graphic, vm) {
     ]
   }
   return [
+    components.presetOnlyList(vm),
     graphic.settings.properties.map((prop, index) =>
       m('label', { key: index }, [
         prop,
@@ -21,7 +22,7 @@ exports.view = function(ctlr, graphic, vm) {
         }),
       ])
     ),
-    components.presetList(vm),
+    components.presetButtons(vm),
   ]
 }
 

app/controller/graphic/view.js

@@ -5,6 +5,7 @@ const components = require('../components')
 const engines = {
   text: require('./engine/text'),
   countdown: require('./engine/countdown'),
+  schedule: require('./engine/schedule'),
 }
 
 Graphic.view = function(ctrl) {

app/frontend/schedule.js

@@ -0,0 +1,20 @@
+
+module.exports = function(data) {
+  var element = document.createElement('div')
+  element.innerHTML = data.html
+  element.id = data.graphic.name
+  element.classList.add('root-element')
+
+  var styleElement = document.createElement('style')
+  styleElement.setAttribute('type', 'text/css')
+  styleElement.innerHTML = data.css
+
+  element.tag = styleElement
+
+  document.body.appendChild(element)
+  document.head.appendChild(styleElement)
+
+  window.setTimeout(function (){
+    element.classList.add('root-element-display')
+  }, 100)
+}

server/io/engine/routes.js

@@ -1,4 +1,4 @@
 
 export function all(ctx) {
-  ctx.socket.emit('engine.all', ['text', 'countdown'])
+  ctx.socket.emit('engine.all', ['text', 'countdown', 'schedule'])
 }