gaugendre/DAVIDS
1
0
Fork 0
Code Issues Pull requests Releases Activity

Start on React with static data and no auth

Browse source
This commit is contained in:
Gabriel Augendre 2016-04-20 19:29:16 +02:00
parent 06f0062690
commit 994cc87177
2 changed files with 163 additions and 169 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
public/index.html
View file

@ -27,32 +27,21 @@
<ul class="nav navbar-nav">
<li class="active"><a href="#">Finder</a></li>
</ul>
<ul class="nav navbar-nav navbar-right" ng-controller="AuthCtrl">
<li ng-if="access_token == ''">
<a ng-click="login()" href="#"><b>Login With Spotify</b></a>
</li>
<li ng-if="access_token != ''">
<a ng-click="refresh()" href="#">Refresh my token</a>
</li>
<li ng-if="access_token != ''">
<a ng-click="logout()" href="#"><b>Logout</b></a>
</li>
</ul>
<div id="authentication"></div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<ui-view></ui-view>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.4/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.6/ngStorage.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<div class="container" id="content"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
<script src="./script.js"></script>
<script type="text/babel" src="./script.js"></script>
</body>
</html>

305
public/script.js
View file

@ -1,156 +1,161 @@
'use strict';
(function(){
var data = [
{id: 1, name: "Mine"},
{id: 2, name: "Other"},
{id: 3, name: "A third"}
];
var app = angular.module('app',['ui.router', 'ngStorage']);
app.config(['$stateProvider','$urlRouterProvider',function($stateProvider, $urlRouterProvider){
$stateProvider
.state('finder_public',{
templateUrl:'partials/home.html',
url: '/',
controller: 'HomeCtrl'
})
.state('finder',{
abstract: true,
templateUrl:'partials/logged.html',
url: '/finder',
controller: 'MainCtrl'
})
.state('finder.playlist',{
url: '/playlist',
views: {
playlist:{
templateUrl: 'partials/playlist.html',
controller: 'PlaylistCtrl'
},
dups:{
template: ''
}
var dups = [
{
track: {
album: {
id: "53fWaWYPGghRHppKdD7A2S",
name: "El Taxi (feat. Pitbull, Sensato)"
},
artists: [
{
id: "6W0XSFVBD0xJlJhahPSlKZ",
name: "Osmani Garcia"
}, {
id: "0TnOYISbd1XYRBk9myaseg",
name: "Pitbull"
}, {
id: "7iJrDbKM5fEkGdm5kpjFzS"
}
})
.state('finder.playlist.dups',{
url: '/:uid/:id/:playlist',
views: {
'dups@finder': {
templateUrl: 'partials/dups.html',
controller: 'DupsCtrl'
}
}
});
$urlRouterProvider.otherwise("/");
}]);
app.run(['$rootScope', '$state', '$localStorage',function($rootScope, $state, $localStorage){
$rootScope.$storage = $localStorage.$default({
access_token: "",
refresh_token: ""
});
$rootScope.access_token = $rootScope.$storage.access_token;
$rootScope.refresh_token = $rootScope.$storage.refresh_token;
$rootScope.$watch('access_token', function(newVal, oldVal, scope){
$rootScope.$storage.access_token = $rootScope.access_token;
$rootScope.$storage.refresh_token = $rootScope.refresh_token;
if(oldVal == "" && newVal != ""){
$state.go('finder.playlist');
} else if (oldVal != "" && newVal == ""){
$state.go('finder_public');
}
});
$rootScope.$on('$stateChangeStart',
function (event, toState) {
if ((toState.name != "finder_public") && $rootScope.access_token == "") {
event.preventDefault();
$state.go('finder_public');
}
});
}]);
app.controller("HomeCtrl",['$scope',function($scope){
}]);
app.controller("MainCtrl",['$scope', '$state',function($scope, $state){
$scope.current = {playlistId: undefined};
}]);
app.controller("PlaylistCtrl",['$scope', '$http', '$state',function($scope, $http, $state){
$scope.playlists = [];
$scope.load = function(){
$http.get('/get_playlists', {
params:{
access_token: $scope.access_token
}
}).then(function(result){
var r = result.data;
if(r.data){
$scope.playlists = r.data;
}
})
};
$scope.open = function(playlist) {
$scope.current.playlistId = playlist.id;
$state.go('finder.playlist.dups',{uid: playlist.owner.id, id: playlist.id, playlist: encodeURIComponent(playlist.name)})
};
$scope.load();
}]);
app.controller("DupsCtrl",['$scope', '$stateParams', '$http',function($scope, $stateParams, $http){
$scope.uid = $stateParams['uid'];
$scope.id = $stateParams['id'];
$scope.playlistName = decodeURIComponent($stateParams.playlist);
$scope.current.playlistId = $scope.id;
$scope.tracks = [];
$scope.loaded = false;
$scope.load = function () {
$http.get('/pl/' + $scope.uid + '/' + $scope.id, {
params: {
access_token: $scope.access_token
}
}).then(function(result) {
var r = result.data;
$scope.tracks = r.data;
$scope.loaded = true;
});
};
$scope.load();
}]);
app.controller('AuthCtrl',['$scope', '$rootScope', '$interval', '$http', function($scope, $rootScope, $interval, $http){
$scope.login = function(){
var openUrl = '/login';
window.$windowScope = $scope;
$scope.popup = window.open(openUrl, "Authenticate Account", "width=500, height=500");
var checker = $interval(function(){
if($scope.popup.closed){
$interval.cancel(checker);
} else if ($scope.popup.token != undefined && $scope.popup.token != null) {
$rootScope.access_token = $scope.popup.token.access_token;
$rootScope.refresh_token = $scope.popup.token.refresh_token;
$scope.popup.close();
$interval.cancel(checker);
}
}, 500);
return false;
};
$scope.logout = function(){
$rootScope.refresh_token = "";
$rootScope.access_token = "";
};
$scope.refresh = function(){
if($rootScope.refresh_token)
$http.get('/refresh_token',{params: {refresh_token: $rootScope.refresh_token}})
.then(function(result){
$rootScope.access_token = result.data.access_token || "";
}, function(failResult){
$rootScope.access_token = "";
$rootScope.refresh_token = "";
});
return false;
],
href: "https://api.spotify.com/v1/tracks/1qpbJ8GiPc706AfGqZAIei",
id: "1qpbJ8GiPc706AfGqZAIei",
name: "El Taxi"
}
}])
}, {
track: {
album: {
id: "53fWaWYPGghRHppKdD7A2S",
name: "El Taxi (feat. Pitbull, Sensato)"
},
artists: [
{
id: "6W0XSFVBD0xJlJhahPSlKZ",
name: "Osmani Garcia"
}, {
id: "0TnOYISbd1XYRBk9myaseg",
name: "Pitbull"
}, {
id: "7iJrDbKM5fEkGdm5kpjFzS"
}
],
href: "https://api.spotify.com/v1/tracks/1qpbJ8GiPc706AfGqZAIei",
id: "zkefjzkefn",
name: "El Taxi"
}
}
];
})();
var Duplicate = React.createClass({
render: function () {
var authors = "";
this.props.data.artists.forEach(function (item, index) {
if (index != 0) {
authors += ', ';
}
authors += item.name;
});
return (
<div className="list-group-item">{this.props.data.name} - {authors}</div>
);
}
});
var DuplicatesBox = React.createClass({
render: function () {
var duplicates = this.props.data.map(function (duplicate) {
return (
<Duplicate data={duplicate.track} key={duplicate.track.id}/>
);
});
return (
<div className="duplicatesBox list-group">
{duplicates}
</div>
);
}
});
var Playlist = React.createClass({
render: function () {
return (
<a className="list-group-item">{this.props.name}</a>
);
}
});
var PlaylistBox = React.createClass({
render: function () {
var playlists = this.props.data.map(function (playlist) {
return (
<Playlist name={playlist.name} key={playlist.id}/>
);
});
return (
<div className="playListBox list-group">
{playlists}
</div>
);
}
});
var DuplicateFinderBox = React.createClass({
render: function () {
return (
<div className="duplicateFinderBox">
<div className="col-md-3">
<h2>Playlists</h2>
<PlaylistBox data={this.props.playlists}/>
</div>
<div className="col-md-6">
<h2>Duplicates</h2>
<DuplicatesBox data={this.props.dups}/>
</div>
</div>
)
}
});
ReactDOM.render(
<DuplicateFinderBox playlists={data} dups={dups}/>,
document.getElementById('content')
);
var Authenticate = React.createClass({
render: function () {
var accessToken = "";
if (accessToken == "") {
return (
<ul className="nav navbar-nav navbar-right">
<li>
<a href="#"><strong>Login With Spotify</strong></a>
</li>
</ul>
);
}
else {
return (
<ul className="nav navbar-nav navbar-right">
<li>
<a href="#">Refresh my token</a>
</li>
<li>
<a href="#"><strong>Logout</strong></a>
</li>
</ul>
);
}
}
});
ReactDOM.render(
<Authenticate />,
document.getElementById('authentication')
);