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

{% extends "base.html" %}

{% if config.SERVER_MODE and config.SHOW_GRAVATAR_IMAGE -%}
{% import 'browser/macros/gravatar_icon.macro' as IMG with context %}
{% elif config.SERVER_MODE %}
{% import 'browser/macros/static_user_icon.macro' as IMG with context %}
{% endif %}

{% block title %}{{ config.APP_NAME }}{% endblock %}

{% block init_script %}
try {
require(
['sources/generated/app.bundle', 'sources/generated/codemirror', 'sources/generated/browser_nodes', 'sources/generated/slickgrid'],
function() {
},
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 d-none the indicator and exit
      setTimeout(function() {
        if (panel != null) {
            try{
                $(panel).remove();
            }
            catch(e){
                panel.outerHTML = "";
                delete panel;
            }
          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)
  }
};

{% if config.SERVER_MODE %}
window.onload = function(e){
 setTimeout(function() {
   var gravatarImg = {{ IMG.PREPARE_HTML()|safe }}
   var navbarUser = document.getElementById("navbar-user");
   if (navbarUser) {
     navbarUser.innerHTML = gravatarImg;
   }
 }, 1000);
};
{% endif %}
{% endblock %}

{% block css_link %}
<link type="text/css" rel="stylesheet" href="{{ url_for('browser.browser_css')}}"/>
{% endblock %}

{% block body %}
<div id="pg-spinner" class="pg-sp-container">
  <div class="pg-sp-content">
    <div class="row"><div class="col-12 pg-sp-icon"></div></div>
    <div class="row"><div class="col-12 pg-sp-text">{{ _('Loading {0} v{1}...').format(config.APP_NAME, config.APP_VERSION) }}</div></div>
  </div>
</div>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark pg-navbar">
    <a class="navbar-brand pgadmin_header_logo" onClick="return false;" href="{{ '#' }}"
       title="{{ config.APP_NAME }} {{ _('logo') }}" aria-label="{ config.APP_NAME }} {{ _('logo') }}">
        <i class="app-icon {{ config.APP_ICON }}" aria-hidden="true"></i>
    </a>
    <button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-controls="navbar-menu">
        <span class="sr-only">{{ _('Toggle navigation') }}</span>
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbar-menu" role="navigation">

        <ul class="navbar-nav mr-auto">
            <li id="mnu_file" class="nav-item active dropdown d-none">
                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{
                    _('File') }} <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu"></ul>
            </li>
            <li id="mnu_obj" class="nav-item active dropdown ">
                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{
                    _('Object') }} <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu"></ul>
            </li>
            <li id="mnu_management" class="nav-item active dropdown d-none">
                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{
                    _('Management') }} <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu"></ul>
            </li>
            <li id="mnu_tools" class="nav-item active dropdown d-none">
                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{
                    _('Tools') }} <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu"></ul>
            </li>
            <li id="mnu_help" class="nav-item active dropdown d-none">
                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{
                    _('Help') }} <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu"></ul>
            </li>
        </ul>
        {% if config.SERVER_MODE %}
        <ul class="navbar-nav">
            <li class="nav-item active dropdown">
                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown"
                   role="button" aria-expanded="false" id="navbar-user"></a>
                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                    {% if auth_only_internal %}
                    <li>
                        <a class="dropdown-item" href="#" onclick="pgAdmin.Browser.UserManagement.change_password(
                          '{{ url_for('browser.change_password') }}'
                        )">
                            {{ _('Change Password') }}
                        </a>
                    </li>
                    <li class="dropdown-divider"></li>
                    {% endif %}
                    {% if is_admin %}
                    <li><a class="dropdown-item" href="#" onclick="pgAdmin.Browser.UserManagement.show_users()">{{ _('Users') }}</a></li>
                    <li class="dropdown-divider"></li>
                    {% endif %}
                    <li><a class="dropdown-item" href="{{ logout_url }}">{{ _('Logout') }}</a></li>
                </ul>
            </li>
        </ul>
        {% endif %}
    </div>
</nav>

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

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

{% endblock %}