Sprint5 2

models/album.js

@@ -1,2 +1,16 @@
 var mongoose = require("mongoose");
 var Schema = mongoose.Schema;
+
+var Song = require('./song');
+
+var AlbumSchema = new Schema({
+  artistName: String,
+  name: String,
+  releaseDate: String,
+  genres: [ String ],
+  songs: [Song.schema]
+});
+
+var Album = mongoose.model('Album', AlbumSchema);
+
+module.exports = Album;

models/index.js

@@ -1,2 +1,7 @@
 var mongoose = require("mongoose");
-mongoose.connect("mongodb://localhost/tunely");
+mongoose.connect("mongodb://localhost/tunely_test");
+var Album = require('./album');
+var Song = require('./song');
+
+module.exports.Album = Album;
+module.exports.Song = Song;

models/song.js

@@ -0,0 +1,11 @@
+var mongoose = require("mongoose");
+var Schema = mongoose.Schema;
+
+var SongSchema = new Schema({
+  name: String,
+  trackNumber: Number
+});
+
+var Song = mongoose.model('Song', SongSchema);
+
+module.exports = Song;

package.json

@@ -4,7 +4,8 @@
   "description": "An app for tracking your music collection",
   "main": "server.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "nodemon server.js"
   },
   "repository": {
     "type": "git",
@@ -17,6 +18,8 @@
   },
   "homepage": "https://github.com/tgaff/tunely#readme",
   "dependencies": {
-    "express": "^4.13.3"
+    "body-parser": "^1.14.1",
+    "express": "^4.13.3",
+    "mongoose": "^4.2.9"
   }
 }

public/css/styles.css

@@ -13,4 +13,3 @@
   vertical-align: baseline;
   margin-right: 12px;
 }
-

public/js/app.js

@@ -6,52 +6,140 @@
  */
 
 
-/* hard-coded data! */
-var sampleAlbums = [];
-sampleAlbums.push({
-             artistName: 'Ladyhawke',
-             name: 'Ladyhawke',
-             releaseDate: '2008, November 18',
-             genres: [ 'new wave', 'indie rock', 'synth pop' ]
-           });
-sampleAlbums.push({
-             artistName: 'The Knife',
-             name: 'Silent Shout',
-             releaseDate: '2006, February 17',
-             genres: [ 'synth pop', 'electronica', 'experimental' ]
-           });
-sampleAlbums.push({
-             artistName: 'Juno Reactor',
-             name: 'Shango',
-             releaseDate: '2000, October 9',
-             genres: [ 'electronic', 'goa trance', 'tribal house' ]
-           });
-sampleAlbums.push({
-             artistName: 'Philip Wesley',
-             name: 'Dark Night of the Soul',
-             releaseDate: '2008, September 12',
-             genres: [ 'piano' ]
-           });
-/* end of hard-coded data */
 
