w4d2

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,6 @@
 var mongoose = require("mongoose");
 mongoose.connect("mongodb://localhost/tunely");
+
+module.exports.Album = require("./album.js");
+
+module.exports.Song = require("./song.js");

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,19 +4,26 @@
   "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": "node server.js"
   },
   "repository": {
     "type": "git",
     "url": "git+ssh://[email protected]/tgaff/tunely.git"
   },
   "author": "tgaff",
-  "license": "ISC",
+  "license": "BSD-2-Clause",
   "bugs": {
     "url": "https://github.com/tgaff/tunely/issues"
   },
   "homepage": "https://github.com/tgaff/tunely#readme",
   "dependencies": {
-    "express": "^4.13.3"
+    "express": "~4.13.3",
+    "mongoose": "~4.2.10",
+    "body-parser": "~1.14.1",
+    "mongodb": "~2.1.0"
+  },
+  "directories": {
+    "doc": "docs"
   }
 }

public/js/app.js

@@ -5,88 +5,181 @@
  *
  */
 
+$(document).ready(function() {
+  console.log('app.js loaded!');
 
-/* 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 */
+function getAndRenderAll() {
+  $.ajax({
+    method: 'GET',
+    url: '/api/albums',
+    success: function (data) {
+      // console.log(data);
+      // data.albums.forEach( function ( element, index) {
+      //   sampleAlbums.push(element);
+      //   console.log(element);
+      // });
+      // console.log(data);
+
+      data.forEach( function ( element, index) {
+        var songs = "";
+        element.songs.forEach ( function (element, index){
+          var name = element.name;
+          songs = songs + (renderSong(element.name, element.trackNumber));
+        });
+        renderAlbum(element, songs);
+        // console.log(songs);
+      });
+
+      // {name: "Swamped", trackNumber: 1, _id: "56678bfd318047be62e12e66"}
+
+    },
+    error: function () {
+      console.log("uh oh...");
+    }
+  });
+}
 
+function renderSong(name, count) {
+  var songsHtml =
+"    <br><span>" + count + ". " + name + " </span>";
+  return songsHtml;
+}
 
+getAndRenderAll();
 
+// Form Input
+//to create new design Project
+var $addAlbum = $('.form-horizontal');
 
-$(document).ready(function() {
-  console.log('app.js loaded!');
+$addAlbum.on('submit', function (event) {
+  event.preventDefault();
+
+  // serialze form data
+  // var newAlbum = $(this).serialize();
+
+  var newAlbum = $(this).serialize();
+
+   // console.log(newAlbum);
+
+  // POST request to create new designProject
+  $.post('/api/albums', newAlbum, function (data) {
+    console.log(data);
+
+    // render all designProjects to view
+    getAndRenderAll();
+
+  });
+
+  // reset the form
+  $addAlbum[0].reset();
+  $addAlbum.find('input').first().focus();
 });
 
+//for adding new songs
+$('#albums').on('click', '.add-song', function(e) {
+  var id = $(this).parents('.album').data('album-id');
+  // console.log('id',id);
 
+  //adds the current album id data to the song modal
+  $('#songModal').data('album-id', id);
+  // console.log($('#songModal').data('album-id', id));
 
+  //calls the song modal to add a song
+  $('#songModal').modal();
 
+  $('#saveSong').on('click', handleNewSongSubmit() ,function() {
+    console.log('yes');
+  });
+});
+
+
+// handles the modal fields and POSTing the form to the server
+function handleNewSongSubmit(e) {
+  var albumId = $('#songModal').data('album-id');
+  // console.log(albumId);
+
+  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
+        getAndRenderAll();
+      });
+
+    });
+
+  //clear form
+  $('#songName').val('');
+  $('#trackNumber').val('');
+  $('#songModal').modal('hide');
+}
 
 // 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='col-md-10 col-md-offset-1'>" +
