haunt/assets/app/components/project/index.html

<md-content layout="row" layout-wrap="layout-wrap" flex="100" layout-align="start start"><md-toolbar flex="100"
    id="header" layout="row" layout-wrap="layout-wrap">
    <div class="menu" layout="row" layout-align="center center" ng-click="rotate()"><md-icon class="transition"
        md-svg-src="{{icon}}" ng-class="{ 'rotate': open}"></md-icon></div>
    <div class="navbar" layout="row" layout-align="space-between center" flex="flex">
      <div flex="50" layout="row" layout-align="start center"><img class="logo" src="/assets/img/logo.png" />
        <div>
          <div class="title">{{current.name}}</div>
          <div class="circle" ng-if="socket.status"></div>
          <div class="circle-red" ng-if="!socket.status"></div>
          <div class="status">Active</div>
        </div>
      </div>
      <div flex="50" layout="row" layout-align="end center"><md-button class="md-icon-button md-primary"
          aria-label="settings"><md-tooltip md-direction="left">Coming soon</md-tooltip><img class="settings"
            src="/assets/img/svg/ic_settings_black_48px.svg" /></md-button></div>
    </div>
  </md-toolbar><md-content flex="100" id="content" layout="start stretch"><md-sidenav class="md-sidenav-left transition"
      layout="row" layout-wrap="layout-wrap" layout-align="start stretch" md-component-id="left"
      md-disable-backdrop="md-disable-backdrop" md-is-locked-open="open">
      <div class="fade-out" flex="100" layout="column" layout-wrap="layout-wrap" layou-align="center space-between"
        ng-hide="!open">
        <div flex="85" layout="row" layout-wrap="layout-wrap" layout-align="start start">
          <!--div(flex=100 layout="row" layout-wrap class="menu")--><!--    div(flex=100 class="title back")--><!--        md-button(class="md-icon-button md-primary" aria-label="settings")--><!--            img(src="/assets/img/svg/ic_arrow_back_black_48px.svg" class="back-ico")--><!--        span Projects-->
          <div class="side"><md-button class="md-icon-button md-primary fade-out" aria-label="settings"
              ng-click="back()" ng-hide="list"><md-icon
                md-svg-src="/assets/img/svg/ic_arrow_back_black_48px.svg"></md-icon></md-button></div>
          <div class="menu" flex="flex" layout="row" layout-wrap="layout-wrap" ng-hide="list"
            ng-class="{'fade-out':!list}">
            <div class="title" flex="100">Projects</div>
            <div class="project" flex="100" ng-click="change(1)" ng-class="{'active': select == 1}">All</div>
            <div class="project" flex="100" ng-click="change(2)" ng-class="{'active': select == 2}">Logs</div>
            <div class="project" flex="100" ng-click="change(3)" ng-class="{'active': select == 3}">Errors</div>
            <div class="project" flex="100" ng-click="change(4)" ng-class="{'active': select == 4}">Outputs</div>
          </div>
          <div class="menu" flex="flex" layout="row" layout-wrap="layout-wrap" ng-hide="!list">
            <div class="title" flex="100">Projects</div>
            <div class="project" flex="100" ng-repeat="item in socket.data.schema"
              ng-class="{'active':item.name == current.name}" ng-click="collapse(item.name)">{{item.name}}</div>
          </div>
        </div>
        <div class="version" flex="15" layout="row" layout-wrap="layout-wrap" layout-align="start center">
          <div flex="100"><a href="https://github.com/abs3ntdev/haunt">Help & Documentation</a></div>
          <div flex="100" layout-padding="layout-padding"><a
              href="https://github.com/abs3ntdev/haunt/blob/master/README.md">Haunt</a></div>
          <div flex="100"><a href="https://github.com/abs3ntdev/haunt" target="_blank"><md-button
                class="md-icon-button md-primary" aria-label="settings"><md-icon
                  md-svg-src="/assets/img/svg/github-logo.svg"></md-icon></md-button></a></div>
        </div>
      </div>
    </md-sidenav>
    <div class="tabs" flex="100" layout="row" layout-wrap="layout-wrap" layout-align="space-around stretch"
      layout-padding="layout-padding">
      <div class="tab" flex="flex" layout="row" layout-wrap="layout-wrap" layout-align="start start"
        ng-hide="select != 1 &amp;&amp; select != 2">
        <div class="name" flex="100" layout="row" layout-wrap="layout-wrap">
          <div flex="100" layout="row">
            <div>Logs</div>
          </div>
          <div class="streams" flex="100" layout="row" layout-wrap="layout-wrap">
            <div class="item" flex="100" layout="row" ng-repeat="out in current.buffer.stdLog | orderBy:'-time'">
              <div class="cap" flex="80">{{out.text}}</div>
              <div flex="20" layout="row" layout-align="end start">{{out.time | date: 'shortTime'}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="tab" flex="flex" layout="row" layout-wrap="layout-wrap" layout-align="start start"
        ng-hide="select != 1 &amp;&amp; select != 3">
        <div class="name" flex="100" layout="row" layout-wrap="layout-wrap">
          <div flex="100" layout="row">
            <div>Errors</div>
            <div class="err" ng-if="current.buffer.stdErr.length &gt; 0">{{current.buffer.stdErr.length}}</div>
          </div>
          <div class="streams" flex="100" layout="row" layout-wrap="layout-wrap">
            <div class="item" flex="100" layout-wrap="layout-wrap" layout="row"
              ng-repeat="out in current.buffer.stdErr | orderBy:'-time'">
              <div class="cap" flex="80"><span>{{out.type}}</span><br /><span>{{out.text}}</span></div>
              <div flex="20" layout="row" layout-align="end start">{{out.time | date: 'shortTime'}}</div>
              <div flex="100" ng-if="out.stream">
                <div>{{out.stream}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tab" flex="flex" layout="row" layout-wrap="layout-wrap" layout-align="start start"
        ng-hide="select != 1 &amp;&amp; select != 4">
        <div class="name" flex="100" layout="row" layout-wrap="layout-wrap">
          <div flex="100" layout="row">
            <div>Outputs</div>
          </div>
          <div class="streams" flex="100" layout="row" layout-wrap="layout-wrap">
            <div class="item" flex="100" layout="row" ng-repeat="out in current.buffer.stdOut | orderBy:'-time'">
              <div class="cap" flex="80">{{out.text}}</div>
              <div flex="20" layout="row" layout-align="end start">{{out.time | date: 'shortTime'}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </md-content></md-content>