260 lines
6 KiB
JavaScript
260 lines
6 KiB
JavaScript
const _ = require('lodash')
|
|
const m = require('mithril')
|
|
const createModule = require('../common/module')
|
|
const socket = require('../../socket')
|
|
const view = require('./view')
|
|
const dragula = require('dragula')
|
|
|
|
const Graphic = createModule({
|
|
init: function(vnode) {
|
|
this.fetchData(vnode)
|
|
},
|
|
|
|
onupdate: function(vnode) {
|
|
this.fetchData(vnode)
|
|
},
|
|
|
|
fetchData: function(vnode) {
|
|
if (this.currentId === vnode.attrs.id) return
|
|
|
|
if (this.currentId && this.currentId !== vnode.attrs.id) {
|
|
this.unmonitor('graphic.single', this.currentId)
|
|
this.unmonitor('preset.all', this.currentId)
|
|
}
|
|
|
|
this.currentId = vnode.attrs.id
|
|
|
|
this.monitor(
|
|
'graphic',
|
|
'graphic.single',
|
|
{},
|
|
vnode.attrs.id,
|
|
() => this.recheckTemplate()
|
|
)
|
|
this.monitor('presets', 'preset.all', [], vnode.attrs.id)
|
|
|
|
this.currentView = 'view'
|
|
this.current = {}
|
|
this.displayRemove = false
|
|
this.newProperty = ''
|
|
this.newTextField = ''
|
|
this.mainTemplateString = ''
|
|
this.mainTemplateError = ''
|
|
this.mainTemplate = _.template('')
|
|
},
|
|
|
|
recheckTemplate: function() {
|
|
if (this.graphic.settings.main !== this.mainTemplateString) {
|
|
this.mainTemplateError = ''
|
|
this.mainTemplateString = this.graphic.settings.main
|
|
|
|
try {
|
|
this.mainTemplate = _.template(this.mainTemplateString)
|
|
} catch (e) {
|
|
this.mainTemplateError = `Invalid template: ${e.message}`
|
|
}
|
|
}
|
|
},
|
|
|
|
updated: function(name, variable, cont) {
|
|
let target = variable
|
|
let control = cont
|
|
|
|
if (!control) {
|
|
control = variable
|
|
target = 'graphic'
|
|
}
|
|
_.set(this[target], name, control.target.value)
|
|
|
|
this.recheckTemplate()
|
|
|
|
if (target === 'graphic') {
|
|
socket.emit('graphic.update', this.graphic)
|
|
}
|
|
},
|
|
|
|
addDataField: function(type, name) {
|
|
if (!name) {
|
|
return 'Please type in proper name'
|
|
}
|
|
|
|
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] } %>`
|
|
this.recheckTemplate()
|
|
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)
|
|
|
|
if (type === 'properties' && this.graphic.settings.properties.length === 0) {
|
|
this.graphic.settings.main = ''
|
|
this.recheckTemplate()
|
|
}
|
|
|
|
socket.emit('graphic.update', this.graphic)
|
|
},
|
|
|
|
removeProperty: function(prop) {
|
|
this.removeDataField('properties', prop)
|
|
},
|
|
|
|
presetlistInit: function(control) {
|
|
this.initDragula(control, (source, target) => {
|
|
let dragOldIndex = _.findIndex(this.presets, { id: Number(source.getAttribute('data')) })
|
|
let targetOldIndex = this.presets.length - 1
|
|
if (target) {
|
|
targetOldIndex = _.findIndex(this.presets, { id: Number(target.getAttribute('data')) })
|
|
}
|
|
|
|
this.presets.splice(targetOldIndex, 0, this.presets.splice(dragOldIndex, 1)[0])
|
|
|
|
this.presets.forEach((item, i) => {
|
|
item.sort = i + 1
|
|
})
|
|
|
|
socket.emit('preset.patch', this.presets)
|
|
})
|
|
},
|
|
|
|
cleanCurrent: function() {
|
|
if (this.graphic.engine === 'countdown') {
|
|
this.current.text = this.graphic.settings.text
|
|
this.current.countdown = this.graphic.settings.countdown
|
|
this.current.finished = this.graphic.settings.finished
|
|
|
|
if (!this.current.countdown) {
|
|
this.error = '"Count to" needs to be defined'
|
|
} else {
|
|
let test = new Date(this.current.countdown.replace(' ', 'T'))
|
|
if (!test.getTime()) {
|
|
this.error = '"Count to" has to be valid date and time'
|
|
}
|
|
}
|
|
} else {
|
|
this.graphic.settings.properties.forEach(prop => {
|
|
if (!this.current[prop]) {
|
|
this.current[prop] = ''
|
|
}
|
|
})
|
|
}
|
|
},
|
|
|
|
addPreset: function() {
|
|
this.error = ''
|
|
|
|
this.cleanCurrent()
|
|
|
|
if (this.error) return
|
|
|
|
if (this.graphic.engine === 'countdown') {
|
|
this.current.countdown = null
|
|
}
|
|
|
|
socket.emit('preset.add', {
|
|
graphic_id: this.graphic.id,
|
|
values: this.current,
|
|
})
|
|
},
|
|
|
|
removePreset: function(preset) {
|
|
socket.emit('preset.remove', preset)
|
|
},
|
|
|
|
remove: function() {
|
|
socket.emit('graphic.remove', this.graphic)
|
|
m.route.set('/')
|
|
},
|
|
|
|
displayPreset: function(preset) {
|
|
if (this.graphic.engine === 'countdown') {
|
|
this.graphic.settings.text = preset.values.text
|
|
this.graphic.settings.finished = preset.values.finished
|
|
socket.emit('graphic.update', this.graphic)
|
|
return
|
|
}
|
|
|
|
socket.emit('content.display', {
|
|
graphic: this.graphic,
|
|
data: preset.values,
|
|
})
|
|
},
|
|
|
|
schedulePreset: function(preset) {
|
|
socket.emit('schedule.add', {
|
|
graphic_id: this.graphic.id,
|
|
values: preset.values,
|
|
})
|
|
},
|
|
|
|
scheduleCurrent: function() {
|
|
this.error = ''
|
|
|
|
this.cleanCurrent()
|
|
|
|
if (this.error) return
|
|
|
|
socket.emit('schedule.add', {
|
|
graphic_id: this.graphic.id,
|
|
values: this.current,
|
|
})
|
|
},
|
|
|
|
displayCurrent: function() {
|
|
this.error = ''
|
|
|
|
this.cleanCurrent()
|
|
|
|
if (this.error) return
|
|
|
|
socket.emit('content.display', {
|
|
graphic: this.graphic,
|
|
data: this.current,
|
|
})
|
|
},
|
|
|
|
switchView: function() {
|
|
if (this.currentView === 'view') {
|
|
this.currentView = 'settings'
|
|
} else {
|
|
this.currentView = 'view'
|
|
}
|
|
},
|
|
|
|
changeViewTitle: function() {
|
|
if (this.currentView === 'view') {
|
|
return 'Settings'
|
|
}
|
|
return 'Control'
|
|
},
|
|
}, view)
|
|
|
|
module.exports = Graphic
|