Skip to content

Commit

Permalink
styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@gusalbukrk
gusalbukrk committed Feb 27, 2023
1 parent 154ebd2 commit c90d9ec
Show file tree
Hide file tree
Showing 9 changed files with 269 additions and 271 deletions.
28 changes: 24 additions & 4 deletions www/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,30 @@ header #user {
font-size: .8rem !important;
}

.max-w-250 {
max-width: 250px;
}

.max-w-350 {
max-width: 350px;
}

.fs-1dot125 { /* halfway between bootstrap's fs-5 (1.25rem) and fs-6 (1rem) */
font-size: 1.125rem;
}

.bg-lighter-blue {
background-color: rgba(13, 110, 253, .3); /* bootstrap's --bs-link-color (#0d6efd) */
}

.text-orange {
color: #fd7e14; /* bootstrap's --bs-orange */
}

.fs-dot9 {
font-size: .9rem;
}

.text-dark-gray {
color: #32393f;
}

.border-width-2 {
border-width: 2px;
}
154 changes: 72 additions & 82 deletions www/views/Table/databases.php
View file
Original file line number Diff line number Diff line change
@@ -1,89 +1,79 @@
<?php if (!isset($_SESSION["user"])) : ?>
<h4>Login or sign up to create tables</h4>
<h2 class="fs-4 mb-5">
<?php $username = explode("@", $_SESSION["user"])[0]; ?>
<span class="p-1 me-1 bg-lighter-blue"><?= $username ?></span>'<?= substr($username, -1) === "s" ? "" : "s" ?> databases
</h2>
<?php if (empty($dbs)) : ?>
<p class="fw-bold mb-5">No databases found.</p>
<?php else : ?>
<h4 class="mb-4 text-uppercase">Databases</h4>
<?php if ($dbs) : ?>
<table id="dbs" class="table table-hover table-borderless container m-0 max-w-350 mb-3">
<thead>
<tr class="row mx-0">
<th class="col-2"></th>
<th class="col-3">Name</th>
<th class="col-3">Role</th>
<th class="col-2"></th>
<th class="col-2"></th>
</tr>
</thead>
<tbody>
<?php foreach ($dbs as $db => $role) : ?>
<tr class="row mx-0">
<td class="col-2">
<a href="https://<?= $db ?>.simpletables.xyz">
<i class="fa-solid fa-up-right-from-square"></i>
</a>
</td>
<td class="col-3">
<form class="me-2" method="post">
<input type="hidden" name="db" value="<?= $db ?>">
<input type="hidden" name="role" value="<?= $role->name ?>">
<input class="w-100 border-0 bg-transparent text-dark" type="text" name="new_name" value="<?= $db ?>" disabled>
<input type="hidden" name="action" value="rename">
</form>
</td>
<td class="col-3"><?= strtolower($role->name) ?></td>
<td class="col-2">
<button class="btn m-0 p-0 border-0" name="action" value="rename" <?php if ($role->name !== "Admin") echo "hidden"; ?>>
<i class="fa-solid fa-pen-to-square"></i>
<table id="dbs" class="table table-hover container mb-5">
<thead>
<tr class="row g-0">
<th class="col"></th>
<th class="col">Name</th>
<th class="col">Role</th>
</tr>
</thead>
<tbody>
<?php foreach ($dbs as $db => $role) : ?>
<tr class="row g-0">
<td class="col d-flex justify-content-center align-items-center">
<a href="https://<?= $db ?>.simpletables.xyz" class="me-3">
<i class="fa-solid fa-up-right-from-square fs-1dot125"></i>
</a>
<button class="btn p-0 me-3 border-0" name="action" value="rename" <?php if ($role->name !== "Admin") echo "hidden"; ?>>
<i class="fa-solid fa-pen-to-square text-orange fs-1dot125"></i>
</button>
<form method="post">
<input type="hidden" name="db" value="<?= $db ?>">
<input type="hidden" name="role" value="<?= $role->name ?>">
<button class="btn m-0 p-0 border-0" name="action" value="delete" <?php if ($role->name !== "Admin") echo "hidden"; ?>>
<i class="fa-solid fa-trash text-danger fs-1dot125"></i>
</button>
</td>
<td class="col-2 text-center">
<form method="post">
<input type="hidden" name="db" value="<?= $db ?>">
<input type="hidden" name="role" value="<?= $role->name ?>">
<button class="btn m-0 p-0 border-0" name="action" value="delete" <?php if ($role->name !== "Admin") echo "hidden"; ?>>
<i class="fa-solid fa-trash text-danger"></i>
</button>
</form>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<script>
// iterate through every row of the table used to list the databases
// in order to add the following event: when one of the rename buttons is clicked,
// focus and select the database name input of that respective row
(function() {
const tbody = document.querySelector('table#dbs tbody');

for (let i = 1; i <= tbody.children.length; i++) {
const row = tbody.querySelector(`tr:nth-child(${i})`);

const input = row.querySelector('td:nth-child(2) input[name="new_name"]');
const button = row.querySelector('td:nth-child(4) button[value="rename"]');
</form>
</td>
<td class="col">
<form class="me-2" method="post">
<input type="hidden" name="db" value="<?= $db ?>">
<input type="hidden" name="role" value="<?= $role->name ?>">
<input class="w-100 border-0 bg-transparent text-dark" type="text" name="new_name" value="<?= $db ?>" disabled>
<input type="hidden" name="action" value="rename">
</form>
</td>
<td class="col"><?= strtolower($role->name) ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<script>
// iterate through every row of the table used to list the databases
// in order to add the following event: when one of the rename buttons is clicked,
// focus on the database name input of that respective row
document.querySelectorAll('table#dbs tbody tr').forEach(row => {
const button = row.querySelector('td:nth-child(1) button[value="rename"]');
const input = row.querySelector('td:nth-child(2) input[name="new_name"]');

const inputValueBak = input.value;
const inputValueBak = input.value;

button.addEventListener('click', e => {
input.removeAttribute('disabled');
input.focus();
input.select();
});
button.addEventListener('click', e => {
input.removeAttribute('disabled');
input.focus();
input.select();
});

// additionally, handle input focusout
input.addEventListener('focusout', e => {
input.setAttribute('disabled', '');
// handle input focusout
input.addEventListener('focusout', e => {
input.setAttribute('disabled', '');

// if focusout, form wasn't submitted; therefore, name hasn't changed
input.value = inputValueBak;
});
}
})()
</script>
<?php else : ?>
<p class="fw-bold mb-3">No databases found.</p>
<?php endif; ?>
<form class="max-w-350 d-flex" method="post">
<input class="form-control-sm flex-fill me-3 border-dark border-opacity-75 rounded" type="text" name="db" style="padding: 3px" pattern="\w+" required>
<input class="btn btn-primary flex-fill btn-sm fw-bold" type="submit" name="action" value="create">
</form>
// if focusout, form wasn't submitted; therefore, name hasn't changed
input.value = inputValueBak;
});
})
</script>
<?php endif; ?>
<form class="max-w-350" method="post">
<div class="mb-3">
<label for="dbNameInput" class="form-label fs-dot9 fw-bold text-dark-gray">Database name</label>
<input type="text" id="dbNameInput" name="db" class="form-control border-dark border-opacity-50 border-width-2" pattern="\w+" required>
</div>
<input class="btn btn-success fw-bold" type="submit" name="action" value="create">
</form>
164 changes: 78 additions & 86 deletions www/views/Table/records.php
View file
Original file line number Diff line number Diff line change
@@ -1,100 +1,92 @@
<h2>Records</h2>
<h2 class="fs-4 mb-5">
<a href="https://<?= $db ?>.simpletables.xyz" class="me-3"><i class="fa-solid fa-circle-arrow-left fs-3"></i></a>
<span class="p-1 me-1 bg-lighter-blue"><?= "$db / $table" ?></span>'<?= substr($table, -1) === "s" ? "" : "s" ?> records
</h2>
<?php if (!$db_exists) : ?>
<h4>Database not found.</h4>
<p class="fw-bold">Database doesn't exist.</p>
<?php elseif (!$table_exists) : ?>
<h4>Table not found on database.</h4>
<p class="fw-bold">Table doesn't exist.</p>
<?php else : ?>
<?php if (empty($records)) : ?>
<h4>No records found.</h4>
<?php endif; ?>
<?php
$types = ["char" => "text", "varchar" => "text", "int" => "number",];
<p class="fw-bold mb-5">No records found.</p>
<?php else : ?>
<?php
$types = ["char" => "text", "varchar" => "text", "int" => "number",];

