Update state slices, add playlist show,and differentiate between /bro…

…wse and /collection

app/assets/stylesheets/components/main_content.scss

@@ -1,7 +1,10 @@
 .main-container {
-  height: 1000px;
-  background-color: red; /* For browsers that do not support gradients */
-  background-image: linear-gradient(#8D200A, #6D1A08, #451005, #150501);
+  height: 100vh;
+  background: #34e89e;  /* fallback for old browsers */
+  background: -webkit-linear-gradient(to top, #0f3443, #34e89e);  /* Chrome 10-25, Safari 5.1-6 */
+  background: linear-gradient(to top, #0f3443, #34e89e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+  display: flex;
+  font-family: Circular,Helvetica,Arial,sans-serif;
 }
 
 .main-container .nav-bar {
@@ -13,7 +16,6 @@
   background-color: black;
   opacity: .8;
   box-sizing: border-box;
-  position: fixed;
   top: 0;
 }
 
@@ -68,10 +70,50 @@
 
 .nav-bar .logout{
   color: white;
-  margin-top: 500px;
   align-self: end;
+  position: absolute;
+  bottom: 30px;
+  left: 70px;
 }
 
 .nav-bar .active-link{
   color: green;
+  background-color: green;
+}
+
+.grid ul {
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+
+.playlist-item {
+  padding: 20px;
+  flex-basis: 15%;
+  box-sizing: border-box;
+}
+
+.playlist-item-image {
+  min-width: 150px;
+  min-height: 150px;
+  max-height: 241px;
+  max-width: 241px;
+}
+.playlist-subtext {
+  padding-top: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.playlist-subtext p {
+  color:white;
+  padding-bottom: 5px;
+  font-size: 14px;
+  font-family: Circular,Helvetica,Arial,sans-serif;
+}
+.playlist-subtext span {
+  color: lightgray;
+  font-weight: 100;
+  font-size: 14px;
+  font-family: Circular,Helvetica,Arial,sans-serif;
 }

app/assets/stylesheets/components/show_box_content.scss

@@ -0,0 +1,37 @@
+.playlist-show-item {
+  display: flex;
+  flex-direction: column;
+  padding-left: 50px;
+  padding-top: 30px;
+}
+
+.playlist-show-item-image {
+  min-width: 180px;
+  min-height: 180px;
+  max-height: 260px;
+  max-width: 260px;
+}
+.playlist-show-subtext {
+  padding-top: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.playlist-show-subtext p {
+  color: white;
+  padding-bottom: 5px;
+  font-size: 14px;
+  font-family: Circular,Helvetica,Arial,sans-serif;
+}
+.playlist-show-subtext span {
+  color: lightgray;
+  font-weight: 100;
+  font-size: 14px;
+  font-family: Circular,Helvetica,Arial,sans-serif;
+}
+
+.loading {
+ width: 60px;
+ margin: auto;
+ margin-top: 160px;
+}

app/assets/stylesheets/components/splash.scss

@@ -1,7 +1,8 @@
 .splash-page-contain{
   width:100%;
-  height:1000px;
+  height:100vh;
   overflow:hidden;
+  min-width: 800px;
 }
 
 .splash-page{
@@ -29,6 +30,7 @@
   right: 0;
   left: 0;
   z-index: 2;
+  min-width: 800px;
 }
 
 .splash-page .logo {

app/controllers/api/playlists_controller.rb

@@ -1,6 +1,11 @@
 class Api::PlaylistsController < ApplicationController
+  def show
+    @playlist = Playlist.includes(:songs, :author).find(params[:id])
+    render :show
+  end
+
   def index
-    @playlists = Playlist.all
+    @playlists = Playlist.all.includes(:songs, :author)
     render :index
   end
 

app/controllers/api/song_playlists_controller.rb

@@ -1,4 +1,16 @@
 class Api::SongPlaylistsController < ApplicationController
+  def create
+     @song_playlists = SongPlaylists.new(song_playlist_params)
+     @playlist_song.save
+   end
+
+   def destroy
+   end
+
+   private
+   def song_playlist_params
+     params.require(:song_playlist).permit(:song_id, :playlist_id)
+   end
 end
 
 # class Api::PlaylistSongsController < ApplicationController

app/models/playlist.rb

@@ -20,6 +20,10 @@ class Playlist < ApplicationRecord
     foreign_key: :playlist_id,
     class_name: :Song_playlist
 
+  has_many :songs,
+    through: :song_playlists,
+    source: :song
+
   has_one_attached :photo
   has_one_attached :track
 end

app/models/song.rb

@@ -27,4 +27,8 @@ class Song < ApplicationRecord
   has_many :arists,
     through: :song_artists,
     source: :artist
+
+  has_many :playlists,
+    through: :song_playlists,
+    source: :playlist
 end

app/views/api/playlists/index.json.jbuilder

@@ -1,5 +1,22 @@
-json.array! @playlists do |playlist|
-  json.extract! playlist, :id, :title
-  json.photoUrl url_for(playlist.photo)
-  json.trackUrl url_for(playlist.track)
+@playlists.each do |playlist|
+  json.set! playlist.id do
+    json.extract! playlist, :id, :title, :author_id
+    json.author playlist.author.username
+
+    json.song_ids playlist.songs.pluck(:id)
+
+    if playlist.songs[0]
+      json.photoUrl url_for(playlist.songs[0].album.photo);
+    else
+      json.photoUrl image_path("face.jpg")
+    end
+  end
 end
+
+# json.photoUrl url_for(playlist.photo)
+# json.trackUrl url_for(playlist.track)
+
+
+# json.songs playlist.songs.each do |song|
+#   json.set! song.id
+# end

app/views/api/playlists/show.json.jbuilder

@@ -0,0 +1,18 @@
+json.songs do
+  @playlist.songs.each do |song|
+    json.set! song.id do
+      json.extract! song, :id, :title
+      json.trackUrl url_for(song.track)
+    end
+  end
+end
+
+json.playlist do
+  json.extract! @playlist, :id, :title, :song_ids, :author_id
+  if @playlist.songs[0]
+    json.photoUrl url_for(@playlist.songs[0].album.photo);
+  else
+    json.photoUrl image_path("face.jpg")
+  end
+  json.author @playlist.author.username
+end

app/views/api/songs/index.json.jbuilder

@@ -1,4 +1,11 @@
-json.array! @songs do |song|
-  json.extract! song, :id, :title, :album_id
-  json.trackUrl url_for(song.track)
+@songs.each do |song|
+  json.set! song.id do
+    json.extract! song, :id, :title
+    json.trackUrl url_for(song.track)
+  end
 end
+
+# json.array! @songs do |song|
+#   json.extract! song, :id, :title, :album_id
+#   json.trackUrl url_for(song.track)
+# end

db/migrate/20181118235623_change_songs.rb

@@ -0,0 +1,5 @@
+class ChangeSongs < ActiveRecord::Migration[5.2]
+  def change
+    remove_index :songs, :album_id
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2018_11_18_002319) do
+ActiveRecord::Schema.define(version: 2018_11_18_235623) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
@@ -84,7 +84,6 @@
     t.string "title", null: false
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
-    t.index ["album_id"], name: "index_songs_on_album_id", unique: true
     t.index ["title"], name: "index_songs_on_title", unique: true
   end
 

db/seeds.rb

@@ -12,7 +12,99 @@
 User.destroy_all
 Playlist.destroy_all
 
-def create_album(params, filename)
-  album = Album.new(params)
-  file = EzDownload.open("")
-end
+l = Album.create!(title: "Chilis")
+m = Album.create!(title: "Corbys")
+n = Album.create!(title: "Samms")
+o = Album.create!(title: "Vibes")
+q = Album.create!(title: "Redemption")
+r = Album.create!(title: "Epic")
+s = Album.create!(title: "Yebbz")
+t = Album.create!(title: "Gambining")
+u = Album.create!(title: "Dragons")
+
+l.photo.attach(io: File.open("/Users/avichaivazana/Desktop/Photos/chilipeppers.jpg"), filename: "chilipeppers.jpg")
+m.photo.attach(io: File.open("/Users/avichaivazana/Desktop/Photos/corby.jpg"), filename: "corby.jpg")
+n.photo.attach(io: File.open("/Users/avichaivazana/Desktop/Photos/samm.jpg"), filename: "samm.jpg")
+o.photo.attach(io: File.open("/Users/avichaivazana/Desktop/Photos/Wave.jpg"), filename: "Wave.jpg")
+q.photo.attach(io: File.open("/Users/avichaivazana/Desktop/Photos/matisyahu.jpg"), filename: "matisyahu.jpg")
+r.photo.attach(io: File.open("/Users/avichaivazana/Desktop/Photos/whirl.jpg"), filename: "whirl.jpg")
+s.photo.attach(io: File.open("/Users/avichaivazana/Desktop/Photos/yebba.jpg"), filename: "yebba.jpg")
+t.photo.attach(io: File.open("/Users/avichaivazana/Desktop/Photos/gambino.jpg"), filename: "gambino.jpg")
+u.photo.attach(io: File.open("/Users/avichaivazana/Desktop/Photos/face.jpg"), filename: "face.jpg")
+
+c.track.attach(io: File.open("/Users/avichaivazana/Desktop/Songs/Monday.mp3"), filename: "Monday.mp3")
+
+a.track.attach(io: File.open("/Users/avichaivazana/Desktop/Songs/ Californication.mp3"), filename: "Californication.mp3")
+b.track.attach(io: File.open("/Users/avichaivazana/Desktop/Songs/ Snow.mp3"), filename: "Snow.mp3")
+d.track.attach(io: File.open("/Users/avichaivazana/Desktop/Songs/King Without a Crown.mp3"), filename: "King Without a Crown.mp3")
+e.track.attach(io: File.open("/Users/avichaivazana/Desktop/Songs/Redbone.mp3"), filename: "Redbone.mp3")
+f.track.attach(io: File.open("/Users/avichaivazana/Desktop/Songs/YEBBA.mp3"), filename: "YEBBA.mp3")
+g.track.attach(io: File.open("/Users/avichaivazana/Desktop/Songs/Corporate_Innovative.mp3"), filename: "Corporate_Innovative.mp3")
+h.track.attach(io: File.open("/Users/avichaivazana/Desktop/Songs/Corporate_Presentation.mp3"), filename: "Corporate_Presentation.mp3")
+i.track.attach(io: File.open("/Users/avichaivazana/Desktop/Songs/Corporate_Success.mp3"), filename: "Corporate_Success.mp3")
+j.track.attach(io: File.open("/Users/avichaivazana/Desktop/Songs/Smooth.mp3"), filename: "Smooth.mp3")
+k.track.attach(io: File.open("/Users/avichaivazana/Desktop/Songs/the-battle.mp3"), filename: "the-battle.mp3")
+
+a = Song.second
+b = Song.find_by(id: 14)
+d = Song.find_by(id: 5)
+e = Song.find_by(id: 6)
+f = Song.find_by(id: 7)
+g = Song.find_by(id: 8)
+h = Song.find_by(id: 15)
+i = Song.find_by(id: 16)
+j = Song.find_by(id: 11)
+k = Song.find_by(id: 12)
+
+a = Song.create!(album_id: 2, title: "Californication")
+b = Song.create!(album_id: 2, title: "Snow")
+c = Song.create!(album_id: 3, title: "Monday")
+d = Song.create!(album_id: 4, title: "King Without a Crown")
+e = Song.create!(album_id: 5, title: "Redbone")
+f = Song.create!(album_id: 6, title: "Evergreen")
+g = Song.create!(album_id: 7, title: "Corporate Innovation")
+h = Song.create!(album_id: 7, title: "Corporate Presentation")
+i = Song.create!(album_id: 7, title: "Corporate Success")
+j = Song.create!(album_id: 8, title: "Smooth")
+k = Song.create!(album_id: 9, title: "The Battle")
+
+
+
+Playlist.create!(author_id: 22, title: "Chill Vibes")
+Playlist.create!(author_id: 22, title: "Summer Stuff")
+Playlist.create!(author_id: 22, title: "Sleepy Time")
+Playlist.create!(author_id: 22, title: "Study Music")
+Playlist.create!(author_id: 22, title: "Party")
+Playlist.create!(author_id: 22, title: "Random Mix")
+Playlist.create!(author_id: 22, title: "Shower")
+Playlist.create!(author_id: 22, title: "Walking")
+Playlist.create!(author_id: 22, title: "Shower while walking")
+
+
+Song_playlist.create!(4, 3)
+Song_playlist.create!(4, 4)
+Song_playlist.create!(4, 5)
+Song_playlist.create!(5, 3)
+Song_playlist.create!(5, 4)
+Song_playlist.create!(5, 5)
+Song_playlist.create!(5, 6)
+Song_playlist.create!(6, 7)
+Song_playlist.create!(6, 8)
+Song_playlist.create!(6, 9)
+Song_playlist.create!(6, 10)
+Song_playlist.create!(7, 5)
+Song_playlist.create!(7, 3)
+Song_playlist.create!(7, 7)
+Song_playlist.create!(7, 4)
+Song_playlist.create!(8, 4)
+Song_playlist.create!(8, 5)
+Song_playlist.create!(11, 5)
+Song_playlist.create!(11, 7)
+Song_playlist.create!(11, 4)
+Song_playlist.create!(11, 3)
+Song_playlist.create!(12, 8)
+Song_playlist.create!(12, 7)
+Song_playlist.create!(15, 9)
+Song_playlist.create!(16, 10)
+Song_playlist.create!(14, 4)
+Song_playlist.create!(2, 3)