#1 added datepicker to timeline.

Author: itayw

index.js

@@ -20,8 +20,8 @@ joola.init({}, function (err) {
         point.location = {lat: point.lat, lon: point.lon};
         point.tag = 'tag';
         point.type = 'sensor';
-        point.metric = 1;
-        point.humidity = 0.9;
+        point.metric = Math.floor(Math.random() * 60) + 1;
+        point.humidity = (Math.floor(Math.random() * 100) + 1) / 100;
         delete point.lat;
         delete point.lon;
 

public/css/default.css

@@ -515,31 +515,50 @@ select.mcontrols {
   background: #3074a4;
 }
 
-.ui-control code {
+code#mousemove {
   position: absolute;
   top: 50px;
   left: 50%;
   margin-left: -110px;
   width: 220px;
   border-radius: 3px;
-  z-index: 1001;
+
   text-align: center;
-  padding-top:5px;
+  padding-top: 5px;
 }
 
-.ui-control code:empty {
-  display:none;
+code#mousemove:empty {
+  display: none;
 }
 
 #details {
-  position: absolute;
+  position: fixed;
+
+  height: 550px;
+  bottom: -500px;
+  width: 80%;
+  left: 50%;
+  margin-left: -40%;
+  background-color: whitesmoke;
+  padding: 10px;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+
+  font-size: 14px;
+
+}
 
-  bottom: 60px;
-  left: 10px;
-  background-color: black;
+#details #table {
+
+}
+
+[jio-type="table"] .table-wrapper {
+  height: 420px;
+}
+
+#details.expanded {
+  bottom: 0;
 
-  min-width: 450px;
-  min-height: 200px;
 }
 
 pre.ui-coordinates {
@@ -576,8 +595,8 @@ pre.ui-coordinates {
   position: absolute;
   top: 10px;
   left: 50%;
-  width: 40%;
-  margin-left: -20%;
+  width: 50%;
+  margin-left: -25%;
 
   border: 0 solid white;
   border-radius: 3px;
@@ -626,6 +645,7 @@ svg.timeline {
   color: white;
 }
 
+/*
 .timeline-wrapper .timeline-state {
   display: table-cell;
   padding-left: 5px;
@@ -640,7 +660,7 @@ svg.timeline {
   border-left: 1px solid #666;
   width: 95px;
 }
-
+*/
 .timeline-wrapper .timeline-state .timeline-state-caption {
   position: relative;
   top: -4px;
@@ -651,3 +671,65 @@ svg.timeline {
   fill: black;
   fill-opacity: 0.825;
 }
+
+.timeline-wrapper .timeline-state {
+  display: table-cell;
+  padding: 0;
+  background-color: whitesmoke;
+  text-transform: uppercase;
+  font-size: 12px;
+  font-weight: bold;
+  border: 0;
+  border-bottom-right-radius: 3px;
+  border-top-right-radius: 3px;
+  color: black;
+  border-left: 1px solid #666;
+  width: 125px;
+}
+
+[jio-type="datepicker"] {
+  float: none !important;
+}
+
+[jio-type=datepicker] .jcontainer {
+  border: 0 !important;
+  position: relative !important;
+  top: -2px !important;
+  left: 5px !important;
+  border-radius: 0 !important;
+}
+
+[jio-type=datepicker] .datetable .dropdownmarker {
+  position: inherit !important;
+  margin-top: 3px !important;
+}
+
+[jio-type=datepicker] .datebox.expanded .datetable .dropdownmarker {
+  margin-top: -3px !important;
+}
+
+[jio-type=datepicker] .picker {
+  margin-left: -4px !important;
+  margin-top: 0 !important;
+}
+
+[jio-type=datepicker] .expanded {
+  border-bottom-right-radius: 0 !important;
+}
+
+[jio-type=datepicker] .picker .wrapper .control .optionscontainer {
+  font-size: 14px !important;
+}
+
+.compareoption {
+  display: none !important;
+}
+
+[jio-type=datepicker] .picker .wrapper .control .optionscontainer .daterange .dateoption {
+  width: 7.5em !important;
+  font-size: 14px !important;
+}
+
+[jio-type=datepicker] .ui-datepicker-title {
+  padding-top: 10px !important;
+}

public/index.html

@@ -6,7 +6,7 @@
   <meta charset="utf-8">
   <link rel="stylesheet" href="http://layout.jquery-dev.com/lib/css/layout-default-latest.css">
   <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
-  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css">
+  <!--<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css">-->
   <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
   <link rel="stylesheet" href="/css/default.css">
 
@@ -41,25 +41,29 @@
   <script src="/js/leaflet.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
 
-  <script src="/js/vendor/crossfilter.js"></script>
-
-  <script src="http://localhost:8080/joola.js?APIToken=apitoken-demo"></script>
+  <script src="http://localhost:8080/joola.js"></script>
   <script src="/js/state.js"></script>
-  <script src="/js/wireframe.js"></script>
+  <script src="/js/globals.js"></script>
   <script src="/js/geohash.js"></script>
   <script src="/js/joola.js"></script>
+  <script src="/js/wireframe.js"></script>
   <script src="/js/timeline.js"></script>
-
+  <script src="/js/sequence.js"></script>
 </head>
 <body>
 
 <div id="map-canvas"></div>
 
-<div id="details" class="resizable draggable">
-  <div class="header handle">Details Window</div>
+<div id="details" class="expanded">
+  <div class="header handle ">
+    <span class="showingresults">
+      Loading data...
+    </span>
+  </div>
   <div class="content">
-    <pre id='coordinates' class='ui-coordinates'></pre>
-    <div class="clearfix"></div>
+    <div id="table"></div>
+    <!--<pre id='coordinates' class='ui-coordinates'></pre>
+    <div class="clearfix"></div>-->
   </div>
 </div>
 
@@ -74,9 +78,9 @@
   <a href='#' id='geocoder'>Geocoder</a>
   <a href='#' id='infocontrol'>Info Control</a>
 </nav>-->
-<div id='position' class='ui-control'>
-  <code id='mousemove'></code><br/>
-</div>
+
+<code id='mousemove'></code>
+
 
 <div class="timeline-wrapper">
   <div class="timeline-controls">
@@ -89,4 +93,6 @@
   <div class="timeline-state"><span class="timeline-state-caption">Last 90 sec.</span></div>
 </div>
 </body>
-</html>
+</html>
+    
+    

public/js/globals.js

@@ -0,0 +1,18 @@
+var query = {
+  timeframe: 'last_90_seconds',
+  interval: 'second',
+  dimensions: ['location.lat', 'location.lon', 'tag', 'type'],
+  metrics: ['metric', {key: 'humidity', aggregation: 'avg', decimals: 2}],
+  collection: 'geo',
+  realtime: {
+    enabled: true,
+    interval: state.get('config.refresh.duration')
+  }
+};
+var runningQueries=[];
+var map;
+var geojson = [];
+var heat;
+var EPSData = [];
+
+var realtime = true;