Skip to content

Commit 11b4346

Browse files
writesonwriteson
committed
Added functionality and styling to the home page, including the use of the Handlebars.js templating engine, which I'll also use on the other pages of the app.
1 parent f1958c0 commit 11b4346

File tree

5 files changed

+161
-33
lines changed

5 files changed

+161
-33
lines changed

‎flask-connexion-rest-part-3/static/css/home.css‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
/*
2+
* CSS stylesheet for home page
3+
*/
4+
5+
.blog table {
6+
border-collapse: collapse;
7+
width: 100%;
8+
}
9+
10+
.blog table caption {
11+
font-weight: bold;
12+
padding: 10px 0 10px 0;
13+
border-bottom: 1px solid darkgrey;
14+
background-color: antiquewhite;
15+
}
16+
17+
.blog table thead {
18+
padding: 10px 0 10px 0;
19+
}
20+
21+
.blog table thead tj {
22+
border-right: 1px solid darkgrey;
23+
}
24+
25+
26+
th, td {
27+
padding: 3px;
28+
border: 1px solid darkgrey;
29+
}
30+
31+
td.name {
32+
text-align: center;
33+
width: 175px;
34+
}
35+
36+
td.timestamp {
37+
text-align: center;
38+
width: 230px;
39+
}
40+
41+
td.content {
42+
text-align: left;
43+
}
44+
45+
tbody tr:nth-child(odd) {
46+
background-color: lightgrey;
47+
}
48+
49+
tbody tr {
50+
cursor: pointer;
51+
}
52+
53+
tbody tr:hover {
54+
background-color: aqua;
55+
}

‎flask-connexion-rest-part-3/static/js/home.js‎

Lines changed: 51 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,21 @@ ns.model = (function() {
1313

1414
// Return the API
1515
return {
16-
16+
'read': function() {
17+
let ajax_options = {
18+
type: 'GET',
19+
url: '/api/notes',
20+
accepts: 'application/json',
21+
dataType: 'json'
22+
};
23+
$.ajax(ajax_options)
24+
.done(function(data) {
25+
$event_pump.trigger('model_read_success', [data]);
26+
})
27+
.fail(function(xhr, textStatus, errorThrown) {
28+
$event_pump.trigger('model_error', [xhr, textStatus, errorThrown]);
29+
});
30+
}
1731
};
1832
}());
1933

