filo_caspar/app/main/graphic/engine/countdown.js

84 lines
2.8 KiB
JavaScript
Raw Normal View History

2016-04-14 04:01:51 +00:00
const m = require('mithril')
2018-06-26 18:35:12 +00:00
const components = require('../../common/components')
2016-04-14 04:01:51 +00:00
2018-06-26 18:35:12 +00:00
exports.view = function(module, graphic) {
2016-04-14 04:01:51 +00:00
return [
2018-06-26 18:35:12 +00:00
m('div.graphic-presetadd', [
m('h3.graphic-presetadd-header', 'Start countdown'),
m('label', { for: `countdown-text` }, 'Text'),
m(`input#countdown-text[type=text]`, {
value: graphic.settings.text || '',
oninput: module.updated.bind(module, 'settings.text'),
2016-04-14 04:01:51 +00:00
}),
2018-06-26 18:35:12 +00:00
m('label', { for: `countdown-countdown` }, 'Count to (format: "YYYY-MM-DD hh:mm")'),
m(`input#countdown-countdown[type=text]`, {
value: graphic.settings.countdown || '',
oninput: module.updated.bind(module, 'settings.countdown'),
2016-04-14 04:01:51 +00:00
}),
2018-06-26 18:35:12 +00:00
m('label', { for: `countdown-finished` }, 'Finished (gets displayed in the countdown upon reaching 0)'),
m(`input#countdown-finished[type=text]`, {
value: graphic.settings.finished || '',
oninput: module.updated.bind(module, 'settings.finished'),
2016-04-14 04:01:51 +00:00
}),
2018-06-26 18:35:12 +00:00
components.presetButtons(module, 'Display live now', 'Add to template'),
2016-04-14 04:01:51 +00:00
]),
2018-06-26 18:35:12 +00:00
components.presetOnlyList(module, graphic, 'Templates', '', 'Fill top', ''),
2016-04-14 04:01:51 +00:00
]
}
2018-06-26 18:35:12 +00:00
exports.settings = function(module, graphic) {
2016-04-14 04:01:51 +00:00
return [
2018-06-26 18:35:12 +00:00
// Name
m('label.graphic-label', { for: 'graphic-name' }, 'Graphic ID'),
m('input#graphic-name[type=text]', {
value: graphic.name,
oninput: module.updated.bind(module, 'name'),
}),
// HTML
m('label.graphic-label', { for: 'graphic-html' }, [
'Graphic HTML (',
m('a', { href: 'https://lodash.com/docs#template', target: '_blank' }, 'variables'),
' available: <%- text %>)',
2016-04-14 04:01:51 +00:00
]),
2018-06-26 18:35:12 +00:00
m('p.graphic-helper', `<div id="${graphic.name}">`),
m('textarea#graphic-html', {
rows: '4',
oninput: module.updated.bind(module, 'settings.html'),
value: graphic.settings.html || '',
}),
m('p.graphic-helper.bottom', `</div>`),
// CSS
m('label.graphic-label', { for: 'graphic-css' }, 'Graphic CSS'),
m('p.graphic-helper', '<style type="text/css">'),
m('textarea#graphic-css', {
rows: '4',
oninput: module.updated.bind(module, 'settings.css'),
value: graphic.settings.css || '',
}),
m('p.graphic-helper.bottom', '</style>'),
// Main display template
m('label.graphic-label', { for: 'graphic-main' }, [
'Graphic control display template (',
m('a', { href: 'https://lodash.com/docs#template', target: '_blank' }, 'variables'),
' available: <%- text %>, <%- countdown %>, <%- finished %>)',
2016-04-14 04:01:51 +00:00
]),
2018-06-26 18:35:12 +00:00
m('input#graphic-main[type=text]', {
value: graphic.settings.main,
oninput: module.updated.bind(module, 'settings.main'),
}),
components.error(module.mainTemplateError),
// Remove
m('button.red.graphic-delete', {
onclick: module.remove.bind(module),
2016-04-14 04:01:51 +00:00
}, 'Delete graphic'),
]
}