<!doctype html> <html lang="en" style="height: 100%"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>BlueWeather</title> <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"> <link rel="icon" href="img/favicon.ico" type="image/x-icon"> <!-- Custom styles for this template --> <link href="css/dashboard.css" rel="stylesheet"> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- libs for datepicker --> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script> <link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" /> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> </head> <body style="height: 100%;"> <nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow"> <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="index.html">BlueWeather</a> <ul class="navbar-nav px-3"> <li class="nav-item text-nowrap"> <a class="nav-link" href="#">Sign out</a> </li> </ul> </nav> <div class="container-fluid" style="height: 100%"> <div class="row" style="height: 100%"> <!-- Nav bar on the right side --> <nav class="col-md-2 d-none d-md-block bg-light sidebar"> <div class="sidebar-sticky"> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link" id="navbarPage-1Link" onclick="dashboard.updateParams({page: -1})" href="#"> <span data-feather="home"></span> Dashboard <span class="sr-only">(current)</span> </a> </li> </ul> <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted"> <span>Sensors</span> <a class="d-flex align-items-center text-muted" href="#"> <span data-feather="plus-circle"></span> </a> </h6> <ul class="nav flex-column mb-2" id="sensorsList"> <li class="nav-item"> <a class="nav-link" href="#"> <div class="spinner-border spinner-border-sm" role="status"> <span class="sr-only">Loading...</span> </div> </a> </li> </ul> </div> </nav> <!-- Main content area --> <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4" style="height: 90%"> <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom"> <h1 class="h2" id="titleH1">Dashboard</h1> <div class="btn-toolbar mb-2 mb-md-0" role="toolbar"> <div class="btn-group mr-2"> <button type="button" class="btn btn-sm btn-outline-secondary">Share</button> <button type="button" class="btn btn-sm btn-outline-secondary">Export</button> </div> <div class="btn-group mr-2" role="group"> <div class="dropdown" class="h-100"> <button id="dropdownMenuButton" type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle" data-toggle="dropdown"> <span data-feather="calendar"></span> </button> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton"> <!--form class="px-4 py-3"> <div class="btn-group"> <button type="button" class="btn btn-light" onclick="dashboard.setTimeRange(86400)">Today</button> <button type="button" class="btn btn-light" onclick="dashboard.setTimeRange(604800)">This Week</button> <button type="button" class="btn btn-light" onclick="dashboard.setTimeRange(2678400)">This Month</button> <button type="button" class="btn btn-light" onclick="dashboard.setTimeRange(18144000)">This Year</button> </div> </form--> <a class="dropdown-item" href="#" onclick="dashboard.setTimeRange(86400)">Today</a> <a class="dropdown-item" href="#" onclick="dashboard.setTimeRange(604800)">This Week</a> <a class="dropdown-item" href="#" onclick="dashboard.setTimeRange(2678400)">This Month</a> <a class="dropdown-item" href="#" onclick="dashboard.setTimeRange(31536000)">This Year</a> </div> </div> </div> <div class="btn-group mr-2" role="group"> <button type="button" class="btn btn-sm btn-outline-secondary" onclick="dashboard.loadDashboard()"> <span data-feather="refresh-cw"></span> </button> </div> </div> </div> <div id="loader" class="d-flex justify-content-center opacity-animated" style="position: absolute; left: 50%;"> <div class="spinner-border" role="status"> <span class="sr-only">Loading...</span> </div> </div> <div id="mainContent" class="opacity-animated" style="height: 100%"> </div> </div> </main> </div> <!-- js --> <!--script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script--> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script src="js/feather.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script> <script src="js/blueweather.js"></script> <script src="js/dashboard.js"></script> <script src="js/jquery.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script> <link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" /> <script> var today = new Date(); var val = new Date(); $('#startDate').datepicker({ uiLibrary: 'bootstrap4', iconsLibrary: 'fontawesome', minDate: today, maxDate: function () { return $('#endDate').val(); } }); $('#endDate').datepicker({ uiLibrary: 'bootstrap4', iconsLibrary: 'fontawesome', value: val, minDate: function () { return $('#startDate').val(); } }); val = new Date("2010/03/03") </script> </body> </html>