From 8db6bebcb936aab925ee11cadc1b91e6e6e2bed3 Mon Sep 17 00:00:00 2001
From: aj <andrewjpack@gmail.com>
Date: Fri, 28 Feb 2020 21:13:30 +0000
Subject: [PATCH] added to home page

---
 music/templates/base.html     |  7 ++---
 music/templates/index.html    | 58 +++++++++++++++++++++++++++++++++--
 music/templates/login.html    | 10 +++---
 music/templates/register.html | 10 +++---
 src/js/MusicTools.js          |  2 +-
 src/js/Playlist/New.js        | 11 +++++--
 src/js/Playlist/View/Edit.js  |  2 +-
 src/scss/style.scss           |  1 +
 8 files changed, 76 insertions(+), 25 deletions(-)

diff --git a/music/templates/base.html b/music/templates/base.html
index 7163c18..ef54db1 100644
--- a/music/templates/base.html
+++ b/music/templates/base.html
@@ -23,13 +23,10 @@
 	</div>
 	<br><br>
 	<ul class="navbar">
-		<li><a href="/">home</a></li>
-		<li><a href="https://sarsoo.xyz">sarsoo.xyz</a></li>
+		<li><a href="/">Home</a></li>
+		<li><a href="https://sarsoo.xyz">Sarsoo.xyz</a></li>
 	</ul>
 
 	{% block content %}{% endblock %}
-	<footer>
-		<a href="https://github.com/Sarsoo/spotify-web">view source code</a>
-	</footer>
 </body>
 </html>
diff --git a/music/templates/index.html b/music/templates/index.html
index 339da55..da1df4f 100644
--- a/music/templates/index.html
+++ b/music/templates/index.html
@@ -16,12 +16,20 @@
 
 	<div class="row">
 		<div class="{% if logged_in %}pad-12{% else %}pad-9{% endif %} card">
-			<h1>music tools</h1>
+			<h1 class="center-text">Music Tools</h1>
 
-			<p class="center-text">create "super-playlists" of smaller modular playlists</p>
+			<p class="center-text">A set of tools using Spotify and Last.fm to create smart playlists and calculate listening statistics</p>
+			<p class="center-text">Playlists are updated multiple times a day to keep tracks up to date</p>
+
+			<p class="center-text">Written in Python and Javascript, based on the <a href="https://github.com/Sarsoo/spotframework">spotframework</a> and <a href="https://github.com/Sarsoo/pyfmframework">fmframework</a> libraries</p>
+
+			<div style="padding:10px">
+				<a class="button" style="padding:15px;width:49%" href="https://github.com/Sarsoo/Music-Tools">View Source</a>
+				<a class="button" style="padding:15px;width:49%" href="https://github.com/Sarsoo/Music-Tools-iOS">iOS Client Source</a>
+			</div>
 
 			{% if logged_in %}
-				<a class="button full-width" href="/app">launch</a>
+				<a class="button full-width" href="/app">Launch</a>
 			{% endif %}
 		</div>
 
@@ -31,4 +39,48 @@
 		
 		{% endif %}
 	</div>
+	<div class="row">
+		<h1>Smart Playlists</h1>
+	</div>
+	<div class="row center-text">
+		<div class="pad-6 card">
+			<h1 class="center-text">Sources</h1>
+			<p>Create smart Spotify playlists pulling tracks from</p>
+			<ul style="text-align:left" >
+				<li style="padding:10px">Spotify Playlists</li>
+				<li style="padding:10px">Spotify Library Tracks</li>
+				<li style="padding:10px">Music Tools Playlists</li>
+			</ul> 
+		</div>
+		<div class="pad-6 card">
+			<h1 class="center-text">Currents</h1>
+			<p>Currents are mix playlists acting as the a snapshot of what you've been listening to recently</p>
+			<p>Include date filtering on playlist sources for recently added tracks</p>
+			<p>Optionally search for and include "monthly" playlists for the last two months when named e.g february 20</p>
+		</div>
+	</div>
+	<div class="row center-text">
+		<div class="pad-6 card">
+			<h1 class="center-text">Last.fm Charts</h1>
+			<p>Create playlists including Last.fm track charts of varying length and time range</p>
+		</div>
+		<div class="pad-6 card">
+			<h1 class="center-text">Recommendations</h1>
+			<p>Include Spotify recommendations based on the other tracks</p>
+		</div>
+		
+	</div>
+	<div class="row">
+		<h1>Tags</h1>
+	</div>
+	<div class="row center-text">
+		<div class="pad-6 card">
+			<h1 class="center-text">Last.fm Integration</h1>
+			<p>Create groups of entries for scrobble summing and listening stats</p>
+		</div>
+		<div class="pad-6 card">
+			<h1 class="center-text">Visualise Data</h1>
+			<p>Present listening trends with pie charts</p>
+		</div>
+	</div>
 {% endblock %}
diff --git a/music/templates/login.html b/music/templates/login.html
index 214411e..528d8bd 100644
--- a/music/templates/login.html
+++ b/music/templates/login.html
@@ -3,16 +3,14 @@
 {% block form %}
 
 <div class="pad-3 card">
