possan · clcmo · Feb 22, 2022 · Feb 22, 2022 · Feb 22, 2022 · Feb 22, 2022
diff --git a/CNAME b/CNAME
@@ -0,0 +1 @@
+dev.portalurbanna.com.br
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Camila L. Oliveira
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
diff --git a/_config.yml b/_config.yml
@@ -0,0 +1,58 @@
+name: Playlist Generator
+title: Playlist Generator
+description: Create your Spotify Playlist
+baseurl: http://dev.portalurbanna.com.br/
+
+include: ["_pages"]
+permalink: /:title/
+
+# Plugins
+plugins: 
+  - jekyll-feed
+  - jekyll-sitemap
+  - jekyll-paginate
+  - jekyll-seo-tag
+  - jekyll-pug
+
+authors:
+  milla:  
+    name:           Camila L. Oliveira
+    site:           https://camilaloliveira.com.br
+    avatar:         media/images/avatar_milla.png
+    bio:            "Tecnóloga em Análise e Desenvolvimento de Sistemas, Bacharel em Administração Pública, Programadora de Computadores e Dispositivos Móveis e Técnica em Informática para Internet. 
+      Com experiências nas empresas TCS e BRQ, atuando no desenvolvimento de soluções aos clientes há mais de 2 anos."
+    email:          ola@camilaloliveira.com.br
+    twitter:        https://twitter.com/millaloliveira
+    linkedin:       https://linkedin.com/in/clcmo
+    facebook:       https://facebook.com/millaloliveira
+
+
+# Defaults
+defaults:
+
+  # all posts
+  - scope:
+      path: "_posts"
+    values:
+      layout: post
+      author: milla
+      avatar: /media/images/avatar_milla.png
+
+  # all pages
+  - scope:
+      path: "_pages"
+    values:
+      layout: page
+
+# Syntax
+markdown: kramdown
+highlighter: rouge
+
+# Paginate
+paginate: 10
+
+
+
+# Exclude metadata and development time dependencies (like Grunt plugins)
+exclude: [README.markdown, package.json, grunt.js, Gruntfile.js, Gruntfile.coffee, node_modules]
+
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+    <title>{{site.title}}</title>
+    <meta name="description" content="{{ site.description }}">
+
+    <link rel="shortcut icon" type="image/x-icon" href="{{page.baseurl}}/assets/images/logo_urb.png">
+
+    <!-- Theme Stylesheet -->
+    <link rel="stylesheet" href="{{page.baseurl}}/assets/css/default.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.0/css/bulma.min.css">
+
+    <!-- Jquery on header to make sure everything works, the rest  of the scripts in footer for fast loading -->
+    <script 
+        src="https://code.jquery.com/jquery-3.3.1.min.js"
+        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
+        crossorigin="anonymous"></script>
+    </head>
+</head>
+
+<body translate="no" 
+    {% if page == "/callback.html" %}
+        onload="doit()"
+    {% else %}
+        onload="startApp()"
+    {% endif %}
+>
+
+    <section class="hero is-primary">
+      <div class="hero-body">
+        <div class="container">
+          <h1 class="title">
+            Playlist Generator
+          </h1>
+          <h2 class="subtitle">
+            Generated by Json
+          </h2>
+        </div>
+      </div>
+    </section>
+    <section class="section">
+      {{content}}
+    </section>
+
+    <script type="text/javascript" src="{{page.baseurl}}/assets/js/server.js"></script>
+    <script type="text/javascript" src="{{page.baseurl}}/assets/js/main.js"></script>
+    <script type="text/javascript" src="{{page.baseurl}}/assets/js/fuzzyset.js"></script>
+    <script type="text/javascript" src="{{page.baseurl}}/assets/js/wordcache.js"></script>
+    <script type="text/javascript" src="{{page.baseurl}}/assets/js/app.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.1/handlebars.min.js"></script>
+  </body>
diff --git a/_pages/callback.md b/_pages/callback.md
@@ -0,0 +1,21 @@
+---
+layout: default
+permalink: "/callback.html"
+---
+
+<div class="columns">
+    <div class="column left">
+        <div id="creating" style="text-align: center;">
+			<h3 class="title is-3">Creating playlist...</h3>
+		</div>
+    </div>
+    <div class="column right">
+		<div id="done" style="display: none; text-align: center;">
+			<h3 class="title is-3">Done!</h3>
+			<br />
+			<button class="button is-success" id="playlistlink">
+				Open playlist in Spotify
+			</button>
+		</div>
+    </div>
+</div>
diff --git a/_pages/create.md b/_pages/create.md
@@ -0,0 +1,20 @@
+---
+layout: default
+---
+
+<div class="columns">
+    <div class="column left">
+        <h3 class="title is-3">Write your text here</h3>
+        <div class="form-group">
+            <textarea class="textarea" id="alltext" maxlength="500" placeholder="e.g. Hello world"></textarea>
+        </div>
+        <br />
+        <button class="button is-success" id="start">Create a Spotify playlist!</button>
+    </div>
+    <div class="column right">
+        <h3 class="title is-3">Corresponding track names</h3>
+        <div id="status"></div>
+        <br />
+        <div id="debug"></div>
+    </div>
+</div>
diff --git a/_pages/login.md b/_pages/login.md
@@ -0,0 +1,43 @@
+---
+layout: default
+---
+
+<div class="container">
+    <div id="login">
+        <h1>This is an example of the Authorization Code flow</h1>
+        <a href="/login" class="btn btn-primary">Log in with Spotify</a>
+    </div>
+    <div id="loggedin">
+        <div id="user-profile"></div>
+        <div id="oauth"></div>
+        <button class="button is-success" id="obtain-new-token">Obtain new token using the refresh token</button>
+    </div>
+</div>
+
+<script id="user-profile-template" type="text/x-handlebars-template">
+    <h1>Logged in as {{display_name}}</h1>
+    <div class="media">
+        <div class="pull-left">
+            <img class="media-object" width="150" src="{{images.0.url}}" />
+        </div>
+        <div class="media-body">
+            <dl class="dl-horizontal">
+              <dt>Display name</dt><dd class="clearfix">{{display_name}}</dd>
+                <dt>Id</dt><dd>{{id}}</dd>
+                <dt>Email</dt><dd>{{email}}</dd>
+                <dt>Spotify URI</dt><dd><a href="{{external_urls.spotify}}">{{external_urls.spotify}}</a></dd>
+                <dt>Link</dt><dd><a href="{{href}}">{{href}}</a></dd>
+                <dt>Profile Image</dt><dd class="clearfix"><a href="{{images.0.url}}">{{images.0.url}}</a></dd>
+                <dt>Country</dt><dd>{{country}}</dd>
+            </dl>
+        </div>
+    </div>
+</script>
+
+<script id="oauth-template" type="text/x-handlebars-template">
+    <h2>oAuth info</h2>
+    <dl class="dl-horizontal">
+        <dt>Access token</dt><dd class="text-overflow">{{access_token}}</dd>
+        <dt>Refresh token</dt><dd class="text-overflow">{{refresh_token}}</dd>
+    </dl>
+</script>
diff --git a/assets/css/default.css b/assets/css/default.css
@@ -0,0 +1,10 @@
+.column left {
+    position: absolute;
+    width: 50%;
+    height: 100%;
+  }
+
+  .column right {
+    position: absolute;
+    width: 50%;
+}
diff --git a/assets/css/logo_urb.png b/assets/css/logo_urb.png
diff --git a/app.js → assets/js/app.js b/app.js → assets/js/app.js
@@ -6,13 +6,9 @@
 	var g_tracks = '';
 
 	function setStatus(text) {
-		if (text != '') {
+		if(text != ''){
 			$('#status').html(
-				'<div class="progress progress-striped active">' +
-				'<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">' +
-			    text +
-			 	'</div>' +
-				'</div>'
+				'<progress class="progress is-primary is-small" max="100">15%</progress>'
 			);
 		} else {
 			$('#status').html('');
@@ -32,13 +28,12 @@
 	}
 
 	var refreshText = function() {
-		setStatus('Updating text...');
+		setStatus('Loading...');
 
 		g_name = $('#alltext').val().trim();
 		var words = splitText(g_name);
 		console.log('text changed.', g_name, words);
 		cache.lookupWords(words, function(worddata) {
-
 			setStatus('');
 
 			console.log('wordcache callback', worddata);
@@ -93,13 +88,18 @@
 				console.log('found', found);
 				if (found) {
 					g_tracks.push(found.uri);
-					txt += '<div class="media">' +
-						'<a class="pull-left" href="#"><img class="media-object" src="' + found.cover_url + '" /></a>' +
-						'<div class="media-body">' +
-						'<h4 class="media-heading"><a href="' + found.uri + '">' + found.name + '</a></h4>' +
-						'Album: <a href="' + found.album_uri + '">' + found.album +
-						'</a><br/>Artist: <a href="' + found.artist_uri + '">' + found.artist+'</a>' +
-						'</div>' +
+					txt += 
+						'<div class="media">' +
+							'<a class="pull-left" href="#">' +
+								'<img class="media-object" src="' + found.cover_url + '" />' +
+							'</a>' +
+							'<div class="media-body">' + 	
+								'<h4 class="media-heading">'+
+									'<a href="' + found.uri + '">' + found.name + '</a>'+
+								'</h4>' +
+								'Album: <a href="' + found.album_uri + '">' + found.album +'</a>'+
+								'<br />Artist: <a href="' + found.artist_uri + '">' + found.artist+'</a>' +
+							'</div>' +
 						'</div>\n';
 				} else {
 					txt += '<div class="media">No match found for the word "' + data.word+ '"</div>\n'
@@ -173,12 +173,12 @@
 	var redirect_uri = '';
 
 
-	if (location.host == 'localhost:8000') {
-		client_id = 'd37a9e88667b4fb3bc994299de2a52bd';
-		redirect_uri = 'http://localhost:8000/callback.html';
+	if (location.host == 'localhost:8888') {
+		client_id = '2a8909c2980143c496833de968725bf0';
+		redirect_uri = 'http://localhost:8888/callback.html';
 	} else {
-		client_id = '6f9391eff32647baa44b1a700ad4a7fc';
-		redirect_uri = 'http://lab.possan.se/playlistcreator-example/callback.html';
+		client_id = '2a8909c2980143c496833de968725bf0';
+		redirect_uri = 'https://dev.portalurbanna.com.br/callback.html';
 	}
 
 	var doLogin = function(callback) {
@@ -188,7 +188,7 @@
 			'&redirect_uri=' + encodeURIComponent(redirect_uri);
 		localStorage.setItem('createplaylist-tracks', JSON.stringify(g_tracks));
 		localStorage.setItem('createplaylist-name', g_name);
-		var w = window.open(url, 'asdf', 'WIDTH=400,HEIGHT=500');
+		var w = window.open(url, 'asdf', 'WIDTH=400, HEIGHT=500');
 	}
 
 	var refreshtimer = 0;
@@ -218,4 +218,4 @@
 		resolveOneWord();
 }
 
-})(window);
+})(window);
diff --git a/fuzzyset.js → assets/js/fuzzyset.js b/fuzzyset.js → assets/js/fuzzyset.js