Skip to content

Commit bf37619

Browse files
bbraithwaitebbraithwaite
committed
refactor 4: use html templates
1 parent 3b09ce2 commit bf37619

2 files changed

Lines changed: 68 additions & 16 deletions

File tree

‎app/index.html‎

Lines changed: 7 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<script type="text/javascript" src="bower_components/boc-autocomplete/build/boc.autocomplete.min.js"></script>
99
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
1010
<script type="text/javascript" src="map-service.js"></script>
11+
<script type="text/javascript" src="templates.js"></script>
1112
</head>
1213
<body>
1314
<div id="map-canvas"></div>
@@ -107,14 +108,14 @@
107108
var controlText = document.createElement('div');
108109
controlText.id = 'film_detail';
109110
controlText.className = 'film_detail';
110-
controlText.innerHTML = '<h2>' + response + '</h2><br><em>Loading locations and content...</em>';
111+
controlText.innerHTML = templates.loading(response);
111112

112113
document.getElementById('bottom_panel').appendChild(controlText);
113114

114115
} else {
115116

116117
var controlText = document.getElementById('film_detail');
117-
controlText.innerHTML = '<h2>' + response + '</h2><em>Loading locations and content...</em>';
118+
controlText.innerHTML = templates.loading(response);;
118119
controlText.style.display = '';
119120

120121
}
@@ -126,15 +127,7 @@
126127
xhr.onload = function() {
127128
var detail = this.response;
128129

129-
document.getElementById('film_detail').innerHTML = '<img src="' + detail.poster + '" alt="poster" align="right" width="80" height="119" style="padding-left:5px;" />'+
130-
'<div id="plot" style="overflow: scroll; height:135px;margin-top:5px;">'+
131-
'<h2>' + detail.title + '</h2>'+
132-
'' + detail.releaseYear + '</em>, Director: '+
133-
'<em>' + detail.director + '</em><br><br>'+
134-
'Staring: ' + detail.actors + '<br><br>'+
135-
'Rating: ' + detail.rating + '<br><br>'+
136-
'Genre: ' + detail.genre + '<br><br>'+
137-
'<br>Plot: ' + detail.plot + '<br><br></div>';
130+
document.getElementById('film_detail').innerHTML = templates.movie(detail);
138131
}
139132
xhr.open("GET", "/movies/content?title=" + encodeURIComponent(title) + '&director=' + encodeURIComponent(director));
140133
xhr.responseType = "json";
@@ -155,7 +148,7 @@
155148
locationDiv.id = 'location_detail';
156149
locationDiv.className = 'location_detail';
157150
locationDiv.style.display = '';
158-
locationDiv.innerHTML = '<h2>' + location.location + '</h2><img src="https://maps.googleapis.com/maps/api/streetview?size=120x120&location=' + location.geo.lat + ',' + location.geo.lng + '" align="right">';
151+
locationDiv.innerHTML = templates.location(location);
159152

160153
var sateliteViewButton = document.createElement('input');
161154
sateliteViewButton.type = 'button';
@@ -209,14 +202,12 @@
209202
}
210203

211204
function HomeControl(controlDiv, map) {
212-
// Set CSS for the control border.
213205
var dashBoard = document.createElement('div');
214-
dashBoard.innerHTML = '<h2>SF Movies</h2><div>See film locations for all movies filmed in San Fransisco. <strong>Click on a marker to see more information about a location.</strong>.</div><p>This is a sample project from <a href="http://www.bradoncode.com">Bradley Braithwaite</a>.</p>';
206+
dashBoard.innerHTML = templates.home();
215207
dashBoard.id = 'dashboard';
216208
dashBoard.className = 'dashboard';
217-
218209
controlDiv.appendChild(dashBoard);
219210
}
220211
</script>
221212
</body>
222-
</html
213+
</html>

‎app/templates.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
var templates = {};
2+
3+
templates.mapCanvas = function mapCanvasTemplate() {
4+
return document.getElementById('map-canvas');
5+
};
6+
7+
templates.home = function homeTemplate() {
8+
var buf = [];
9+
buf.push('<h2>SF Movies</h2><div>See film locations for all movies filmed in San Fransisco. <strong>Click on a marker to see more information about a location.</strong>.</div>');
10+
buf.push('<p>This is a sample project from <a href="http://www.bradoncode.com">Bradley Braithwaite</a>.</p>');
11+
return buf.join('');
12+
};
13+
14+
templates.loading = function loadingTemplate(response) {
15+
var buf = [];
16+
buf.push('<h2>');
17+
buf.push(response);
18+
buf.push('</h2><br><em>Loading locations and content...</em>');
19+
return buf.join('');
20+
};
21+
22+
templates.movie = function movieTemplate(detail) {
23+
var buf = [];
24+
buf.push('<img src="');
25+
buf.push(detail.poster);
26+
buf.push('" alt="poster" align="right" width="80" height="119" style="padding-left:5px;" />');
27+
buf.push('<div id="plot" style="overflow: scroll; height:135px;margin-top:5px;">');
28+
buf.push('<h2>');
29+
buf.push(detail.title);
30+
buf.push('</h2>');
31+
buf.push(detail.releaseYear);
32+
buf.push('</em>, Director: ');
33+
buf.push('<em>');
34+
buf.push(detail.director);
35+
buf.push('</em><br><br>');
36+
buf.push('Staring: ');
37+
buf.push(detail.actors);
38+
buf.push('<br><br>');
39+
buf.push('Rating: ');
40+
buf.push(detail.rating);
41+
buf.push('<br><br>');
42+
buf.push('Genre: ');
43+
buf.push(detail.genre);
44+
buf.push('<br><br>');
45+
buf.push('<br>Plot: ');
46+
buf.push(detail.plot);
47+
buf.push('<br><br></div>');
48+
return buf.join('');
49+
};
50+
51+
templates.location = function locationTemplate(location) {
52+
var buf = [];
53+
buf.push('<h2>');
54+
buf.push(location.location);
55+
buf.push('</h2><img src="https://maps.googleapis.com/maps/api/streetview?size=120x120&location=');
56+
buf.push(location.geo.lat);
57+
buf.push(',');
58+
buf.push(location.geo.lng);
59+
buf.push('" align="right">');
60+
return buf.join('');
61+
};

0 commit comments

Comments
 (0)