<link rel="import" href="../../../../packages/polymer/polymer.html">
<link rel="import" href="nav_bar.html">
<link rel="import" href="observatory_element.html">
<link rel="import" href="service_ref.html">

<polymer-element name="io-view" extends="observatory-element">
  <template>
    <link rel="stylesheet" href="css/shared.css">

    <nav-bar>
      <top-nav-menu last="{{ true }}"></top-nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
      <nav-control></nav-control>
    </nav-bar>

    <div class="content">
      <h1>dart:io</h1>

      <br>

      <ul class="list-group">
        <li class="list-group-item">
          <a on-click="{{ goto }}" href="{{gotoLink(io.isolate.relativeLink('io/http/servers'))}}">HTTP Servers</a>
        </li>
      </ul>

      <br>

      <ul class="list-group">
        <li class="list-group-item">
          <a on-click="{{ goto }}" href="{{gotoLink(io.isolate.relativeLink('io/sockets'))}}">Sockets</a>
        </li>
      </ul>

      <br>

      <ul class="list-group">
        <li class="list-group-item">
          <a on-click="{{ goto }}" href="{{gotoLink(io.isolate.relativeLink('io/websockets'))}}">WebSockets</a>
        </li>
      </ul>

      <br>

      <ul class="list-group">
        <li class="list-group-item">
          <a on-click="{{ goto }}" href="{{gotoLink(io.isolate.relativeLink('io/file/randomaccessfiles'))}}">Random Access Files</a>
        </li>
      </ul>

      <br>

      <ul class="list-group">
        <li class="list-group-item">
          <a on-click="{{ goto }}" href="{{gotoLink(io.isolate.relativeLink('io/processes'))}}">Processess</a>
        </li>
      </ul>

    </div>
    <br>
    <hr>
  </template>
</polymer-element>

<polymer-element name="io-ref" extends="service-ref">
  <template>
    <link rel="stylesheet" href="css/shared.css">
    <template if="{{ ref.serviceType == 'Socket' }}">
      <io-socket-ref ref="{{ ref }}"></io-socket-ref>
    </template>
    <template if="{{ ref.serviceType == 'HttpServerConnection' }}">
      <io-http-server-connection-ref ref="{{ ref }}"></io-http-server-connection-ref>
    </template>
    <template if="{{ ref.serviceType == 'HttpServer' }}">
      <io-http-server-ref ref="{{ ref }}"></io-http-server-ref>
    </template>
    <template if="{{ ref.serviceType == 'WebSocket' }}">
      <io-web-socket-ref ref="{{ ref }}"></io-web-socket-ref>
    </template>
    <template if="{{ ref.serviceType == 'Process' }}">
      <io-process-ref ref="{{ ref }}"></io-process-ref>
    </template>
  </template>
</polymer-element>

<polymer-element name="io-http-server-list-view" extends="observatory-element">
  <template>
    <link rel="stylesheet" href="css/shared.css">

    <nav-bar>
      <top-nav-menu last="{{ true }}"></top-nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
    </nav-bar>

    <div class="content">
      <h1>HttpServers</h1>

      <br>

      <ul class="list-group">
        <template repeat="{{ httpServer in list['members'] }}">
          <li class="list-group-item">
            <io-http-server-ref ref="{{ httpServer }}"></io-http-server-ref>
          </li>
        </template>
      </ul>
    </div>
    <br>
    <hr>
  </template>
</polymer-element>

<polymer-element name="io-http-server-ref" extends="service-ref">
  <template>
    <link rel="stylesheet" href="css/shared.css">
    <a on-click="{{ goto }}" href="{{ url }}">{{ name }}</a>
  </template>
</polymer-element>

