<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>WEditor</title>
  <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="//unpkg.com/element-ui/lib/theme-chalk/index.css">

  <link rel="stylesheet" type="text/css" href="/static/libs/css/buttons.css">
  <link rel="stylesheet" type="text/css" href="/static/libs/fontawesome/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.select/1.12.2/css/bootstrap-select.min.css">
  <link rel="stylesheet" type="text/css" href="{{static_url('style.css')}}">
  <!-- jstree -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jstree@3.3.8/dist/themes/default/style.min.css">
</head>

<body>
  <div id="app">
    <nav class="navbar navbar-default" style="margin-bottom: 0px">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
          data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">ATX <strong>WEditor</strong></a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <!--         <ul class="nav navbar-nav">
          <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        </ul> -->
        <form class="navbar-form navbar-left" onsubmit="return false">
          <div class="form-group">
            <select v-model="platform" class="selectpicker" value="Android" title="Platform" data-width="fit">
              <option data-icon="glyphicon-piggy-bank" value="Android">Android</option>
              <option data-icon="glyphicon-apple" value="iOS">iOS</option>
              <option data-icon="glyphicon-apple" value="Neco">Neco(beta)</option>
            </select>
            <input type="text" v-model="serial" class="form-control" v-bind:placeholder="deviceUrl">
          </div>
          <button type="submit" class="btn btn-default" v-on:click="doConnect">
            Connect
            <span v-if="deviceId" class="glyphicon glyphicon-grain color-green"></span>
          </button>
          <button :disabled="loading" class="btn btn-default" v-on:click="dumpHierarchyWithScreen()">
            <i class="fa fa-refresh"></i> Dump Hierarchy
          </button>
          <template v-if="platform == 'Android'">
            <el-switch v-model="liveScreen" active-text="实时" inactive-text="静态">
            </el-switch>
          </template>
        </form>
        <ul class="nav navbar-nav navbar-right">
          <!-- <li><a href="#">Link</a></li> -->
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
              aria-expanded="false">相关文档 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a target="_blank" href="https://github.com/openatx/weditor">openatx/weditor</a></li>
              <li role="separator" class="divider"></li>
              <li><a target="_blank" href="https://github.com/openatx/uiautomator2">openatx/uiautomator2</a></li>
              <li><a target="_blank" href="https://github.com/openatx/facebook-wda">openatx/facebook-wda</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
    <div id="upper">
      <div id="left">
        <div>
        </div>
        <section id="screen">
          <canvas id="fgCanvas" @dblclick="doTap(nodeSelected)" class="canvas-fg" v-bind:style="canvasStyle"></canvas>
          <canvas id="bgCanvas" class="canvas-bg" v-bind:style="canvasStyle"></canvas>
          <span class="finger finger-0" style="transform: translate3d(200px, 100px, 0px)"></span>
          <img style="z-index: 10" v-if="loading" src="/static/loading.svg">
        </section>
        <section id="footer">
          <button class="btn" @click="keyevent('power')">
            <i class="fa fa-power-off color-red"></i> POWER</button>
          <button class="btn" @click="keyevent('home')">
            <i class="fa fa-home"></i> Home</button>
          <button class="btn" @click="keyevent('back')" :disabled="platform.toLowerCase() != 'android'">
            <i class="fa fa-chevron-left"></i> Back</button>
          <button class="btn" disabled="true">Menu</button>
        </section>
        <!-- <div class="horizon-gap"></div> -->

      </div>
      <div id="vertical-gap1" class="handle vertical-gap"></div>

      <div class="middle">
        <div class="panel panel-default middle-panel">
          <div class="panel-heading">
            <i class="fa fa-empire" aria-hidden="true"></i> Selected Element
            <span class="pull-right">
              <button :disabled="loading" class="btn btn-default btn-xs" v-on:click="clearCanvas()">
                <i class="fa fa-square-o"></i> Clear Canvas
              </button>
            </span>
          </div>
          <div class="panel-body">
            <div class="text-center">
              <button class="btn btn-default btn-sm" :disabled="!nodeSelected" v-on:click="doTap()">Tap</button>
              <button class="btn btn-default btn-sm" v-on:click="doSendKeys('')">Send Keys</button>
              <!-- <button class="btn btn-default btn-sm" v-on:click="doClear()">Clear Text</button> -->
            </div>
          </div>
          <table class="table table-bordered table-weditor table-condensed">
            <thead>
              <tr>
                <th style="width: 8em">Prop</th>
                <th>Value</th>
              </tr>
            </thead>
            <tbody>
              <template v-if="['iOS', 'Neco'].includes(platform)">
                <tr>
                  <td>name</td>
                  <td contenteditable v-text="elem.name"></td>
                </tr>
              </template>
              <template v-if="['Neco'].includes(platform)">
                <tr>
                  <td>tag</td>
                  <td contenteditable v-text="elem.tag"></td>
                </tr>
                <tr v-if="elem.anchor">
                  <td>anchor</td>
                  <td contenteditable>{{!elem.anchor.x}}, {{!elem.anchor.y}}</td>
                </tr>
              </template>
              <tr>
                <td>className</td>
                <td contenteditable v-text="elem._type"></td>
              </tr>
              <template v-if="['Android', 'Neco'].includes(platform)">
                <tr>
                  <td>description</td>
                  <td contenteditable v-text="elem.description"></td>
                </tr>
                <tr>
                  <td>text</td>
                  <td contenteditable v-text="elem.text"></td>
                </tr>
              </template>
              <template v-if="platform == 'Neco'">
                <tr>
                  <td>touchable</td>
                  <td contenteditable v-text="elem.touchable"></td>
                </tr>
              </template>
              <template v-if="platform == 'Android'">
                <tr>
                  <td>resourceId</td>
                  <td contenteditable v-text="elem.resourceId"></td>
                </tr>
                <tr>
                  <td>clickable</td>
                  <td contenteditable v-text="elem.clickable"></td>
                </tr>
                <tr>
                  <td>packageName</td>
                  <td contenteditable v-text="elem.package"></td>
                </tr>
              </template>
              <template v-if="elem.rect">
                <tr>
                  <td>label</td>
                  <td contenteditable v-text="elem.label"></td>
                </tr>
                <tr>
                  <td>x, y</td>
                  <td>{{!elem.rect.x}}, {{!elem.rect.y}}</td>
                </tr>
                </tr>
                <tr>
                  <td>width</td>
                  <td v-text="elem.rect.width"></td>
                </tr>
                <tr>
                  <td>height</td>
                  <td v-text="elem.rect.height"></td>
                </tr>
              </template>
              <!-- common -->
              <tr>
                <td>enabled</td>
                <td v-text="elem.enabled"></td>
              </tr>
              <tr>
                <td>visible</td>
                <td v-text="elem.visible"></td>
              </tr>
              <tr>
                <td>XPath</td>
                <td contenteditable v-text="elemXPathLite"></td>
              </tr>
              <!-- <tr>
                <td>XPath(full)</td>
                <td contenteditable v-text="elemXPathFull"></td>
              </tr> -->
              <tr>
                <td>position
                  <i @click="showCursorPercent = !showCursorPercent" :class="{'inactive': showCursorPercent}"
                    class="fa fa-percent cursor-pointer" aria-hidden="true"></i>
                </td>
                <td>
                  <span title="双击复制" @dblclick="copyToClipboard('('+cursorValue.x+', '+cursorValue.y+')')">
                    ({{!cursorValue.x}}, {{!cursorValue.y}})
                  </span>
                  <a href="#" @click="doPositionTap(cursorValue.x, cursorValue.y)">点击</a>
                </td>
              </tr>
            </tbody>
            <tfoot></tfoot>
          </table>
          <h5>
            代码
          </h5>
          <!-- c9-ide -->
          <input type="text" v-model="generatedCode" class="form-control input-sm">
          <div class="checkbox">
            <label>
              <input v-model="autoCopy" type="checkbox"> 自动复制代码
            </label>
            <label>
              <input v-model="useXPathOnly" type="checkbox"> 强制使用XPath
            </label>
          </div>
        </div>
      </div>
      <div class="vertical-gap"></div>
      <div id="right">
        <div class="panel panel-default" style="margin-bottom: 0px; border-bottom: 0px">
          <div class="panel-heading">
            <span class="glyphicon glyphicon-music"></span> Coding
            <span class="pull-right">
              <el-button icon="el-icon-delete" type="warning" size="mini" plain @click="clearCode">重置代码
              </el-button>
              <el-button icon="el-icon-document-copy" type="primary" size="mini" plain
                @click="copyToClipboard(editor.getValue())">复制
              </el-button>
              <el-tooltip :open-delay="500" content="Command+Enter" placement="top">
                <el-button type="primary" size="mini" plain @click="codeRunDebugCode(editor.getValue())"
                  :loading="codeRunning">运行
                </el-button>
              </el-tooltip>
              <el-tooltip :open-delay="500" content="Command+Shift+Enter" placement="top">
                <el-button type="primary" size="mini" plain @click="codeRunSelected" :loading="codeRunning">选中运行
                </el-button>
              </el-tooltip>
            </span>
          </div>
        </div>
        <pre class="editor-container">
          <div id="editor"></div>
        </pre>

        <!-- Colding Area -->
        <el-tabs type="border-card" v-model="tabActiveName">
          <el-tab-pane label="Hierarchy" name="hierarchy">
            <div class="input-group input-group-sm">
              <div class="input-group-btn">
                <button class="btn btn-default">
                  <i class="glyphicon glyphicon-plus"></i>
                </button>
              </div>
              <input id="jstree-search" type="text" class="form-control" placeholder="Search for...">
              <span class="input-group-btn">
                <button class="btn btn-default" type="button">
                  <i class="glyphicon glyphicon-search"></i>
                </button>
              </span>
            </div>
            <div class="box">
              <div id="jstree-hierarchy"></div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="Console" name="console">
            <div id="console">
              <img v-if="codeRunning && !console.content" src="/static/running.svg">
              <pre v-text="console.content"></pre>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!-- alert and dialogs -->
    <div class="modal" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">
              <span class="color-red">
                <i class="fa fa-warning"></i> Error</span>
            </h4>
          </div>
          <div class="modal-body">
            <pre v-html="error"></pre>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

<script src="/cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="/cdn.jsdelivr.net/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="/cdn.jsdelivr.net/bootstrap.select/1.12.2/js/bootstrap-select.min.js"></script>
<script src="/static/ace/ace.js"></script>
<script src="/static/ace/mode-python.js"></script>
<!-- <script src="http://10.240.187.174:8000/_d/js"></script> -->
<script src="/cdn.jsdelivr.net/npm/jstree@3.3.8/dist/jstree.min.js"></script>

<script src="{{static_url('libs/vue-2.5.16/vue.js')}}"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>

<script src="{{static_url('js/common.js')}}"></script>
<script src="{{static_url('js/index.js')}}"></script>

<script>
  (function (i, s, o, g, r, a, m) {
    i['GoogleAnalyticsObject'] = r;
    i[r] = i[r] || function () {
      (i[r].q = i[r].q || []).push(arguments)
    }, i[r].l = 1 * new Date();
    a = s.createElement(o),
      m = s.getElementsByTagName(o)[0];
    a.async = 1;
    a.src = g;
    m.parentNode.insertBefore(a, m)
  })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

  ga('create', 'UA-81205425-3', 'auto');
  ga('send', 'pageview');
</script>

</html>
