Skip to content

Commit b6ddb64

Browse files
itaywitayw
committed
#1 EOD commit.
1 parent c33b478 commit b6ddb64

File tree

7 files changed

+96
-70
lines changed

7 files changed

+96
-70
lines changed

‎config/default.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ interfaces:
55
welcome: true
66
# host: joola #used for response-header [Server]
77
bind: 0.0.0.0
8-
port: 8080
8+
port: 8081
99
secureport: 8081
1010
secure: false
1111
#secureonly: false

‎index.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -13,18 +13,20 @@ joola.init({}, function (err) {
1313
joola.users.verifyAPIToken({user: joola.SYSTEM_USER}, 'apitoken-demo', function (err, user) {
1414
function generateRandomData() {
1515
var date = new Date();
16-
var randomGeoPoints = generateRandomPoints({'lat': 32.476664, 'lon': 34.974388}, 5000, Math.floor(Math.random() * 60) + 1);
16+
var randomGeoPoints = generateRandomPoints({'lat': 32.476664, 'lon': 34.974388}, 5000, Math.floor(Math.random() * 10) + 1);
1717
randomGeoPoints.forEach(function (point) {
1818
point.timestamp = date;
1919
date.setMilliseconds(date.getMilliseconds() - 5);
2020
point.location = {lat: point.lat, lon: point.lon};
2121
point.tag = 'tag';
2222
point.type = 'sensor';
23+
point.uuid = joola.common.uuid();
2324
point.metric = Math.floor(Math.random() * 60) + 1;
25+
point.temp = (Math.floor(Math.random() * 42) + 1);
26+
point.echo_level = (Math.floor(Math.random() * 200) + 1);
2427
point.humidity = (Math.floor(Math.random() * 100) + 1) / 100;
2528
delete point.lat;
2629
delete point.lon;
27-
2830
});
2931

3032
joola.beacon.insert({user: user}, 'geo', randomGeoPoints, function (err) {

‎public/css/default.css

+8-1
Original file line numberDiff line numberDiff line change
@@ -535,7 +535,7 @@ code#mousemove:empty {
535535
position: fixed;
536536

537537
height: 550px;
538-
bottom: -500px;
538+
bottom: -530px;
539539
width: 80%;
540540
left: 50%;
541541
margin-left: -40%;
@@ -545,6 +545,8 @@ code#mousemove:empty {
545545
border-top-right-radius: 3px;
546546

547547
font-size: 14px;
548+
transition: all 0.5s;
549+
transition-timing-function: ease-in-out;
548550

549551
}
550552

@@ -729,4 +731,9 @@ svg.timeline {
729731

730732
[jio-type=datepicker] .ui-datepicker-title {
731733
padding-top: 10px !important;
734+
}
735+
736+
.expand{
737+
cursor: pointer;
738+
color:#337ab7;
732739
}

‎public/index.html

+3-5
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
<script src="/js/leaflet.js"></script>
4242
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
4343

44-
<script src="http://localhost:8080/joola.js"></script>
44+
<script src="http://home.joo.la:8081/joola.js"></script>
4545
<script src="/js/state.js"></script>
4646
<script src="/js/globals.js"></script>
4747
<script src="/js/geohash.js"></script>
@@ -54,11 +54,12 @@
5454

5555
<div id="map-canvas"></div>
5656

57-
<div id="details" class="expanded">
57+
<div id="details" class="">
5858
<div class="header handle ">
5959
<span class="showingresults">
6060
Loading data...
6161
</span>
62+
<span class="expand pull-right">Expand</span>
6263
</div>
6364
<div class="content">
6465
<div id="table"></div>
@@ -80,11 +81,8 @@
8081
</nav>-->
8182

8283
<code id='mousemove'></code>
83-
84-
8584
<div class="timeline-wrapper">
8685
<div class="timeline-controls">
87-
8886
<button type="button" id="button_play" class="btn btn-success" onclick='buttonPlayPress()'>
8987
<i class="fa fa-play"></i>
9088
</button>

‎public/js/globals.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,5 @@ var map;
1414
var geojson = [];
1515
var heat;
1616
var EPSData = [];
17-
17+
var currentTableMarkers = {};
1818
var realtime = true;

‎public/js/joola.js

+66-60
Original file line numberDiff line numberDiff line change
@@ -3,41 +3,34 @@ joola.on('ready', function () {
33

44
joola.on('query_updated', function () {
55
$('.showingresults').text('Loading data...');
6-
while (runningQueries.length > 0) {
7-
var lastQueryUUID = runningQueries.pop();
6+
stopRunningQueries();
87

9-
if (lastQueryUUID && lastQueryUUID.length > 0) {
10-
console.log('stopping', lastQueryUUID);
11-
joola.query.stop(lastQueryUUID);
12-
}
13-
}
8+
/*joola.query.fetch(query, function (err, docs) {
9+
if (err) {
10+
console.error(err);
11+
throw err;
12+
}
1413
15-
joola.query.fetch(query, function (err, docs) {
16-
if (err) {
17-
console.error(err);
18-
throw err;
19-
}
14+
runningQueries.push(docs[0].query.realtimeUID);
15+
buildShowingResults();
16+
var data = docs[0].documents;
17+
data.forEach(function (point) {
18+
point.lat = point.location_lat;
19+
point.lon = point.location_lon;
2020
21-
runningQueries.push(docs[0].query.realtimeUID);
22-
buildShowingResults();
23-
var data = docs[0].documents;
24-
data.forEach(function (point) {
25-
point.lat = point.location_lat;
26-
point.lon = point.location_lon;
27-
28-
var marker = L.marker(new L.LatLng(point.lat, point.lon), {
29-
icon: L.mapbox.marker.icon({'marker-color': '#f86767', 'marker-size': 'small'}),
30-
data: point
31-
});
32-
//markers.addLayer(marker);
33-
});
34-
markers.eachLayer(function (marker) {
35-
//heat.addLatLng(marker.getLatLng());
36-
37-
});
38-
});
21+
var marker = L.marker(new L.LatLng(point.lat, point.lon), {
22+
icon: L.mapbox.marker.icon({'marker-color': '#f86767', 'marker-size': 'small'}),
23+
data: point
24+
});
25+
//markers.addLayer(marker);
26+
});
27+
markers.eachLayer(function (marker) {
28+
//heat.addLatLng(marker.getLatLng());
3929
30+
});
31+
});*/
4032

33+
4134
new joola.viz.Table({
4235
container: '#table',
4336
query: query,
@@ -62,46 +55,47 @@ joola.on('ready', function () {
6255
var uuid = raw[0].query.realtimeUID;
6356
if (runningQueries.indexOf(uuid) === -1)
6457
runningQueries.push(uuid);
58+
buildShowingResults();
6559
},
6660
enter: function (data) {
67-
var addMarker = function (point) {
68-
var marker = new google.maps.Marker({
69-
position: new google.maps.LatLng(point.lat, point.lon),
70-
map: map
71-
});
72-
var chHtml = "<h4>Event details</h4><div>";
73-
Object.keys(point).forEach(function (key) {
74-
var elem = point[key];
75-
if (typeof elem !== 'object')
76-
chHtml += '<strong>' + key + ':</strong> ' + elem + '<br/>';
77-
});
78-
var chInfoWindow = new google.maps.InfoWindow({
79-
content: chHtml,
80-
maxWidth: 250
81-
});
82-
google.maps.event.addListener(marker, 'click', function () {
83-
chInfoWindow.open(map, marker);
84-
});
85-
setTimeout(function () {
86-
marker.setMap(null);
87-
}, state.get('config.tail.duration'));
88-
};
89-
9061
data.forEach(function (point) {
62+
var key = point.key;
9163
point = point.raw;
64+
9265
point.lat = point.location_lat;
9366
point.lon = point.location_lon;
9467
//addMarker(point);
9568

96-
var marker = L.marker([point.lat, point.lon], {
97-
icon: L.mapbox.marker.icon({
98-
'marker-color': '#f86767'
99-
})
69+
var marker = L.marker(new L.LatLng(point.lat, point.lon), {
70+
icon: L.mapbox.marker.icon({'marker-color': '#f86767', 'marker-size': 'small'}),
71+
data: point,
72+
uuid: key
73+
});
74+
markers.addLayer(marker);
75+
currentTableMarkers[key] = marker;
76+
markers.eachLayer(function (marker) {
77+
//heat.addLatLng(marker.getLatLng());
10078
});
101-
//marker.addTo(map);
102-
10379
});
80+
81+
/*
82+
var marker = L.marker([point.lat, point.lon], {
83+
icon: L.mapbox.marker.icon({
84+
'marker-color': '#f86767'
85+
})
86+
});*/
87+
//marker.addTo(map);
88+
89+
10490
// L.mapbox.featureLayer(geojson).addTo(map);
91+
},
92+
exit: function (data) {
93+
data.forEach(function (point) {
94+
var marker = currentTableMarkers[point.key];
95+
// console.log('remove',marker);
96+
markers.removeLayer(marker);
97+
});
98+
10599
}
106100
});
107101

@@ -140,7 +134,8 @@ joola.on('ready', function () {
140134
});
141135

142136
function buildShowingResults() {
143-
var result = 'Showing results for date range ';
137+
var count = Object.keys(currentTableMarkers).length || 0;
138+
var result = 'Showing <strong>' + count + '</strong> markers from ';
144139

145140
if (typeof query.timeframe === 'string')
146141
result += '<strong>' + query.timeframe.replace(/_/ig, ' ') + '</strong>';
@@ -150,4 +145,15 @@ function buildShowingResults() {
150145
result += '<strong>' + query.timeframe.end.toISOString() + '</strong>';
151146
}
152147
$('.showingresults').html(result);
148+
}
149+
150+
function stopRunningQueries(){
151+
while (runningQueries.length > 0) {
152+
var lastQueryUUID = runningQueries.pop();
153+
154+
if (lastQueryUUID && lastQueryUUID.length > 0) {
155+
console.log('stopping', lastQueryUUID);
156+
joola.query.stop(lastQueryUUID);
157+
}
158+
}
153159
}

‎public/js/wireframe.js

+13
Original file line numberDiff line numberDiff line change
@@ -29,4 +29,17 @@ $().ready(function(){
2929

3030
$('.resizable').resizable({handles:'all'});
3131
$('.draggable').draggable({handle:'.handle'});
32+
33+
34+
$('.expand').on('click',function(){
35+
var self = $(this);
36+
if ($('#details').hasClass('expanded')){
37+
$('#details').removeClass('expanded');
38+
self.text('Expand');
39+
}
40+
else{
41+
$('#details').addClass('expanded');
42+
self.text('Collapse');
43+
}
44+
});
3245
});

0 commit comments

Comments
 (0)