a5-archduketim-tim-winters

.gitignore

@@ -0,0 +1,3 @@
+.DS_Store
+node_modules
+public/bundle.*

README.md

@@ -1,38 +1,9 @@
-Assignment 5 - Databases and/or Components
-===
+## Spotify Jukebox
 
-Due: October 7th, by 11:59 AM.
+http://a5-archduketim.glitch.me
 
-For this assignment you will complete one of the following tasks, based on your prior experience with the various technologies involved.
-
-1. Rework the server component from Assignment #3 to use MongoDB or some other NoSQL database (like CouchDB). You can remove Passport authentication if you choose, although this might be as much work as simply changing your Passport calls to use MongoDB.
-2. Rework the client component from Assignment #3 to use Svelte in some capacity.
-3. Rework the client component from Assignmeent #3 to use React in some capacity.
-
-For 2 and 3, make sure to look at [the notes from lecture 10](https://github.com/cs4241-19a/materials/blob/master/lecture10.markdown).
-
-This is really a chance for you to experiment with some additional web technologies that the prior assignments haven't covered yet: non-flatfile databases and web component frameworks.
-
-This project can be implemented on any hosting service (Glitch, DigitalOcean, Heroku etc.), however, you must include all files in your GitHub repo so that the course staff can view them; these files are not available for viewing in many hosting systems.
-
-Deliverables
----
-
-Do the following to complete this assignment:
-
-1. Implement your project with the above requirements.
-3. Test your project to make sure that when someone goes to your main page on Glitch/Heroku/etc., it displays correctly.
-4. Ensure that your project has the proper naming scheme `a5-yourname` so we can find it.
-5. Fork this repository and modify the README to the specifications below. Be sure to add *all* project files.
-6. Create and submit a Pull Request to the original repo. Name the pull request using the following template: `a5-gitname-firstname-lastname`.
-
-Sample Readme (delete the above when you're ready to submit, and modify the below so with your links and descriptions)
----
-
-## Your Web Application Title
-
-your hosting link e.g. http://a5-charlieroberts.glitch.me
-
-Include a very brief summary of your project here and what you changed / added to assignment #3. Briefly (3–4 sentences) answer hte folloiwn question: did the new technology improve or hinder the development experience?
-
-Unlike previous assignments, this assignment will be solely graded on whether or not you successfully complete it. Partial credit will be generously given.
+For this assignment I reworked the main page of my a3 application to use svelte instead of using jquery/js to modify
+ the DOM. I think svelte definitely made creating the website easier because I had a lot of DOM modification when a
+  user searches and the table needs to be populated. With svelte, I can just use an `{:each}` block to dynamically
+   generate the html. In addition, the ability to use variables in the html code is a really cool feature that makes
+    changing classes super easer. 

db.json

@@ -0,0 +1,24 @@
+{
+  "songs": [
+    {
+      "id": "4sPmO7WMQUAf45kwMOtONw",
+      "title": "Hello",
+      "artist": "Adele",
+      "album": "25",
+      "adder": "1270753891",
+      "duration": 295493,
+      "startTime": 1568593740810
+    },
+    {
+      "id": "6dGnYIeXmHdcikdzNNDMm2",
+      "title": "Here Comes The Sun - Remastered 2009",
+      "artist": "The Beatles",
+      "album": "Abbey Road (Remastered)",
+      "adder": "12169093646",
+      "duration": 185733,
+      "startTime": 1568594296249
+    }
+  ],
+  "users": [
+  ]
+}

package.json

@@ -0,0 +1,36 @@
+{
+  "name": "svelte-app",
+  "version": "1.0.0",
+  "devDependencies": {
+    "npm-run-all": "^4.1.5",
+    "rollup": "^1.12.0",
+    "rollup-plugin-commonjs": "^10.0.0",
+    "rollup-plugin-livereload": "^1.0.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-svelte": "^5.0.3",
+    "rollup-plugin-terser": "^4.0.4",
+    "svelte": "^3.12.1"
+  },
+  "dependencies": {
+    "body-parser": "^1.19.0",
+    "dotenv": "^8.1.0",
+    "express": "^4.17.1",
+    "express-session": "^1.16.2",
+    "lowdb": "^1.0.0",
+    "passport": "^0.4.0",
+    "passport-spotify": "^1.1.0",
+    "request": "^2.88.0",
+    "serve-favicon": "^2.5.0",
+    "sirv-cli": "^0.4.4",
+    "sveltestrap": "^3.2.4"
+  },
+  "scripts": {
+      "prestart-dev": "npm run build",
+    "build": "rollup -c",
+    "autobuild": "rollup -c -w",
+    "dev": "run-p start:dev autobuild",
+    "start": "npm run build && node server.js",
+    "start:dev": "sirv public --single --dev",
+    "start-dev": "nodemon --ignore db.json server.js"
+  }
+}

public/global.css

@@ -0,0 +1,141 @@
+/*Style your own assignment! This is fun! */
+.notloggedin {
+    display: none;
+}
+
+.navbar-brand {
+    color: green !important;
+}
+
+body {
+    background: #181818;
+}
+
+td {
+    border-color: rgba(255, 255, 255, 0.075) !important;
+}
+
+tr {
+    background-clip: padding-box;
+}
+
+tr:hover {
+    background-color: rgba(255, 255, 255, 0.075);
+}
+
+.search {
+    background-color: transparent;
+    color: #fff;
+    border: none;
+}
+
+.search:focus {
+    color: #fff;
+    background-color: transparent !important;
+    border: none;
+}
+
+.center {
+    display: flex;
+    justify-content: center;
+}
+
+.results-table {
+    width: 100%;
+    background: inherit !important;
+}
+
+thead:first-child th {
+    border-top: none;
+}
+
+tr:hover {
+    cursor: pointer;
+}
+
+/* The snackbar - position it at the bottom and in the middle of the screen */
+#snackbar {
+    visibility: hidden;
+    /* Hidden by default. Visible on click */
+    min-width: 250px;
+    /* Set a default minimum width */
+    transform: translateX(-50%);
+    /* Divide value of min-width by 2 */
+    background-color: #333;
+    /* Black background color */
+    color: #fff;
+    /* White text color */
+    text-align: center;
+    /* Centered text */
+    border-radius: 2px;
+    /* Rounded borders */
+    padding: 16px;
+    /* Padding */
+    position: fixed;
+    /* Sit on top of the screen */
+    z-index: 1;
+    /* Add a z-index if needed */
+    left: 50%;
+    /* Center the snackbar */
+    bottom: 30px;
+    /* 30px from the bottom */
+}
+
+/* Show the snackbar when clicking on a button (class added with JavaScript) */
+#snackbar.show {
+    visibility: visible;
+    /* Show the snackbar */
+    /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
+  However, delay the fade out process for 2.5 seconds */
+    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, fadeout 0.5s 2.5s;
+}
+
+/* Animations to fade the snackbar in and out */
+@-webkit-keyframes fadein {
+    from {
+        bottom: 0;
+        opacity: 0;
+    }
+
+    to {
+        bottom: 30px;
+        opacity: 1;
+    }
+}
+
+@keyframes fadein {
+    from {
+        bottom: 0;
+        opacity: 0;
+    }
+
+    to {
+        bottom: 30px;
+        opacity: 1;
+    }
+}
+
+@-webkit-keyframes fadeout {
+    from {
+        bottom: 30px;
+        opacity: 1;
+    }
+
+    to {
+        bottom: 0;
+        opacity: 0;
+    }
+}
+
+@keyframes fadeout {
+    from {
+        bottom: 30px;
+        opacity: 1;
+    }
+
+    to {
+        bottom: 0;
+        opacity: 0;
+    }
+}

