pgadmin4/web/pgadmin/browser/templates/browser/body.html

<link rel="stylesheet" href="{{ url_for('.static', filename='css/browser.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/codemirror/codemirror.css') }}" />
<script src="{{ url_for('static', filename='js/codemirror/codemirror.js') }}"></script>
<script src="{{ url_for('static', filename='js/codemirror/mode/sql.js') }}"></script>
<link rel="stylesheet" href="{{ url_for('.static', filename='css/aciTree/css/aciTree.css') }}" />
<script src="{{ url_for('.static', filename='js/aciTree/jquery.aciPlugin.min.js') }}"></script>
<script src="{{ url_for('.static', filename='js/aciTree/jquery.aciTree.min.js') }}"></script>


<div id="container" class="browser-pane-container">

  <div class="pane ui-layout-west browser-browser-pane">
    <div id="tree" class="aciTree">
    </div>
  </div>

  <div class="pane ui-layout-center browser-inner-pane" id="outer-center">
    <div class="pane ui-layout-center browser-center-pane" id="inner-center">
      <ul class="nav nav-tabs browser-tab-bar" role="tablist">
        <li role="presentation" class="active"><a href="#dashboard" aria-controls="home" role="tab" data-toggle="tab">Dashboard</a></li>
        <li role="presentation"><a href="#properties" aria-controls="profile" role="tab" data-toggle="tab">Properties</a></li>
        <li role="presentation"><a href="#statistics" aria-controls="messages" role="tab" data-toggle="tab">Statistics</a></li>
        <li role="presentation"><a href="#dependencies" aria-controls="settings" role="tab" data-toggle="tab">Dependencies</a></li>
        <li role="presentation"><a href="#dependents" aria-controls="settings" role="tab" data-toggle="tab">Dependents</a></li>
      </ul>
      <div class="tab-content browser-tab-panes">
        <div role="tabpanel" class="tab-pane browser-tab-pane active" id="dashboard">
          <iframe class="browser-tab-content" src="http://www.pgadmin.org/"></iframe>
        </div>
        <div role="tabpanel" class="tab-pane browser-tab-pane" id="properties">Properties Pane</div>
        <div role="tabpanel" class="tab-pane browser-tab-pane" id="statistics">Statistics Pane</div>
        <div role="tabpanel" class="tab-pane browser-tab-pane" id="dependencies">Dependencies Pane</div>
        <div role="tabpanel" class="tab-pane browser-tab-pane" id="dependents">Dependents Pane</div>
      </div>
    </div>
    <div class="ui-layout-south" style="padding: 0;">
        <textarea id="sql-textarea" name="sql-textarea">-- Table: tickets_detail

-- DROP TABLE tickets_detail;

CREATE TABLE tickets_detail
(
  id serial NOT NULL,
  ticket_id integer NOT NULL,
  logger_id integer NOT NULL,
  added timestamp with time zone NOT NULL,
  detail text NOT NULL,
  msgid character varying(100),
  CONSTRAINT tickets_detail_pkey PRIMARY KEY (id),
  CONSTRAINT ticket_id_refs_id_6b8dc130 FOREIGN KEY (ticket_id)
      REFERENCES tickets_ticket (id) MATCH SIMPLE
      ON UPDATE NO ACTION ON DELETE NO ACTION DEFERRABLE INITIALLY DEFERRED,
  CONSTRAINT tickets_detail_logger_id_fkey FOREIGN KEY (logger_id)
      REFERENCES auth_user (id) MATCH SIMPLE
      ON UPDATE NO ACTION ON DELETE NO ACTION DEFERRABLE INITIALLY DEFERRED
)
WITH (
  OIDS=FALSE
);
ALTER TABLE tickets_detail
  OWNER TO helpdesk;

-- Index: tickets_detail_logger_id

-- DROP INDEX tickets_detail_logger_id;

CREATE INDEX tickets_detail_logger_id
  ON tickets_detail
  USING btree
  (logger_id);

-- Index: tickets_detail_ticket_id

-- DROP INDEX tickets_detail_ticket_id;

CREATE INDEX tickets_detail_ticket_id
  ON tickets_detail
  USING btree
  (ticket_id);
</textarea>
    </div>
  </div>

</div>

<script>

function storeLayout(pane, $pane, paneState, paneOptions) {
    state = layout.readState();
    settings = { setting1: "Browser/SQLPane/Size", 
                 value1: state.center.children.layout1.south.size, 
                 setting2: "Browser/SQLPane/Closed", 
                 value2: state.center.children.layout1.south.initClosed,
                 setting3: "Browser/BrowserPane/Size", 
                 value3: state.west.size,
                 setting4: "Browser/BrowserPane/Closed", 
                 value4: state.west.initClosed,
                 count: 4
               }
    
    $.post("{{ url_for('settings.store') }}", settings);

    return true
}

var layout        
var layoutDefault = {
    center__maskContents:           true,
    center__paneSelector:           "#outer-center",
    center__maskContents:           true,
    center__children:               [{
        center__paneSelector:           "#inner-center",
        center__maskContents:           true,
        center__onresize:               "storeLayout",
        south__maskContents:            true,
        south__size:		        {{ layout_settings.sql_size }},
        south__initClosed:              {{ layout_settings.sql_closed }},
        south__spacing_closed:	        22,
        south__togglerLength_closed:    140,
        south__togglerAlign_closed:     "right",
        south__togglerContent_closed:   'SQL Pane',
        south__togglerTip_closed:       "Open & Pin SQL Pane",
        south__sliderTip:	        "Slide Open SQL Pane",
        south__slideTrigger_open:       "mouseover",
    }],
    west__maskContents:             true,
    west__size:		            {{ layout_settings.browser_size }},
    west__initClosed:               {{ layout_settings.browser_closed }},
    west__spacing_closed:	    22,
    west__togglerLength_closed:     140,
    west__togglerAlign_closed:      "top",
    west__togglerContent_closed:    'B<br />r<br />o<br />w<br />s<br />e<br />r',
    west__togglerTip_closed:        "Open & Pin Browser",
    west__sliderTip:	            "Slide Open Browser",
    west__slideTrigger_open:        "mouseover",
};

layout = $('#container').layout(layoutDefault);


// Make the tabs, umm, tabable
$('#dashboard a').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
})
$('#properties a').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
})
$('#statistics a').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
})
$('#dependencies a').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
})
$('#dependents a').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
})

// Syntax highlight the SQL Pane
var editor = CodeMirror.fromTextArea(document.getElementById("sql-textarea"), {
  lineNumbers: true,
  mode: "text/x-sql",
  readOnly: true,
});

// Initialise the treeview
$('#tree').aciTree({
        ajax: {
            url: '/static/tree.json'
        }
});

</script>