Skip to content

Commit 3f52178

Browse files
committed
added paging logic
1 parent cf71da7 commit 3f52178

3 files changed

Lines changed: 127 additions & 54 deletions

File tree

‎data/airport_schedule.php‎

Lines changed: 33 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<?php
22
// This function returns a fake dataset based on the "data" query parameter in the format:
33
// {
4-
// "response": {
5-
// "results": [
6-
// {
4+
// "response": {
5+
// "results": [
6+
// {
77
// "source" : "arrivals",
88
// "data" : [
99
// {"flight:101", "scheduled":"0728", "city":"London", "airline":"0", "gate":"C21", "status":"1", "remarks":"est 2130+"}
1010
// ]
11-
// }
12-
// ]
11+
// }
12+
// ]
1313
// }
1414
// }
1515

@@ -30,7 +30,7 @@ function randomTime(){
3030

3131
$arrivals = array(
3232
"source" => "arrivals",
33-
"data" => array(
33+
"data" => array(
3434
0 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Atlanta","airline"=>randomAirline(),"gate"=>"C21","status"=>"1","remarks"=>"10m early"),
3535
1 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Baltimore","airline"=>randomAirline(),"gate"=>"A7","status"=>"0","remarks"=>""),
3636
2 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Charleston","airline"=>randomAirline(),"gate"=>"A18","status"=>"0","remarks"=>""),
@@ -42,13 +42,25 @@ function randomTime(){
4242
8 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Indianapolis","airline"=>randomAirline(),"gate"=>"D16","status"=>"0","remarks"=>""),
4343
9 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Jakarta","airline"=>randomAirline(),"gate"=>"A6","status"=>"0","remarks"=>""),
4444
10 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Karachi","airline"=>randomAirline(),"gate"=>"C7","status"=>"0","remarks"=>""),
45-
11 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Los Angeles","airline"=>randomAirline(),"gate"=>"B12","status"=>"0","remarks"=>"")
45+
11 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Los Angeles","airline"=>randomAirline(),"gate"=>"B12","status"=>"0","remarks"=>""),
46+
12 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Atlanta","airline"=>randomAirline(),"gate"=>"C21","status"=>"1","remarks"=>"10m early"),
47+
13 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Baltimore","airline"=>randomAirline(),"gate"=>"A7","status"=>"0","remarks"=>""),
48+
14 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Charleston","airline"=>randomAirline(),"gate"=>"A18","status"=>"0","remarks"=>""),
49+
15 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Durban","airline"=>randomAirline(),"gate"=>"D44","status"=>"1","remarks"=>"delayed"),
50+
16 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Edinburgh","airline"=>randomAirline(),"gate"=>"A12","status"=>"0","remarks"=>""),
51+
17 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Frankfurt","airline"=>randomAirline(),"gate"=>"B2","status"=>"0","remarks"=>""),
52+
18 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Galveston","airline"=>randomAirline(),"gate"=>"B14","status"=>"0","remarks"=>""),
53+
19 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Havana","airline"=>randomAirline(),"gate"=>"C6","status"=>"0","remarks"=>""),
54+
20 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Indianapolis","airline"=>randomAirline(),"gate"=>"D16","status"=>"0","remarks"=>""),
55+
21 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Jakarta","airline"=>randomAirline(),"gate"=>"A6","status"=>"0","remarks"=>""),
56+
22 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Karachi","airline"=>randomAirline(),"gate"=>"C7","status"=>"0","remarks"=>""),
57+
23 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Los Angeles","airline"=>randomAirline(),"gate"=>"B12","status"=>"0","remarks"=>"")
4658
)
4759
);
4860

4961
$departures = array(
5062
"source" => "departures",
51-
"data" => array(
63+
"data" => array(
5264
0 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Ouagadougou","airline"=>randomAirline(),"gate"=>"C21","status"=>"1","est 2130+"),
5365
1 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Prague","airline"=>randomAirline(),"gate"=>"A7","status"=>"0","remarks"=>""),
5466
2 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Quanduc","airline"=>randomAirline(),"gate"=>"A18","status"=>"0","remarks"=>""),
@@ -60,7 +72,19 @@ function randomTime(){
6072
8 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Wagga Wagga","airline"=>randomAirline(),"gate"=>"D16","status"=>"0","remarks"=>""),
6173
9 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Xuzhou","airline"=>randomAirline(),"gate"=>"A6","status"=>"0","remarks"=>""),
6274
10 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Yakutsk","airline"=>randomAirline(),"gate"=>"C7","status"=>"0","remarks"=>""),
63-
11 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Zagreb","airline"=>randomAirline(),"gate"=>"B12","status"=>"0","remarks"=>"")
75+
11 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Zagreb","airline"=>randomAirline(),"gate"=>"B12","status"=>"0","remarks"=>""),
76+
12 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Ouagadougou","airline"=>randomAirline(),"gate"=>"C21","status"=>"1","est 2130+"),
77+
13 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Prague","airline"=>randomAirline(),"gate"=>"A7","status"=>"0","remarks"=>""),
78+
14 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Quanduc","airline"=>randomAirline(),"gate"=>"A18","status"=>"0","remarks"=>""),
79+
15 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Rotterdam","airline"=>randomAirline(),"gate"=>"D44","status"=>"1","cancelled"),
80+
16 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Seoul","airline"=>randomAirline(),"gate"=>"A12","status"=>"0","remarks"=>""),
81+
17 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Tashkent","airline"=>randomAirline(),"gate"=>"B2","status"=>"0","remarks"=>""),
82+
18 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Ulaanbaatar","airline"=>randomAirline(),"gate"=>"B14","status"=>"1","remarks"=>"weather"),
83+
19 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Valparaiso","airline"=>randomAirline(),"gate"=>"C6","status"=>"0","remarks"=>""),
84+
20 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Wagga Wagga","airline"=>randomAirline(),"gate"=>"D16","status"=>"0","remarks"=>""),
85+
21 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Xuzhou","airline"=>randomAirline(),"gate"=>"A6","status"=>"0","remarks"=>""),
86+
22 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Yakutsk","airline"=>randomAirline(),"gate"=>"C7","status"=>"0","remarks"=>""),
87+
23 => array("flight"=>rand(1,2000),"scheduled"=>randomTime(),"city"=>"Zagreb","airline"=>randomAirline(),"gate"=>"B12","status"=>"0","remarks"=>"")
6488
)
6589
);
6690

‎flights.php‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
</head>
1010
<body>
11-
11+
1212
<!-- ============================================ -->
1313
<!-- CONTAINER -->
1414
<div id="board" class="chartContainer splitflap">
@@ -17,7 +17,7 @@
1717
<input type="hidden" name="data" value="<?php echo $_GET["data"] ?>" /> <!-- the type of data you want from the service -->
1818
<input type="hidden" name="sort" value="<?php echo $_GET["sort"] ?>" /> <!-- the data group to sort by -->
1919
<input type="hidden" name="order" value="<?php echo $_GET["order"] ?>" /> <!-- sort order (default is ascending) -->
20-
20+
2121
<h1><?php echo $_GET["data"] ?></h1>
2222

2323
<!-- Header: 30px/char, 15px/separator, 120px/logo -->
@@ -29,7 +29,7 @@
2929
<div class="header" style="width:270px;margin-left:30px;text-align:left;">Remarks</div>
3030

3131
<!-- rows will be placed here dynamically from #row_template -->
32-
32+
3333
</div>
3434
<!-- END CONTAINER -->
3535
<!-- ============================================ -->
@@ -114,20 +114,22 @@
114114
"numRows": 12, // number of rows
115115

116116
// OPTIONAL
117-
"maxResults": 12, // number of items to retrieve from service
117+
"maxResults": 24, // number of items to retrieve from service
118118
"data": $("#board").find("input[name=data]").val(),
119119
"sort": $("#board").find("input[name=sort]").val(),
120120
"order": $("#board").find("input[name=order]").val(),
121-
"refreshInterval": 30000, // how often to refresh the display (ms)
122-
"stagger": 1500 // delay between loading rows (ms)
121+
"refreshInterval": 60000, // how often to refresh the display (ms)
122+
"pageInterval": 30000, // delay between pages (ms)
123+
"stagger": 1500, // delay between loading rows (ms)
124+
"pageReloadAt": 120 // number of refreshes before clearing & reloading window
123125
};
124126

125127
$(document).ready(function() {
126128
sf.board.init(sf.options);
127129
sf.items.init(sf.options);
128130
sf.items.load(sf.options);
129131
});
130-
132+
131133
</script>
132134

133135
</body>

‎js/split-flap.js‎

Lines changed: 85 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ sf.local = {};
66

77
// Namespace for plugin-specific javascript,
88
// to be loaded later in separate files
9-
sf.plugins = {};
9+
sf.plugins = {};
1010

1111
/* ********************************************************************* */
1212
/* HOUSEKEEPING */
@@ -23,8 +23,8 @@ Array.prototype.rotate = (function() {
2323
})();
2424

2525
sf.util = {
26-
27-
// Function splits string into array of substrings of len or less.
26+
27+
// Function splits string into array of substrings of len or less.
2828
// Splits happen at the last space.
2929
splitString: function(str,len){
3030
var arr = [];
@@ -39,7 +39,7 @@ sf.util = {
3939
}
4040
}
4141
// push the last line into the array
42-
arr.push(line);
42+
arr.push(line);
4343
return arr;
4444
},
4545

@@ -91,11 +91,13 @@ sf.board = {
9191
},
9292

9393
// Utility method to clear the board.
94-
clear: function() {
95-
var container = arguments[0],
96-
rows = container.find(".row"),
97-
i=0,
98-
stagger = sf.options.stagger ? sf.options.stagger : 1000;
94+
// It goes through every group in every row,
95+
// calling loadGroup() with an empty string.
96+
// When it gets to the last row it reloads the page.
97+
// NOTE: Use this to avoid memory leaks -- call it every hour or so.
98+
clear: function(container) {
99+
var rows = container.find(".row"),
100+
i=0;
99101
var loop = function() {
100102
setTimeout(function () {
101103
var groups = $(rows[i]).find(".group");
@@ -104,30 +106,63 @@ sf.board = {
104106
})
105107
i++;
106108
if (i < rows.length) {
107-
loop(i);
109+
loop(i);
110+
} else {
111+
// give it 10 seconds to finish clearing
112+
// the board, then reload the page.
113+
setTimeout(function(){
114+
window.location.reload();
115+
}, 10*1000)
108116
}
109-
}, stagger);
117+
}, 500);
110118
};
111119
loop();
112120
}
121+
113122
};
114123

115-
// This Collection is used to hold the datset for this board.
124+
// This Collection is used to hold the datset for this board.
125+
// If there's more results than rows, it will page the results
126+
// at options.pageInterval.
116127
sf.Items = Backbone.Collection.extend({
117128
update: function(options){
118129
this.fetch({
119130
success: function(response){
120-
sf.display.loadSequentially(response.toJSON(), options.container);
131+
var results = response.toJSON(),
132+
maxResults = options.maxResults ? options.maxResults : 24,
133+
numResults = results.length <= maxResults ? results.length : maxResults,
134+
numRows = options.numRows,
135+
numPages = Math.ceil(numResults/numRows),
136+
pageInterval = options.pageInterval ? options.pageInterval : 30000,
137+
i=0,page=0;
138+
// Load initial results
139+
sf.display.loadSequentially(results.slice(i,i+numRows),options.container);
140+
// console.log("results at page",page,"index",i,results.slice(i,i+numRows));
141+
i += numRows;
142+
page++;
143+
// This recursive function loops through the results by page
144+
loop = function() {
145+
setTimeout(function () {
146+
sf.display.loadSequentially(results.slice(i,i+numRows),options.container);
147+
// console.log("results at page",page,"index",i,results.slice(i,i+numRows));
148+
i += numRows;
149+
page++;
150+
if (page < numPages) {
151+
loop(i);
152+
}
153+
}, pageInterval);
154+
};
155+
loop();
121156
}
122157
});
123158
},
124159
parse: function(json){
125-
return(sf.plugins[sf.options.plugin].formatData(json)); // normalize this data
160+
return(sf.plugins[sf.options.plugin].formatData(json)); // normalize this data
126161
}
127162
});
128163

129164
sf.items = {
130-
165+
131166
// Get the data for a board and load it
132167
init: function(options) {
133168
// create the Collection
@@ -136,10 +171,10 @@ sf.items = {
136171

137172
// check if we're using jsonp
138173
if(sf.plugins[options.plugin].dataType ==="jsonp"){
139-
items.sync = function(method, model, options){
140-
options.timeout = 10000;
141-
options.dataType = "jsonp";
142-
return Backbone.sync(method, model, options);
174+
items.sync = function(method, model, options){
175+
options.timeout = 10000;
176+
options.dataType = "jsonp";
177+
return Backbone.sync(method, model, options);
143178
};
144179
}
145180

@@ -157,14 +192,26 @@ sf.items = {
157192

158193
load: function(options){
159194

160-
// get the data and load the chart
195+
// Set a count to keep track of how many times the page has been refreshed.
196+
// When count has reached options.pageReloadAt, clear the board and reload the window.
197+
var count = 1;
198+
var pageReloadAt = options.pageReloadAt ? options.pageReloadAt : 120;
199+
200+
// Get the initial data and load the chart
161201
items.update(options);
162202

163203
// If user has specified a refresh interval, setInterval()
164204
if(options.refreshInterval){
165205
setInterval(function(){
166-
items.update(options);
167-
}, options.refreshInterval);
206+
207+
if(count < pageReloadAt){
208+
items.update(options);
209+
count = count + 1;
210+
} else {
211+
sf.board.clear(options.container);
212+
}
213+
214+
}, options.refreshInterval);
168215
}
169216
}
170217

@@ -188,9 +235,9 @@ sf.display = {
188235
NumDrum: function() {
189236
this.order = [' ','0','1','2','3','4','5','6','7','8','9','.',','];
190237
},
191-
ImageDrum: function() {
238+
ImageDrum: function() {
192239
this.order = []; // Intentionally empty here. Override in plugins/<plugin_name>/custom.js
193-
},
240+
},
194241

195242
initRow: function(row) { // expects the jQuery DOM object
196243
// For each character, construct a drum array and
@@ -225,7 +272,7 @@ sf.display = {
225272
}
226273
i++;
227274
if (i < rows.length) {
228-
loop(i);
275+
loop(i);
229276
}
230277
}, stagger);
231278
};
@@ -248,7 +295,7 @@ sf.display = {
248295
}
249296
}
250297
},
251-
298+
252299
loadGroup: function() {
253300
// load a string into a group of display elements
254301
var input = arguments[0], // the input (which may be a string or a int)
@@ -258,24 +305,24 @@ sf.display = {
258305
strLen = elements.size(),
259306
i, characters;
260307
// ###################################
261-
// STATUS INDICATORS
308+
// STATUS INDICATORS
262309
// Add the class "on" to the correct element
263-
if(target.hasClass("status")) {
310+
if(target.hasClass("status")) {
264311
target.find("div").removeClass("on");
265312
target.find(".s"+input).addClass("on");
266313

267314
// ###################################
268-
// IMAGES
315+
// IMAGES
269316
// Only one display element--no need to iterate
270317
} else if(target.find(".image").length > 0){
271318
sf.display.change(target.find("span"), input, false);
272319

273320
// ###################################
274-
// NORMAL CHARACTERS
321+
// NORMAL CHARACTERS
275322
// otherwise, this group is composed of split-flap character or number elements
276-
} else {
323+
} else {
277324
input = input.toUpperCase();
278-
// get individual characters and pad the array
325+
// get individual characters and pad the array
279326
// with spaces (to clear any existing characters)
280327
characters = input.split("");
281328
for(i=0;i<strLen;i++) {
@@ -293,7 +340,7 @@ sf.display = {
293340
}
294341

295342
},
296-
343+
297344
change: function() {
298345
var container = arguments[0],
299346
c = arguments[1], // the new character
@@ -310,7 +357,7 @@ sf.display = {
310357
// rotate the dom element's stored array to the new order for next time
311358
container.data("order", values.rotate(index));
312359
},
313-
360+
314361
show: function() {
315362
var container = arguments[0],
316363
i = arguments[1],
@@ -320,7 +367,7 @@ sf.display = {
320367
// punctuation has special class names
321368
// TODO: can we be more efficient here? This method gets called a lot!
322369
switch(i) {
323-
case " ": c = "csp"; break;
370+
case " ": c = "csp"; break;
324371
case ".": c = "cper"; break;
325372
case ",": c = "ccom"; break;
326373
case "?": c = "cque"; break;
@@ -329,9 +376,9 @@ sf.display = {
329376
case "'": c = "capo"; break;
330377
case "+": c = "cplu"; break;
331378
case "-": c = "cmin"; break;
332-
case ":": c = "ccol"; break;
333-
case "@": c = "cat"; break;
334-
case "#": c = "chsh"; break;
379+
case "↑": c = "cup"; break;
380+
case "↓": c = "cdn"; break;
381+
case "%": c = "cpct"; break;
335382
}
336383
container.fadeOut(50, function(){
337384
container.removeClass().addClass(c);

0 commit comments

Comments
 (0)