services.html

<services-panel>
    <pigod-panel>
        <yield to="title">
            Services ({last_udpated})
        </yield>
        <yield to="body">
            <riot-table stretchcol="name" rows={services} context={model} defaultsort="name">
                <riot-col key="stat" header="Stat" cls="text-center"
                    tpl={'<img src="images/{status2Icon[row.stat]}.png" width="16" height="16">'}/>
                <riot-col key="name" header="Name" />
                <riot-col key="commands" header="Commands" cls="text-center" tpl={'
                    <img src="images/play.png" width="16" height="16" class="button start { row.stat == \'+\' ? \'disabled\' : \'\' }" >
                    <img src="images/stop.png" width="16" height="16" class="button stop { row.stat == \'-\' ? \'disabled\' : \'\' }" >
                    <img src="images/restart.png" width="16" height="16" class="button restart { row.stat == \'-\' ? \'disabled\' : \'\' }" >
                '} cellclick={parent.model.commandClick}/>
            </riot-table>
        </yield>
    </pigod-panel>
    
    <style scoped>
        img.button {
            cursor: pointer;
        }
        img.disabled {
            -webkit-filter: grayscale(100%);
            cursor: initial;
        }
    </style>
    
    <script type="text/es6arrow">
        start() {
            opts.pubsub.subscribe('services', this.handler = data => this.updateProc(data));
        }
        
        stop() {
            opts.pubsub.unsubscribe('services', this.handler);
        }
        
        this.status2Icon = {
            '-' : 'error',
            '+' : 'ok',
            '?' : 'help'
        };
        
        updateProc(data) {
            this.update({
                last_udpated: new Date().toLocaleString(),
                services: data.slice()
            });   
        }
        
        commandClick(value, row, col, evt) {
            if (evt.target.tagName !== 'IMG' ) return;
            
            ['start', 'stop', 'restart'].forEach(cmd => {
                if (evt.target.className.indexOf(' '+cmd) >= 0) {
                    this[cmd+'Click'](row);
                }
            });
        }
        
        startClick(item) {
            if (item && item.stat != '+') this.serviceCall(item.name, 'start');
        }
        
        stopClick(item) {
            if (item && item.stat != '-') this.serviceCall(item.name, 'stop');
        }
        
        restartClick(item) {
            if (item && item.stat != '-') this.serviceCall(item.name, 'restart');
        }
        
        serviceCall(name, command) {
            if (confirm(command + ' ' + name + ' ?')) {
                opts.pubsub.publish('serviceCall', { name: name, command: command });
            }
        }
    </script>
</services-panel>