@@ -22,25 +36,56 @@ ns.model = (function() {
2236
ns.view = (function() {
2337
'use strict';
2438

39+
var $table = $(".blog table");
40+
2541
// Return the API
2642
return {
43+
build_table: function(data) {
44+
var source = $('#blog-table-template').html(),
45+
template = Handlebars.compile(source),
46+
html;
2747

48+
// Create the HTML from the template and notes
49+
html = template({notes: data});
50+
51+
// Append the rows to the table tbody
52+
$table.append(html);
53+
},
54+
error: function(error_msg) {
55+
$('.error')
56+
.text(error_msg)
57+
.css('visibility', 'visible');
58+
setTimeout(function() {
59+
$('.error').css('visibility', 'hidden');
60+
}, 3000)
61+
}
2862
};
2963
}());
3064

3165

3266
// Create the controller instance
33-
ns.controlle = (function(m, v) {
67+
ns.controller = (function(m, v) {
3468
'use strict';
3569

3670
let model = m,
3771
view = v,
3872
$event_pump = $('body');
3973

40-
console.log('controller created');
74+
// Get the note data from the model after the controller is done initializing
75+
setTimeout(function() {
76+
model.read();
77+
}, 100);
78+
79+
// Handle the model events
80+
$event_pump.on('model_read_success', function(e, data) {
81+
view.build_table(data);
82+
});
83+
84+
$event_pump.on('model_error', function(e, xhr, textStatus, errorThrown) {
85+
let error_msg = textStatus + ': ' + errorThrown + ' - ' + xhr.responseJSON.detail;
86+
view.error(error_msg);
87+
console.log(error_msg);
88+
})
4189

42-
// Return the API
43-
return {
4490

45-
};
4691
}(ns.model, ns.view));

‎flask-connexion-rest-part-3/static/js/people.js‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,12 @@ ns.model = (function() {
2222
dataType: 'json'
2323
};
2424
$.ajax(ajax_options)
25-
.done(function(data) {
26-
$event_pump.trigger('model_read_success', [data]);
27-
})
28-
.fail(function(xhr, textStatus, errorThrown) {
29-
$event_pump.trigger('model_error', [xhr, textStatus, errorThrown]);
30-
})
25+
.done(function(data) {
26+
$event_pump.trigger('model_read_success', [data]);
27+
})
28+
.fail(function(xhr, textStatus, errorThrown) {
29+
$event_pump.trigger('model_error', [xhr, textStatus, errorThrown]);
30+
});
3131
},
3232
create: function(person) {
3333
let ajax_options = {
@@ -39,12 +39,12 @@ ns.model = (function() {
3939
data: JSON.stringify(person)
4040
};
4141
$.ajax(ajax_options)
42-
.done(function(data) {
43-
$event_pump.trigger('model_create_success', [data]);
44-
})
45-
.fail(function(xhr, textStatus, errorThrown) {
46-
$event_pump.trigger('model_error', [xhr, textStatus, errorThrown]);
47-
})
42+
.done(function(data) {
43+
$event_pump.trigger('model_create_success', [data]);
44+
})
45+
.fail(function(xhr, textStatus, errorThrown) {
46+
$event_pump.trigger('model_error', [xhr, textStatus, errorThrown]);
47+
});
4848
},
4949
update: function(person) {
5050
let ajax_options = {
@@ -56,12 +56,12 @@ ns.model = (function() {
5656
data: JSON.stringify(person)
5757
};
5858
$.ajax(ajax_options)
59-
.done(function(data) {
60-
$event_pump.trigger('model_update_success', [data]);
61-
})
62-
.fail(function(xhr, textStatus, errorThrown) {
63-
$event_pump.trigger('model_error', [xhr, textStatus, errorThrown]);
64-
})
59+
.done(function(data) {
60+
$event_pump.trigger('model_update_success', [data]);
61+
})
62+
.fail(function(xhr, textStatus, errorThrown) {
63+
$event_pump.trigger('model_error', [xhr, textStatus, errorThrown]);
64+
});
6565
},
6666
'delete': function(person_id) {
6767
let ajax_options = {
@@ -71,12 +71,12 @@ ns.model = (function() {
7171
contentType: 'plain/text'
7272
};
7373
$.ajax(ajax_options)
74-
.done(function(data) {
75-
$event_pump.trigger('model_delete_success', [data]);
76-
})
77-
.fail(function(xhr, textStatus, errorThrown) {
78-
$event_pump.trigger('model_error', [xhr, textStatus, errorThrown]);
79-
})
74+
.done(function(data) {
75+
$event_pump.trigger('model_delete_success', [data]);
76+
})
77+
.fail(function(xhr, textStatus, errorThrown) {
78+
$event_pump.trigger('model_error', [xhr, textStatus, errorThrown]);
79+
});
8080
}
8181
};
8282
}());
@@ -289,7 +289,7 @@ ns.controller = (function(m, v) {
289289
let error_msg = textStatus + ': ' + errorThrown + ' - ' + xhr.responseJSON.detail;
290290
view.error(error_msg);
291291
console.log(error_msg);
292-
})
292+
});
293293
}(ns.model, ns.view));
294294

295295

‎flask-connexion-rest-part-3/templates/home.html‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,36 @@
88
{% block page_name %}Mini-Blog Page Demo{% endblock %}
99

1010
{% block body %}
11-
<div class="container">
12-
</div>
11+
<div class="blog">
12+
<table>
13+
<caption>Blog Entries</caption>
14+
<thead>
15+
<tr>
16+
<th>Author</th>
17+
<th>Timestamp</th>
18+
<th>Note</th>
19+
</tr>
20+
</thead>
21+
</table>
22+
</div>
23+
24+
<!-- Handlebars script tag entry -->
25+
{% raw %}
26+
<script id="blog-table-template" type="text/x-handlebars-template">
27+
<tbody>
28+
{{#each notes}}
29+
<tr data-person-id="{{person.person_id}}" data-note-id="{{note_id}}">
30+
<td class="name">{{person.fname}} {{person.lname}}</td>
31+
<td class="timestamp">{{timestamp}}</td>
32+
<td class="content">{{content}}</td>
33+
</tr>
34+
{{/each}}
35+
</tbody>
36+
</script>
37+
{% endraw %}
38+
1339
{% endblock %}
40+
1441
{% block javascript %}
1542
<script src="/static/js/home.js"></script>
1643
{% endblock %}

‎flask-connexion-rest-part-3/templates/parent.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
1212
crossorigin="anonymous">
1313
</script>
14+
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
1415
{% endblock %}
1516
</head>
1617
<body>

0 commit comments

Comments
 (0)