Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <?php
- include('session.php');
- ?>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- <meta charset="utf-8">
- <title>Bravo Portal</title>
- <meta name="generator" content="Bootply" />
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
- <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
- <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">
- <link href="css/bootstrap.min.css" rel="stylesheet">
- <!-- Bootstrap -->
- <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
- <!-- Responsive slider -->
- <link href="css/responsive-calendar.css" rel="stylesheet">
- <!--[if lt IE 9]>
- <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
- <![endif]-->
- <link href="css/styles.css" rel="stylesheet">
- <style type="text/css">
- table.scroll {
- width: 100%;
- border-spacing: 0;
- border: 1px solid grey;
- }
- table.scroll th,
- table.scroll td,
- table.scroll tr,
- table.scroll thead,
- table.scroll tbody { display: block; }
- table.scroll thead tr {
- /* fallback */
- width: 97%;
- /* minus scroll bar width */
- width: -webkit-calc(100% - 16px);
- width: -moz-calc(100% - 16px);
- width: calc(100% - 16px);
- }
- table.scroll tr:after {
- content: ' ';
- display: block;
- visibility: hidden;
- clear: both;
- }
- table.scroll tbody {
- height: 100px;
- overflow-y: auto;
- overflow-x: hidden;
- }
- table.scroll tbody td,
- table.scroll thead th {
- width: 19%;
- float: left;
- border-right: 0px solid grey;
- }
- thead tr th {
- height: 30px;
- line-height: 30px;
- /*text-align: left;*/
- }
- table td.green{
- background: green;
- }
- table td.red{
- background: red;
- }
- table td.orange{
- background: orange;
- }
- tbody { border-top: 2px solid black; padding-bottom: 50%; }
- tbody td:last-child, thead th:last-child {
- border-right: none !important;
- }
- #hoverTable{
- width:100%;
- border-collapse:collapse;
- }
- #hoverTable td{
- }
- /* Define the default color for all the table rows */
- #hoverTable tr{
- }
- /* Define the hover highlight color for the table row */
- #hoverTable tr:hover {
- background-color: #ffff99;
- }
- .my-legend .legend-title {
- text-align: left;
- margin-bottom: 5px;
- font-weight: bold;
- font-size: 90%;
- }
- .my-legend .legend-scale ul {
- margin: 0;
- margin-bottom: 5px;
- padding: 0;
- float: left;
- list-style: none;
- }
- .my-legend .legend-scale ul li {
- display: inline-block;
- font-size: 80%;
- list-style: none;
- line-height: 18px;
- vertical-align: text-top;
- }
- .my-legend ul.legend-labels li span {
- display: inline-block;
- height: 16px;
- width: 20px;
- margin-right: 5px;
- margin-left: 10px;
- border: 1px solid #999;
- }
- .my-legend a {
- color: #777;
- }
- /*notities*/
- @import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400);
- /* body {
- font: normal normal 13px/16px "Open Sans", sans-serif;
- background: #ccc;
- } */
- .contain{
- width: 300px;
- border-radius: 3px;
- }
- form {
- display: inline-block;
- }
- input{
- padding: 1px 1px 1px 1px;
- }
- #button1{
- display: inline-block;
- background-color:#fc999b;
- color:#ffffff;
- border-radius: 1px;
- text-align:center;
- margin-top:1px;
- padding: 3px 3px;
- }
- #button1:hover{
- cursor: pointer;
- opacity: .8;}
- ol {padding-left: 20px;}
- ol li {padding: 5px;color:#000;}
- ol li:nth-child(even){background: #70ABAF;}
- .strike{text-decoration: line-through;}
- li:hover{
- cursor: pointer;
- }
- /*notities*/
- a{
- color: black;
- }
- </style>
- </head>
- <body style="background-color: #70ABAF;">
- <!-- BEGIN HEADER -->
- <header class="navbar navbar-default navbar-static-top" role="banner" style="background-color: #32292F; color: #99E1D9;">
- <div class="container">
- <div class="navbar-header">
- <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
- <span class="sr-only">Toggle navigation</span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </button>
- <a href="/" class="navbar-brand">Bravo Portal</a>
- </div>
- <nav class="collapse navbar-collapse" role="navigation">
- <ul class="nav navbar-nav">
- <li>
- <a href="portal.php">Hoofdpagina</a>
- </li>
- <li>
- <a href="patients.php">Cliënten</a>
- </li>
- </ul>
- <div align="right" style="padding-top: 1%;">
- <b id="welcome">Welkom: <i style="color: #ADADFF;"><?php echo $login_session; ?></i></b>
- <b id="logout"><a href="../logout.php">Uitloggen</a></b>
- </div>
- </nav>
- </div>
- </header>
- <!-- END HEADER -->
- <div class="container">
- <div class="row">
- <!-- WAARSCHUWWING -->
- <div class="col-md-8" style="border-style: solid; color: #99E1D9;">
- <div style=" padding-top: 2%; padding-bottom: 2%;">WAARSCHUWINGEN<small class="fa fa-cog fa-spin fa-1x fa-fw" style="color: #705D56;"></small></div>
- <!-- <hr style="padding: 0%; margin: 0%;"> -->
- <!-- Begin Gevallen -->
- <div class="col-md-6" style="color: #705D56; margin-bottom: 0%; padding-bottom: 0%;">
- <p>Rode Status Geval</p>
- </div>
- <div class="col-md-6" style="color: #705D56;">
- <p>Oranje Status Geval</p>
- </div>
- <!-- End Gevallen -->
- <!-- Show Record -->
- <div style="height:90px; overflow:auto; margin-bottom: 1%; border: solid 0px #705D56; padding-top: 0%; margin-top: 0%;" class="col-md-6">
- <?php
- $servername = "localhost";
- $username = "root";
- $password = "";
- $dbname = "patientdb";
- // Create connection
- $conn = new mysqli($servername, $username, $password, $dbname);
- // Check connection
- if ($conn->connect_error) {
- die("Connection failed: " . $conn->connect_error);
- }
- $sql = "SELECT naam FROM clients WHERE status > '60'";
- $result = $conn->query($sql);
- if ($result->num_rows > 0) {
- // output data of each row
- while($row = $result->fetch_assoc()) {
- echo "<a href='patients.php'>";
- echo "" . $row["naam"]."</a><br>";
- }
- } else {
- echo "0 results";
- }
- $conn->close();
- ?>
- </div>
- <!-- Show Record -->
- <div style="height:90px; overflow:auto; margin-bottom: 1%; border: solid 0px #705D56;" class="col-md-6">
- <!-- show records -->
- <?php
- $servername = "localhost";
- $username = "root";
- $password = "";
- $dbname = "patientdb";
- // Create connection
- $conn = new mysqli($servername, $username, $password, $dbname);
- // Check connection
- if ($conn->connect_error) {
- die("Connection failed: " . $conn->connect_error);
- }
- $sql = "SELECT naam FROM clients WHERE status > '58' AND status < '60'";
- $result = $conn->query($sql);
- if ($result->num_rows > 0) {
- // output data of each row
- while($row = $result->fetch_assoc()) {
- echo "<a href='patients.php'>";
- echo "" . $row["naam"]."</a><br>";
- }
- } else {
- echo "0 results";
- }
- $conn->close();
- ?>
- </div>
- <!-- end show record -->
- </div>
- <!--END WAARSCHUWING -->
- <!-- BEGIN LEGEND -->
- <div class='my-legend' style="clear: both; padding-top: 0%; margin-top: 0%;">
- <div class='legend-scale'>
- <ul class='legend-labels'>
- <li><span style='background:green;'></span></li>
- <li>Goed</li>
- <li><span style='background:yellow;'></span></li>
- <li>Minder goed</li>
- <li><span style='background:orange;'></span></li>
- <li>Matig</li>
- <li><span style='background:red;'></span></li>
- <li>Slecht</li>
- </ul>
- </div>
- </div>
- <!-- END LEGEND -->
- <!-- BEGIN CLIENT LIST -->
- <div class="col-md-8" style=" padding-top: 2%; padding-left: 0%; clear: both;">
- <h4 style="color: #99E1D9;"> Cliënten Lijst</h4>
- <!-- Begin Scroll List -->
- <div>
- <table class="scroll">
- <thead style="background-color: #99E1D9; color: #705D56;">
- <tr>
- <th>ID</th>
- <th>Naam Client</th>
- <th>Laatste Update</th>
- <th style="margin-left: 21%; padding-left: 0%;">Status</th>
- </tr>
- </thead>
- <tbody id="hoverTable" style="font-size: 11pt;">
- <?php
- //connect ot database
- $connection = mysql_connect('localhost', 'root', '');
- mysql_select_db('patientdb');
- //get data from data base for the first three columns in the table.
- $query = "SELECT id, naam, datum, status FROM clients";
- $result = mysql_query($query);
- //fetch results per row into the table.
- while($row = mysql_fetch_array($result)){ //Loop through results
- echo "<tr>
- <td>" . $row['id'] . "</td>
- <td>" . $row['naam'] . "</td>
- <td>" . $row['datum'] . "</td>
- <td style='padding-left: 20%;'>";
- // check of the data from 'status' per condition and assign it a color.
- if ($row['status'] > 60 && $row['status'] < 70) {
- echo "<p class='fa fa-circle' style='color: red;''></p>";
- } elseif ($row['status'] > 58 && $row['status'] < 60) {
- echo "<p class='fa fa-circle' style='color: orange;''></p>";
- } elseif ($row['status'] > 55 && $row['status'] < 57) {
- echo "<p class='fa fa-circle' style='color: yellow;''></p>";
- } else{
- echo "<p class='fa fa-circle' style='color: green;''></p>";
- }
- echo "</td>
- </tr>";
- }
- //close database connection
- mysql_close();
- ?>
- </tbody>
- </table>
- </div>
- <!-- End Scroll List -->
- </div>
- <!-- END BEGIN CLIENT LIST -->
- <!-- BEGIN CALENDER -->
- <div class="col-md-3" style="padding-left: 4%; padding-top: 0%; padding-bottom: 0%; margin-top: 0%;" >
- <div class="responsive-calendar">
- <div class="controls">
- <a class="pull-left" data-go="prev"><div class="btn btn-primary" style="background-color: #705D56; color: #99E1D9; "><</div></a>
- <h4><span data-head-year></span> <span data-head-month></span></h4>
- <a class="pull-right" data-go="next"><div class="btn btn-primary" style="background-color: #705D56; color: #99E1D9;">></div></a>
- </div><hr/>
- <div class="day-headers">
- <div class="day header">Ma</div>
- <div class="day header">Di</div>
- <div class="day header">Wo</div>
- <div class="day header">Do</div>
- <div class="day header">Vr</div>
- <div class="day header">Za</div>
- <div class="day header">Zo</div>
- </div>
- <div class="days" data-group="days">
- </div>
- </div>
- <div>
- <!-- END CALENDER -->
- <!-- BEGIN Notities -->
- <div class="contain" class="col-md-4" style="padding-left: 4%;">
- <h5 style="color: #99E1D9;">Notities</h5>
- <p><em></em></p>
- <form name="toDoList">
- <input type="text" name="ListItem"/>
- </form>
- <div style="background-color: #705D56;" id="button1">voeg toe</div>
- <br/>
- <div style="height: 70px; width: 77%; overflow: auto; border: solid 1px #99E1D9;" >
- <ol></ol>
- </div>
- </div>
- <!-- END Notities -->
- </div>
- </div>
- <!-- script references -->
- <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
- <script src="js/bootstrap.min.js"></script>
- <!-- Notities -->
- <script type="text/javascript">
- $(document).ready(
- function(){
- $('#button1').click(
- function(){
- var toAdd = $('input[name=ListItem]').val();
- $('ol').append('<li style="list-style-type:square">' + toAdd + '</li>');
- });
- $("input[name=ListItem]").keyup(function(event){
- if(event.keyCode == 13){
- $("#button1").click();
- }
- });
- $(document).on('dblclick','li', function(){
- $(this).toggleClass('strike').fadeOut('slow');
- });
- $('input').focus(function() {
- $(this).val('');
- });
- $('ol').sortable();
- }
- );
- </script>
- <script src="js/scripts.js"></script>
- <script src="js/jquery.js"></script>
- <script src="js/bootstrap.min.js"></script>
- <script src="js/responsive-calendar.js"></script>
- <script type="text/javascript">
- $(document).ready(function () {
- $(".responsive-calendar").responsiveCalendar({
- time: '2017-01',
- events: {
- "2017-01-11": {"number": 5, "url": "https://calendar.google.com/calendar/render?pli=1#main_7"},
- "2017-01-26": {"number": 1, "url": "https://calendar.google.com/calendar/render?pli=1#main_7"},
- "2017-02-03":{"number": 1},
- "2017-02-12": {}}
- });
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement