HTML fixes

main
Yasen Pramatarov 2024-08-07 11:13:55 +03:00
parent 15c97859a4
commit 838b8ea9f2
12 changed files with 188 additions and 178 deletions

View File

@ -145,12 +145,15 @@
}
.sidebar-content {
width: 250px;
border: none;
}
.main-content {
transition: width: 0.5s ease;
width: 80%; /* 75% */
}
.main-content.expanded {
width: 95%; /* none */
}
.logo {
@ -164,3 +167,7 @@
margin-left: 2px;
background-color: lightseagreen;
}
.sidebar-content a {
text-decoration: none;
}

View File

@ -1,12 +1,7 @@
<?php if (isset($error)) { ?>
<div class="error">
<?php echo $error; ?>
</div>
<div class="error"><?php echo $error; ?></div>
<?php } ?>
<?php if (isset($notice)) { ?>
<div class="notice">
<?php echo $notice; ?>
</div>
<div class="notice"><?php echo $notice; ?></div>
<?php } ?>

View File

@ -1,38 +1,29 @@
<div class="card w-auto bg-light border-light card-body text-right" style="text-align: right;">
<form method="POST" id="filter_form" action="?page=<?= $page ?>">
<label for="from_time">from</label>
<input type="date" id="from_time" name="from_time"<?php if (isset($_REQUEST['from_time'])) echo " value=\"" . $_REQUEST['from_time'] . "\"" ?> />
<label for="until_time">until</label>
<input type="date" id="until_time" name="until_time"<?php if (isset($_REQUEST['until_time'])) echo " value=\"" . $_REQUEST['until_time'] . "\"" ?> />
<input type="text" name="id" placeholder="ID"<?php if (isset($_REQUEST['id'])) echo " value=\"" . $_REQUEST['id'] . "\"" ?> />
<input type="text" name="name" placeholder="name"<?php if (isset($_REQUEST['name'])) echo " value=\"" . $_REQUEST['name'] . "\"" ?> />
<!-- Results filter -->
<div class="card w-auto bg-light border-light card-body text-right" style="text-align: right;">
<form method="POST" id="filter_form" action="?page=<?= $page ?>">
<label for="from_time">from</label>
<input type="date" id="from_time" name="from_time"<?php if (isset($_REQUEST['from_time'])) echo " value=\"" . $_REQUEST['from_time'] . "\"" ?> />
<label for="until_time">until</label>
<input type="date" id="until_time" name="until_time"<?php if (isset($_REQUEST['until_time'])) echo " value=\"" . $_REQUEST['until_time'] . "\"" ?> />
<input type="text" name="id" placeholder="ID"<?php if (isset($_REQUEST['id'])) echo " value=\"" . $_REQUEST['id'] . "\"" ?> />
<input type="text" name="name" placeholder="name"<?php if (isset($_REQUEST['name'])) echo " value=\"" . $_REQUEST['name'] . "\"" ?> />
<?php if ($page == 'participants') { ?>
<input type="text" name="ip" placeholder="ip address"<?php if (isset($_REQUEST['ip'])) echo " value=\"" . $_REQUEST['ip'] . "\"" ?> maxlength="15" size="15" />
<input type="text" name="ip" placeholder="ip address"<?php if (isset($_REQUEST['ip'])) echo " value=\"" . $_REQUEST['ip'] . "\"" ?> maxlength="15" size="15" />
<?php } ?>
<input type="button" onclick="clearFilter()" value="clear" />
<input type="submit" value="search" />
</form>
<script>
function clearFilter() {
document.getElementById("filter_form").reset();
const filterFields = document.querySelectorAll("#filter_form input");
filterFields.forEach(input => {
if (input.type === 'text' ||input.type === 'date') {
input.value = '';
}
});
}
</script>
</div>
<input type="button" onclick="clearFilter()" value="clear" />
<input type="submit" value="search" />
</form>
<script>
function clearFilter() {
document.getElementById("filter_form").reset();
const filterFields = document.querySelectorAll("#filter_form input");
filterFields.forEach(input => {
if (input.type === 'text' ||input.type === 'date') {
input.value = '';
}
});
}
</script>
</div>
<!-- /Results filter -->

View File

