Better dashboard with collapsable blocks
This commit is contained in:
parent
566b30f47d
commit
5a0fd488e6
3 changed files with 165 additions and 78 deletions
|
|
@ -70,17 +70,19 @@ td {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
#task {
|
||||
.task {
|
||||
margin: 3rem auto;
|
||||
max-width: 80%;
|
||||
max-width: 1000px;
|
||||
padding: 1rem;
|
||||
-webkit-box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.3);
|
||||
-moz-box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.3);
|
||||
box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.3);
|
||||
border-radius: 5px;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.highlight {
|
||||
background-color: #000;
|
||||
padding: 0px 1rem;
|
||||
|
|
@ -89,3 +91,53 @@ td {
|
|||
font-size: 1rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.task.show .task-overlay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.exp-icon {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 1rem;
|
||||
width: 20px;
|
||||
min-height: 27px;
|
||||
height: 27px;
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
|
||||
transform: translate3d(0, 0, 0);
|
||||
backface-visibility: hidden;
|
||||
animation-iteration-count: 3;
|
||||
animation-delay: 3s;
|
||||
}
|
||||
|
||||
.task .exp-icon {
|
||||
background-image: url('../img/expand.png');
|
||||
}
|
||||
|
||||
.task.active .exp-icon {
|
||||
background-image: url('../img/collapse.png');
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
10%, 90% {
|
||||
transform: translate3d(-1px, 0, 0);
|
||||
}
|
||||
|
||||
20%, 80% {
|
||||
transform: translate3d(2px, 0, 0);
|
||||
}
|
||||
|
||||
30%, 50%, 70% {
|
||||
transform: translate3d(-4px, 0, 0);
|
||||
}
|
||||
|
||||
40%, 60% {
|
||||
transform: translate3d(4px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
160
web/index.php
160
web/index.php
|
|
@ -1,7 +1,15 @@
|
|||
<?php require_once __DIR__.'/DB.php'; ?>
|
||||
|
||||
<html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>MonitoLite - Network monitoring tool</title>
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.5.1.min.js"
|
||||
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
|
||||
crossorigin="anonymous">
|
||||
</script>
|
||||
<script type="text/javascript" src="js/scripts.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="css/styles.css" />
|
||||
</head>
|
||||
|
|
@ -12,8 +20,9 @@
|
|||
<?php if ($tasks = $db->get_all_tasks()): ?>
|
||||
|
||||
<?php foreach ($tasks as $task): ?>
|
||||
|
||||
<div id="task">
|
||||
<div class="task">
|
||||
<p class="exp-icon" title="Click here to expand/collapse the task"> </p>
|
||||
<!--<p class="task-overlay"><img src="img/expand.png" width="32"></p>-->
|
||||
<h2>Task <small>#</small><?php echo $task['id']; ?> » <span class="highlight"><?php echo $task['type']; ?></span> for host <span class="highlight"><?php echo $task['host']; ?></span></h2>
|
||||
|
||||
<table id="tasks_tbl">
|
||||
|
|
@ -52,80 +61,81 @@
|
|||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
<div id="history">
|
||||
<h3>Task history</h3>
|
||||
<?php if ($histories = $db->get_all_history($task['id'], 5)): ?>
|
||||
<table id="history_tbl">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Datetime</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php foreach ($histories as $history): ?>
|
||||
<?php
|
||||
$color = ($history['status'] == 1) ? '#c9ecc9' : '#ffc5c5';
|
||||
?>
|
||||
<tr>
|
||||
<td width="20%" align="center"><?php echo $history['datetime']; ?></td>
|
||||
<div class="hidden">
|
||||
<div id="history">
|
||||
<h3>Task history</h3>
|
||||
<?php if ($histories = $db->get_all_history($task['id'], 5)): ?>
|
||||
<table id="history_tbl">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Datetime</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php foreach ($histories as $history): ?>
|
||||
<?php
|
||||
$color = ($history['status'] == 1) ? '#c9ecc9' : '#ffc5c5';
|
||||
?>
|
||||
<tr>
|
||||
<td width="20%" align="center"><?php echo $history['datetime']; ?></td>
|
||||
|
||||
<?php if ($history['status'] == 1): ?>
|
||||
<td width="20%" align="center" style="background-color:#c9ecc9;">
|
||||
<img src="img/success.png" width="16" alt="Success"> SUCCESS
|
||||
</td>
|
||||
<?php else: ?>
|
||||
<td width="20%" align="center" style="background-color:#ffc5c5;">
|
||||
<img src="img/error.png" width="16" alt="Success"> ERROR
|
||||
</td>
|
||||
<?php endif; ?>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
<p><small>Only the 5 latest entries are displayed</small></p>
|
||||
<?php else: ?>
|
||||
<p class="no_result">No history found here</p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<div id="contacts">
|
||||
<h3>Task contacts</h3>
|
||||
<?php if ($history['status'] == 1): ?>
|
||||
<td width="20%" align="center" style="background-color:#c9ecc9;">
|
||||
<img src="img/success.png" width="16" alt="Success"> SUCCESS
|
||||
</td>
|
||||
<?php else: ?>
|
||||
<td width="20%" align="center" style="background-color:#ffc5c5;">
|
||||
<img src="img/error.png" width="16" alt="Success"> ERROR
|
||||
</td>
|
||||
<?php endif; ?>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
<p><small>Only the 5 latest entries are displayed</small></p>
|
||||
<?php else: ?>
|
||||
<p class="no_result">No history found here</p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<?php if ($contacts = $db->get_all_contacts($task['id'])): ?>
|
||||
<table id="contacts_tbl">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Surname</th>
|
||||
<th>Firstname</th>
|
||||
<th>Email</th>
|
||||
<th>Phone</th>
|
||||
<th>Creation date</th>
|
||||
<th>Active</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php foreach ($contacts as $contact): ?>
|
||||
<tr>
|
||||
<td width="15%"><?php echo $contact['surname']; ?></td>
|
||||
<td width="15%"><?php echo $contact['firstname']; ?></td>
|
||||
<td width="20%"><?php echo $contact['email']; ?></td>
|
||||
<td width="15%"><?php echo $contact['phone']; ?></td>
|
||||
<td width="15%"><?php echo $contact['creation_date']; ?></td>
|
||||
<td width="15%"><?php echo ($contact['active'] == 1) ? 'Yes' : 'No'; ?></td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
<?php else: ?>
|
||||
<p class="no_result">
|
||||
<img src="img/warning.png" width="16" alt="Warning"/>
|
||||
No contact found here. That means that nobody will get any notification in case of an error.
|
||||
</p>
|
||||
<?php endif; ?>
|
||||
<div id="contacts">
|
||||
<h3>Task contacts</h3>
|
||||
|
||||
<?php if ($contacts = $db->get_all_contacts($task['id'])): ?>
|
||||
<table id="contacts_tbl">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Surname</th>
|
||||
<th>Firstname</th>
|
||||
<th>Email</th>
|
||||
<th>Phone</th>
|
||||
<th>Creation date</th>
|
||||
<th>Active</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php foreach ($contacts as $contact): ?>
|
||||
<tr>
|
||||
<td width="15%"><?php echo $contact['surname']; ?></td>
|
||||
<td width="15%"><?php echo $contact['firstname']; ?></td>
|
||||
<td width="20%"><?php echo $contact['email']; ?></td>
|
||||
<td width="15%"><?php echo $contact['phone']; ?></td>
|
||||
<td width="15%"><?php echo $contact['creation_date']; ?></td>
|
||||
<td width="15%"><?php echo ($contact['active'] == 1) ? 'Yes' : 'No'; ?></td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
<?php else: ?>
|
||||
<p class="no_result">
|
||||
<img src="img/warning.png" width="16" alt="Warning"/>
|
||||
No contact found here. That means that nobody will get any notification in case of an error.
|
||||
</p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php endforeach; ?>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
$(document).ready(function() {
|
||||
$('.task .exp-icon').on('click', function() {
|
||||
var el = $(this).parent('.task');
|
||||
|
||||
if (el.hasClass('active')) {
|
||||
el.removeClass('active');
|
||||
el.children('.hidden').slideUp();
|
||||
}
|
||||
else {
|
||||
$('.task').removeClass('active');
|
||||
$('.task').children('.hidden').slideUp();
|
||||
el.addClass('active');
|
||||
el.children('.hidden').slideDown();
|
||||
}
|
||||
});
|
||||
|
||||
$('.task').not('.active').on('mouseover', function() {
|
||||
$(this).children('.task-overlay').show();
|
||||
});
|
||||
|
||||
$('.task').not('.active').on('mouseout', function() {
|
||||
$(this).children('.task-overlay').hide();
|
||||
});
|
||||
|
||||
})
|
||||
Loading…
Add table
Reference in a new issue