Merge pull request #26 from stephaniejnc/jessfengDev

Style recommendations page + Play/Pause Preview

public/css/style.css

@@ -23,6 +23,12 @@
   h1 {
     color: white;
   }
+
+  .head2{
+    color: white;
+    text-align: center;
+    margin: 3%;
+  }
 
   @import url("https://fonts.googleapis.com/css?family=Roboto:400,700");
 
@@ -382,6 +388,11 @@ body {
       grid-template-columns: 1fr;
     }
 
+    #recs {
+      grid-template-rows: 1fr 5fr;
+      grid-template-columns: 1fr;
+    }
+
     #playlist-info {
         grid-row: 1 / span 1;
         grid-column: 1 / span 1;
@@ -393,6 +404,7 @@ body {
 
         margin: 0 auto;
     }
+
   }
 
   /* responsive navbar for mobile */
@@ -496,6 +508,141 @@ body {
     background-color: #1ed760;
   }
 
+  :root {
+    --spotify-green: #1ed760;
+}
+
+#tracks {
+  background-color: black;
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-template-columns: 1fr 2fr;
+
+    margin-top: 50px;
+}
+
+#recs {
+  background-color: black;
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-template-columns: 1fr;
+
+    margin-top: 5%;
+    margin-left: 10%;
+    margin-bottom: 5%;
+    margin-right: 10%;
+}
+
+#playlist-info {
+    grid-row: 1 / span 1;
+    grid-column: 1 / span 1;
+
+    display: grid;
+    grid-template-rows: 3fr 1fr 1fr;
+    margin: 0px auto;
+}
+
+#playlist-cover {
+    grid-row: 1 / span 1;
+    padding: 30px 0px;
+    max-width: 300px;
+    max-height: 300px;
+}
+
+#playlist-name {
+    grid-row: 2 / span 1;
+    margin: 0px auto;
+    font-size: 24px;
+    font-family: 'Montserrat', 'Noto Sans TC', sans-serif;
+    font-weight: bold;
+    color: white;
+}
+
+#track-info {
+    display: flex;
+    flex-direction: column;
+    color: white;
+    margin: 0px 300px 0px 10px;
+}
+
+#rec-track-info {
+  display: flex;
+  flex-direction: column;
+  color: white;
+  margin: 0px 50px 0px 50px;
+}
+
+.track {
+    width: 100%;
+    margin: 15px 10px;
+}
+
+.track-name {
+    color: white;
+    text-decoration: none;
+    font-size: 20px;
+    font-family: 'Montserrat', 'Noto Sans TC', sans-serif;
+    font-weight: bold;
+}
+
+.track-name:hover {
+    background: linear-gradient(180deg,rgba(255,255,255,0) 70%, #5C5C5C 70%);
+}
+
+.duration {
+    color: #C2C2C2;
+    padding: 0px 20px;
+}
+
+#buttons {
+    grid-row: 3 / span 1;
+    grid-column: 1 / span 1;
+}
+
+.button {
+    border: none;
+    color: white;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    cursor: pointer;
+    border-radius: 24px;
+    opacity: 0.9;
+    transition: 0.3s;
+    font-family: inherit;
+}
+
+.button:hover {
+    opacity: 1.0;
+}
+
+#confirm {
+    background-color: var(--spotify-green);
+}
+
+#back {
+    background-color: #5C5C5C;
+}
+
+.icon {
+    grid-row: 1 / span 2;
+    grid-column: 1 / span 1;
+    max-width: 10px;
+    max-height: 10px;
+    margin-right: 10px;
+
+    cursor: pointer;
+}
+
+.artist {
+    margin: 10px 0px;
+    padding-left: 20px;
+    color: white;
+}
+
 input[type=text] {
     font-family: 'Montserrat', sans-serif;
     width: 80%;

routes/index.js

@@ -1,35 +1,40 @@
 const express = require('express')
 const router = express.Router()
-router.use(express.json({limit: '1mb'})) // can limit JSON body size here
+router.use(express.json({ limit: '1mb' })) // can limit JSON body size here
 
 router.get('/', (req, res) => {
     console.log('Get request for home received')
-    res.render('index', {layout: 'layouts/layout'})
+    res.render('index', { layout: 'layouts/layout' })
 })
 
 router.get('/userhome', (req, res) => {
     console.log('Get request for userhome received')
-    res.render('userhome', {layout: 'layouts/layout'})
+    res.render('userhome', { layout: 'layouts/layout' })
 })
 
 router.get('/playlist', (req, res) => {
     console.log('Get request for playlist received')
-    res.render('playlist', {layout: 'layouts/layout'})
+    res.render('playlist', { layout: 'layouts/layout' })
 })
 
 router.get('/insights', (req, res) => {
     console.log('Get request for insights received')
-    res.render('insights', {layout: 'layouts/layout'})
+    res.render('insights', { layout: 'layouts/layout' })
 })
 
 router.get('/loginPage', (req, res) => {
     console.log('Get request for login received')
-    res.render('loginPage', {layout: 'layouts/no-layout'})
+    res.render('loginPage', { layout: 'layouts/no-layout' })
 })
 
 router.get('/searchuser', (req, res) => {
     console.log('Get request for search user received')
-    res.render('searchuser', {layout: 'layouts/layout'})
+    res.render('searchuser', { layout: 'layouts/layout' })
+})
+
+router.get('/recommend', (req, res) => {
+    console.log('Get request for recommendations received')
+    res.render('recommend', { layout: 'layouts/layout' })
 })
 
 module.exports = router

server.js

@@ -135,11 +135,11 @@ app.get('/callback', function (req, res) {
           console.log(body);
           assign_global(access_token, body.id, body.display_name)
           res.redirect('userhome/#' +
-          querystring.stringify({
-            access_token: access_token,
-            refresh_token: refresh_token,
-            user: body.display_name
-          }));
+            querystring.stringify({
+              access_token: access_token,
+              refresh_token: refresh_token,
+              user: body.display_name
+            }));
         })
       } else {
         res.redirect('/#' +
@@ -177,8 +177,8 @@ app.get('/refresh_token', function (req, res) {
 
 // GET for logged in status
 app.get('/loginstatus', function (req, res) {
-  if (token == "1") res.send(200, {"loggedin": false})  
-  else res.send(200, {"loggedin": true, "username": display_name})
+  if (token == "1") res.send(200, { "loggedin": false })
+  else res.send(200, { "loggedin": true, "username": display_name })
 })
 
 // GET logged in user's playlists
@@ -206,7 +206,7 @@ app.get('/playlists', function (req, res) {
 
 // GET logged in user's playlist tracks
 app.get('/playlist-tracks', function (req, res) {
-  
+
   getTracks();
 
   function getTracks() {
@@ -246,14 +246,16 @@ app.post('/playlistid', (req, res, next) => {
 
   // best practices to end
   res.json({
-      status: 'Success: playlist ID stored on server'
+    status: 'Success: playlist ID stored on server',
+    playlist: req.body.playlist
   })
 })
 
 // set up endpoint for POST
 app.post('/track', (req, res, next) => {
   console.log(req.body)
   track = req.body
+  console.log("TRACK: " + track.track_id);
 
   tracks.addTrack(track.artists, track.audio_features, track.name, track.track_id, track.playlist_id, function (err) {
     if (err) return next(err);
@@ -262,7 +264,8 @@ app.post('/track', (req, res, next) => {
 
   // best practices to end
   res.json({
-    status: 'Success: tracks of selected playlist added to Datastore'
+    status: 'Success: tracks of selected playlist added to Datastore',
+    playlist_id: track.playlist_id
   })
 })
 
@@ -278,66 +281,68 @@ app.post('/searchuser', (req, res) => {
 app.get('/searchuserplaylists', (req, res) => {
 
   console.log("Server get /searchuserplaylists received for friend playlist")
-    console.log(friend)
-    var playlistOptions = {
-      url: `https://api.spotify.com/v1/users/${friend}/playlists`,
-      headers: {
-          // use a temporary token from https://developer.spotify.com/console/get-playlists/?user_id=arixena&limit=&offset= to debug
-          // or, log in from Userhome every single time to debug (not reccomended)
-          'Authorization': `Bearer ${token}`,
-          'Accept': 'application/json',
-          'Content-Type': 'application/json; charset=utf-8'
-      }
+  console.log(friend)
+  var playlistOptions = {
+    url: `https://api.spotify.com/v1/users/${friend}/playlists`,
+    headers: {
+      // use a temporary token from https://developer.spotify.com/console/get-playlists/?user_id=arixena&limit=&offset= to debug
+      // or, log in from Userhome every single time to debug (not reccomended)
+      'Authorization': `Bearer ${token}`,
+      'Accept': 'application/json',
+      'Content-Type': 'application/json; charset=utf-8'
     }
-    
-    request.get(playlistOptions, function(error, response, body) {
-      // console.log(body)
-      var json = JSON.parse(body)
-      if (json.error) {
-        console.log('error')
-      } else {
-        res.send(body)
-      }    
-    }).catch(error => {
-      jsonError = JSON.parse(error.error)
-      var status = jsonError.error.status
-      var message = jsonError.error.message
-      console.log("Error in searching for friend!")
-      res.status(status).send({
-        error: message
-      })
+  }
+
+  request.get(playlistOptions, function (error, response, body) {
+    // console.log(body)
+    var json = JSON.parse(body)
+    if (json.error) {
+      console.log('error')
+    } else {
+      res.send(body)
+    }
+  }).catch(error => {
+    jsonError = JSON.parse(error.error)
+    var status = jsonError.error.status
+    var message = jsonError.error.message
+    console.log("Error in searching for friend!")
+    res.status(status).send({
+      error: message
     })
+  })
 })
 
 app.get('/userinsights', (req, res) => {
 
   var insightOptions = {
     url: `https://api.spotify.com/v1/me/top/artists`,
     headers: {
-        'Authorization': `Bearer ${token}`,
-        'Accept': 'application/json',
-        'Content-Type': 'application/json; charset=utf-8'
+      'Authorization': `Bearer ${token}`,
+      'Accept': 'application/json',
+      'Content-Type': 'application/json; charset=utf-8'
     }
   }
-  
-  request.get(insightOptions, function(error, response, body) {
+
+  request.get(insightOptions, function (error, response, body) {
     console.log(body)
     res.send(body)
   })
 })
 
 // get a list of recommendations for a playlist
-app.get('/recommendations/:playlist_id/:playlist_id_2', async function (req, res) {
+app.get('/recommendations', async function (req, res) {
+
   var initPlaylist = [];
-  await getTracksByPlaylistId(req.params.playlist_id_2, async (err, songs) => {
-    console.log(req.params.playlist_id_2);
+  await getTracksByPlaylistId(playlist2, async (err, songs) => {
+    console.log("PLAYLIST ID 2: " + playlist2);
     if (err) { console.log(err) }
     for (var i = 0; i < songs.length; i++) {
       initPlaylist.push(songs[i].track_id);
     };
     console.log("FIRST: " + initPlaylist);
 
-    getTracksByPlaylistId(req.params.playlist_id, async (err, songs) => {
+    getTracksByPlaylistId(playlist, async (err, songs) => {
+      console.log("PLAYLIST ID: " + playlist);
 
       if (err) { console.log(err) }
       for (var i = 0; i < songs.length; i++) {