const socket = require('../socket') const m = require('mithril') const Status = { oninit: function() { this.current = [] this.connected = socket.connected this.status = { connected: false, playing: false, } socket.on('casparcg.status', data => { this.status = data m.redraw() }) socket.on('content.list', data => { this.current = data m.redraw() }) socket.on('connect', () => this.updateConnected(true)) socket.on('disconnect', () => this.updateConnected(false)) }, updateConnected: function(connected) { this.connected = connected m.redraw() }, hide: function(item) { socket.emit('content.hide', { name: item.name, }) }, view: function() { return [ m('header', [ m('h2', 'Active graphics:'), m('div.status', { class: this.status.connected && 'green', }, 'connected'), m('div.status', { class: this.status.playing && 'green', }, 'playing'), ]), this.current.map(item => m('div.item', { key: `header-${item.id}` }, [ m('h3', `${item.name} - ${item.display}`), m('button', { onclick: () => this.hide(item), }, 'Hide'), ]) ), this.current.length === 0 && m('div.empty', 'No active graphics') || null, !this.connected && m('div.disconnected', ` Lost connection with server, Attempting to reconnect `) || null, ] }, } m.mount(document.getElementById('container'), Status) // var engines = { // text: require('./text'), // countdown: require('./countdown'), // schedule: require('./schedule'), // } // function display(data) { // var exists = document.getElementById(data.graphic.name) // var engine = data.graphic.engine // if (exists) { // exists.innerHtml = data.html // exists.tag.innerHtml = data.css // engines[engine].update(data) // return // } // if (engines[engine]) { // engines[engine].init(data) // } // } // socket.on('client.display', display) // socket.on('client.hide', function (data) { // var exists = document.getElementById(data.name) // if (exists) { // exists.classList.remove('root-element-display') // window.setTimeout(function () { // exists.tag.remove() // exists.remove() // }, 1500) // } // }) // socket.on('client.reset', function(data) { // data.forEach(display) // })