pathfinder/public/templates/dialog/map_info.html

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header pull-left">
        <ul class="nav navbar-nav {{dialogNavigationClass}}" role="tablist">
            <li class="{{#openTabInformation}}active{{/openTabInformation}}">
                <a role="tab" data-toggle="tab" data-name="infoSummary" href="#{{dialogSummaryContainerId}}">
                    <i class="fas fa-street-view fa-fw"></i>&nbsp;Information
                </a>
            </li>
            <li class="{{#openTabActivity}}active{{/openTabActivity}}">
                <a role="tab" data-toggle="tab" data-name="infoUsers" href="#{{dialogUsersContainerId}}">
                    <i class="fas fa-user-friends fa-fw"></i>&nbsp;Activity
                </a>
            </li>
            <li class="{{#openTabLog}}active{{/openTabLog}}">
                <a role="tab" data-toggle="tab" data-name="infoLog" href="#{{dialogLogsContainerId}}">
                    <i class="fas fa-user-clock fa-fw"></i>&nbsp;Log
                </a>
            </li>
        </ul>
    </div>

    <div class="navbar-header pull-right">
        <ul class="nav navbar-nav {{dialogNavigationClass}}">
            <li class="">
                <a id="{{dialogRefreshContainerId}}" href="javascript:void(0);" data-action="refresh">
                    <i class="fas fa-sync fa-fw"></i>&nbsp;Refresh
                </a>
            </li>
        </ul>
    </div>
</nav>

<div class="tab-content">

    {{! "summary" tab ------------------------------------------------------ }}
    <div role="tabpanel" class="tab-pane fade {{#openTabInformation}}in active{{/openTabInformation}}" id="{{dialogSummaryContainerId}}">
        <div class="alert alert-info fade in hidden-md hidden-lg">
            <span class="txt-color txt-color-information">Info</span>
            <small> Your browser window is to small. Resize it to obtain more columns.</small>
        </div>

        <h4><i class="fas fa-sitemap fa-lg fa-fw"></i> Map</h4>

        <div id="{{mapInfoId}}" class="pf-dynamic-area">
        </div>

        <h4><i class="fas fa-sun fa-lg fa-fw"></i> Systems</h4>

        <div id="{{mapInfoSystemsId}}" class="pf-dynamic-area">
        </div>

        <h4><i class="fas fa-code-branch fa-rotate-270 fa-lg fa-fw"></i> Connections</h4>

        <div id="{{mapInfoConnectionsId}}" class="pf-dynamic-area"></div>
    </div>

    {{! "users" tab -------------------------------------------------------- }}
    <div role="tabpanel" class="tab-pane fade {{#openTabActivity}}in active{{/openTabActivity}}" id="{{dialogUsersContainerId}}">
        <div class="alert alert-info fade in hidden-md hidden-lg">
            <span class="txt-color txt-color-information">Info</span>
            <small> Your browser window is to small. Resize it to obtain more columns.</small>
        </div>

        <h4><i class="fas fa-male fa-lg fa-fw"></i> Active pilots</h4>

        <div id="{{mapInfoUsersId}}" class="pf-dynamic-area"></div>
    </div>

    {{! "log" tab ---------------------------------------------------------- }}
    <div role="tabpanel" class="tab-pane fade {{#openTabLog}}in active{{/openTabLog}}" id="{{dialogLogsContainerId}}">
        <h4><i class="fas fa-history fa-lg fa-fw"></i> Log viewer</h4>

        <div id="{{mapInfoLogsId}}" class="pf-dynamic-area"></div>

        <div class="flex-row flex-between well well-sm">
            <div class="flex-col">Map config:</div>
            <div class="flex-col">
                Save map changes to logfile&nbsp;
                {{#logHistoryEnabled}}
                <kbd class="txt-color txt-color-success">enabled</kbd>
                {{/logHistoryEnabled}}
                {{^logHistoryEnabled}}
                <kbd>disabled</kbd>
                {{/logHistoryEnabled}}
            </div>
        </div>
    </div>
</div>