public/index.html

@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset='utf-8'>
+    <meta name='viewport' content='width=device-width'>
+
+    <title>Svelte app</title>
+
+    <link rel='icon' type='image/png' href='/favicon.png'>
+	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
+    <link rel='stylesheet' href='/global.css'>
+    <link rel='stylesheet' href='/bundle.css'>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js"></script>
+    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
+            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
+            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
+            crossorigin="anonymous"></script>
+    <script defer src='/bundle.js'></script>
+</head>
+
+<body>
+</body>
+</html>

public/queue.css

@@ -0,0 +1,15 @@
+body {
+    background: #181818;
+}
+table {
+    border-collapse: collapse;
+    background: inherit !important;
+}
+
+td {
+    padding: .5em;
+}
+
+.fas:hover {
+    cursor: pointer;
+}

public/queue.html

@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+
+    <head>
+        <title>CS4241 Assignment 2</title>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+        <link rel="stylesheet" href="queue.css" />
+        <script src="https://kit.fontawesome.com/1103621ae0.js"></script>
+        <script defer src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
+        <script defer src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+        <script defer src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
+        <script defer src="queue.js" type="text/javascript"></script>
+
+    </head>
+
+    <body>
+        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+            <a class="navbar-brand" href="/">Spotify Jukebox</a>
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                <ul class="navbar-nav mr-auto">
+                    <li class="nav-item active loggedin">
+                        <a class="nav-link" href="/auth/spotify">Login</a>
+                    </li>
+                    <li class="nav-item active">
+                        <a class="nav-link" href="/queue.html">View Queue</a>
+                    </li>
+                </ul>
+            </div>
+        </nav>
+        <div class='container my-2'>
+            <table id='searchResultsTable' class='results-table table table-dark table-hover'>
+                <thead style="visibility:hidden">
+                    <tr>
+                        <th></th>
+                        <th>Title</th>
+                        <th>Artist</th>
+                        <th class="text-right">Start Time</th>
+                    </tr>
+                </thead>
+            </table>
+        </div>
+        <div id="snackbar"></div>
+
+    </body>
+
+</html>

public/queue.js

@@ -0,0 +1,40 @@
+window.onload = function () {
+    fetch('/queue')
+        .then((res) => res.json())
+        .then((data) => {
+            $('.results-table tbody').remove()
+            $('.results-table thead').css('visibility', 'visible')
+            let tbody = $('<tbody />').appendTo($('.results-table'))
+            for (let track of data) {
+                let date = new Date(track.startTime);
+                let timestamp = `${date.getHours()}:${date.getMinutes()}`
+                $('<tr>').appendTo(tbody)
+                    .append(`<td>${track.ownedByUser ? '<span class="fas fa-trash-alt"></span>' : ''}</td>`)
+                    .append(`<td>${track.title}</td>`)
+                    .append(`<td>${track.artist}</td>`)
+                    .append(`<td style="text-align:right">${timestamp}</td>`)
+                    .append(`<td style="display: none">${track.id}</td>`)
+            }
+        })
+    $(document).on('click', '.fa-trash-alt', (e) => {
+        let $this = e.target.parentElement.parentElement
+        $.post({
+            url: '/delete',
+            data: {
+                id: $this.children[4].innerHTML
+            },
+            credentials: 'include'
+        }, () => {
+            // $($this).find("td").fadeOut('slow', () => $(this).parent().remove())
+            $($this).fadeOut('slow', () => $(this).remove())
+        }).fail((response) => {
+            let message = response.responseJSON.message;
+            console.log(message)
+            let snackbar = $("#snackbar")
+            snackbar.html(`Could not delete song: ${message}`)
+            snackbar.addClass("show")
+            // After 3 seconds, remove the show class from DIV
+            setTimeout(() => snackbar.removeClass("show"), 3000);
+        })
+    })
+}