@ -1,22 +1,20 @@
<div class="card text-center w-50 mx-auto">
<h2 class="card-header">Login</h2>
<div class="card-body">
<p class="card-text"><strong>Welcome to JILO!</strong><br />Please enter login credentials:</p>
<form method="POST" action="?page=login">
<input type="text" name="username" placeholder="Username" required />
<br />
<input type="password" name="password" placeholder="Password" required />
<br />
<label for="remember_me">
<input type="checkbox" id="remember_me" name="remember_me" />
remember me
</label>
<br />&nbsp;<br />
<input type="submit" class="btn btn-primary" value="Login" />
</form>
<!-- login form -->
<div class="card text-center w-50 mx-auto">
<h2 class="card-header">Login</h2>
<div class="card-body">
<p class="card-text"><strong>Welcome to JILO!</strong><br />Please enter login credentials:</p>
<form method="POST" action="?page=login">
<input type="text" name="username" placeholder="Username" required />
<br />
<input type="password" name="password" placeholder="Password" required />
<br />
<label for="remember_me">
<input type="checkbox" id="remember_me" name="remember_me" />
remember me
</label>
<br />&nbsp;<br />
<input type="submit" class="btn btn-primary" value="Login" />
</form>
</div>
</div>
</div>
<!-- /login form -->

View File

@ -1,17 +1,15 @@
<div class="card text-center w-50 mx-auto">
<h2 class="card-header">Register</h2>
<div class="card-body">
<p class="card-text">Enter credentials for registration:</p>
<form method="POST" action="?page=register">
<input type="text" name="username" placeholder="Username" required />
<br />
<input type="password" name="password" placeholder="Password" required />
<br />&nbsp;<br />
<input type="submit" class="btn btn-primary" value="Register" />
</form>
<!-- registration form -->
<div class="card text-center w-50 mx-auto">
<h2 class="card-header">Register</h2>
<div class="card-body">
<p class="card-text">Enter credentials for registration:</p>
<form method="POST" action="?page=register">
<input type="text" name="username" placeholder="Username" required />
<br />
<input type="password" name="password" placeholder="Password" required />
<br />&nbsp;<br />
<input type="submit" class="btn btn-primary" value="Register" />
</form>
</div>
</div>
</div>
<!-- /registration form -->

View File

@ -1,7 +1,11 @@
<?php if ($page !== 'login' && $page !== 'register') { ?>
<!-- /Main content -->
</div>
</div>
<?php } ?>
<!-- Footer -->
<div id="footer">Jilo Web <?= $config['version'] ?> &copy;2024 - web interface for <a href="https://lindeas.com/jilo">Jilo</a></div>
<!-- /Footer -->
@ -9,6 +13,7 @@
</div>
<script src="static/sidebar.js"></script>
</body>
</html>

View File

@ -8,11 +8,16 @@
</div>
</div>
<li class="font-weight-light text-uppercase" style="font-size: 0.5em; color: whitesmoke; margin-right: 70px; align-content: center;">version&nbsp;<?php echo $config['version']; ?></li>
<?php if ( isset($_SESSION['username']) ) { ?>
<li><a href="?page=config">config</a></li>
<!--li><a href="?page=config">config</a></li>
<li><a href="?page=conferences">conferences</a></li>
<li><a href="?page=participants">participants</a></li>
<li><a href="?page=components">components</a></li>
<li><a href="?page=components">components</a></li-->
<li><a href="?page=participants">meet.example.com</a></li>
<?php } ?>
</ul>

View File

