<!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="/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>
          <small v-text="version"></small>
        </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="fa fa-android" value="Android">Android</option>
              <option data-icon="fa fa-apple" value="iOS">iOS</option>
              <!-- <option data-icon="glyphicon-apple" value="Neco">Neco(beta)</option> -->
            </select>
            <!-- <el-select v-model="serial" allow-create filterable placeholder="选择或输入">
              <el-option
                v-for="item in deviceList" :key="item.value" :label="item.label + ':' + item.value" :value="item.value">
              </el-option>
            </el-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" :disabled="connecting">
            Connect
            <i v-if="connecting" class="fa fa-spinner fa-spin"></i>
            <span v-if="deviceId" class="glyphicon glyphicon-grain color-green"></span>
          </button>
          <button :disabled="loading || connecting" class="btn btn-default" v-on:click="dumpHierarchyWithScreen()">
            <i class="fa fa-refresh" :class='{"fa-spin": dumping}'></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/weditor">uiautomator2快速参考</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="doKeyevent('power')">
            <i class="fa fa-power-off color-red"></i> POWER</button>
          <button class="btn" @click="doKeyevent('home')">
            <i class="fa fa-home"></i> Home</button>
          <button class="btn" @click="doKeyevent('back')" v-show="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" @click="doTapWidget()">Tap
                Widget(Beta)</button>
              <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="platform == 'Android'">
                <tr>
                  <td class="always-exists-attr">activity</td>
                  <td contenteditable v-text="activity"></td>
                </tr>
              </template>
              <template>
                <tr>
                  <td class="always-exists-attr">XPathLite</td>
                  <td contenteditable v-text="elemXPathLite"></td>
                </tr>
                <!-- <tr>
                  <td>XPath(full)</td>
                  <td contenteditable v-text="elemXPathFull"></td>
                </tr> -->
                <tr>
                  <td>
                    <span @click="showCursorPercent = !showCursorPercent" class="cursor-pointer">
                      坐标
                      <i :class="{'inactive': !showCursorPercent}">%</i>
                      <i :class="{'inactive': showCursorPercent}">px</i>
                    </span>
                  </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>
              </template>
              <template>
                <tr v-show="elem._type">
                  <td>className</td>
                  <td>
                    <i v-if="platform == 'iOS'">XCUIElementType</i><span v-text="elem._type"></span>
                    <small v-if="platform == 'iOS'" style="cursor: pointer; float: right;"
                      @click="copyToClipboard('XCUIElementType' + elem._type)">复制</small>
                  </td>
                </tr>
                <tr v-for="key in filterAttributeKeys(elem)" :key="key">
                  <td>{{!"* " + key}}</td>
                  <td><code v-text="elem[key]" class="prop-value"></code></td>
                </tr>
                <tr v-if="elem.rect">
                  <td># rect</td>
                  <td>{{!JSON.stringify(elem.rect)}}</td>
                </tr>
              </template>
            </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 coding-commands">
              <el-button @click="initPythonWebSocket" size="mini" style="color: red;" v-if="!pyshell.wsOpen">
                <i class="fa fa-unlink"></i> 点击重连
              </el-button>
              <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>
              <el-tooltip :open-delay="500" content="Command+Enter" placement="top">
                <el-button type="primary" size="mini" plain icon="el-icon-caret-right"
                  @click="runPythonWithConnect(editor.getValue())" :loading="codeRunning">
                </el-button>
              </el-tooltip>
              <el-tooltip :open-delay="200" content="Stop debugging" placement="top">
                <el-button type="primary" size="mini" plain :disabled="!codeRunning" @click="stopDebugging">
                  <i class="fa fa-stop"></i>
                </el-button>
              </el-tooltip>
              <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-button type="danger" size="mini" plain @click="restartKernel">
                <i title="重启服务" class="fa fa-repeat"></i> <span v-if="pyshell.restarting"> ...</span>
              </el-button>
            </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" src="/static/running.svg">
              <pre
                ref="console"><span style="cursor: pointer" v-for="data in pyshell.consoleData" @dblclick="gotoCursorLine(data.lineno)" v-text="data.value"></span></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>

<!-- ace editor -->
<script src="/cdn.jsdelivr.net/npm/ace-builds@1.4.12/src-noconflict/ace.min.js"></script>
<script src="/cdn.jsdelivr.net/npm/ace-builds@1.4.12/src-noconflict/mode-python.min.js"></script>
<script src="/cdn.jsdelivr.net/npm/ace-builds@1.4.12/src-noconflict/ext-language_tools.min.js"></script>
<script src="/cdn.jsdelivr.net/npm/ace-builds@1.4.12/src-noconflict/ext-searchbox.min.js"></script>
<script src="/cdn.jsdelivr.net/npm/ace-builds@1.4.12/src-noconflict/theme-monokai.js"></script>

<!-- <script src="/static/ace/ace.js"></script>
<script src="/static/ace/ext-language_tools.js"></script>
<script src="/static/ace/mode-python.js"></script>
<script src="/static/ace/theme-monokai.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>

<!-- Baidu Analytics -->
<script>
  var _hmt = _hmt || [];
  (function () {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?eefa59dfd5fb29fcc57a8b2437ad5ab1";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
  })();
</script>

</html>