jdb/new-life-songs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finished initial implementation of songs and services page.

Browse Source
This commit is contained in:
Jonathan Bernard
2015-03-17 19:46:50 -05:00
parent 29f00f806b
commit 5bcd4d91c3
6 changed files with 53 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/main/webapp/css/new-life-songs.scss
View File

@ -48,4 +48,10 @@ header {
}
} } } }
th { font-family: "Roboto Condensed"; }
table {
th { font-family: "Roboto Condensed"; }
td a {
color: $dark;
display: block;
text-decoration: none; } }

4
src/main/webapp/js/new-life-songs.js
View File

@ -21,12 +21,16 @@
/// ### SongsView
NLS.SongsView = Backbone.View.extend({
el: $("#songs-table")[0],
initialize: function(options) { this.$el.dataTables(); }
});
/// ### ServicesView
NLS.ServicesView = Backbone.View.extend({
el: $("#services-table")[0],
initialize: function(options) { this.$el.dataTables(); }
});
})();

54
src/main/webapp/services/index.html
View File

@ -1,54 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="../images/favicon.ico">
<title>Services - New Life Songs Database</title>
<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"></script>
<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.js"></script>
<!--<script type="application/javascript" src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>-->
<script type="application/javascript" src="../js/new-life-songs.js"></script>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed|Roboto|Lato|Cuprum|Dosis|Cantarell' rel='stylesheet' type='text/css'>
<link href='http://cdn.datatables.net/1.10.5/css/jquery.dataTables.css' rel='stylesheet' type='text/css'>
<link href='../css/new-life-songs.css' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<h1>New Life Songs</h1>
<h2>Services</h2>
<nav><ul>
<li><a href="../admin/">Admin</a></li>
<li><a href="../songs/">Songs</a></li>
<li><a href="../services/">Services</a></li>
</ul></nav>
</header>
<section class=songs>
<table id=songs-table class="row-border hover compact" cellspacing=0>
<thead><tr>
<th class="dt-left">Date</th>
<th class="dt-left">Service Type</th>
</tr></thead>
<tfoot><tr>
<th class="dt-left">Date</th>
<th class="dt-left">Service Type</th>
</tr></tfoot>
</table>
</section>
<script type="application/javascript">
window.onload = function() {
$("#songs-table").dataTable( {
"ajax": {
"url": "http://localhost:8080/new-life-songs-2.0/api/v1/services/",
"dataSrc": "" },
"columns": [
{ "data": "date" },
{ "data": "serviceType" } ] }); };
</script>
</body>
</html>

32
src/main/webapp/songs/index.jsp → src/main/webapp/songs/index.gsp
View File

@ -1,4 +1,10 @@
<!DOCTYPE html>
<%
import com.jdbernard.nlsongs.servlet.NLSongsContext
songsDB = NLSongsContext.songsDB
%>
<html>
<head>
<meta charset="UTF-8">
@ -6,14 +12,14 @@
<title>Songs - New Life Songs Database</title>
<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"></script>
<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<!--<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"></script>-->
<!--<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>-->
<script type="application/javascript" src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.js"></script>
<!--<script type="application/javascript" src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>-->
<script type="application/javascript" src="../js/new-life-songs.js"></script>
<!--<script type="application/javascript" src="../js/new-life-songs-@version@.js"></script>-->
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed|Roboto|Lato|Cuprum|Dosis|Cantarell' rel='stylesheet' type='text/css'>
<link href='http://cdn.datatables.net/1.10.5/css/jquery.dataTables.css' rel='stylesheet' type='text/css'>
<link href='../css/new-life-songs.css' rel='stylesheet' type='text/css'>
<link href='../css/new-life-songs-@version@.css' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
@ -27,11 +33,16 @@
</ul></nav>
</header>
<section class=songs>
<table id=songs-table class="row-border hover compact" cellspacing=0>
<table id=songs-table class="row-border dataTable hover compact" cellspacing=0>
<thead><tr>
<th class="dt-left">Name</th>
<th class="dt-left">Artists</th>
</tr></thead>
<tbody>
<% songsDB.findAllSongs().sort { it.name }.each { song -> %>
<tr><td><a href='../song/<%= song.id %>'><%= song.name %></a></td>
<td><%= song.artists.join(", ") %></td></tr> <% } %>
</tbody>
<tfoot><tr>
<th class="dt-left">Name</th>
<th class="dt-left">Artists</th>
@ -40,15 +51,8 @@
</section>
<script type="application/javascript">
window.onload = function() {
$("#songs-table").dataTable( {
"ajax": {
"url": "http://localhost:8080/new-life-songs-2.0/api/v1/songs/",
"dataSrc": "" },
"columns": [
{ "data": "name" },
{ "data": "artists" } ] }); };
window.onload = function() { \$("#songs-table").dataTable(); };
</script>
</body>
</html>