vitess.io/vitess@v0.16.2/examples/demo/index.html (about)

     1  <!DOCTYPE html>
     2  
     3  <html data-ng-app="">
     4  <link rel="stylesheet"
     5    href="https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/minty/bootstrap.min.css">
     6  <head>
     7  <meta charset="US-ASCII">
     8  <title>Vitess VSchema demo</title>
     9  </head>
    10  <body data-ng-controller="DemoController">
    11    <div class="container-fluid text-dark">
    12      <div class="row">
    13        <h4 class="col-md-9">Vitess VSchema demo</h4>
    14      </div>
    15      <div class="row">
    16        <div class="col-md-8">
    17          <div class="card mt-3 mb-3">
    18            <div class="card-heading">
    19              <h4 class="text-center">customer</h4>
    20            </div>
    21            <div class="row">
    22              <div class="col-md-6">
    23                <div data-ng-show="result.customer0" data-ng-repeat="curResult in [result.customer0]"
    24                  data-ng-include="'result.html'"></div>
    25              </div>
    26              <div class="col-md-6">
    27                <div data-ng-show="result.customer1" data-ng-repeat="curResult in [result.customer1]"
    28                  data-ng-include="'result.html'"></div>
    29              </div>
    30            </div>
    31            <div class="row">
    32              <div class="col-md-6">
    33                <div data-ng-show="result.corder0" data-ng-repeat="curResult in [result.corder0]"
    34                  data-ng-include="'result.html'"></div>
    35              </div>
    36              <div class="col-md-6">
    37                <div data-ng-show="result.corder1" data-ng-repeat="curResult in [result.corder1]"
    38                  data-ng-include="'result.html'"></div>
    39              </div>
    40            </div>
    41            <div class="row">
    42              <div class="col-md-6">
    43                <div data-ng-show="result.corder_event0" data-ng-repeat="curResult in [result.corder_event0]"
    44                  data-ng-include="'result.html'"></div>
    45              </div>
    46              <div class="col-md-6">
    47                <div data-ng-show="result.corder_event1" data-ng-repeat="curResult in [result.corder_event1]"
    48                  data-ng-include="'result.html'"></div>
    49              </div>
    50            </div>
    51            <div class="row">
    52              <div class="col-md-6">
    53                <div data-ng-show="result.oname_keyspace_idx0" data-ng-repeat="curResult in [result.oname_keyspace_idx0]"
    54                  data-ng-include="'result.html'"></div>
    55              </div>
    56              <div class="col-md-6">
    57                <div data-ng-show="result.oname_keyspace_idx1" data-ng-repeat="curResult in [result.oname_keyspace_idx1]"
    58                  data-ng-include="'result.html'"></div>
    59              </div>
    60            </div>
    61          </div>
    62        </div>
    63        <div class="col-md-4">
    64          <div class="card mt-3 mb-3">
    65            <div class="card-heading">
    66              <h4 class="text-center">product</h4>
    67            </div>
    68            <div class="row">
    69              <div class="col-md-12">
    70                <div data-ng-show="result.product" data-ng-repeat="curResult in [result.product]"
    71                  data-ng-include="'result.html'"></div>
    72                <div data-ng-show="result.customer_seq" data-ng-repeat="curResult in [result.customer_seq]"
    73                  data-ng-include="'result.html'"></div>
    74                <div data-ng-show="result.corder_keyspace_idx" data-ng-repeat="curResult in [result.corder_keyspace_idx]"
    75                  data-ng-include="'result.html'"></div>
    76              </div>
    77            </div>
    78          </div>
    79        </div>
    80      </div>
    81      <div class="row">
    82        <div class="col-md-9">
    83          <div class="card">
    84            <form class="input-group" data-ng-submit="submitQuery()">
    85              <div class="input-group-btn">
    86                <button class="btn dropdown-toggle text-dark" type="button"
    87                  data-toggle="dropdown">
    88                  Samples <span class="caret"></span>
    89                </button>
    90                <ul class="dropdown-menu">
    91                  <li data-ng-class="{'divider': !sample}"
    92                    data-ng-repeat="sample in samples track by $index"
    93                    data-ng-click="setQuery(sample)"><a data-ng-show="sample"
    94                    href="#">{{sample}}</a></li>
    95                </ul>
    96              </div>
    97              <input type="text" class="form-control" placeholder="Query"
    98                data-ng-model="query" id="query_input">
    99            </form>
   100          </div>
   101        </div>
   102      </div>
   103      <div class="row">
   104        <div class="col-md-4 mt-3">
   105          <div class="col-md-12">
   106            <div data-ng-repeat="curResult in [result.result]"
   107              data-ng-include="'result.html'"></div>
   108          </div>
   109        </div>
   110        <div class="col-md-8">
   111          <div class="card bg-primary mt-3 ml-1 mr-1" data-ng-show="result.queries">
   112            <h5 class="card-title">Executed Queries
   113            </h5>
   114            <div data-ng-repeat="queryInfo in result.queries track by $index">
   115              {{queryInfo}}<br>
   116            </div>
   117          </div>
   118        </div>
   119    </div>
   120    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
   121    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
   122    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
   123    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js" type="text/javascript"></script>
   124    <script src="index.js" type="text/javascript"></script>
   125  </body>
   126  </html>