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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -8,11 +8,16 @@
</div> </div>
</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']) ) { ?> <?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=conferences">conferences</a></li>
<li><a href="?page=participants">participants</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 } ?> <?php } ?>
</ul> </ul>

View File

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

View File

@ -1,12 +1,11 @@
<div>
<p>Jilo web configuration</p> <!-- widget "config" -->
<div>
<ul> <p>Jilo web configuration</p>
<ul>
<?php foreach ($config as $config_item=>$config_value) { ?> <?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 } ?> <?php } ?>
</ul> </ul>
</div>
</div> <!-- /widget "config" -->

View File

@ -1,52 +1,54 @@
<div class="row"> <div class="row">
<?php if ($widget['collapsible'] === true) { ?> <?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'] ?>"> <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> <div class="card w-auto bg-light card-body" style="flex-direction: row;"><?= $widget['title'] ?></div>
<?php } else { ?> <?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 } ?>
<?php if ($widget['filter'] === true) { <?php if ($widget['filter'] === true) {
include('templates/block-results-filter.php'); } ?> include('templates/block-results-filter.php'); } ?>
<?php if ($widget['collapsible'] === true) { ?> <?php if ($widget['collapsible'] === true) { ?>
</a> </a>
<?php } ?> <?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) { ?> <?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 } ?> <?php } ?>
<div class="mb-5"> <div class="mb-5">
<?php if ($widget['full'] === true) { ?> <?php if ($widget['full'] === true) { ?>
<table class="table table-striped table-hover table-bordered"> <table class="table table-striped table-hover table-bordered">
<thead class="thead-dark"> <thead class="thead-dark">
<tr> <tr>
<th scope="col"></th> <th scope="col"></th>
<?php foreach ($widget['table_headers'] as $header) { ?> <?php foreach ($widget['table_headers'] as $header) { ?>
<th scope="col"><?= htmlspecialchars($header) ?></th> <th scope="col"><?= htmlspecialchars($header) ?></th>
<?php } ?> <?php } ?>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>conferences</td> <td>conferences</td>
<?php foreach ($widget['table_records_conferences'] as $row) { ?> <?php foreach ($widget['table_records_conferences'] as $row) { ?>
<td><?= htmlspecialchars($row ?? '') ?></td> <td><?= htmlspecialchars($row ?? '') ?></td>
<?php } ?> <?php } ?>
</tr> </tr>
<tr> <tr>
<td>participants</td> <td>participants</td>
<?php foreach ($widget['table_records_participants'] as $row) { ?> <?php foreach ($widget['table_records_participants'] as $row) { ?>
<td><?= htmlspecialchars($row ?? '') ?></td> <td><?= htmlspecialchars($row ?? '') ?></td>
<?php } ?> <?php } ?>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<?php } else { ?> <?php } else { ?>
<p class="m-3">No matching records found.</p> <p class="m-3">No matching records found.</p>
<?php } ?> <?php } ?>
</div> </div>
</div> </div>
<!-- /widget "<?= $widget['name']; ?>" -->

View File

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

View File

@ -1,76 +1,76 @@
<div class="row"> <div class="row">
<?php if ($widget['collapsible'] === true) { ?> <?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'] ?>"> <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> <div class="card w-auto bg-light card-body" style="flex-direction: row;"><?= $widget['title'] ?></div>
<?php } else { ?> <?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 } ?>
<?php if ($widget['filter'] === true) { <?php if ($widget['filter'] === true) {
include('templates/block-results-filter.php'); } ?> include('templates/block-results-filter.php'); } ?>
<?php if ($widget['collapsible'] === true) { ?> <?php if ($widget['collapsible'] === true) { ?>
</a> </a>
<?php } ?> <?php } ?>
</div>
</div> <!-- widget "<?= $widget['name']; ?>" -->
<div class="collapse show" id="collapse<?= $widget['name'] ?>">
<div class="collapse show" id="collapse<?= $widget['name'] ?>">
<?php if ($time_range_specified) { ?> <?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 } ?> <?php } ?>
<div class="mb-5"> <div class="mb-5">
<?php if ($widget['full'] === true) { ?> <?php if ($widget['full'] === true) { ?>
<table class="table table-striped table-hover table-bordered"> <table class="table table-striped table-hover table-bordered">
<thead class="thead-dark"> <thead class="thead-dark">
<tr> <tr>
<?php foreach ($widget['table_headers'] as $header) { ?> <?php foreach ($widget['table_headers'] as $header) { ?>
<th scope="col"><?= htmlspecialchars($header) ?></th> <th scope="col"><?= htmlspecialchars($header) ?></th>
<?php } ?> <?php } ?>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<?php foreach ($widget['table_records'] as $row) { ?> <?php foreach ($widget['table_records'] as $row) { ?>
<tr> <tr>
<?php $stats_id = false; <?php $stats_id = false;
$participant_ip = false; $participant_ip = false;
if (isset($row['event']) && $row['event'] === 'stats_id') $stats_id = true; if (isset($row['event']) && $row['event'] === 'stats_id') $stats_id = true;
if (isset($row['event']) && $row['event'] === 'pair selected') $participant_ip = true; if (isset($row['event']) && $row['event'] === 'pair selected') $participant_ip = true;
foreach ($row as $key => $column) { foreach ($row as $key => $column) {
if ($key === 'conference ID' && isset($conferenceId) && $conferenceId === $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') { ?> <?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) { ?> <?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') { ?> <?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) { ?> <?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') { ?> <?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') { ?> <?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) { ?> <?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') { ?> <?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) { ?> <?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') { ?> <?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') { ?> <?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 { ?> <?php } else { ?>
<td><?= htmlspecialchars($column ?? '') ?></td> <td><?= htmlspecialchars($column ?? '') ?></td>
<?php } <?php }
} ?> } ?>
</tr> </tr>
<?php } ?> <?php } ?>
</tbody> </tbody>
</table> </table>
<?php } else { ?> <?php } else { ?>
<p class="m-3">No matching records found.</p> <p class="m-3">No matching records found.</p>
<?php } ?> <?php } ?>
</div> </div>
</div> </div>
<!-- /widget "<?= $widget['name']; ?>" -->