<polymer-element name="io-http-server-view" extends="observatory-element">
  <template>
    <link rel="stylesheet" href="css/shared.css">

    <nav-bar>
      <top-nav-menu last="{{ true }}"></top-nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
    </nav-bar>

    <div class="content">
      <h1>HttpServer</h1>

      <br>

      <div class="memberList">
        <div class="memberItem">
          <div class="memberName">Socket</div>
          <div class="memberValue"><io-socket-ref ref="{{ httpServer['socket'] }}"></io-socket-ref></div>
        </div>
        <div class="memberItem">
          <div class="memberName">Address</div>
          <div class="memberValue">{{ httpServer['address'] }}</div>
        </div>
        <div class="memberItem">
          <div class="memberName">Port</div>
          <div class="memberValue">{{ httpServer['port'] }}</div>
        </div>
        <div class="memberItem">
          <div class="memberName">Active connections</div>
          <ul class="list-group">
            <template repeat="{{ connection in httpServer['active'] }}">
              <li class="list-group-item">
                <io-http-server-connection-ref ref="{{ connection }}"></io-http-server-connection-ref>
              </li>
            </template>
          </ul>
        </div>
        <div class="memberItem">
          <div class="memberName">Idle connections</div>
          <ul class="list-group">
            <template repeat="{{ connection in httpServer['idle'] }}">
              <li class="list-group-item">
                <io-http-server-connection-ref ref="{{ connection }}"></io-http-server-connection-ref>
              </li>
            </template>
          </ul>
        </div>
      </div>
    </div>
    <br>
    <hr>
  </template>
</polymer-element>

<polymer-element name="io-http-server-connection-ref" extends="service-ref">
  <template>
    <link rel="stylesheet" href="css/shared.css">
    <a href="{{ url }}">{{ name }}</a>
  </template>
</polymer-element>

<polymer-element name="io-http-server-connection-view" extends="observatory-element">
  <template>
    <link rel="stylesheet" href="css/shared.css">

    <nav-bar>
      <top-nav-menu last="{{ true }}"></top-nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
    </nav-bar>

    <div class="content">
      <h1>HttpConnection</h1>

      <br>

      <div class="memberList">
        <div class="memberItem">
          <div class="memberName">Socket</div>
          <div class="memberValue"><io-socket-ref ref="{{ connection['socket'] }}"></io-socket-ref></div>
        </div>
        <div class="memberItem">
          <div class="memberName">State</div>
          <div class="memberValue">{{ connection['state'] }}</div>
        </div>
        <div class="memberItem">
          <div class="memberName">Server</div>
          <div class="memberValue"><io-http-server-ref ref="{{ connection['server'] }}"></io-http-server-ref></div>
        </div>
      </div>
    </div>
    <br>
    <hr>
  </template>
</polymer-element>

<polymer-element name="io-socket-ref" extends="service-ref">
  <template>
    <link rel="stylesheet" href="css/shared.css">
    <a on-click="{{ goto }}" href="{{ url }}">{{ name }}</a>
  </template>
</polymer-element>

<polymer-element name="io-socket-list-view" extends="observatory-element">
  <template>
    <link rel="stylesheet" href="css/shared.css">

    <nav-bar>
      <top-nav-menu last="{{ true }}"></top-nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
    </nav-bar>

    <div class="content">
      <h1>Sockets</h1>

      <br>

      <ul class="list-group">
        <template repeat="{{ socket in list['members'] }}">
          <li class="list-group-item">
            <io-socket-ref ref="{{ socket }}"></io-socket-ref>
          </li>
        </template>
      </ul>
    </div>
    <br>
    <hr>
  </template>
</polymer-element>

