Added inline track editor to admin classifier

This commit is contained in:
Josef Citrine 2016-08-29 23:02:14 +01:00
parent 726097bc7b
commit aa1f4181ce
8 changed files with 91 additions and 49 deletions

View file

@ -1 +1,4 @@
<pfm-paged-tracks-list type="unclassified"></pfm-paged-tracks-list> <div class="classifier">
<pfm-paged-tracks-list type="all" click-override="clickOverride(id)" class="classifier-track-list"></pfm-paged-tracks-list>
<pfm-track-editor track-id="trackIdToEdit" class="classifier-track-editor"></pfm-track-editor>
</div>

View file

@ -17,6 +17,6 @@
</div> </div>
<div class="stretch-to-bottom"> <div class="stretch-to-bottom">
<pfm-tracks-list tracks="tracks" class="three-columns"></pfm-tracks-list> <pfm-tracks-list tracks="tracks" class="three-columns" click-override="newClickOverride(id)"></pfm-tracks-list>
</div> </div>
</div> </div>

View file

@ -16,7 +16,16 @@
<i class="fa fa-trash"></i> <i class="fa fa-trash"></i>
</a> </a>
</div> </div>
<a class="info" ng-href="{{::track.url}}"> <a class="info" ng-href="{{::track.url}}" ng-if="!clickOverride">
<span class="title">{{::track.title}}</span>
<span class="stats" title="{{::track.stats.favourites}} Favourites / {{:: track.stats.comments}} Comments / {{::track.stats.plays}} Plays">
<strong>{{::track.stats.favourites}}</strong>f
<strong>{{::track.stats.comments}}</strong>c
<strong>{{::track.stats.plays}}</strong>p
</span>
<span class="artist">{{::track.user.name}} / {{::track.genre.name}}</span>
</a>
<a class="info" ng-if="clickOverride" href="#" ng-click="clickOverride({id: track.id})">
<span class="title">{{::track.title}}</span> <span class="title">{{::track.title}}</span>
<span class="stats" title="{{::track.stats.favourites}} Favourites / {{:: track.stats.comments}} Comments / {{::track.stats.plays}} Plays"> <span class="stats" title="{{::track.stats.favourites}} Favourites / {{:: track.stats.comments}} Comments / {{::track.stats.plays}} Plays">
<strong>{{::track.stats.favourites}}</strong>f <strong>{{::track.stats.favourites}}</strong>f

View file

@ -21,12 +21,15 @@ window.pfm.preloaders['admin-classifier'] = [
tracks.mainQuery.fromFilterString($state.params.filter) tracks.mainQuery.fromFilterString($state.params.filter)
tracks.mainQuery.setPage $state.params.page || 1 tracks.mainQuery.setPage $state.params.page || 1
tracks.mainQuery.setAdmin true tracks.mainQuery.setAdmin true
tracks.mainQuery.fetch(tracks.FetchType.UNCLASSIFIED) tracks.mainQuery.fetch(tracks.FetchType.ALL)
) )
] ]
module.exports = angular.module('ponyfm').controller "admin-classifier", [ module.exports = angular.module('ponyfm').controller "admin-classifier", [
'$scope', 'tracks', '$state', '$scope', 'tracks', '$state',
($scope, tracks, $state) -> ($scope, tracks, $state) ->
$scope.trackIdToEdit = 1
$scope.clickOverride = (id) ->
$scope.trackIdToEdit = id
] ]

View file

@ -21,10 +21,14 @@ module.exports = angular.module('ponyfm').directive 'pfmPagedTracksList', () ->
scope: scope:
type: '@' type: '@'
class: '@class' class: '@class'
clickOverride: '&'
controller: [ controller: [
'$scope', 'tracks', '$state', '$location' '$scope', 'tracks', '$state', '$location'
($scope, tracks, $state, $location) -> ($scope, tracks, $state, $location) ->
$scope.newClickOverride = (id) ->
$scope.clickOverride({id: id})
typeEnum = switch typeEnum = switch
when $scope.type == 'normal' then tracks.FetchType.NORMAL when $scope.type == 'normal' then tracks.FetchType.NORMAL
when $scope.type == 'all' then tracks.FetchType.ALL when $scope.type == 'all' then tracks.FetchType.ALL
@ -71,7 +75,6 @@ module.exports = angular.module('ponyfm').directive 'pfmPagedTracksList', () ->
$scope.hidePageSelector = () -> $scope.hidePageSelector = () ->
$scope.pageSelectorShown = false $scope.pageSelectorShown = false
$scope.jumpToPage = (inputPageNumber) -> $scope.jumpToPage = (inputPageNumber) ->
$scope.gotoPage(inputPageNumber) $scope.gotoPage(inputPageNumber)
] ]

View file

@ -33,6 +33,10 @@ module.exports = angular.module('ponyfm').directive 'pfmTrackEditor', () ->
$scope.isAdmin = auth.data.isAdmin $scope.isAdmin = auth.data.isAdmin
albumsDb = {} albumsDb = {}
$scope.$watch 'trackId', (newValue, oldValue) ->
console.log newValue, oldValue
$scope.updateUI()
$scope.selectAlbum = (album) -> $scope.selectAlbum = (album) ->
$scope.selectedAlbum = album $scope.selectedAlbum = album
$scope.track.album_id = if album then album.id else null $scope.track.album_id = if album then album.id else null
@ -126,6 +130,7 @@ module.exports = angular.module('ponyfm').directive 'pfmTrackEditor', () ->
# ======================================== # ========================================
# The part where everything gets loaded! # The part where everything gets loaded!
# ======================================== # ========================================
$scope.updateUI = () ->
tracks.getEdit($scope.trackId, true) tracks.getEdit($scope.trackId, true)
.then (track)-> .then (track)->
images.refresh(true, track.user_id) images.refresh(true, track.user_id)
@ -181,4 +186,6 @@ module.exports = angular.module('ponyfm').directive 'pfmTrackEditor', () ->
$scope.$on '$locationChangeStart', (e) -> $scope.$on '$locationChangeStart', (e) ->
return if !$scope.isDirty return if !$scope.isDirty
e.preventDefault() if !confirm('Are you sure you want to leave this page without saving your changes?') e.preventDefault() if !confirm('Are you sure you want to leave this page without saving your changes?')
$scope.updateUI()
] ]

View file

@ -22,6 +22,7 @@ module.exports = angular.module('ponyfm').directive 'pfmTracksList', () ->
playlist: '=' playlist: '='
tracks: '=tracks' tracks: '=tracks'
class: '@class' class: '@class'
clickOverride: '&'
controller: [ controller: [
'$modal', '$scope', 'favourites', 'player', 'playlists', 'auth' '$modal', '$scope', 'favourites', 'player', 'playlists', 'auth'

View file

@ -302,3 +302,19 @@ header {
.playlist-form .modal-footer { .playlist-form .modal-footer {
margin-top: 20px; margin-top: 20px;
} }
.classifier {
.classifier-track-list {
float: left;
width: 50%;
ul {
width: 100% !important;
}
}
.classifier-track-editor {
float: right;
width: 50%;
}
}