noide/client/processes/index.html

Web Editor built on hapi and nes websockets using browserify, superviews.js, bootstrap and the ACE editor.

<template args="model actions editorIsInitialized">
  <div class="control">
    <form onsubmit="{actions.run(this.command.value)}">
      <div class="input-group">
          <div class="input-group-btn dropup">
            <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">Task <span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li if="!model.tasks.length" class="dropdown-header">No npm run-scripts found</li>
              <li if="model.tasks.length" each="task, task.name in model.tasks">
                <a href="#" onclick="{actions.setCommand('npm run ' + task.name)}">{task.name}</a>
              </li>
            </ul>
          </div>
          <input type="text" class="form-control input-sm" name="command"
           value="{model.command}" required autocomplete="off" placeholder=">">
          <span class="input-group-btn">
            <button class="btn btn-default btn-sm" type="submit" title="Run command">Run</button>
            <button if="model.dead.length" class="btn btn-success btn-sm" type="button" title="Remove dead processes" onclick="{actions.removeAllDead()}">Clear completed</button>
          </span>
        </div>
    </form>
    <ul class="nav nav-tabs">
      <li each="process, process.pid in model.processes" class="{process === model.current ? 'dropup active' : 'dropup'}">
        <a onclick="{actions.setCurrent(process)}" class="dropdown-toggle" data-toggle="dropdown">
          <span class="{'circle ' + (!process.isAlive ? 'dead' : (process.isActive ? 'alive active' : 'alive'))}"></span>
          {process.name || process.command}
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li if="process.isAlive" class="dropdown-header">Process [{process.pid}]</li>
          <li if="!process.isAlive" class="dropdown-header">Process [<s>{process.pid}</s>]</li>
          <li role="separator" class="divider"></li>
          <li><a key="kill-tab" if="process.isAlive" onclick="{actions.kill(process)}"><i class="fa fa-stop"></i> Stop</a></li>
          <if condition="!process.isAlive">
            <li><a key="resurrect-tab" onclick="{actions.resurrect(process)}"><i class="fa fa-refresh"></i> Resurrect</a></li>
            <li><a key="remove-tab" onclick="{actions.remove(process)}"><i class="fa fa-close"></i> Close</a></li>
          </if>
        </ul>
      </li>
    </ul>
  </div>
  <div class="processes" style="{display: model.current ? '' : 'none'}">
    <div skip="editorIsInitialized" class="output"></div>
  </div>
 </template>