Start on React with static data and no auth
This commit is contained in:
parent
06f0062690
commit
994cc87177
|
|
@ -27,32 +27,21 @@
|
||||||
<ul class="nav navbar-nav">
|
<ul class="nav navbar-nav">
|
||||||
<li class="active"><a href="#">Finder</a></li>
|
<li class="active"><a href="#">Finder</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul class="nav navbar-nav navbar-right" ng-controller="AuthCtrl">
|
<div id="authentication"></div>
|
||||||
<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><!-- /.navbar-collapse -->
|
</div><!-- /.navbar-collapse -->
|
||||||
</div><!-- /.container-fluid -->
|
</div><!-- /.container-fluid -->
|
||||||
</nav>
|
</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>
|
<div class="container" id="content"></div>
|
||||||
<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://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
|
||||||
<script src="https://code.jquery.com/jquery-1.12.3.min.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"
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
|
||||||
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
|
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
|
||||||
crossorigin="anonymous"></script>
|
crossorigin="anonymous"></script>
|
||||||
<script src="./script.js"></script>
|
<script type="text/babel" src="./script.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
|
||||||
277
public/script.js
277
public/script.js
|
|
@ -1,156 +1,161 @@
|
||||||
'use strict';
|
'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']);
|
var dups = [
|
||||||
|
{
|
||||||
app.config(['$stateProvider','$urlRouterProvider',function($stateProvider, $urlRouterProvider){
|
track: {
|
||||||
$stateProvider
|
album: {
|
||||||
.state('finder_public',{
|
id: "53fWaWYPGghRHppKdD7A2S",
|
||||||
templateUrl:'partials/home.html',
|
name: "El Taxi (feat. Pitbull, Sensato)"
|
||||||
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:{
|
artists: [
|
||||||
template: ''
|
{
|
||||||
|
id: "6W0XSFVBD0xJlJhahPSlKZ",
|
||||||
|
name: "Osmani Garcia"
|
||||||
|
}, {
|
||||||
|
id: "0TnOYISbd1XYRBk9myaseg",
|
||||||
|
name: "Pitbull"
|
||||||
|
}, {
|
||||||
|
id: "7iJrDbKM5fEkGdm5kpjFzS"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
];
|
||||||
.state('finder.playlist.dups',{
|
|
||||||
url: '/:uid/:id/:playlist',
|
var Duplicate = React.createClass({
|
||||||
views: {
|
render: function () {
|
||||||
'dups@finder': {
|
var authors = "";
|
||||||
templateUrl: 'partials/dups.html',
|
this.props.data.artists.forEach(function (item, index) {
|
||||||
controller: 'DupsCtrl'
|
if (index != 0) {
|
||||||
}
|
authors += ', ';
|
||||||
}
|
}
|
||||||
|
authors += item.name;
|
||||||
});
|
});
|
||||||
$urlRouterProvider.otherwise("/");
|
return (
|
||||||
}]);
|
<div className="list-group-item">{this.props.data.name} - {authors}</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
app.run(['$rootScope', '$state', '$localStorage',function($rootScope, $state, $localStorage){
|
var DuplicatesBox = React.createClass({
|
||||||
$rootScope.$storage = $localStorage.$default({
|
render: function () {
|
||||||
access_token: "",
|
var duplicates = this.props.data.map(function (duplicate) {
|
||||||
refresh_token: ""
|
return (
|
||||||
|
<Duplicate data={duplicate.track} key={duplicate.track.id}/>
|
||||||
|
);
|
||||||
});
|
});
|
||||||
$rootScope.access_token = $rootScope.$storage.access_token;
|
return (
|
||||||
$rootScope.refresh_token = $rootScope.$storage.refresh_token;
|
<div className="duplicatesBox list-group">
|
||||||
|
{duplicates}
|
||||||
$rootScope.$watch('access_token', function(newVal, oldVal, scope){
|
</div>
|
||||||
|
);
|
||||||
$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');
|
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
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}/>
|
||||||
|
);
|
||||||
});
|
});
|
||||||
$rootScope.$on('$stateChangeStart',
|
return (
|
||||||
function (event, toState) {
|
<div className="playListBox list-group">
|
||||||
if ((toState.name != "finder_public") && $rootScope.access_token == "") {
|
{playlists}
|
||||||
event.preventDefault();
|
</div>
|
||||||
$state.go('finder_public');
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}]);
|
|
||||||
|
|
||||||
app.controller("HomeCtrl",['$scope',function($scope){
|
var DuplicateFinderBox = React.createClass({
|
||||||
|
render: function () {
|
||||||
}]);
|
return (
|
||||||
|
<div className="duplicateFinderBox">
|
||||||
app.controller("MainCtrl",['$scope', '$state',function($scope, $state){
|
<div className="col-md-3">
|
||||||
$scope.current = {playlistId: undefined};
|
<h2>Playlists</h2>
|
||||||
}]);
|
<PlaylistBox data={this.props.playlists}/>
|
||||||
|
</div>
|
||||||
app.controller("PlaylistCtrl",['$scope', '$http', '$state',function($scope, $http, $state){
|
<div className="col-md-6">
|
||||||
$scope.playlists = [];
|
<h2>Duplicates</h2>
|
||||||
$scope.load = function(){
|
<DuplicatesBox data={this.props.dups}/>
|
||||||
$http.get('/get_playlists', {
|
</div>
|
||||||
params:{
|
</div>
|
||||||
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){
|
ReactDOM.render(
|
||||||
$scope.uid = $stateParams['uid'];
|
<DuplicateFinderBox playlists={data} dups={dups}/>,
|
||||||
$scope.id = $stateParams['id'];
|
document.getElementById('content')
|
||||||
$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){
|
var Authenticate = React.createClass({
|
||||||
$scope.login = function(){
|
render: function () {
|
||||||
var openUrl = '/login';
|
var accessToken = "";
|
||||||
window.$windowScope = $scope;
|
if (accessToken == "") {
|
||||||
$scope.popup = window.open(openUrl, "Authenticate Account", "width=500, height=500");
|
return (
|
||||||
var checker = $interval(function(){
|
<ul className="nav navbar-nav navbar-right">
|
||||||
if($scope.popup.closed){
|
<li>
|
||||||
$interval.cancel(checker);
|
<a href="#"><strong>Login With Spotify</strong></a>
|
||||||
} else if ($scope.popup.token != undefined && $scope.popup.token != null) {
|
</li>
|
||||||
$rootScope.access_token = $scope.popup.token.access_token;
|
</ul>
|
||||||
$rootScope.refresh_token = $scope.popup.token.refresh_token;
|
);
|
||||||
$scope.popup.close();
|
|
||||||
$interval.cancel(checker);
|
|
||||||
}
|
}
|
||||||
}, 500);
|
else {
|
||||||
return false;
|
return (
|
||||||
};
|
<ul className="nav navbar-nav navbar-right">
|
||||||
$scope.logout = function(){
|
<li>
|
||||||
$rootScope.refresh_token = "";
|
<a href="#">Refresh my token</a>
|
||||||
$rootScope.access_token = "";
|
</li>
|
||||||
};
|
<li>
|
||||||
$scope.refresh = function(){
|
<a href="#"><strong>Logout</strong></a>
|
||||||
if($rootScope.refresh_token)
|
</li>
|
||||||
$http.get('/refresh_token',{params: {refresh_token: $rootScope.refresh_token}})
|
</ul>
|
||||||
.then(function(result){
|
);
|
||||||
$rootScope.access_token = result.data.access_token || "";
|
|
||||||
}, function(failResult){
|
|
||||||
$rootScope.access_token = "";
|
|
||||||
$rootScope.refresh_token = "";
|
|
||||||
});
|
|
||||||
return false;
|
|
||||||
}
|
}
|
||||||
}])
|
}
|
||||||
|
});
|
||||||
|
|
||||||
})();
|
ReactDOM.render(
|
||||||
|
<Authenticate />,
|
||||||
|
document.getElementById('authentication')
|
||||||
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue