5746951ec0
* Add i18n for database importer name - fixes #3213 * Clean up database config list styling - use full width of panel so that the heading doesn't get truncated (NOTE: Heading should really be outside the list, not in it) - use the same color as the rest of the UI for the border * One more border color definition This should really be an override rather than hacking on the pure.less file, but since that's how it was done originally, that's where we'll fix it for now. * Get rid of weird grey dashed bottom border
142 lines
9.9 KiB
HTML
142 lines
9.9 KiB
HTML
<div bind="databasePanel" class="database-container">
|
|
|
|
<div id = "databaseLayoutDiv" class="grid-layout layout-div">
|
|
|
|
<div class="pure-g">
|
|
<div class="pure-u-1-5">
|
|
<div class="pure-u-1"><button type="button" id="newConnectionButtonDiv" bind="newConnectionButton" class="pure-button pure-button-primary">New Connection</button></div>
|
|
<div class="pure-u-1-2" style="margin-top:1px; padding-right:1px;"></div>
|
|
<div class="pure-u-1 sidebarDiv" bind="sidebarDiv">
|
|
|
|
<div class="pure-menu pure-menu-scrollable custom-restricted">
|
|
<span class="pure-menu-heading" id="savedConnectionSpan">Saved Connections</span>
|
|
<ul class="pure-menu-list" bind="menuListUl" id="menuListUl"></ul>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="connection-div-layout pure-u-4-5">
|
|
|
|
<div id = "newConnectionDiv" class="new-connection-div " bind="newConnectionDiv">
|
|
|
|
<!-- <div class="panel panel-info"> -->
|
|
<form class="pure-form pure-form-aligned">
|
|
<fieldset class="new-connection-fieldset">
|
|
<legend class="new-connection-legend pure-input-1-2" id="new-connection-legend"></legend>
|
|
|
|
<div class="pure-control-group">
|
|
<label id="connectionNameLabel" for="name"></label>
|
|
<input bind="connectionNameInput" id="connectionName" type="text" placeholder="" value="" class="pure-input-1-3" required>
|
|
</div>
|
|
|
|
<div class="pure-control-group">
|
|
<label id="databaseTypeLabel" for="databaseType"></label>
|
|
<select name="selection" id="databaseTypeSelect" bind="databaseTypeSelect" class="pure-input-1-3" required>
|
|
<option value="postgresql">PostgreSQL</option>
|
|
<option value="mysql" selected="selected">MySQL</option>
|
|
<option value="mariadb">MariaDB</option>
|
|
<option value="sqlite">SQLite</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="pure-control-group dbtype-options dbt-postgresql dbt-mysql dbt-mariadb">
|
|
<label id="databaseHostLabel" for="databaseHost"></label>
|
|
<input bind="databaseHostInput" id="databaseHost" type="text" placeholder="" value="localhost" class="pure-input-1-3" required>
|
|
</div>
|
|
<div class="pure-control-group dbtype-options dbt-postgresql dbt-mysql dbt-mariadb">
|
|
<label id="databasePortLabel" for="databasePort"></label>
|
|
<input bind="databasePortInput" id="databasePort" type="text" placeholder="" value="5432" class="pure-input-1-3" required>
|
|
</div>
|
|
<div class="pure-control-group dbtype-options dbt-postgresql dbt-mysql dbt-mariadb">
|
|
<label id="databaseUserLabel" for="databaseUser"></label>
|
|
<input bind="databaseUserInput" id="databaseUser" type="text" placeholder="" value="postgres" class="pure-input-1-3" required>
|
|
</div>
|
|
<div class="pure-control-group dbtype-options dbt-postgresql dbt-mysql dbt-mariadb">
|
|
<label id="databasePasswordLabel" for="databasePassword"></label>
|
|
<input bind="databasePasswordInput" id="databasePassword" type="password" placeholder="" class="pure-input-1-3" required>
|
|
</div>
|
|
<div class="pure-control-group dbtype-options dbt-postgresql dbt-mysql dbt-mariadb dbt-sqlite">
|
|
<label id="databaseNameLabel" for="initialDatabase"></label>
|
|
<input bind="initialDatabaseInput" id="initialDatabase" type="text" placeholder="" class="pure-input-1-3" required>
|
|
</div>
|
|
<div class="pure-control-group dbtype-options">
|
|
<label id="databaseSchemaLabel" for="initialSchema"></label>
|
|
<input bind="initialSchemaInput" id="initialSchema" type="text" placeholder="" class="pure-input-1-3" required>
|
|
</div>
|
|
|
|
<div class="pure-controls" id="newConnectionControlDiv">
|
|
<button type="button" id="databaseTestButton" bind="testDatabaseButton" class="pure-button pure-button-primary"><span>Test</span></button>
|
|
<button type="button" id="databaseSaveButton" bind="saveConnectionButton" class="button-success pure-button">Save</button>
|
|
<button type="button" id="databaseConnectButton" bind="databaseConnectButton" class="button-secondary pure-button">Connect</button>
|
|
</div>
|
|
|
|
<div class="pure-controls" id="editConnectionControlDiv" style="display: none;">
|
|
<button type="button" id="connectionEditButton" bind="editConnectionButton" class="pure-button pure-button-primary"><span>Edit</span></button>
|
|
<button type="button" id="connectionEditCancelButton" bind="cancelEditConnectionButton" class="pure-button">Cancel</button>
|
|
|
|
</div>
|
|
|
|
</fieldset>
|
|
</form>
|
|
|
|
|
|
<!-- </div> --> <!--End Panel Div -->
|
|
|
|
|
|
</div><!--End NewConnectionDiv -->
|
|
|
|
<div class="sql-editor-div grid-layout" bind="sqlEditorDiv" id="sqlEditorDiv" style="display: none;" >
|
|
|
|
<form class="pure-form pure-form-stacked">
|
|
<input type="hidden" id="currentConnectionNameInput" name="currentConnectionName">
|
|
<input type="hidden" id="currentDatabaseTypeInput" name="currentDatabaseType">
|
|
<input type="hidden" id="currentDatabaseUserInput" name="currentDatabaseUser">
|
|
<input type="hidden" id="currentDatabasePasswordInput" name="currentDatabasePassword">
|
|
<input type="hidden" id="currentDatabaseHostInput" name="currentDatabaseHost">
|
|
<input type="hidden" id="currentDatabasePortInput" name="currentDatabasePort">
|
|
<input type="hidden" id="currentInitialDatabaseInput" name="currentInitialDatabase">
|
|
|
|
<div class="panel panel-info pure-input-3-4">
|
|
<div class="panel-heading">Query Editor </div>
|
|
<div class="panel-body">
|
|
<fieldset style="padding:2px; margin-top:5px;">
|
|
<textarea id="queryTextArea" bind="queryTextArea" class="pure-input-1 no-resize" placeholder="Enter your query" rows="10" >SELECT * FROM</textarea>
|
|
</fieldset>
|
|
<div class="alert alert-info" id="connectionParameterSpan"></div>
|
|
<!-- <select name="querySelect" id="queryHistorySelect" bind="queryHistorySelect" class="pure-input-1" style="padding-bottom:2px;">
|
|
<option value="1">Query History</option>
|
|
</select> -->
|
|
</div>
|
|
|
|
<div class="panel-footer">
|
|
<div class="pure-controls pure-input-1-2">
|
|
<button type="button" id="executeQueryBtn" bind="executeQueryButton" class="button-secondary pure-button">Preview Query Result</button>
|
|
<!-- <button type="button" bind="saveQueryButton" class="button-success pure-button">Save Query</button> -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--
|
|
<div class="panel panel-info pure-input-1-2">
|
|
<div class="panel-heading">Saved Queries</div>
|
|
<div class="panel-body">
|
|
<div class="queryResultDiv pure-input-1 scrollable" bind="queryResultDiv" id="queryResultDiv" style="<!padding:2px; margin-top:5px;"> </div>
|
|
</div>
|
|
|
|
</div>
|
|
-->
|
|
</form>
|
|
|
|
</div><!-- End Sql Editor Div-->
|
|
|
|
</div>
|
|
|
|
</div> <!-- End pure-g -->
|
|
|
|
</div> <!-- End databaseLayoutDiv -->
|
|
|
|
|
|
</div><!-- End databaseContainer -->
|
|
|