+$(document).ready(function() {
+  console.log('app.js loaded!');
+  $.get('/api/albums').success(function (albums) {
+    albums.forEach(function(album) {
+      renderAlbum(album);
+    });
+  });
 
 
+  $('#album-form form').on('submit', function(e) {
+    e.preventDefault();
+    var formData = $(this).serialize();
+    console.log('formData', formData);
+    $.post('/api/albums', formData, function(album) {
+      console.log('album after POST', album);
+      renderAlbum(album);  //render the server's response
+    });
+    $(this).trigger("reset");
+  });
 
-$(document).ready(function() {
-  console.log('app.js loaded!');
+
+  $('#albums').on('click', '.add-song', function(e) {
+    var id= $(this).parents('.album').data('album-id');
+    console.log('id',id);
+    $('#songModal').data('album-id', id);
+    $('#songModal').modal();
+  });
+
+  $('#saveSong').on('click', handleNewSongSubmit);
+
+  $('#albums').on('click', '.edit-album', handleEditAlbumClick);
+
+  $('#albums').on('click', '.put-album', handleSaveChangesClick);
+
+  $('#albums').on('click', '.delete-album', handleDeleteAlbumClick);
+
+  $('#editSongsModal').on('click', '.delete-song', handleDeleteSongClick);
+
+  $('#editSongsModal').on('submit', 'form', handleUpdateSong);
 });
 
 
+function handleDeleteAlbumClick(e) {
+  var albumId = $(this).parents('.album').data('album-id');
+  console.log('someone wants to delete album id=' + albumId );
+  $.ajax({
+    method: 'DELETE',
+    url: ('/api/albums/' + albumId),
+    success: function() {
+      console.log("He's dead Jim");
+      $('[data-album-id='+ albumId + ']').remove();
+    }
+  });
+}
+
+// handles the modal fields and POSTing the form to the server
+function handleNewSongSubmit(e) {
+  var albumId = $('#songModal').data('album-id');
+  var songName = $('#songName').val();
+  var trackNumber = $('#trackNumber').val();
+
+  var formData = {
+    name: songName,
+    trackNumber: trackNumber
+  };
+
+  var postUrl = '/api/albums/' + albumId + '/songs';
+  console.log('posting to ', postUrl, ' with data ', formData);
+
+  $.post(postUrl, formData)
+    .success(function(song) {
+      console.log('song', song);
+
+      // re-get full album and render on page
+      $.get('/api/albums/' + albumId).success(function(album) {
+        //remove old entry
+        $('[data-album-id='+ albumId + ']').remove();
+        // render a replacement
+        renderAlbum(album);
+      });
+
+      //clear form
+      $('#songName').val('');
+      $('#trackNumber').val('');
+      $('#songModal').modal('hide');
+
+    });
+}
 
 
 
+function buildSongsHtml(songs) {
+  var songText = "    – ";
+  songs.forEach(function(song) {
+    songText = songText + "(" + song.trackNumber + ") " + song.name + " – ";
+  });
+  var songsHtml  =
+   "                      <li class='list-group-item'>" +
+   "                        <h4 class='inline-header'>Songs:</h4>" +
+   "                         <span>" + songText + "</span>" +
+   "                      </li>";
+  return songsHtml;
+}
+
+function generateEditSongsModalHtml(songs, albumId) {
+  var html = '';
+  songs.forEach(function(song) {
+    html += '<form class="form-inline" id="' + albumId  + '"' +
+            '  <div class="form-group">' +
+            '    <input type="text" class="form-control song-trackNumber" value="' + song.trackNumber + '">' +
+            '  </div>'+
+            '  <div class="form-group">' +
+            '    <input type="text" class="form-control song-name" value="' + song.name + '">' +
+            '  </div>'+
+            '  <div class="form-group">' +
+            '    <button class="btn btn-danger delete-song" data-song-id="' + song._id + '">x</button>' +
+            '  </div>'+
+            '  <div class="form-group">' +
+            '    <button type="submit" class="btn btn-success save-song" data-song-id="' + song._id + '">save</span></button>' +
+            '  </div>'+
+            '</form>';
+  });
+
+  return html;
+}
+
 // this function takes a single album and renders it to the page
 function renderAlbum(album) {
   console.log('rendering album:', album);
 
   var albumHtml =
   "        <!-- one album -->" +
-  "        <div class='row album' data-album-id='" + "HARDCODED ALBUM ID" + "'>" +
+  "        <div class='row album' data-album-id='" + album._id + "'>" +
   "          <div class='col-md-10 col-md-offset-1'>" +
   "            <div class='panel panel-default'>" +
   "              <div class='panel-body'>" +
@@ -64,16 +152,20 @@ function renderAlbum(album) {
   "                    <ul class='list-group'>" +
   "                      <li class='list-group-item'>" +
   "                        <h4 class='inline-header'>Album Name:</h4>" +
-  "                        <span class='album-name'>" + "HARDCODED ALBUM NAME" + "</span>" +
+  "                        <span class='album-name'>" + album.name + "</span>" +
   "                      </li>" +
   "                      <li class='list-group-item'>" +
   "                        <h4 class='inline-header'>Artist Name:</h4>" +
-  "                        <span class='artist-name'>" + "HARDCODED ARTIST NAME" + "</span>" +
+  "                        <span class='artist-name'>" + album.artistName + "</span>" +
   "                      </li>" +
   "                      <li class='list-group-item'>" +
   "                        <h4 class='inline-header'>Released date:</h4>" +
-  "                        <span class='album-releaseDate'>" + "HARDCODED RELEASE DATE" + "</span>" +
+  "                        <span class='album-name'>" + album.releaseDate + "</span>" +
   "                      </li>" +
+
+  buildSongsHtml(album.songs) +
+
+
   "                    </ul>" +
   "                  </div>" +
   "                </div>" +
@@ -82,11 +174,13 @@ function renderAlbum(album) {
   "              </div>" + // end of panel-body
 
   "              <div class='panel-footer'>" +
+  "                <button class='btn btn-primary add-song'>Add Song</button>" +
+  "                <button class='btn btn-danger delete-album'>Delete Album</button>" +
   "              </div>" +
 
   "            </div>" +
   "          </div>" +
   "          <!-- end one album -->";
 
-  // render to the page with jQuery
-}
+  $('#albums').prepend(albumHtml);
+ }

seed.js

@@ -3,13 +3,66 @@
 
 var db = require("./models");
 
-var albumsList =[
-  // put data here!
-];
+var albumList =[];
+albumList.push({
+              artistName: 'Nine Inch Nails',
+              name: 'The Downward Spiral',
+              releaseDate: '1994, March 8',
+              genres: [ 'industrial', 'industrial metal' ]
+            });
+albumList.push({
+              artistName: 'Metallica',
+              name: 'Metallica',
+              releaseDate: '1991, August 12',
+              genres: [ 'heavy metal' ]
+            });
+albumList.push({
+              artistName: 'The Prodigy',
+              name: 'Music for the Jilted Generation',
+              releaseDate: '1994, July 4',
+              genres: [ 'electronica', 'breakbeat hardcore', 'rave', 'jungle' ]
+            });
+albumList.push({
+              artistName: 'Johnny Cash',
+              name: 'Unchained',
+              releaseDate: '1996, November 5',
+              genres: [ 'country', 'rock' ]
+            });
+
+var sampleSongs = [];
+
+sampleSongs.push({ name: 'Swamped',
+                   trackNumber: 1
+});
+sampleSongs.push({ name: "Heaven's a Lie",
+                   trackNumber: 2
+});
+sampleSongs.push({ name: 'Daylight Dancer',
+                   trackNumber: 3
+});
+sampleSongs.push({ name: 'Humane',
+                   trackNumber: 4
+});
+sampleSongs.push({ name: 'Self Deception',
+                   trackNumber: 5
+});
+sampleSongs.push({ name: 'Aeon',
+                   trackNumber: 6
+});
+sampleSongs.push({ name: 'Tight Rope',
+                   trackNumber: 7
+});
+
+
+// populate each albums song list
+albumList.forEach(function(album) {
+  album.songs = sampleSongs;
+});
+
 
 db.Album.remove({}, function(err, albums){
 
-  db.Album.create(albumsList, function(err, albums){
+  db.Album.create(albumList, function(err, albums){
     if (err) { return console.log('ERROR', err); }
     console.log("all albums:", albums);
     console.log("created", albums.length, "albums");