From 1aa7b9dfef11217c0df3e74fcc9c525d6a663877 Mon Sep 17 00:00:00 2001 From: Cristina Alekseeva Date: Thu, 13 Jun 2019 18:40:04 -0700 Subject: [PATCH 1/6] added google auth --- .gitignore | 6 +- assets/javascript/script.js | 354 +++++++++++++++++++----------------- index.html | 63 ++++--- 3 files changed, 232 insertions(+), 191 deletions(-) diff --git a/.gitignore b/.gitignore index 496ee2c..393fcce 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,5 @@ -.DS_Store \ No newline at end of file +.DS_Store +node_modules +package.json +package-lock.json +app.js diff --git a/assets/javascript/script.js b/assets/javascript/script.js index 2154b19..b43013f 100644 --- a/assets/javascript/script.js +++ b/assets/javascript/script.js @@ -19,13 +19,12 @@ function getLocation() { var geogate = true; function error(err) { -console.log(err.code) -if (err.code === 1) { - geogate = false; -} + console.log(err.code); + if (err.code === 1) { + geogate = false; + } } - function showPosition(position) { console.log( "Latitude: " + @@ -47,17 +46,19 @@ function getURL() { var date = $("#date").val(); var queryURL; var basicURL; - + if (geogate) { - basicURL = "https://www.eventbriteapi.com/v3/events/search/?sort_by=date&categories=103&token=HCI6R2VNZXBSOAT5UBT2&expand=venue&location.latitude=" + - userlat + - "&location.longitude=" + - userlong + - "&location.within=100mi";} - else if (!geogate) { - basicURL = "https://www.eventbriteapi.com/v3/events/search/?sort_by=date&categories=103&token=HCI6R2VNZXBSOAT5UBT2&expand=venue" + basicURL = + "https://www.eventbriteapi.com/v3/events/search/?sort_by=date&categories=103&token=HCI6R2VNZXBSOAT5UBT2&expand=venue&location.latitude=" + + userlat + + "&location.longitude=" + + userlong + + "&location.within=100mi"; + } else if (!geogate) { + basicURL = + "https://www.eventbriteapi.com/v3/events/search/?sort_by=date&categories=103&token=HCI6R2VNZXBSOAT5UBT2&expand=venue"; } - + queryURL = basicURL; if (price !== "Any price") { @@ -98,9 +99,17 @@ function displayEvent() { var eventName = $("

").text(events[i].name.text); var eventSum = $("

").text(events[i].summary); var venueName = $("

").html("Venue: " + events[i].venue.name); - var eventTimeStart = events[i].start.local.split("T") - var eventStart = $("

").html("Date: " + eventTimeStart[0] + "
" + "Time: " + eventTimeStart[1]); - var eventPlace = $("

").html("Address: " + events[i].venue.address.localized_address_display); + var eventTimeStart = events[i].start.local.split("T"); + var eventStart = $("

").html( + "Date: " + + eventTimeStart[0] + + "
" + + "Time: " + + eventTimeStart[1] + ); + var eventPlace = $("

").html( + "Address: " + events[i].venue.address.localized_address_display + ); var eventURL = $("", { href: events[i].url, text: "read more" @@ -108,10 +117,9 @@ function displayEvent() { var eventFree; if (events[i].is_free) { - eventFree = $("

").html("Pricing: Free") - } - else if (!events[i].is_free) { - eventFree = $("

").html("Pricing: Paid") + eventFree = $("

").html("Pricing: Free"); + } else if (!events[i].is_free) { + eventFree = $("

").html("Pricing: Paid"); } newEvent.append(eventName); @@ -130,7 +138,12 @@ function displayEvent() { eventloc.push(events[i].venue.latitude); eventloc.push(events[i].venue.longitude); locations.push(eventloc); - labels.push("

Event: " + response.events[i].name.html + "
Venue: " + response.events[i].venue.name) + labels.push( + "
Event: " + + response.events[i].name.html + + "
Venue: " + + response.events[i].venue.name + ); } console.log(locations); }); @@ -156,200 +169,215 @@ getLocation(); var markers = []; -setTimeout(initMap(),1000); +setTimeout(initMap(), 1000); function initMap() { + var myLatlng = new google.maps.LatLng(67.880605, 12.982618); - var myLatlng = new google.maps.LatLng(67.880605, 12.982618) - - - var map = new google.maps.Map(document.getElementById('map'), { + var map = new google.maps.Map(document.getElementById("map"), { zoom: 8, center: myLatlng }); - + var bounds = new google.maps.LatLngBounds(); $("#event-genre").on("click", function(event) { event.preventDefault(); - clearMarkers() - console.log(locations.length) - var marker; - -setTimeout(function() { -// loop through locations and add to map -for ( var i = 0; i < locations.length; i++ ) -{ - // get current location - var location = locations[ i ]; - - // create map position - var position = new google.maps.LatLng( location[ 0 ], location[ 1 ] ); - - // add position to bounds - bounds.extend( position ); - - // create marker (https://developers.google.com/maps/documentation/javascript/reference#MarkerOptions) - marker = new google.maps.Marker({ - /*animation: google.maps.Animation.DROP */ - map: map - , position: position - , title: location[ 0 ] + clearMarkers(); + console.log(locations.length); + var marker; + + setTimeout(function() { + // loop through locations and add to map + for (var i = 0; i < locations.length; i++) { + // get current location + var location = locations[i]; + + // create map position + var position = new google.maps.LatLng(location[0], location[1]); + + // add position to bounds + bounds.extend(position); + + // create marker (https://developers.google.com/maps/documentation/javascript/reference#MarkerOptions) + marker = new google.maps.Marker({ + /*animation: google.maps.Animation.DROP */ + map: map, + position: position, + title: location[0] + }); + + markers.push(marker); + + // create info window and add to marker (https://developers.google.com/maps/documentation/javascript/reference#InfoWindowOptions) + google.maps.event.addListener( + marker, + "click", + (function(marker, i) { + return function() { + var infowindow = new google.maps.InfoWindow(); + infowindow.setContent(labels[i]); + infowindow.open(map, marker); + }; + })(marker, i) + ); + } + }, 3000); }); - markers.push(marker); - - // create info window and add to marker (https://developers.google.com/maps/documentation/javascript/reference#InfoWindowOptions) - google.maps.event.addListener( marker, 'click', ( - function( marker, i ) { - return function() { - var infowindow = new google.maps.InfoWindow(); - infowindow.setContent( labels[i]); - infowindow.open( map, marker ); + var infoWindow = new google.maps.InfoWindow(); + if (navigator.geolocation) { + navigator.geolocation.getCurrentPosition( + function(position) { + var pos = { + lat: position.coords.latitude, + lng: position.coords.longitude + }; + + infoWindow.setPosition(pos); + infoWindow.setContent("You are here."); + infoWindow.open(map); + map.setCenter(pos); + }, + function() { + handleLocationError(true, infoWindow, map.getCenter()); } - } - )( marker, i ) ); - }; - - },3000) -}) - -var infoWindow = new google.maps.InfoWindow; -if (navigator.geolocation) { - navigator.geolocation.getCurrentPosition(function(position) { - var pos = { - lat: position.coords.latitude, - lng: position.coords.longitude - }; - - infoWindow.setPosition(pos); - infoWindow.setContent('You are here.'); - infoWindow.open(map); - map.setCenter(pos); - }, function() { - handleLocationError(true, infoWindow, map.getCenter()); - }); + ); } else { // Browser doesn't support Geolocation handleLocationError(false, infoWindow, map.getCenter()); } - -function handleLocationError(browserHasGeolocation, infoWindow, pos) { - infoWindow.setPosition(pos); - infoWindow.setContent(browserHasGeolocation ? - 'Error: The Geolocation service failed.' : - 'Error: Your browser does not support geolocation.'); - infoWindow.open(map); -} - -} - - // Sets the map on all markers in the array. - function setMapOnAll(map) { - for (var i = 0; i < markers.length; i++) { - markers[i].setMap(map); - } + function handleLocationError(browserHasGeolocation, infoWindow, pos) { + infoWindow.setPosition(pos); + infoWindow.setContent( + browserHasGeolocation + ? "Error: The Geolocation service failed." + : "Error: Your browser does not support geolocation." + ); + infoWindow.open(map); } +} - // Removes the markers from the map. - function clearMarkers() { - setMapOnAll(null); - locations = []; - labels = []; +// Sets the map on all markers in the array. +function setMapOnAll(map) { + for (var i = 0; i < markers.length; i++) { + markers[i].setMap(map); } +} +// Removes the markers from the map. +function clearMarkers() { + setMapOnAll(null); + locations = []; + labels = []; +} -function getSpotifyToken() -{ +function getSpotifyToken() { var tokenURL = "https://accounts.spotify.com/api/token"; - var clientId = '5e15085d2b924d049ae29907ee452bbf'; - var clientSecret = 'e84f853c2b784addb982d679f609d73a'; - var encodedData = window.btoa(clientId + ':' + clientSecret); + var clientId = "5e15085d2b924d049ae29907ee452bbf"; + var clientSecret = "e84f853c2b784addb982d679f609d73a"; + var encodedData = window.btoa(clientId + ":" + clientSecret); console.log("HI"); - jQuery.ajaxPrefilter(function(options) { - if (options.crossDomain && jQuery.support.cors) { - options.url = 'https://cors-anywhere.herokuapp.com/' + options.url; - } + jQuery.ajaxPrefilter(function(options) { + if (options.crossDomain && jQuery.support.cors) { + options.url = "https://cors-anywhere.herokuapp.com/" + options.url; + } }); - - $.ajax({ - method: "POST", - url: tokenURL, - data: { - grant_type: 'client_credentials' - }, - headers: { - "Authorization": "Basic "+ encodedData, - 'Content-Type': 'application/x-www-form-urlencoded', - 'x-requested-with': 'XMLHttpRequest' - } - }) - .then (function(result) { - console.log(result); - token1 = result.access_token; - }); - - + $.ajax({ + method: "POST", + url: tokenURL, + data: { + grant_type: "client_credentials" + }, + headers: { + Authorization: "Basic " + encodedData, + "Content-Type": "application/x-www-form-urlencoded", + "x-requested-with": "XMLHttpRequest" + } + }).then(function(result) { + console.log(result); + token1 = result.access_token; + }); } - getSpotifyToken(); - function playList() - { +function playList() { $("#playlistDiv").text(""); console.log(token1); - + var topicSearch = $(this).attr("data-fitness"); var state = $(this).attr("data-state"); - var playlistURL = "https://api.spotify.com/v1/search?q=" + genreText + "&type=playlist&limit=10"; - - - - /* Spotify playlist API */ - $.ajax({ - url: playlistURL, - method: "GET", - Accept: "application/json", - ContentType: "application/json", - headers: { - "Authorization": "Bearer "+ token1} - - }) - .then(function(response){ - console.log(response); - for(var i = 0; i<4; i++) - { + var playlistURL = + "https://api.spotify.com/v1/search?q=" + + genreText + + "&type=playlist&limit=10"; + /* Spotify playlist API */ + $.ajax({ + url: playlistURL, + method: "GET", + Accept: "application/json", + ContentType: "application/json", + headers: { + Authorization: "Bearer " + token1 + } + }).then(function(response) { + console.log(response); + for (var i = 0; i < 4; i++) { var result = response.playlists; var playlistURL = result.items[i].external_urls.spotify; - var imgURL = result.items[i].images[0].url; + var imgURL = result.items[i].images[0].url; var playlists = $("
"); var playlist = $(""); var img = $(""); - img.attr("src" - , imgURL); - img.addClass("uk-animation-scale-up uk-transform-origin-top-left uk-transition-fade"); - img.attr("background-color", "black") + img.attr("src", imgURL); + img.addClass( + "uk-animation-scale-up uk-transform-origin-top-left uk-transition-fade" + ); + img.attr("background-color", "black"); - var playDiv = $("
").text("►"); + var playDiv = $("
").text("►"); playDiv.addClass("uk-transition-fade"); - playlist.addClass("uk-transition-toggle"); playlist.addClass("uk-overflow-hidden"); playlist.append(img); playlist.append(playDiv); - playlists.append(playlist); - + $("#playlistDiv").append(playlists); } - }) + }); } +//firebase +var config = { + apiKey: "AIzaSyC4Oa03PsGzQVoElWaQhppeLBDxINlYfYk", + authDomain: "pinme-270ea.firebaseapp.com", + databaseURL: "https://pinme-270ea.firebaseio.com", + projectId: "pinme-270ea", + storageBucket: "pinme-270ea.appspot.com", + messagingSenderId: "806008211699", + appId: "1:806008211699:web:f94ec750052f45f3" +}; +// Initialize Firebase +firebase.initializeApp(config); + +googleSignIn = () => { + var provider = new firebase.auth.GoogleAuthProvider(); + firebase + .auth() + .signInWithPopup(provider) + .then(function(result) { + console.log(result); + }) + .catch(function(err) { + console.log(err); + }); +}; diff --git a/index.html b/index.html index c05ecdf..0ccc48b 100644 --- a/index.html +++ b/index.html @@ -6,12 +6,16 @@ + - + @@ -30,7 +34,10 @@ crossorigin="anonymous" > - + -
-

-

P

-

i

-

n

-

M

-

E

-
-
-
+
+

+ +

+

P

+

i

+

n

+

M

+

E

+
+
- +

pinME

@@ -71,6 +85,7 @@

+

Search your event

@@ -120,14 +135,9 @@

Search your event

- +
-
+
-
- +
- + - + From 24aa36492fc2bec7dc0b7cf755dfb1ff99ad53dc Mon Sep 17 00:00:00 2001 From: Cristina Alekseeva Date: Thu, 13 Jun 2019 19:25:48 -0700 Subject: [PATCH 2/6] added favotite buttons --- assets/css/style.css | 79 ++++++++++++++++++++++--------------- assets/javascript/script.js | 9 +++++ index.html | 4 +- 3 files changed, 59 insertions(+), 33 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index c1df647..a38173d 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -19,7 +19,7 @@ form h3 { display: flex; justify-content: center; padding: 25px !important; - margin: 15px 0; + margin-bottom: 15px; } .jumbotron img { margin-right: 40px; @@ -38,13 +38,27 @@ form h3 { body { background: url(../images/kuva4_nettiin.jpg) center; } - -#event-genre { +#favorites { + display: none; +} +#signIn, +#favorites { + margin: 10px 0; +} +#event-genre, +#signIn, +#favorites, +.fav { height: 38px; width: 150px; background-color: black; + border-radius: 5px; color: white; } +a { + color: indigo; + margin: 5px 0; +} .main-carousel { padding: 10px; margin-bottom: 50px; @@ -72,7 +86,16 @@ body { background-color: rgba(250, 219, 200, 0.8); padding: 15px; margin: 10px; + display: flex; + flex-direction: column; } +/* .fav { + border: 0; + background: red; + color: black; + text-align: left; + display: none; +} */ .image { width: 100%; } @@ -109,20 +132,19 @@ body { } #intro { - margin:0; - height:100vh; - font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; - overflow:hidden; + margin: 0; + height: 100vh; + font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; + overflow: hidden; } - .color { display: grid; - grid-template-columns: repeat(10,auto); + grid-template-columns: repeat(10, auto); } .div { - height:100vh; + height: 100vh; } #test-0 { font-size: 5em; @@ -132,8 +154,8 @@ body { opacity: 0; z-index: 2; } -#logo{ - width:10%; +#logo { + width: 10%; } #test-1 { font-size: 5em; @@ -180,28 +202,21 @@ body { display: inline-block } */ -#playlistDiv -{ - width: 100%; - display: flex; - justify-content: space-around; - margin-top: 2%; - +#playlistDiv { + width: 100%; + display: flex; + justify-content: space-around; + margin-top: 2%; } -#playlist -{ - width: 25%; - position: relative; - +#playlist { + width: 25%; + position: relative; } -#playlist img -{ - - max-width: 277.5px; - max-height: 277.5px; - height: auto; - width: auto; - +#playlist img { + max-width: 277.5px; + max-height: 277.5px; + height: auto; + width: auto; } diff --git a/assets/javascript/script.js b/assets/javascript/script.js index b43013f..103792c 100644 --- a/assets/javascript/script.js +++ b/assets/javascript/script.js @@ -115,6 +115,10 @@ function displayEvent() { text: "read more" }); + var fav = $("
+ + +

-

Search your event

From 7164dad83f3224156bef5936430ab9c176f17468 Mon Sep 17 00:00:00 2001 From: Cristina Alekseeva Date: Fri, 14 Jun 2019 00:25:55 -0700 Subject: [PATCH 3/6] added logOut --- assets/css/style.css | 19 +++++- assets/javascript/animate.js | 119 ++++++++++++++++++----------------- assets/javascript/script.js | 97 ++++++++++++++++++++++++++-- index.html | 31 +++++---- 4 files changed, 189 insertions(+), 77 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index a38173d..0d91be7 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -41,20 +41,33 @@ body { #favorites { display: none; } +.signDiv { + display: flex; + justify-content: space-between; +} #signIn, -#favorites { +#favorites, +#out { margin: 10px 0; } +#out { + display: none; +} #event-genre, #signIn, #favorites, -.fav { +.fav, +#out { height: 38px; width: 150px; background-color: black; border-radius: 5px; color: white; } +.greet { + font-size: 18pt; + color: whitesmoke; +} a { color: indigo; margin: 5px 0; @@ -128,7 +141,7 @@ a { } #mainbody { - display: none; + /* display: none; */ } #intro { diff --git a/assets/javascript/animate.js b/assets/javascript/animate.js index 6d613a2..775fad4 100644 --- a/assets/javascript/animate.js +++ b/assets/javascript/animate.js @@ -1,64 +1,67 @@ - function gradientChange(){ - for(i=0; i<10; i++){ - var newDiv = $("
"); - newDiv.addClass('div'); - newDiv.addClass('c'+i); - $(".color").append(newDiv); - } - } - gradientChange(); +function gradientChange() { + for (i = 0; i < 10; i++) { + var newDiv = $("
"); + newDiv.addClass("div"); + newDiv.addClass("c" + i); + $(".color").append(newDiv); + } +} +gradientChange(); + +// Change Color to create a gradient wave flow of colors +function dynoColor() { + for (i = 0; i < 10; i++) { + var red = Math.floor(Math.random() * 10) + 25 * i; + var green = Math.floor(Math.random() * 10) + 25 * i; + var blue = Math.floor(Math.random() * 10) + 25 * i; + $(".c" + i).css( + "backgroundColor", + "rgb(" + red + "," + green + "," + blue + ")" + ); + } +} +setInterval(dynoColor, 250); - // Change Color to create a gradient wave flow of colors - function dynoColor(){ - for(i=0; i<10; i++){ - var red = Math.floor(Math.random()*10)+25*i; - var green = Math.floor(Math.random()*10)+25*i; - var blue = Math.floor(Math.random()*10)+25*i; - $(".c"+i).css("backgroundColor", "rgb(" + red + "," + green + "," + blue + ")"); - } - } - setInterval(dynoColor,250); +// // Anime.js Animations +// var tl = anime.timeline({ +// easing: 'easeOutExpo', +// duration: 750 +// }) +// tl.add ({ +// targets: '.div', +// width:'100%', +// opacity:'0.8', +// delay:anime.stagger(100) +// }) -// Anime.js Animations -var tl = anime.timeline({ - easing: 'easeOutExpo', - duration: 750 - }) +// tl.add ({ +// targets: '.c3, .c4, .c5, .c6, .c7, .c8, .c9', +// width: '75%', +// opacity: '0.8', +// }) - tl.add ({ - targets: '.div', - width:'100%', - opacity:'0.8', - delay:anime.stagger(100) - }) - - tl.add ({ - targets: '.c3, .c4, .c5, .c6, .c7, .c8, .c9', - width: '75%', - opacity: '0.8', - }) +// tl.add ({ +// targets: '.c0, .c1, .c2', +// width: '0%', +// opacity: '0.8', +// }) +// for (i=0; i<7;i++){ +// tl.add ({ +// targets: 'h1', +// top:'20%', +// opacity: 1, +// delay:anime.stagger(500) +// }) +// } - tl.add ({ - targets: '.c0, .c1, .c2', - width: '0%', - opacity: '0.8', - }) - for (i=0; i<7;i++){ - tl.add ({ - targets: 'h1', - top:'20%', - opacity: 1, - delay:anime.stagger(500) - }) - } +// function loadMain(){ +// $("#intro").addClass('animated lightSpeedOut delay-1s').delay(2000).fadeOut(); +// $("#mainbody").delay(2200).fadeIn(); +// console.log("Fade out") +// } - function loadMain(){ - $("#intro").addClass('animated lightSpeedOut delay-1s').delay(2000).fadeOut(); - $("#mainbody").delay(2200).fadeIn(); - console.log("Fade out") -} -$(document).ready(function(){ -setTimeout(loadMain,7000); -console.log("doc ready chk") -}); \ No newline at end of file +$(document).ready(function() { + setTimeout(loadMain, 7000); + console.log("doc ready chk"); +}); diff --git a/assets/javascript/script.js b/assets/javascript/script.js index 103792c..e2ab4d5 100644 --- a/assets/javascript/script.js +++ b/assets/javascript/script.js @@ -117,7 +117,21 @@ function displayEvent() { var fav = $(" - +
+ +

+ +
+ +
+
Search your event

Search - +
+ From c4944d157fb063debd8924adafda1841fa60d978 Mon Sep 17 00:00:00 2001 From: Cristina Alekseeva Date: Fri, 14 Jun 2019 01:06:57 -0700 Subject: [PATCH 4/6] added render events function but it doesnt work( --- assets/javascript/script.js | 28 ++++++++++++++++++++-------- 1 file changed, 20 insertions(+), 8 deletions(-) diff --git a/assets/javascript/script.js b/assets/javascript/script.js index e2ab4d5..c5693d1 100644 --- a/assets/javascript/script.js +++ b/assets/javascript/script.js @@ -117,7 +117,7 @@ function displayEvent() { var fav = $(" -
+
+
+
♡ favorites
+ +
+ +
+
+
+
+