-    <h1 class="sectiontitle">login</h1>
-
     <form name="login" action="/auth/login" method="POST" onsubmit="return handleLogin()">
-        <p class="center-text">username<br><input type="text" name="username" class="full-width"></p>
-        <p class="center-text">password<br><input type="password" name="password" class="full-width"></p>
+        <p class="center-text">Username<br><input type="text" name="username" class="full-width"></p>
+        <p class="center-text">Password<br><input type="password" name="password" class="full-width"></p>
         <p id="status" style="display: none; color: red" class="center-text"></p>
 
-        <button class="button full-width" onclick="handleLogin()" type="submit">go</button>
+        <button class="button full-width" onclick="handleLogin()" type="submit">Login</button>
         <br><br>
-        <a href="/auth/register" class="button full-width">register</a>
+        <a href="/auth/register" class="button full-width">Register</a>
 
     </form>
     <script src="{{ url_for('static', filename='js/login.bundle.js') }}"></script>
diff --git a/music/templates/register.html b/music/templates/register.html
index 2f4feb9..2a593e9 100644
--- a/music/templates/register.html
+++ b/music/templates/register.html
@@ -3,15 +3,13 @@
 {% block form %}
 
 	<div class="pad-3 card">
-		<h1 class="sectiontitle">register</h1>
-
 		<form name="register" action="/auth/register" method="POST" onsubmit="return handleRegister()">
-			<p class="center-text">username<br><input type="text" name="username" class="full-width"></p>
-			<p class="center-text">password<br><input type="password" name="password" class="full-width"></p>
-			<p class="center-text">password again<br><input type="password" name="password_again" class="full-width"></p>
+			<p class="center-text">Username<br><input type="text" name="username" class="full-width"></p>
+			<p class="center-text">Password<br><input type="password" name="password" class="full-width"></p>
+			<p class="center-text">Password again<br><input type="password" name="password_again" class="full-width"></p>
 			<p id="status" style="display: none; color: red" class="center-text"></p>
 
-			<button class="button full-width" onclick="handleRegister()" type="submit">register</button>
+			<button class="button full-width" onclick="handleRegister()" type="submit">Register</button>
 
 		</form>
 		<script src="{{ url_for('static', filename='js/register.bundle.js') }}"></script>
diff --git a/src/js/MusicTools.js b/src/js/MusicTools.js
index d667ad5..9ffd226 100644
--- a/src/js/MusicTools.js
+++ b/src/js/MusicTools.js
@@ -137,7 +137,7 @@ class MusicTools extends Component {
                                     <ListItemText primary="Admin" />
                                 </ListItem>
                             }
-                            <ListItem button key="logout" component={Link} to='/auth/logout'>
+                            <ListItem button key="logout" onClick={(e) => { window.location.href = '/auth/logout' }}>
                                 <ListItemIcon><KeyboardBackspace /></ListItemIcon>
                                 <ListItemText primary="Logout" />
                             </ListItem>
diff --git a/src/js/Playlist/New.js b/src/js/Playlist/New.js
index 34cf4a4..b87f754 100644
--- a/src/js/Playlist/New.js
+++ b/src/js/Playlist/New.js
@@ -26,12 +26,17 @@ class NewPlaylist extends Component {
         switch(value){
             case 'default':
                 this.setState({
-                    description: 'Merge playlists as-is with deduplication by spotify id'
+                    description: 'Merge playlists as-is with deduplication by Spotify id'
                 })
                 break;
             case 'recents':
                 this.setState({
-                    description: "Select songs from playlists which have been added since a variable number of days"
+                    description: "Filter added playlists for recently added tracks, optionally add monthly playlists"
+                })
+                break;
+            case 'fmchart':
+                this.setState({
+                    description: "Include Last.fm track chart data with varying time ranges"
                 })
                 break;
         }
@@ -104,7 +109,7 @@ class NewPlaylist extends Component {
                                 className="full-width"
                                 >
                                     <option value="default">Default</option>
-                                    <option value="recents">Recents</option>
+                                    <option value="recents">Currents</option>
                                     <option value="fmchart">Last.fm Chart</option>
                                 </Select>
                             </FormControl>
diff --git a/src/js/Playlist/View/Edit.js b/src/js/Playlist/View/Edit.js
index 40e5fcc..1a42cda 100644
--- a/src/js/Playlist/View/Edit.js
+++ b/src/js/Playlist/View/Edit.js
@@ -560,7 +560,7 @@ export class Edit extends Component{
                                 }}
                                 >
                                     <MenuItem value="default">Default</MenuItem>
-                                    <MenuItem value="recents">Recents</MenuItem>
+                                    <MenuItem value="recents">Currents</MenuItem>
                                     <MenuItem value="fmchart">Last.fm Chart</MenuItem>
                                 </Select>
                             </FormControl>
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 955b81e..6801326 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -14,6 +14,7 @@ $pad-px: 20px;
 
 html {
 	font-family: $font-stack;
+	color: $text-colour;
 }
 
 body {