superset2/panoramix/templates/panoramix/sql.html

{% extends "panoramix/base.html" %}

{% block head_css %}
  {{super()}}
  <link rel="stylesheet" type="text/css" href="/static/lib/dataTables/jquery.dataTables.min.css" />
  <link rel="stylesheet" type="text/css" href="/static/lib/dataTables/dataTables.bootstrap.css" />
  <style type="text/css">
    .topsql {
      height: 250px;
    }
    .dataTables_filter {
      padding-top: 5px;
      padding-right: 5px;
    }
    .bordered {
      padding: 0px 0px;
      border: 1px solid grey;
      border-radius: 5px;
      background-color: #EEE;
    }
    div.alert {
      padding: 5px;
      margin: 0px;
    }
    .metadata {
      overflow: auto;
      width: 300px;
      height: 100px;
    }
    .fillup {
      width: 100%;
      height: 100%;
    }
    .fillheight {
      height: 100%;
    }
    .interactions {
      padding-bottom: 10px;
    }
    #results {
      overflow: auto;
      font-size: 12px;
      margin-bottom: 5px;
    }
    #results table tbody tr td{
      padding: 2px 4px;
    }

  </style>
{% endblock %}

{% block content %}
<div class="sqlcontent" style="display: none;">
  <h2>db: [{{ db }}]</h2>
  <div class="row interactions">
    <div class="col-xs-7 fillheight">
      <input type="hidden" id="database_id" value="{{ database_id }}">
      <button class="btn btn-primary" id="run">Run!</button>
      <button class="btn btn-default" id="create_view">Create View</button>
    </div>
    <div class="col-xs-5 fillheight">
      <select id="dbtable">
        {% for table in db.tables %}
          <option value="{{ table.id }}"
              {{ "selected" if table.id|string == table_id }}>
            {{ table }}
          </option>
        {% endfor %}
      </select>
      <button class="btn btn-default" id="select_star">SELECT *</button>
    </div>
  </div>
  <div class="topsql row">
    <div class="col-xs-7 fillheight">
      <textarea id="sql" class="fillup"></textarea>
    </div>
    <div class="col-xs-5 fillheight">
      <div class="metadata fillup bordered">
      Tables
      </div>
    </div>
  </div>
  <div id="interactive">
  </div>
  <div id="results_section">
    <hr/>
    <img id="loading" width="25" style="display: none;" src="/static/img/loading.gif">
  </div>
  <div>
    <div id="results" class="bordered" style="display: none;"></div>
  </div>
</div>
{% endblock %}

{% block tail_js %}
{{ super() }}
<script src="/static/lib/bootstrap-toggle.min.js"></script>
<script src="/static/lib/ace/ace.js"></script>
<script src="/static/lib/dataTables/jquery.dataTables.min.js"></script>
<script src="/static/lib/dataTables/dataTables.bootstrap.js"></script>
<script>
  $(document).ready(function() {
    px.initSqlEditorView();
  });
</script>
{% endblock %}