commands.html

<commands-panel>
    <pigod-panel>
        <yield to="title">
            Commands
        </yield>
        <yield to="body">
            <riot-table stretchcol="command" rows={rows} context={model} defaultsort="name">
                <riot-col key="name" header="Name" />
                <riot-col key="command" header="Command" />
                <riot-col key="exec" header="Exec" cls="text-center"
                    tpl={'<img src="images/play.png" width="16" height="16" class="button">'} 
                    cellclick={parent.model.execClick}/>
            </riot-table>
        </yield>
    </pigod-panel>
    
    <style scoped>
        .column-command {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .column-name {
            font-weight: bold;
        }
        img.button {
            cursor: pointer;
        }
    </style>
    
    <script type="text/es6arrow">
        start() {
            opts.pubsub.subscribe('commands', this.handler = data => this.updateProc(data));
        }
        
        stop() {
            opts.pubsub.unsubscribe('commands', this.handler);
        }
        
        updateProc(data) {
            this.update({ 
                rows: data
            });
        }
        
        execClick(value, item) {
            if (item && item.id) this.execCommand(item.id, item.name);
        }
                
        execCommand(id, name) {
            if (confirm('Execute ' + name + ' ?')) {
                opts.pubsub.publish('execCommand', { id: id });
            }
        }
    </script>
</commands-panel>