Initial commit

This commit is contained in:
2026-01-14 23:04:53 +01:00
parent 2f7d11b7d2
commit d9b4c73baa
25 changed files with 3742 additions and 30 deletions

View File

@@ -0,0 +1,122 @@
<div class="dbm-content-header">
<div class="dbm-breadcrumb">
<a href="<?php echo Config::get('URL'); ?>database/index">Databases</a>
<span class="separator">/</span>
<a href="<?php echo Config::get('URL'); ?>database/show/<?php echo urlencode($this->database_name); ?>"><?php echo htmlspecialchars($this->database_name); ?></a>
<span class="separator">/</span>
<span>New Table</span>
</div>
<div class="dbm-title">
<h1>Create New Table</h1>
</div>
</div>
<div class="dbm-content-body">
<div class="dbm-card">
<div class="dbm-card-body">
<form method="post" action="<?php echo Config::get('URL'); ?>table/create/<?php echo urlencode($this->database_name); ?>" id="create-table-form">
<div class="dbm-form-group">
<label class="dbm-form-label">Table Name</label>
<input type="text" name="table_name" class="dbm-form-input" required pattern="[a-zA-Z0-9_]+" placeholder="my_table">
</div>
<h3 style="color: var(--text-primary); margin: 24px 0 16px;">Columns</h3>
<div id="columns-container">
<div class="column-row" style="display: flex; gap: 10px; margin-bottom: 12px; padding: 16px; background: var(--bg-input); border-radius: var(--radius); flex-wrap: wrap; align-items: center;">
<input type="text" name="columns[0][name]" class="dbm-form-input" placeholder="Column name" required style="width: 150px; max-width: 150px;">
<select name="columns[0][type]" class="dbm-form-select" style="width: 140px; max-width: 140px;">
<option value="INT">INT</option>
<option value="VARCHAR(255)">VARCHAR(255)</option>
<option value="TEXT">TEXT</option>
<option value="DATETIME">DATETIME</option>
<option value="TIMESTAMP">TIMESTAMP</option>
<option value="DECIMAL(10,2)">DECIMAL(10,2)</option>
<option value="BOOLEAN">BOOLEAN</option>
</select>
<select name="columns[0][null]" class="dbm-form-select" style="width: 100px; max-width: 100px;">
<option value="YES">NULL</option>
<option value="NO">NOT NULL</option>
</select>
<select name="columns[0][key]" class="dbm-form-select" style="width: 130px; max-width: 130px;">
<option value="">No Key</option>
<option value="PRI">PRIMARY KEY</option>
</select>
<input type="text" name="columns[0][default]" class="dbm-form-input" placeholder="Default" style="width: 100px; max-width: 100px;">
<select name="columns[0][extra]" class="dbm-form-select" style="width: 140px; max-width: 140px;">
<option value="">None</option>
<option value="auto_increment">AUTO_INCREMENT</option>
</select>
<button type="button" class="dbm-btn dbm-btn-sm dbm-btn-danger remove-column" style="display: none;">Remove</button>
</div>
</div>
<button type="button" id="add-column" class="dbm-btn dbm-btn-secondary" style="margin-top: 8px;">
<i data-lucide="plus"></i>
Add Column
</button>
<div style="margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border-color);">
<button type="submit" name="submit_create_table" class="dbm-btn dbm-btn-success">
<i data-lucide="check-circle"></i>
Create Table
</button>
<a href="<?php echo Config::get('URL'); ?>database/show/<?php echo urlencode($this->database_name); ?>" class="dbm-btn dbm-btn-secondary">Cancel</a>
</div>
</form>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
let columnIndex = 1;
document.getElementById('add-column').addEventListener('click', function() {
const container = document.getElementById('columns-container');
const newRow = document.createElement('div');
newRow.className = 'column-row';
newRow.style.cssText = 'display: flex; gap: 10px; margin-bottom: 12px; padding: 16px; background: var(--bg-input); border-radius: var(--radius); flex-wrap: wrap; align-items: center;';
newRow.innerHTML = `
<input type="text" name="columns[${columnIndex}][name]" class="dbm-form-input" placeholder="Column name" required style="width: 150px; max-width: 150px;">
<select name="columns[${columnIndex}][type]" class="dbm-form-select" style="width: 140px; max-width: 140px;">
<option value="INT">INT</option>
<option value="VARCHAR(255)">VARCHAR(255)</option>
<option value="TEXT">TEXT</option>
<option value="DATETIME">DATETIME</option>
<option value="TIMESTAMP">TIMESTAMP</option>
<option value="DECIMAL(10,2)">DECIMAL(10,2)</option>
<option value="BOOLEAN">BOOLEAN</option>
</select>
<select name="columns[${columnIndex}][null]" class="dbm-form-select" style="width: 100px; max-width: 100px;">
<option value="YES">NULL</option>
<option value="NO">NOT NULL</option>
</select>
<select name="columns[${columnIndex}][key]" class="dbm-form-select" style="width: 130px; max-width: 130px;">
<option value="">No Key</option>
<option value="PRI">PRIMARY KEY</option>
</select>
<input type="text" name="columns[${columnIndex}][default]" class="dbm-form-input" placeholder="Default" style="width: 100px; max-width: 100px;">
<select name="columns[${columnIndex}][extra]" class="dbm-form-select" style="width: 140px; max-width: 140px;">
<option value="">None</option>
<option value="auto_increment">AUTO_INCREMENT</option>
</select>
<button type="button" class="dbm-btn dbm-btn-sm dbm-btn-danger remove-column">Remove</button>
`;
container.appendChild(newRow);
columnIndex++;
document.querySelectorAll('.remove-column').forEach(btn => btn.style.display = 'inline-flex');
});
document.getElementById('columns-container').addEventListener('click', function(e) {
if (e.target.classList.contains('remove-column')) {
e.target.closest('.column-row').remove();
const rows = document.querySelectorAll('.column-row');
if (rows.length === 1) {
rows[0].querySelector('.remove-column').style.display = 'none';
}
}
});
});
</script>