<polymer-element name="io-socket-view" extends="observatory-element">
  <template>
    <link rel="stylesheet" href="css/shared.css">

    <nav-bar>
      <top-nav-menu last="{{ true }}"></top-nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
    </nav-bar>

    <div class="content">
      <!-- Pipe Socket -->
      <template if="{{ socket.isPipe }}">
        <h1>Pipe Socket</h1>
        <div class="memberList">
          <template if="{{ socket.socketOwner != null }}">
            <div class="memberItem">
              <div class="memberName">Owner</div>
              <div class="memberValue"><io-ref ref="{{ socket.socketOwner }}"></io-ref></div>
            </div>
          </template>
          <div class="memberItem">
            <div class="memberName">File descriptor</div>
            <div class="memberValue">{{ socket.fd }}</div>
          </div>
          <div class="memberItem">
            <div class="memberName">Read Closed</div>
            <div class="memberValue">{{ socket.readClosed }}</div>
          </div>
          <div class="memberItem">
            <div class="memberName">Write Closed</div>
            <div class="memberValue">{{ socket.writeClosed }}</div>
          </div>
          <div class="memberItem">
            <div class="memberName">Closing</div>
            <div class="memberValue">{{ socket.closing }}</div>
          </div>
        </div>
      </template>
      <!-- Network Socket -->
      <template if="{{ !socket.isPipe }}">
        <h1>Network Socket</h1>
        <div class="memberList">
          <template if="{{ socket.socketOwner != null }}">
            <div class="memberItem">
              <div class="memberName">Owner</div>
              <div class="memberValue"><io-ref ref="{{ socket.socketOwner }}"></io-ref></div>
            </div>
          </template>
          <div class="memberItem">
            <div class="memberName">Local Address</div>
            <div class="memberValue">{{ socket.localAddress }}</div>
          </div>
          <div class="memberItem">
            <div class="memberName">Local Port</div>
            <div class="memberValue">{{ socket.localPort }}</div>
          </div>
          <div class="memberItem">
            <div class="memberName">Remote Address</div>
            <div class="memberValue">{{ socket.remoteAddress }}</div>
          </div>
          <div class="memberItem">
            <div class="memberName">Remote Port</div>
            <div class="memberValue">{{ socket.remotePort }}</div>
          </div>
          <div class="memberItem">
            <div class="memberName">File descriptor</div>
            <div class="memberValue">{{ socket.fd }}</div>
          </div>
          <div class="memberItem">
            <div class="memberName">Read Closed</div>
            <div class="memberValue">{{ socket.readClosed }}</div>
          </div>
          <div class="memberItem">
            <div class="memberName">Write Closed</div>
            <div class="memberValue">{{ socket.writeClosed }}</div>
          </div>
          <div class="memberItem">
            <div class="memberName">Closing</div>
            <div class="memberValue">{{ socket.closing }}</div>
          </div>
          <div class="memberItem">
            <div class="memberName">Listening</div>
            <div class="memberValue">{{ socket.listening }}</div>
          </div>
          <div class="memberItem">
            <div class="memberName">Protocol</div>
            <div class="memberValue">{{ socket.protocol }}</div>
          </div>
        </div>
      </template>
    </div>
    <br>
    <hr>
  </template>
</polymer-element>

<polymer-element name="io-web-socket-ref" extends="service-ref">
  <template>
    <link rel="stylesheet" href="css/shared.css">
    <a on-click="{{ goto }}" href="{{ url }}">{{ name }}</a>
  </template>
</polymer-element>

<polymer-element name="io-web-socket-list-view" extends="observatory-element">
  <template>
    <link rel="stylesheet" href="css/shared.css">

    <nav-bar>
      <top-nav-menu last="{{ true }}"></top-nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
    </nav-bar>

    <div class="content">
      <h1>WebSockets</h1>

      <br>

      <ul class="list-group">
        <template repeat="{{ webSocket in list['members'] }}">
          <li class="list-group-item">
            <io-web-socket-ref ref="{{ webSocket }}"></io-web-socket-ref>
          </li>
        </template>
      </ul>
    </div>
    <br>
    <hr>
  </template>
</polymer-element>

<polymer-element name="io-web-socket-view" extends="observatory-element">
  <template>
    <link rel="stylesheet" href="css/shared.css">

    <nav-bar>
      <top-nav-menu last="{{ true }}"></top-nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
    </nav-bar>

    <div class="content">
      <h1>WebSocket</h1>

      <br>

      <div class="memberList">
        <div class="memberItem">
          <div class="memberName">Socket</div>
          <div class="memberValue"><io-socket-ref ref="{{ webSocket['socket'] }}"></io-socket-ref></div>
        </div>
      </div>
    </div>
    <br>
    <hr>
  </template>
</polymer-element>

<polymer-element name="io-random-access-file-ref" extends="service-ref">
  <template>
    <link rel="stylesheet" href="css/shared.css">
    <a on-click="{{ goto }}" href="{{ url }}">{{ name }}</a>
  </template>
</polymer-element>

<polymer-element name="io-random-access-file-list-view" extends="observatory-element">
  <template>
    <link rel="stylesheet" href="css/shared.css">

    <nav-bar>
      <top-nav-menu last="{{ true }}"></top-nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
    </nav-bar>

    <div class="content">
      <h1>Random Access Files</h1>

      <br>

      <ul class="list-group">
        <template repeat="{{ file in list['members'] }}">
          <li class="list-group-item">
            <io-random-access-file-ref ref="{{ file }}"></io-random-access-file-ref>
          </li>
        </template>
      </ul>
    </div>
    <br>
    <hr>
  </template>
