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

{% extends "base.html" %}
{% block title %}{{ config.APP_NAME }}{% endblock %}
{% block init_script %}
try {
require(
['pgadmin', 'pgadmin.browser'],
function(pgAdmin, pgBrowser) {
  pgBrowser.init();
},
function() {
/* TODO:: Show proper error dialog */
console.log(arguments);
});
} catch (err) {
/* Show proper error dialog */
console.log(err);
}

/*
 * Show loading spinner till every js module is loaded completely
 * Referenced url:
 * http://stackoverflow.com/questions/15581563/requirejs-load-script-progress
 * Little bit tweaked as per need
 */
require.onResourceLoad = function (context, map, depMaps) {
  var loadingStatusEl = panel = document.getElementById('pg-spinner');
  if (loadingStatusEl) {
    if (!context) {
      // we will call onResourceLoad(false) by ourselves when requirejs
      // is not loading anything hide the indicator and exit
      setTimeout(function() {
        if (panel != null) {
          $(panel).remove();
          return;
        }
      }, 500);
    }

    // show indicator when any module is loaded and
    // shedule requirejs status (loading/idle) check
    panel.style.display = "";
    clearTimeout(panel.ttimer);
    panel.ttimer = setTimeout(function () {
      var context = require.s.contexts._;
      var inited = true;
      for (name in context.registry) {
        var m = context.registry[name];
        if (m.inited !== true) {
          inited = false;
          break;
        }
      }

      // here the "inited" variable will be true, if requirejs is "idle",
      // false if "loading"
      if (inited) {
        // will fire if module loads in 400ms. TODO: reset this timer
        // for slow module loading
        require.onResourceLoad(false);
      }
    }, 400)
  }
};
{% endblock %}
{% block body %}
<style>
#pg-spinner {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0.6;
  z-index: 1056;
}
#pg-spinner .pg-sp-content {
  position: absolute;
  width: 100%;
  top: 40%;
}
#pg-spinner .pg-sp-icon {
  font-size: 50px;
  text-align: center;
  color: #ccc;
}
#pg-spinner .pg-sp-text {
  font-size: 20px;
  text-align: center;
  color: #fff;
}
</style>
<div id="pg-spinner">
  <div class="pg-sp-content">
    <div class="row"><div class="col-xs-12 pg-sp-icon fa fa-spinner fa-pulse"></div></div>
    <div class="row"><div class="col-xs-12 pg-sp-text">{{ _('Loading {0} v{1}...').format(config.APP_NAME, config.APP_VERSION) }}</div></div>
  </div>
</div>
<nav class="navbar-inverse navbar-fixed-top pg-navbar">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu">
                <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="{{ '#' if config.SERVER_MODE else '?key=' + current_app.PGADMIN_KEY }}">
                <i class="app-icon {{ config.APP_ICON }}"></i>
                <span>&nbsp;{{ config.APP_NAME }}</span>
            </a>
        </div>

        <div class="collapse navbar-collapse" id="navbar-menu">

            <ul class="nav navbar-nav">

                <li id="mnu_file" class="dropdown hide">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{
                        _('File') }} <span class="caret"></span></a>
                    <ul class="dropdown-menu navbar-inverse" role="menu"></ul>
                </li>
                <li id="mnu_edit" class="dropdown hide">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{
                        _('Edit') }} <span class="caret"></span></a>
                    <ul class="dropdown-menu navbar-inverse" role="menu"></ul>
                </li>
                <li id="mnu_obj" class="dropdown ">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{
                        _('Object') }} <span class="caret"></span></a>
                    <ul class="dropdown-menu navbar-inverse" role="menu"></ul>
                </li>
                <li id="mnu_management" class="dropdown hide">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{
                        _('Management') }} <span class="caret"></span></a>
                    <ul class="dropdown-menu navbar-inverse" role="menu"></ul>
                </li>
                <li id="mnu_tools" class="dropdown hide">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{
                        _('Tools') }} <span class="caret"></span></a>
                    <ul class="dropdown-menu navbar-inverse" role="menu"></ul>
                </li>
                <li id="mnu_help" class="dropdown hide">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{
                        _('Help') }} <span class="caret"></span></a>
                    <ul class="dropdown-menu navbar-inverse" role="menu"></ul>
                </li>
            </ul>
            {% if config.SERVER_MODE %}
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><img
                            src="{{ username | gravatar }}" width="18" height="18"
                            alt="Gravatar image for {{ username }}"> {{ username }} <span class="caret"></span></a>
                    <ul class="dropdown-menu navbar-inverse">
                        <li><a href="{{ url_for('security.change_password') }}">{{ _('Change Password') }}</a></li>
                        <li class="divider"></li>
                        {% if is_admin %}
                        <li><a href="#" onclick="pgAdmin.Browser.UserManagement.show_users()">{{ _('Users') }}</a></li>
                        <li class="divider"></li>
                        {% endif %}
                        <li><a href="{{ url_for('security.logout') }}?next={{url_for('browser.index')}}">{{ _('Logout') }}</a></li>
                    </ul>
                </li>
            </ul>
            {% endif %}
        </div>

    </div>
</nav>

<div id="dockerContainer" class="pg-docker"></div>

{% include 'browser/messages.html' %}

{% endblock %}