top_navbar.html

<template name="topNavbar">
    <div class="row border-bottom">
        <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
            <div class="navbar-header">
                <a id="navbar-minimalize" class="minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i>
                </a>
                <form role="search" class="navbar-form-custom">
                    <div class="form-group">
                        <input type="text" disabled="true" placeholder="Search for something..." class="form-control"
                               name="top-search"
                               id="top-search">
                    </div>
                </form>
            </div>
            <ul class="nav navbar-top-links navbar-right">
                {{#if isConnected}}
                    <li>
                        <a id="btnRefreshCollections" href="">
                            <i class="fa fa-refresh"></i> Refresh Collections
                        </a>
                    </li>
                {{/if}}
                <li>
                    <a href="{{pathFor route="settings"}}">
                        <i class="fa fa-gears"></i> Settings
                    </a>
                </li>
                <li>
                    {{#if isConnected}}
                        <a id="btnDisconnect" href="#">
                            <i class="fa fa-sign-out"></i> Disconnect
                        </a>
                    {{else}}
                        <a id="btnConnectionList" href="#" data-toggle="modal" data-target="#connectionModal">
                            <i class="fa fa-sign-in"></i> Connect
                        </a>
                    {{/if}}
                </li>
            </ul>
        </nav>
    </div>

    <!-- MODAL Connect-->
    <div class="modal inmodal" id="connectionModal" tabindex="-1" role="dialog" aria-hidden="true"
         style="display: none;">
        <div class="modal-dialog modal-lg">
            <div class="modal-content animated bounceInRight">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                            class="sr-only">Close</span></button>
                    <i class="fa fa-laptop modal-icon"></i>
                    <h4 class="modal-title">Connections</h4>
                    <small class="font-bold">You can either connect an existing connection or create a new one.
                    </small>
                </div>
                <div class="modal-body">
                    <table id="tblConnection"
                           class="table table-striped table-bordered table-hover dataTables-example dataTable"
                           style="width: 100%">
                        <thead>
                        <tr>
                            <th>_id</th>
                            <th>Connection Name</th>
                            <th>Use Url</th>
                            <th>Use Ssl</th>
                            <th>Certificate Auth</th>
                            <th>Use Ssh</th>
                            <th>Edit</th>
                            <th>Delete</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>

                    <button id="btnCreateNewConnection" type="button" class="btn btn-block btn-outline btn-primary"
                            data-toggle="modal"
                            data-target="#addEditConnectionModal">Create New
                    </button>
                </div>
                <div class="modal-footer">
                    <div class="pull-left">
                        <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                    </div>
                    <button id="btnConnect" title="Select a connection" type="button" disabled="true"
                            class="btn btn-primary ladda-button" data-style="contract">Connect Now
                    </button>
                </div>
            </div>
        </div>
    </div>


    <!-- MODAL CREATE/EDIT Connection-->
    <div class="modal inmodal" id="addEditConnectionModal" tabindex="-1" role="dialog" aria-hidden="true"
         style="display: none;">
        <div class="modal-dialog modal-lg">
            <div class="modal-content animated bounceInRight">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                            class="sr-only">Close</span></button>
                    <h4 id="addEditConnectionModalTitle" class="modal-title">Add Connection</h4>
                    <small class="font-bold">{{getConnection.name}}
                    </small>
                </div>
                <div class="modal-body">
                    <div class="tabs-container">
                        <ul class="nav nav-tabs">
                            <li class="active"><a id="anchorTab1" data-toggle="tab" href="#tab-1-connection"
                                                  aria-expanded="true">
                                Connection</a>
                            </li>
                            <li class=""><a id="anchorTab2" data-toggle="tab" href="#tab-2-authentication"
                                            aria-expanded="false">Authentication</a>
                            </li>
                            <li class=""><a data-toggle="tab" href="#tab-3-url" aria-expanded="false">URL</a>
                            </li>
                            <li class=""><a data-toggle="tab" href="#tab-4-ssh"
                                            aria-expanded="false">SSH</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <!-- TAB 1 -->
                            <div id="tab-1-connection" class="tab-pane active">
                                <div class="panel-body no-borders modal-background">
                                    <form class="form-horizontal">
                                        <div class="form-group"><label class="col-lg-2 control-label">Connection
                                            Name</label>
                                            <div class="col-lg-10"><input id="inputConnectionName" data-required="true"
                                                                          type="text"
                                                                          placeholder="Connection Name"
                                                                          class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group"><label class="col-lg-2 control-label">Hostname</label>
                                            <div class="col-lg-10"><input id="inputHost" data-required="true"
                                                                          type="text"
                                                                          placeholder="Hostname"
                                                                          class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group"><label class="col-lg-2 control-label">Port</label>
                                            <div class="col-lg-10"><input id="inputPort" value="27017"
                                                                          data-required="true"
                                                                          min="1"
                                                                          type="number"
                                                                          placeholder="Port"
                                                                          class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group"><label class="col-lg-2 control-label">DB Name</label>
                                            <div class="col-lg-10"><input id="inputDatabaseName" data-required="true"
                                                                          type="text"
                                                                          placeholder="Database Name"
                                                                          class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group"><label class="col-lg-2 control-label">Read From
                                            SECONDARY
                                        </label>
                                            <div id="divReadFromSecondary" class="col-lg-10">
                                                <input id="inputReadFromSecondary" type="checkbox"
                                                       class="form-control"
                                                       checked=""
                                                       style="position: absolute; opacity: 0;"/>
                                                <span class="help-block m-b-none">For replica sets, legacy slaveOK=true</span>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>

                            <!-- TAB 2 -->
                            <div id="tab-2-authentication" class="tab-pane">
                                <div class="panel-body no-borders modal-background">
                                    <form class="form-horizontal">
                                        <div class="form-group">
                                            <label class="col-lg-2 control-label">Authentication Type</label>
                                            <div id="divAuthType" class="col-lg-10">
                                                <label class="radio-inline i-checks">
                                                    <input id="inputAuthStandard" type="radio"
                                                           name="authTypeInput"
                                                           class="form-control"
                                                           style="position: absolute; opacity: 0;"/>
                                                    Standard
                                                </label>
                                                <label class="radio-inline i-checks">
                                                    <input id="inputAuthCertificate" type="radio"
                                                           class="form-control"
                                                           name="authTypeInput"
                                                           checked=""
                                                           style="position: absolute; opacity: 0;"/>
                                                    Certificate
                                                </label>
                                            </div>
                                        </div>
                                    </form>

                                    <!-- STANDARD AUTH FORM-->
                                    <form id="formStandardAuth" class="form-horizontal">
                                        <div class="form-group"><label class="col-lg-2 control-label">User
                                        </label>
                                            <div class="col-lg-10"><input id="inputUser" type="text" placeholder="User"
                                                                          class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group"><label class="col-lg-2 control-label">Password
                                        </label>
                                            <div class="col-lg-10"><input id="inputPassword" type="password"
                                                                          placeholder="Password"
                                                                          class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group"><label class="col-lg-2 control-label">Authentication
                                            DB </label>
                                            <div class="col-lg-10"><input id="inputAuthenticationDB" type="text"
                                                                          placeholder="Authentication DB"
                                                                          class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group"><label class="col-lg-2 control-label">Use SSL
                                        </label>
                                            <div id="divUseSSL" class="col-lg-10">
                                                <input id="inputUseSSL" type="checkbox"
                                                       class="form-control"
                                                       checked=""
                                                       style="position: absolute; opacity: 0;"/>
                                            </div>
                                        </div>
                                    </form>

                                    <!-- CERTIFICATE AUTH FORM -->
                                    <form id="formCertificateAuth" class="form-horizontal" style="display: none;">
                                        <div class="form-group">
                                            <label class="col-lg-2 control-label">Certificate </label>
                                            <div class="col-lg-10">
                                                <div class="input-group">
                                                    <input class="form-control" type="text" id="inputCertificatePath"
                                                           disabled="true">
                                                    <input class="input-group-btn filestyle" type="file"
                                                           id="inputCertificate"
                                                           data-buttonName="btn-primary">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group"><label class="col-lg-2 control-label">PassPhrase
                                        </label>
                                            <div class="col-lg-10"><input id="inputPassPhrase" type="password"
                                                                          placeholder="PassPhrase"
                                                                          class="form-control">
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-lg-2 control-label">Certificate Key File
                                            </label>
                                            <div class="col-lg-10">
                                                <div class="input-group">
                                                    <input class="form-control" type="text"
                                                           disabled="true"
                                                           id="inputCertificateKeyPath">
                                                    <input class="input-group-btn filestyle" type="file"
                                                           id="inputCertificateKey"
                                                           data-buttonName="btn-primary">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-lg-2 control-label">ROOT CA file </label>
                                            <div class="col-lg-10">
                                                <div class="input-group">
                                                    <input class="form-control" type="text" id="inputRootCaPath"
                                                           disabled="true">
                                                    <input class="input-group-btn filestyle" type="file"
                                                           id="inputRootCa"
                                                           data-buttonName="btn-primary">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group"><label class="col-lg-2 control-label">Use x509</label>
                                            <div id="divUseX509" class="col-lg-10">
                                                <input id="inputUseX509" type="checkbox"
                                                       class="form-control"
                                                       checked=""
                                                       style="position: absolute; opacity: 0;"/>
                                            </div>
                                        </div>

                                        <div id="divX509Username" class="form-group" style="display: none">
                                            <label class="col-lg-2 control-label">x509 Username</label>
                                            <div class="col-lg-10"><input id="inputX509Username" type="text"
                                                                          placeholder="x509 Username"
                                                                          class="form-control">
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>

                            <!--TAB 3 -->
                            <div id="tab-3-url" class="tab-pane">
                                <div class="panel-body no-borders modal-background">
                                    <form class="form-horizontal">
                                        <div class="form-group"><label class="col-lg-2 control-label">Use URL</label>
                                            <div id="divUseUrl" class="col-lg-10">
                                                <input id="inputUseUrl" type="checkbox"
                                                       class="form-control"
                                                       checked=""
                                                       style="position: absolute; opacity: 0;"/>
                                                <span class="help-block m-b-none">If checked, other connection options will be ignored.</span>
                                            </div>
                                        </div>

                                        <div class="form-group"><label class="col-lg-2 control-label">Connection
                                            Name</label>
                                            <div class="col-lg-10"><input id="inputConnectionNameForUrl"
                                                                          data-required="true"
                                                                          disabled="true"
                                                                          type="text"
                                                                          placeholder="Connection Name"
                                                                          class="form-control">
                                            </div>
                                        </div>

                                        <div class="form-group"><label class="col-lg-2 control-label">URL
                                        </label>
                                            <div class="col-lg-10"><input id="inputUrl" type="text"
                                                                          disabled="true"
                                                                          placeholder="Url"
                                                                          class="form-control">
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>

                            <!-- TAB 4-->
                            <div id="tab-4-ssh" class="tab-pane">
                                <div class="panel-body no-borders modal-background">
                                    <form class="form-horizontal">
                                        <div class="form-group"><label class="col-lg-2 control-label">Use SSH
                                            Tunnel</label>
                                            <div id="divUseSsh" class="col-lg-10">
                                                <input id="inputUseSsh" type="checkbox"
                                                       class="form-control"
                                                       checked=""
                                                       style="position: absolute; opacity: 0;"/>
                                            </div>
                                        </div>
                                        <div class="form-group"><label class="col-lg-2 control-label">Hostname</label>
                                            <div class="col-lg-10"><input id="inputSshHostname"
                                                                          data-required="true"
                                                                          disabled="true"
                                                                          type="text"
                                                                          placeholder="Hostname"
                                                                          class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group"><label class="col-lg-2 control-label">Port</label>
                                            <div class="col-lg-10"><input id="inputSshPort" value="22"
                                                                          data-required="true"
                                                                          disabled="true"
                                                                          min="1"
                                                                          type="number"
                                                                          placeholder="Port"
                                                                          class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group"><label class="col-lg-2 control-label">Username</label>
                                            <div class="col-lg-10"><input id="inputSshUsername"
                                                                          data-required="true"
                                                                          disabled="true"
                                                                          type="text"
                                                                          placeholder="Username"
                                                                          class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-2 control-label">Authentication</label>
                                            <div class="col-lg-10">
                                                <select id="cmbSshAuthType"
                                                        disabled="true"
                                                        data-placeholder="Authentication type.."
                                                        class="chosen-select form-control"
                                                        tabindex="-1">
                                                    <option></option>
                                                </select>
                                            </div>
                                        </div>
                                    </form>

                                    <!-- CERTIFICATE AUTH FORM FOR SSH -->
                                    <form id="formSshCertificateAuth" class="form-horizontal" style="display: none;">
                                        <div class="form-group">
                                            <label class="col-lg-2 control-label">Certificate </label>
                                            <div class="col-lg-10">
                                                <div class="input-group">
                                                    <input class="form-control" type="text" id="inputSshCertificatePath"
                                                           disabled="true">
                                                    <input class="input-group-btn filestyle" type="file"
                                                           id="inputSshCertificate"
                                                           data-buttonName="btn-primary">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-2 control-label">PassPhrase</label>
                                            <div class="col-lg-10"><input id="inputSshPassPhrase" type="password"
                                                                          placeholder="PassPhrase"
                                                                          class="form-control">
                                            </div>
                                        </div>
                                    </form>

                                    <!-- PASSWORD AUTH FORM FOR SSH-->
                                    <form id="formSshPasswordAuth" class="form-horizontal" style="display: none;">
                                        <div class="form-group">
                                            <label class="col-lg-2 control-label">Password</label>
                                            <div class="col-lg-10"><input id="inputSshPassword" type="password"
                                                                          placeholder="Password"
                                                                          class="form-control">
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>

                        </div>

                    </div>

                </div>
                <div class="modal-footer">
                    <div class="pull-left">
                        <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                    </div>
                    <button id="btnSaveConnection" type="button" class="btn btn-primary ladda-button"
                            data-style="contract">Save changes
                    </button>
                </div>
            </div>
        </div>
    </div>


</template>