@ -2,22 +2,32 @@
<!-- Sidebar -->
<div class="col-md-3 sidebar-wrapper bg-light" id="sidebar">
<!--button class="btn btn-secondary" type="button" id="toggleSidebarButton">
sidebar
</button-->
<div class="col-4"><button class="btn btn-sm btn-info toggle-sidebar-button" type="button" id="toggleSidebarButton" value=">>"></button></div>
<div class="col-4"><button class="btn btn-sm btn-info toggle-sidebar-button" type="button" id="toggleSidebarButton" value=">>"></button></div>
<div class="sidebar-content card ml-3 mt-3">
<ul class="list-group list-group-flush">
<li class="list-group-item"><a href="#">stats</a></li>
<li class="list-group-item"><a href="#">config</a></li>
<li class="list-group-item"><a href="?page=logs">logs</a></li>
<ul class="list-group">
<a href="?page=front">
<li class="list-group-item<?php if ($page === 'front') echo ' list-group-item-secondary'; else echo ' list-group-item-action'; ?>">general stats</li>
</a>
<a href="?page=conferences">
<li class="list-group-item<?php if ($page === 'conferences') echo ' list-group-item-secondary'; else echo ' list-group-item-action'; ?>">conferences</li>
</a>
<a href="?page=participants">
<li class="list-group-item<?php if ($page === 'participants') echo ' list-group-item-secondary'; else echo ' list-group-item-action'; ?>">participants</li>
</a>
<a href="?page=components">
<li class="list-group-item<?php if ($page === 'components') echo ' list-group-item-secondary'; else echo ' list-group-item-action'; ?>">components</li>
</a>
<li class="list-group-item bg-light" style="border-left: none; border-right: none;"></li>
<a href="?page=config">
<li class="list-group-item<?php if ($page === 'config') echo ' list-group-item-secondary'; else echo ' list-group-item-action'; ?>">config</li>
</a>
<a href="?page=logs">
<li class="list-group-item<?php if ($page === 'logs') echo ' list-group-item-secondary'; else echo ' list-group-item-action'; ?>">logs</li>
</a>
</ul>
</div>
</div>
<!-- /Sidebar -->
<div class="col-md-9 main-content" id="mainContent">
<!-- Main content -->
<div class="col-md-9 main-content" id="mainContent">

View File

@ -1,12 +1,11 @@
<div>
<p>Jilo web configuration</p>
<ul>
<!-- widget "config" -->
<div>
<p>Jilo web configuration</p>
<ul>
<?php foreach ($config as $config_item=>$config_value) { ?>
<li><?php echo htmlspecialchars($config_item) . ': ' . htmlspecialchars($config_value ?? ''); ?></li>
<li><?php echo htmlspecialchars($config_item) . ': ' . htmlspecialchars($config_value ?? ''); ?></li>
<?php } ?>
</ul>
</div>
</ul>
</div>
<!-- /widget "config" -->

View File

@ -1,52 +1,54 @@
<div class="row">
<div class="row">
<?php if ($widget['collapsible'] === true) { ?>
<a style="text-decoration: none;" data-toggle="collapse" href="#collapse<?= $widget['name'] ?>" role="button" aria-expanded="true" aria-controls="collapse<?= $widget['name'] ?>">
<div class="card w-auto bg-light card-body" style="flex-direction: row;"><?= $widget['title'] ?></div>
<a style="text-decoration: none;" data-toggle="collapse" href="#collapse<?= $widget['name'] ?>" role="button" aria-expanded="true" aria-controls="collapse<?= $widget['name'] ?>">
<div class="card w-auto bg-light card-body" style="flex-direction: row;"><?= $widget['title'] ?></div>
<?php } else { ?>
<div class="card w-auto bg-light border-light card-body" style="flex-direction: row;"><?= $widget['title'] ?></div>
<div class="card w-auto bg-light border-light card-body" style="flex-direction: row;"><?= $widget['title'] ?></div>
<?php } ?>
<?php if ($widget['filter'] === true) {
include('templates/block-results-filter.php'); } ?>
<?php if ($widget['collapsible'] === true) { ?>
</a>
</a>
<?php } ?>
</div>
</div>
<div class="collapse show" id="collapse<?= $widget['name'] ?>">
<!-- widget "<?= $widget['name']; ?>" -->
<div class="collapse show" id="collapse<?= $widget['name'] ?>">
<?php if ($time_range_specified) { ?>
<p class="m-3">time period: <strong><?= $from_time ?> - <?= $until_time ?></strong></p>
<p class="m-3">time period: <strong><?= $from_time ?> - <?= $until_time ?></strong></p>
<?php } ?>
<div class="mb-5">
<div class="mb-5">
<?php if ($widget['full'] === true) { ?>
<table class="table table-striped table-hover table-bordered">
<thead class="thead-dark">
<tr>
<th scope="col"></th>
<table class="table table-striped table-hover table-bordered">
<thead class="thead-dark">
<tr>
<th scope="col"></th>
<?php foreach ($widget['table_headers'] as $header) { ?>
<th scope="col"><?= htmlspecialchars($header) ?></th>
<th scope="col"><?= htmlspecialchars($header) ?></th>
<?php } ?>
</tr>
</thead>
<tbody>
<tr>
<td>conferences</td>
</tr>
</thead>
<tbody>
<tr>
<td>conferences</td>
<?php foreach ($widget['table_records_conferences'] as $row) { ?>
<td><?= htmlspecialchars($row ?? '') ?></td>
<td><?= htmlspecialchars($row ?? '') ?></td>
<?php } ?>
</tr>
<tr>
<td>participants</td>
</tr>
<tr>
<td>participants</td>
<?php foreach ($widget['table_records_participants'] as $row) { ?>
<td><?= htmlspecialchars($row ?? '') ?></td>
<td><?= htmlspecialchars($row ?? '') ?></td>
<?php } ?>
</tr>
</tbody>
</table>
</tr>
</tbody>
</table>
<?php } else { ?>
<p class="m-3">No matching records found.</p>
<p class="m-3">No matching records found.</p>
<?php } ?>
</div>
</div>
</div>
</div>
<!-- /widget "<?= $widget['name']; ?>" -->