$pk_name = current(array_filter($schema, function ($column) {
return $column["Key"] === "PRI";
}))["Field"];
?>
<table id="records" class="table">
<thead>
<tr>
<th></th>
<?php foreach ($schema as $column) : ?>
<th class="text-capitalize"><?= $column["Field"] ?></th>
<?php endforeach; ?>
</tr>
</thead>
<tbody>
<?php foreach ($records as $index => $record) : ?>
<tr>
<td class="text-center">
<!-- form can be placed inside td but not inside table or tr; because a form per row
is needed, form attribute will be used to associate inputs w/ form -->
<form id="<?= "record-{$index}" ?>" method="post">
<input type="hidden" name="db" value="<?= $db ?>">
<input type="hidden" name="table" value="<?= $table ?>">
<input type="hidden" name="pkName" value="<?= $pk_name ?>">
<?php foreach ($record as $name => $value) : ?>
<input type="hidden" name="record[<?= $name ?>]" value="<?= $value ?>">
<?php endforeach; ?>
</form>
<!-- if form has multiple buttons/submit inputs, the first button is the one triggered
when the enter key is pressed -->
<input type="submit" form="<?= "record-{$index}" ?>" name="action" value="update" hidden>
<button form="<?= "record-{$index}" ?>" name="action" value="delete">
<i class="fa-solid fa-trash text-danger"></i>
</button>
<button class="updateButton">
<i class="fa-solid fa-pen-to-square"></i>
</button>
</td>
<?php foreach ($record as $name => $value) : ?>
<td>
<input type="<?= $types[preg_replace("/\(\d+\)$/", "", current(array_filter($schema, function ($column) use ($name) {
return $column["Field"] === $name;
}))["Type"])] ?>" form="<?= "record-{$index}" ?>" name="inputs[<?= $name ?>]" value="<?= $value ?>" class="border-0" readonly>
</td>
$pk_name = current(array_filter($schema, function ($column) {
return $column["Key"] === "PRI";
}))["Field"];
?>
<table id="records" class="table table-hover mb-5">
<thead>
<tr class="row g-0">
<th class="col"></th>
<?php foreach ($schema as $column) : ?>
<th class="col text-capitalize"><?= $column["Field"] ?></th>
<?php endforeach; ?>
</tr>
<?php endforeach; ?>
<!-- last row of the table (which is hidden by default) contains the form to add new record -->
<tr id="newRow" class="d-none">
<td>
<form id="createForm" method="post">
<input type="hidden" name="db" value="<?= $db ?>">
<input type="hidden" name="table" value="<?= $table ?>">
<input type="submit" hidden name="action" value="create">
</form>
</td>
<?php foreach ($schema as $column) : ?>
<td>
<input type="<?= $types[preg_replace("/\(\d+\)$/", "", $column["Type"])] ?>" name="record[<?= $column["Field"] ?>]" form="createForm">
</td>
</thead>
<tbody>
<?php foreach ($records as $index => $record) : ?>
<tr class="row g-0">
<td class="col d-flex justify-content-center align-items-center">
<!-- form can be placed inside td but not inside table or tr; because a form per row
is needed, form attribute will be used to associate inputs w/ form -->
<form id="<?= "record-{$index}" ?>" method="post">
<input type="hidden" name="db" value="<?= $db ?>">
<input type="hidden" name="table" value="<?= $table ?>">
<input type="hidden" name="pkName" value="<?= $pk_name ?>">
<?php foreach ($record as $name => $value) : ?>
<input type="hidden" name="record[<?= $name ?>]" value="<?= $value ?>">
<?php endforeach; ?>
<!-- if form has multiple buttons/submit inputs, the first button
is the one triggered when the enter key is pressed -->
<input type="submit" form="<?= "record-{$index}" ?>" name="action" value="update" hidden>
</form>
<button class="updateButton btn p-0 me-3"><i class="fa-solid fa-pen-to-square text-orange fs-1dot125"></i></button>
<button form="<?= "record-{$index}" ?>" class="btn p-0" name="action" value="delete">
<i class="fa-solid fa-trash text-danger fs-1dot125"></i>
</button>
</td>
<?php foreach ($record as $name => $value) : ?>
<td class="col">
<input type="<?= $types[preg_replace("/\(\d+\)$/", "", current(array_filter($schema, function ($column) use ($name) {
return $column["Field"] === $name;
}))["Type"])] ?>" form="<?= "record-{$index}" ?>" name="inputs[<?= $name ?>]" value="<?= $value ?>" class="border-0 w-100 bg-transparent text-dark" disabled>
</td>
<?php endforeach; ?>
</tr>
<?php endforeach; ?>
</tr>
</tbody>
</table>
<button id="addRecord" class="btn btn-primary">Add</button>
</tbody>
</table>
<?php endif; ?>
<form class="max-w-350" method="post">
<input type="hidden" name="db" value="<?= $db ?>">
<input type="hidden" name="table" value="<?= $table ?>">
<?php foreach ($schema as $column) : ?>
<div class="mb-3">
<label for="<?= $column["Field"] ?>Input" class="form-label fs-dot9 fw-bold text-dark-gray"><?= ucfirst($column["Field"]) ?></label>
<input id="<?= $column["Field"] ?>Input" type="<?= $types[preg_replace("/\(\d+\)$/", "", $column["Type"])] ?>" name="record[<?= $column["Field"] ?>]" class="form-control border-dark border-opacity-50 border-width-2">
</div>
<?php endforeach; ?>
<input class="btn btn-success fw-bold" type="submit" name="action" value="create">
</form>
<script>
const addRecordBtn = document.querySelector('button#addRecord');
const newRow = document.querySelector('tr#newRow');
//
addRecordBtn.addEventListener('click', e => {
addRecordBtn.disabled = true; // only one row can be added at a time
newRow.classList.remove('d-none');
});
// iterate through every row of the table used to list the records
// in order to add the following event: when one of the rename buttons is clicked,
// focus on the first input of that respective row
document.querySelectorAll('table#records tbody tr').forEach(row => {
// get all inputs inside row, ignoring first column because it only contains action buttons
const inputs = row.querySelectorAll('td:not(:first-child) input');

const updateButtons = document.querySelectorAll('button.updateButton');
//
updateButtons.forEach(btn => {
btn.addEventListener('click', e => {
// array containing all the cells of the row
// except the first one, which contains the action buttons
const tds = Array.prototype.slice.call(e.currentTarget.parentElement.parentElement.children, 1);

tds.forEach(td => {
td.querySelector('input').readOnly = false;
row.querySelector('td:nth-child(1) button.updateButton').addEventListener('click', e => {
inputs.forEach(input => {
input.disabled = false;
});

inputs[0].focus();
inputs[0].select();
});
});
})
</script>
<?php endif; ?>
Loading

0 comments on commit c90d9ec

Please sign in to comment.