224 lines
11 KiB
HTML
224 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
|
|
<!-- Head -->
|
|
<head>
|
|
{% include 'head.html' %}
|
|
</head>
|
|
<!-- End of Head -->
|
|
|
|
<body id="page-top">
|
|
|
|
<!-- Page Wrapper -->
|
|
<div id="wrapper">
|
|
|
|
<!-- Sidebar -->
|
|
{% include 'sidebar.html' %}
|
|
<!-- End of Sidebar -->
|
|
|
|
<!-- Content Wrapper -->
|
|
<div id="content-wrapper" class="d-flex flex-column">
|
|
|
|
<!-- Main Content -->
|
|
<div id="content">
|
|
|
|
<!-- Topbar -->
|
|
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
|
|
{% include 'topbar.html' %}
|
|
</nav>
|
|
<!-- End of Topbar -->
|
|
|
|
<!-- Begin Page Content -->
|
|
<div class="container-fluid">
|
|
<!-- Content Row -->
|
|
<div class="row">
|
|
|
|
<!-- Earnings (Monthly) Card Example -->
|
|
<div class="col-xl-3 col-md-6 mb-4">
|
|
<div class="card border-left-primary shadow h-100 py-2">
|
|
<div class="card-body">
|
|
<div class="row no-gutters align-items-center">
|
|
<div class="col mr-2">
|
|
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Dernière
|
|
mise à jour
|
|
</div>
|
|
<div class="h5 mb-0 font-weight-bold text-gray-800">
|
|
<!-- Date et heure en JS rajouté pour connaître dernière mise à jour de la page web -->
|
|
<script type="text/javascript">
|
|
var ladate = new Date()
|
|
var d = ladate.getDate();
|
|
if (d < 10) {
|
|
d = "0" + d
|
|
}
|
|
var month = ladate.getMonth() + 1;
|
|
if (month < 10) {
|
|
month = "0" + month
|
|
}
|
|
document.write(d + "/" + month + "/" + ladate.getFullYear() + " <br> à ")
|
|
var h = ladate.getHours();
|
|
if (h < 10) {
|
|
h = "0" + h
|
|
}
|
|
var m = ladate.getMinutes();
|
|
if (m < 10) {
|
|
m = "0" + m
|
|
}
|
|
document.write(h + "h" + m)
|
|
</script>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fas fa-calendar fa-2x text-gray-300"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Earnings (Monthly) Card Example -->
|
|
<div class="col-xl-3 col-md-6 mb-4">
|
|
<div class="card border-left-success shadow h-100 py-2">
|
|
<div class="card-body">
|
|
<div class="row no-gutters align-items-center">
|
|
<div id="alarm_cardio" class="col mr-2">
|
|
<div class="text-xs font-weight-bold text-success text-uppercase mb-1">Alarme
|
|
cardio
|
|
</div>
|
|
<div id="state_bpm_0" class="card bg-danger text-white shadow">
|
|
<div id="state_bpm_critique" class="text-center">Etat critique</div>
|
|
</div>
|
|
<div id="state_bpm_1" class="card bg-success text-white shadow">
|
|
<div id="state_bpm_stable" class="text-center">Etat stable</div>
|
|
</div>
|
|
<div id="state_bpm_2" class="card bg-warning text-white shadow">
|
|
<div id="state_bpm_surveiller" class="text-center">Etat à surveiller</div>
|
|
</div>
|
|
<div id="state_bpm_3" class="card bg-success text-white shadow display none">
|
|
<div id="state_bpm_nodata" class="text-center">Pas de données</div>
|
|
</div>
|
|
<div id="text_bpm" class="text-center"><span id="value_bpm"></span> BPM</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fas fa-heartbeat fa-2x text-gray-300"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Earnings (Monthly) Card Example -->
|
|
<div class="col-xl-3 col-md-6 mb-4">
|
|
<div class="card border-left-info shadow h-100 py-2">
|
|
<div class="card-body">
|
|
<div class="row no-gutters align-items-center">
|
|
<div id="alarm_oxy" class="col mr-2">
|
|
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">Alarme
|
|
oxygène
|
|
</div>
|
|
<div id="state_oxy_0" class="card bg-danger text-white shadow">
|
|
<div id="state_oxy_critique" class="text-center">Etat critique</div>
|
|
</div>
|
|
<div id="state_oxy_1" class="card bg-info text-white shadow">
|
|
<div id="state_oxy_stable" class="text-center">Etat stable</div>
|
|
</div>
|
|
<div id="state_oxy_2" class="card bg-warning text-white shadow">
|
|
<div id="state_oxy_surveiller" class="text-center">Etat à surveiller</div>
|
|
</div>
|
|
<div id="state_oxy_3" class="card bg-info text-white shadow">
|
|
<div id="state_oxy_nodata" class="text-center">Pas de données</div>
|
|
</div>
|
|
<!-- Stable 95 à 100% mais non viable en dessous de 95 et critique en dessous de 90% -->
|
|
<div id="text_oxy" class="text-center"><span id="value_oxy"></span> %</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fas fa-bullseye fa-2x text-gray-300"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pending Requests Card Example -->
|
|
<div class="col-xl-3 col-md-6 mb-4">
|
|
<div class="card border-left-warning shadow h-100 py-2">
|
|
<div class="card-body">
|
|
<div class="row no-gutters align-items-center">
|
|
<div id="alarm_chute" class="col mr-2">
|
|
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Alarme
|
|
chute
|
|
</div>
|
|
<div id="state_chute_0" class="card bg-warning text-white shadow">
|
|
<div id="state_chute_ras" class="text-center">R.A.S</div>
|
|
</div>
|
|
<div id="state_chute_1" class="card bg-danger text-white shadow">
|
|
<div id="state_chute_down" class="text-center">Au sol</div>
|
|
</div>
|
|
<div id="text_town" class="text-center">{{town}}</div>
|
|
<div id="state_chute_2" class="card bg-warning text-white shadow">
|
|
<div id="state_chute_nodata" class="text-center">Pas de données</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fas fa-wheelchair fa-2x text-gray-300"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content Row -->
|
|
<div class="row">
|
|
|
|
<div class="col-xl-12 col-lg-7">
|
|
|
|
<!-- Area Chart -->
|
|
<div class="col-xl-12 col-lg-7">
|
|
<div class="card border-left-secondary shadow mb-4">
|
|
<!-- Card Header - Dropdown -->
|
|
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
|
|
<h6 class="m-0 font-weight-bold text-secondary">Fréquences cardiaques et taux
|
|
d'oxygène</h6>
|
|
</div>
|
|
<!-- Card Body -->
|
|
<div class="card-body">
|
|
<div class="chart-area">
|
|
<canvas id="canvas"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.container-fluid -->
|
|
|
|
</div>
|
|
<!-- End of Main Content -->
|
|
|
|
<!-- Footer -->
|
|
{% include 'footer.html' %}
|
|
<!-- End of Footer -->
|
|
|
|
</div>
|
|
<!-- End of Content Wrapper -->
|
|
|
|
</div>
|
|
<!-- End of Page Wrapper -->
|
|
|
|
<!-- Logout Modal-->
|
|
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
|
|
aria-hidden="true">
|
|
{% include 'auth/logout_modal.html' %}
|
|
</div>
|
|
<!-- End Logout Modal-->
|
|
|
|
<!-- Script utile à la page -->
|
|
<script src="../static/js/chart_coeur_oxy.js"></script>
|
|
<script src="../static/js/alarm_div_reload.js"></script>
|
|
|
|
</body>
|
|
|
|
</html>
|