-  "            <div class='panel panel-default'>" +
-  "              <div class='panel-body'>" +
-  "              <!-- begin album internal row -->" +
-  "                <div class='row'>" +
-  "                  <div class='col-md-3 col-xs-12 thumbnail album-art'>" +
-  "                     <img src='" + "http://placehold.it/400x400'" +  " alt='album image'>" +
-  "                  </div>" +
-  "                  <div class='col-md-9 col-xs-12'>" +
-  "                    <ul class='list-group'>" +
-  "                      <li class='list-group-item'>" +
-  "                        <h4 class='inline-header'>Album Name:</h4>" +
-  "                        <span class='album-name'>" + "HARDCODED ALBUM NAME" + "</span>" +
-  "                      </li>" +
-  "                      <li class='list-group-item'>" +
-  "                        <h4 class='inline-header'>Artist Name:</h4>" +
-  "                        <span class='artist-name'>" + "HARDCODED ARTIST NAME" + "</span>" +
-  "                      </li>" +
-  "                      <li class='list-group-item'>" +
-  "                        <h4 class='inline-header'>Released date:</h4>" +
-  "                        <span class='album-releaseDate'>" + "HARDCODED RELEASE DATE" + "</span>" +
-  "                      </li>" +
-  "                    </ul>" +
-  "                  </div>" +
-  "                </div>" +
-  "                <!-- end of album internal row -->" +
-
-  "              </div>" + // end of panel-body
-
-  "              <div class='panel-footer'>" +
-  "              </div>" +
-
-  "            </div>" +
-  "          </div>" +
-  "          <!-- end one album -->";
+function renderAlbum(album, songs) {
+  // console.log('rendering album:', album);
+
+    var albumHtml =
+    "        <!-- one album -->" +
+    "        <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'>" +
+    "              <!-- begin album internal row -->" +
+    "                <div class='row'>" +
+    "                  <div class='col-md-3 col-xs-12 thumbnail album-art'>" +
+    "                     <img src='" + "http://placehold.it/400x400'" +  " alt='album image'>" +
+    "                  </div>" +
+    "                  <div class='col-md-9 col-xs-12'>" +
+    "                    <ul class='list-group'>" +
+    "                      <li class='list-group-item'>" +
+    "                        <h4 class='inline-header'>Album Name:</h4>" +
+    "                        <span class='album-name'>" + album.name + "</span>" +
+    "                      </li>" +
+    "                      <li class='list-group-item'>" +
+    "                        <h4 class='inline-header'>Artist Name:</h4>" +
+    "                        <span class='artist-name'>" + album.artistName + "</span>" +
+    "                      </li>" +
+    "                      <li class='list-group-item'>" +
+    "                        <h4 class='inline-header'>Released date:</h4>" +
+    "                        <span class='album-releaseDate'>" + album.releaseDate + "</span>" +
+    "                      </li>" +
+    "                      <li class='list-group-item'>" +
+    "                       <h4 class='inline-header'>Songs:</h4>" +
+                            songs +
+    "                    </li></ul>" +
+    "                  </div>" +
+    "                </div>" +
+    "                <!-- end of album internal row -->" +
+
+    "              </div>" + // end of panel-body
+
+    "              <div class='panel-footer'>" +
+    "                <button class='btn btn-primary add-song'>Add Song</button>" +
+    "              </div>" +
+
+    "            </div>" +
+    "          </div>" +
+    "          <!-- end one album -->";
 
   // render to the page with jQuery
+  $('#albums').append(albumHtml);
+
 }
+
+});

seed.js

@@ -5,6 +5,30 @@ var db = require("./models");
 
 var albumsList =[
   // put data here!
+  {
+    artistName: 'Nine Inch Nails',
+    name: 'The Downward Spiral',
+    releaseDate: '1994, March 8',
+    genres: [ 'industrial', 'industrial metal' ]
+  },
+  {
+    artistName: 'Metallica',
+    name: 'Metallica',
+    releaseDate: '1991, August 12',
+    genres: [ 'heavy metal' ]
+  },
+  {
+    artistName: 'The Prodigy',
+    name: 'Music for the Jilted Generation',
+    releaseDate: '1994, July 4',
+    genres: [ 'electronica', 'breakbeat hardcore', 'rave', 'jungle' ]
+  },
+  {
+    artistName: 'Johnny Cash',
+    name: 'Unchained',
+    releaseDate: '1996, November 5',
+    genres: [ 'country', 'rock' ]
+  }
 ];
 
 db.Album.remove({}, function(err, albums){
@@ -17,3 +41,41 @@ db.Album.remove({}, function(err, albums){
   });
 
 });
+
+  /*  Approximate schema for these seeds
+var SongSchema = new Schema({
+  name: String,
+  trackNumber: Number,
+});
+*/
+
+
+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
+});
+
+albumsList.forEach( function ( element, index) {
+  element.songs = sampleSongs;
+});
+
+console.log(albumsList);