145 lines
10 KiB
HTML
145 lines
10 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="border-bottom: 1px dashed; border-color:lightgrey; 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">
|
|
<!-- <div class="pure-control-group" style="border-bottom: 1px solid gray;">New Connection Editor </div> -->
|
|
|
|
<legend class="new-connection-legend pure-input-1-2">New Connection Editor</legend>
|
|
|
|
<div class="pure-control-group">
|
|
<label id="connectionNameLabel" for="name">Name:</label>
|
|
<input bind="connectionNameInput" id="connectionName" type="text" placeholder="Enter Connection Name" value="127.0.0.1" class="pure-input-1-3" required>
|
|
</div>
|
|
|
|
<div class="pure-control-group">
|
|
<label id="databaseTypeLabel" for="databaseType">Database Type:</label>
|
|
<select name="selection" id="databaseTypeSelect" bind="databaseTypeSelect" class="pure-input-1-3" required>
|
|
<option value="postgresql">PostgreSQL</option>
|
|
<option value="mysql">MySQL</option>
|
|
<option value="mariadb">MariaDB</option>
|
|
<option value="sqlite">SQLite</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="pure-control-group">
|
|
<label id="databaseHostLabel" for="databaseHost">Database Host:</label>
|
|
<input bind="databaseHostInput" id="databaseHost" type="text" placeholder="Enter Database Host Address" value="localhost" class="pure-input-1-3" required>
|
|
</div>
|
|
|
|
<div class="pure-control-group">
|
|
<label id="databasePortLabel" for="databasePort">Database Port:</label>
|
|
<input bind="databasePortInput" id="databasePort" type="text" placeholder="Enter Database Port e.g. 3306" value="5432" class="pure-input-1-3" required>
|
|
</div>
|
|
<div class="pure-control-group">
|
|
<label id="databaseUserLabel" for="databaseUser">Database User:</label>
|
|
<input bind="databaseUserInput" id="databaseUser" type="text" placeholder="Enter Database User" value="postgres" class="pure-input-1-3" required>
|
|
</div>
|
|
<div class="pure-control-group">
|
|
<label id="databasePasswordLabel" for="databasePassword">Database Password:</label>
|
|
<input bind="databasePasswordInput" id="databasePassword" type="password" placeholder="Enter Database Password" class="pure-input-1-3" required>
|
|
</div>
|
|
<div class="pure-control-group">
|
|
<label id="databaseNameLabel" for="initialDatabase">Database Name:</label>
|
|
<input bind="initialDatabaseInput" id="initialDatabase" type="text" placeholder="Enter Database" class="pure-input-1-3" required>
|
|
</div>
|
|
<div class="pure-control-group" style="display:none;">
|
|
<label id="databaseSchemaLabel" for="initialSchema">Schema Name:</label>
|
|
<input bind="initialSchemaInput" id="initialSchema" type="text" placeholder="Enter Initial Schema" 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 -->
|
|
|