</polymer-element>

<polymer-element name="io-random-access-file-view" extends="observatory-element">
  <template>
    <link rel="stylesheet" href="css/shared.css">

    <nav-bar>
      <top-nav-menu last="{{ true }}"></top-nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
    </nav-bar>

    <div class="content">
      <h1>Random Access File</h1>

      <br>

      <div class="memberList">
        <div class="memberItem">
          <div class="memberName">Path</div>
          <div class="memberValue">{{ file['name'] }}</div>
        </div>
        <div class="memberItem">
          <div class="memberName">Pending Operation</div>
          <div class="memberValue">{{ file['asyncDispatched'] }}</div>
        </div>
        <div class="memberItem">
          <div class="memberName">File Descriptor</div>
          <div class="memberValue">{{ file['fd'] }}</div>
        </div>
      </div>
    </div>
    <br>
    <hr>
  </template>
</polymer-element>

<polymer-element name="io-process-list-view" extends="observatory-element">
  <template>
    <link rel="stylesheet" href="css/shared.css">

    <nav-bar>
      <top-nav-menu last="{{ true }}"></top-nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
    </nav-bar>

    <div class="content">
      <h1>Processes</h1>

      <br>

      <ul class="list-group">
        <template repeat="{{ process in list['members'] }}">
          <li class="list-group-item">
            <io-process-ref ref="{{ process }}"></io-process-ref>
          </li>
        </template>
      </ul>
    </div>
    <br>
    <hr>
  </template>
</polymer-element>

<polymer-element name="io-process-ref" extends="service-ref">
  <template>
    <link rel="stylesheet" href="css/shared.css">
    <template if="{{ small }}">
      <a on-click="{{ goto }}" href="{{ url }}">{{ name }}</a>
    </template>
    <template if="{{ !small }}">
      <a on-click="{{ goto }}" href="{{ url }}">({{ ref['pid'] }}) {{ name }} {{ ref['arguments'] }}</a>
    </template>
  </template>
</polymer-element>

<polymer-element name="io-process-view" extends="observatory-element">
  <template>
    <link rel="stylesheet" href="css/shared.css">

    <nav-bar>
      <top-nav-menu last="{{ true }}"></top-nav-menu>
      <nav-refresh callback="{{ refresh }}"></nav-refresh>
    </nav-bar>

    <div class="content">
      <h1>Process</h1>

      <br>

      <div class="memberList">
        <div class="memberItem">
          <div class="memberName">Path</div>
          <div class="memberValue">{{ process['name'] }}</div>
        </div>
        <div class="memberItem">
          <div class="memberName">Pid</div>
          <div class="memberValue">{{ process['pid'] }}</div>
        </div>
        <div class="memberItem">
          <div class="memberName">Arguments</div>
          <div class="memberValue">{{ process['arguments'] }}</div>
        </div>
        <div class="memberItem">
          <div class="memberName">Started</div>
          <div class="memberValue">{{ process['started'] }}</div>
        </div>
        <div class="memberItem">
          <div class="memberName">Working Directory</div>
          <div class="memberValue">{{ process['workingDirectory'] }}</div>
        </div>
        <template if="{{ process['stdin'] != null }}">
          <div class="memberItem">
            <div class="memberName">stdin</div>
            <div class="memberValue">
              <io-socket-ref ref="{{ process['stdin'] }}"></io-socket-ref>
            </div>
          </div>
        </template>
        <template if="{{ process['stdout'] != null }}">
          <div class="memberItem">
            <div class="memberName">stdout</div>
            <div class="memberValue">
              <io-socket-ref ref="{{ process['stdout'] }}"></io-socket-ref>
            </div>
          </div>
        </template>
        <template if="{{ process['stderr'] != null }}">
          <div class="memberItem">
            <div class="memberName">stderr</div>
            <div class="memberValue">
              <io-socket-ref ref="{{ process['stderr'] }}"></io-socket-ref>
            </div>
          </div>
        </template>
      </div>

      <br>

      <h2>Environment</h2>
      <div class="well">
        <div class="monospace break-wrap">
          <template repeat="{{ variable in process['environment'] }}">
            {{ variable }}
            <br>
          </template>
        </div>
      </div>
    </div>
    <br>
    <hr>
  </template>
</polymer-element>

<script type="application/dart" src="io_view.dart"></script>