View File

@ -1,9 +1,9 @@
<div>
<p>Profile of <?= $user ?></p>
<ul>
<li>username: <?= $_SESSION['username'] ?></li>
</ul>
</div>
<!-- widget "user profile" -->
<div>
<p>Profile of <?= $user ?></p>
<ul>
<li>username: <?= $_SESSION['username'] ?></li>
</ul>
</div>
<!-- /widget "user profile" -->

View File

@ -1,76 +1,76 @@
<div class="row">
<div class="row">
<?php if ($widget['collapsible'] === true) { ?>
<a style="text-decoration: none;" data-toggle="collapse" href="#collapse<?= $widget['name'] ?>" role="button" aria-expanded="true" aria-controls="collapse<?= $widget['name'] ?>">
<div class="card w-auto bg-light card-body" style="flex-direction: row;"><?= $widget['title'] ?></div>
<a style="text-decoration: none;" data-toggle="collapse" href="#collapse<?= $widget['name'] ?>" role="button" aria-expanded="true" aria-controls="collapse<?= $widget['name'] ?>">
<div class="card w-auto bg-light card-body" style="flex-direction: row;"><?= $widget['title'] ?></div>
<?php } else { ?>
<div class="card w-auto bg-light border-light card-body" style="flex-direction: row;"><?= $widget['title'] ?></div>
<div class="card w-auto bg-light border-light card-body" style="flex-direction: row;"><?= $widget['title'] ?></div>
<?php } ?>
<?php if ($widget['filter'] === true) {
include('templates/block-results-filter.php'); } ?>
<?php if ($widget['collapsible'] === true) { ?>
</a>
</a>
<?php } ?>
</div>
</div>
<div class="collapse show" id="collapse<?= $widget['name'] ?>">
<!-- widget "<?= $widget['name']; ?>" -->
<div class="collapse show" id="collapse<?= $widget['name'] ?>">
<?php if ($time_range_specified) { ?>
<p class="m-3">time period: <strong><?= $from_time ?> - <?= $until_time ?></strong></p>
<p class="m-3">time period: <strong><?= $from_time ?> - <?= $until_time ?></strong></p>
<?php } ?>
<div class="mb-5">
<div class="mb-5">
<?php if ($widget['full'] === true) { ?>
<table class="table table-striped table-hover table-bordered">
<thead class="thead-dark">
<tr>
<table class="table table-striped table-hover table-bordered">
<thead class="thead-dark">
<tr>
<?php foreach ($widget['table_headers'] as $header) { ?>
<th scope="col"><?= htmlspecialchars($header) ?></th>
<th scope="col"><?= htmlspecialchars($header) ?></th>
<?php } ?>
</tr>
</thead>
<tbody>
</tr>
</thead>
<tbody>
<?php foreach ($widget['table_records'] as $row) { ?>
<tr>
<tr>
<?php $stats_id = false;
$participant_ip = false;
if (isset($row['event']) && $row['event'] === 'stats_id') $stats_id = true;
if (isset($row['event']) && $row['event'] === 'pair selected') $participant_ip = true;
foreach ($row as $key => $column) {
if ($key === 'conference ID' && isset($conferenceId) && $conferenceId === $column) { ?>
<td><strong><?= htmlspecialchars($column ?? '') ?></strong></td>
<td><strong><?= htmlspecialchars($column ?? '') ?></strong></td>
<?php } elseif ($key === 'conference ID') { ?>
<td><a href="<?= $app_root ?>?page=conferences&id=<?= htmlspecialchars($column ?? '') ?>"><?= htmlspecialchars($column ?? '') ?></a></td>
<td><a href="<?= $app_root ?>?page=conferences&id=<?= htmlspecialchars($column ?? '') ?>"><?= htmlspecialchars($column ?? '') ?></a></td>
<?php } elseif ($key === 'conference name' && isset($conferenceName) && $conferenceName === $column) { ?>
<td><strong><?= htmlspecialchars($column ?? '') ?></strong></td>
<td><strong><?= htmlspecialchars($column ?? '') ?></strong></td>
<?php } elseif ($key === 'conference name') { ?>
<td><a href="<?= $app_root ?>?page=conferences&name=<?= htmlspecialchars($column ?? '') ?>"><?= htmlspecialchars($column ?? '') ?></a></td>
<td><a href="<?= $app_root ?>?page=conferences&name=<?= htmlspecialchars($column ?? '') ?>"><?= htmlspecialchars($column ?? '') ?></a></td>
<?php } elseif ($key === 'participant ID' && isset($participantId) && $participantId === $column) { ?>
<td><strong><?= htmlspecialchars($column ?? '') ?></strong></td>
<td><strong><?= htmlspecialchars($column ?? '') ?></strong></td>
<?php } elseif ($key === 'participant ID') { ?>
<td><a href="<?= $app_root ?>?page=participants&id=<?= htmlspecialchars($column ?? '') ?>"><?= htmlspecialchars($column ?? '') ?></a></td>
<td><a href="<?= $app_root ?>?page=participants&id=<?= htmlspecialchars($column ?? '') ?>"><?= htmlspecialchars($column ?? '') ?></a></td>
<?php } elseif ($key === 'component ID') { ?>
<td><a href="<?= $app_root ?>?page=components&id=<?= htmlspecialchars($column ?? '') ?>"><?= htmlspecialchars($column ?? '') ?></a></td>
<td><a href="<?= $app_root ?>?page=components&id=<?= htmlspecialchars($column ?? '') ?>"><?= htmlspecialchars($column ?? '') ?></a></td>
<?php } elseif ($stats_id && $key === 'parameter' && isset($participantName) && $participantName === $column) { ?>
<td><strong><?= htmlspecialchars($column ?? '') ?></strong></td>
<td><strong><?= htmlspecialchars($column ?? '') ?></strong></td>
<?php } elseif ($stats_id && $key === 'parameter') { ?>
<td><a href="<?= $app_root ?>?page=participants&name=<?= htmlspecialchars($column ?? '') ?>"><?= htmlspecialchars($column ?? '') ?></a></td>
<td><a href="<?= $app_root ?>?page=participants&name=<?= htmlspecialchars($column ?? '') ?>"><?= htmlspecialchars($column ?? '') ?></a></td>
<?php } elseif ($participant_ip && $key === 'parameter' && isset($participantIp) && $participantIp === $column) { ?>
<td><strong><?= htmlspecialchars($column ?? '') ?></strong></td>
<td><strong><?= htmlspecialchars($column ?? '') ?></strong></td>
<?php } elseif ($participant_ip && $key === 'parameter') { ?>
<td><a href="<?= $app_root ?>?page=participants&ip=<?= htmlspecialchars($column ?? '') ?>"><?= htmlspecialchars($column ?? '') ?></a></td>
<td><a href="<?= $app_root ?>?page=participants&ip=<?= htmlspecialchars($column ?? '') ?>"><?= htmlspecialchars($column ?? '') ?></a></td>
<?php } elseif ($key === 'component') { ?>
<td><a href="<?= $app_root ?>?page=components&name=<?= htmlspecialchars($column ?? '') ?>"><?= htmlspecialchars($column ?? '') ?></a></td>
<td><a href="<?= $app_root ?>?page=components&name=<?= htmlspecialchars($column ?? '') ?>"><?= htmlspecialchars($column ?? '') ?></a></td>
<?php } else { ?>
<td><?= htmlspecialchars($column ?? '') ?></td>
<td><?= htmlspecialchars($column ?? '') ?></td>
<?php }
} ?>
</tr>
</tr>
<?php } ?>
</tbody>
</table>
</tbody>
</table>
<?php } else { ?>
<p class="m-3">No matching records found.</p>
<p class="m-3">No matching records found.</p>
<?php } ?>
</div>
</div>
</div>
</div>
<!-- /widget "<?= $widget['name']; ?>" -->