mirror of
https://github.com/Poniverse/Pony.fm.git
synced 2024-11-25 14:37:59 +01:00
Merge pull request #60 from Poniverse/feature/refactor-track-editor
Refactored the track editor for #2
This commit is contained in:
Peter Deltchev
commit
4a18e4f132
7 changed files with 300 additions and 277 deletions
|
|
@ -1,120 +1 @@
|
|||
<form novalidate ng-submit="updateTrack(edit)">
|
||||
<ul class="toolbar">
|
||||
<li>
|
||||
<button type="submit" class="btn" ng-class="{disabled: (data.selectedTrack.is_published && !isDirty) || isSaving, 'btn-primary': !data.selectedTrack.is_published || isDirty}">
|
||||
<span ng-show="edit.is_published">
|
||||
Save Changes
|
||||
</span>
|
||||
<span ng-hide="edit.is_published">
|
||||
Publish Track
|
||||
</span>
|
||||
<i ng-show="isSaving" class="icon-cog icon-spin icon-large"></i>
|
||||
</button>
|
||||
</li>
|
||||
<li class="delete"><a ng-class="{disabled: isSaving}" class="btn btn-danger" href="#" ng-click="deleteTrack(data.selectedTrack)" pfm-eat-click>Delete Track</a></li>
|
||||
</ul>
|
||||
<div class="stretch-to-bottom">
|
||||
<div class="form-row" ng-class="{'has-error': errors.title != null}">
|
||||
<label for="title" class="strong">Title:</label>
|
||||
<input ng-disabled="isSaving" ng-change="touchModel()" placeholder="Track Title" type="text" id="title" ng-model="edit.title" />
|
||||
<div class="error">{{errors.title}}</div>
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<div class="span6 form-row" ng-class="{'has-error': errors.description != null}">
|
||||
<label for="description" class="strong">Description:</label>
|
||||
<textarea ng-disabled="isSaving" ng-change="touchModel()" placeholder="Description (optional)" id="description" ng-model="edit.description"></textarea>
|
||||
<div class="error">{{errors.description}}</div>
|
||||
</div>
|
||||
<div class="span6 form-row" ng-class="{'has-error': errors.lyrics != null}">
|
||||
<label for="is_vocal" class="strong"><input ng-disabled="isSaving" ng-change="touchModel(); updateIsVocal()" id="is_vocal" type="checkbox" ng-model="edit.is_vocal" /> Is Vocal</label>
|
||||
<textarea ng-disabled="isSaving" ng-change="touchModel()" ng-show="edit.is_vocal" ng-animate="'fade'" placeholder="Lyrics (required)" id="lyrics" ng-model="edit.lyrics"></textarea>
|
||||
<div class="error">{{errors.lyrics}}</div>
|
||||
<div class="error">{{errors.lyrics}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<div class="form-row span6" ng-class="{'has-error': errors.genre_id != null}">
|
||||
<label for="genre" class="strong">Genre:</label>
|
||||
<select ng-disabled="isSaving" id="genre" ng-change="touchModel()" ng-model="edit.genre_id" ng-options="genre.id as genre.name for genre in taxonomies.genres">
|
||||
<option value="">Please select a genre...</option>
|
||||
</select>
|
||||
<div class="error">{{errors.genre_id}}</div>
|
||||
</div>
|
||||
<div class="form-row span6" ng-class="{'has-error': errors.track_type_id != null}">
|
||||
<label for="track_type" class="strong">This track is...</label>
|
||||
<select ng-disabled="isSaving" id="track_type" ng-change="touchModel()" ng-model="edit.track_type_id" ng-options="type.id as type.editor_title for type in taxonomies.trackTypes">
|
||||
<option value="">Please select a type...</option>
|
||||
</select>
|
||||
<div class="error">{{errors.track_type_id}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<div class="form-row album span6" ng-class="{'has-error': errors.album_id != null}">
|
||||
<a pfm-popup="album-selector" pfm-popup-close-on-click href="#" class="btn btn-small">
|
||||
Album:
|
||||
<strong ng-show="selectedAlbum">{{selectedAlbum.title}}</strong>
|
||||
<strong ng-hide="selectedAlbum">None</strong>
|
||||
</a>
|
||||
<div id="album-selector" class="pfm-popup">
|
||||
<ul>
|
||||
<li ng-class="{selected: selectedAlbum == null}">
|
||||
<a pfm-eat-click href="#" ng-click="selectAlbum(null);">None</a>
|
||||
</li>
|
||||
<li ng-repeat="album in albums" ng-class="{selected: selectedAlbum.id == album.id}">
|
||||
<a pfm-eat-click href="#" ng-click="selectAlbum(album);">{{album.title}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="error">{{errors.album_id}}</div>
|
||||
</div>
|
||||
<div class="form-row show-songs span6" ng-show="edit.track_type_id == 2" ng-class="{'has-error': errors.show_song_ids != null}">
|
||||
<a pfm-popup="song-selector" pfm-popup-close-on-click href="#" class="btn btn-small">Show Songs: <strong>{{selectedSongsTitle}}</strong></a>
|
||||
<div id="song-selector" class="pfm-popup">
|
||||
<ul>
|
||||
<li ng-repeat="song in taxonomies.showSongs" ng-class="{selected: selectedSongs[song.id]}">
|
||||
<a pfm-eat-click href="#" ng-click="toggleSong(song); $event.stopPropagation();">{{song.title}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="error">{{errors.show_song_ids}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<div class="form-row span6" ng-class="{'has-error': errors.cover != null}">
|
||||
<label class="strong">Track Cover: </label>
|
||||
<pfm-image-upload set-image="setCover" image="edit.cover" />
|
||||
</div>
|
||||
<div class="form-row span6" ng-class="{'has-error': errors.released_at != null}">
|
||||
<label for="released_at" class="strong">Release Date:</label>
|
||||
<input ng-disabled="isSaving" type="text" id="released_at" ui-date ng-model="edit.released_at" ng-change="touchModel()" ui-date-format="yy-mm-dd" />
|
||||
<div class="error">{{errors.released_at}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<div class="span4 form-row">
|
||||
<label for="is_explicit"><input ng-disabled="isSaving" ng-change="touchModel()" id="is_explicit" type="checkbox" ng-model="edit.is_explicit" /> Contains Explicit Content</label>
|
||||
</div>
|
||||
<div class="span4 form-row">
|
||||
<label for="is_downloadable"><input ng-disabled="isSaving" ng-change="touchModel()" id="is_downloadable" type="checkbox" ng-model="edit.is_downloadable" /> Is Downloadable</label>
|
||||
</div>
|
||||
<div class="span4 form-row">
|
||||
<label for="is_listed"><input ng-disabled="isSaving" ng-change="touchModel()" id="is_listed" type="checkbox" ng-model="edit.is_listed" /> Is Listed</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label class="strong">Choose a License:</label>
|
||||
<ul class="license-grid">
|
||||
<li ng-repeat="license in taxonomies.licenses" ng-class="{selected: edit.license_id == license.id}">
|
||||
<div ng-click="edit.license_id = license.id; touchModel()">
|
||||
<strong>{{license.title}}</strong>
|
||||
<p>{{license.description}}</p>
|
||||
<a href="#" pfm-eat-click class="btn" ng-class="{'btn-primary': edit.license_id == license.id, 'disabled': isSaving}">
|
||||
<span ng-hide="edit.license_id == license.id">Select</span>
|
||||
<span ng-show="edit.license_id == license.id">Selected</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<pfm-track-editor track-id="trackId"></pfm-track-editor>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="two-pane-view" ng-class="{open: data.selectedTrack != null, closed: data.selectedTrack == null}">
|
||||
<div class="list">
|
||||
<ul class="account-tracks-listing stretch-to-bottom">
|
||||
<li ng-repeat="track in tracks" ng-class="{selected: track.id == data.selectedTrack.id, 'is-not-published': !track.is_published}">
|
||||
<li ng-repeat="track in tracks track by track.id" ng-class="{selected: track.id == data.selectedTrack.id, 'is-not-published': !track.is_published}">
|
||||
<a href="/account/tracks/edit/{{track.id}}" ng-click="selectTrack(track)">
|
||||
<img class="image" ng-src="{{track.cover_url}}" />
|
||||
<span class="title">{{track.title}}</span>
|
||||
|
|
|
|||
120
public/templates/directives/track-editor.html
Normal file
120
public/templates/directives/track-editor.html
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
<form novalidate ng-submit="updateTrack(track)">
|
||||
<ul class="toolbar">
|
||||
<li>
|
||||
<button type="submit" class="btn" ng-class="{disabled: (track.is_published && !isDirty) || isSaving, 'btn-primary': !track.is_published || isDirty}">
|
||||
<span ng-show="track.is_published">
|
||||
Save Changes
|
||||
</span>
|
||||
<span ng-hide="track.is_published">
|
||||
Publish Track
|
||||
</span>
|
||||
<i ng-show="isSaving" class="icon-cog icon-spin icon-large"></i>
|
||||
</button>
|
||||
</li>
|
||||
<li class="delete"><a ng-class="{disabled: isSaving}" class="btn btn-danger" href="#" ng-click="deleteTrack()" pfm-eat-click>Delete Track</a></li>
|
||||
</ul>
|
||||
<div class="stretch-to-bottom">
|
||||
<div class="form-row" ng-class="{'has-error': errors.title != null}">
|
||||
<label for="title" class="strong">Title:</label>
|
||||
<input ng-disabled="isSaving" ng-change="touchModel()" placeholder="Track Title" type="text" id="title" ng-model="track.title" />
|
||||
<div class="error">{{errors.title}}</div>
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<div class="span6 form-row" ng-class="{'has-error': errors.description != null}">
|
||||
<label for="description" class="strong">Description:</label>
|
||||
<textarea ng-disabled="isSaving" ng-change="touchModel()" placeholder="Description (optional)" id="description" ng-model="track.description"></textarea>
|
||||
<div class="error">{{errors.description}}</div>
|
||||
</div>
|
||||
<div class="span6 form-row" ng-class="{'has-error': errors.lyrics != null}">
|
||||
<label for="is_vocal" class="strong"><input ng-disabled="isSaving" ng-change="touchModel(); updateIsVocal()" id="is_vocal" type="checkbox" ng-model="track.is_vocal" /> Is Vocal</label>
|
||||
<textarea ng-disabled="isSaving" ng-change="touchModel()" ng-show="track.is_vocal" ng-animate="'fade'" placeholder="Lyrics (required)" id="lyrics" ng-model="track.lyrics"></textarea>
|
||||
<div class="error">{{errors.lyrics}}</div>
|
||||
<div class="error">{{errors.lyrics}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<div class="form-row span6" ng-class="{'has-error': errors.genre_id != null}">
|
||||
<label for="genre" class="strong">Genre:</label>
|
||||
<select ng-disabled="isSaving" id="genre" ng-change="touchModel()" ng-model="track.genre_id" ng-options="genre.id as genre.name for genre in taxonomies.genres">
|
||||
<option value="">Please select a genre...</option>
|
||||
</select>
|
||||
<div class="error">{{errors.genre_id}}</div>
|
||||
</div>
|
||||
<div class="form-row span6" ng-class="{'has-error': errors.track_type_id != null}">
|
||||
<label for="track_type" class="strong">This track is...</label>
|
||||
<select ng-disabled="isSaving" id="track_type" ng-change="touchModel()" ng-model="track.track_type_id" ng-options="type.id as type.editor_title for type in taxonomies.trackTypes">
|
||||
<option value="">Please select a type...</option>
|
||||
</select>
|
||||
<div class="error">{{errors.track_type_id}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<div class="form-row album span6" ng-class="{'has-error': errors.album_id != null}">
|
||||
<a pfm-popup="album-selector" pfm-popup-close-on-click href="#" class="btn btn-small">
|
||||
Album:
|
||||
<strong ng-show="selectedAlbum">{{selectedAlbum.title}}</strong>
|
||||
<strong ng-hide="selectedAlbum">None</strong>
|
||||
</a>
|
||||
<div id="album-selector" class="pfm-popup">
|
||||
<ul>
|
||||
<li ng-class="{selected: selectedAlbum == null}">
|
||||
<a pfm-eat-click href="#" ng-click="selectAlbum(null);">None</a>
|
||||
</li>
|
||||
<li ng-repeat="album in albums" ng-class="{selected: selectedAlbum.id == album.id}">
|
||||
<a pfm-eat-click href="#" ng-click="selectAlbum(album);">{{album.title}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="error">{{errors.album_id}}</div>
|
||||
</div>
|
||||
<div class="form-row show-songs span6" ng-show="track.track_type_id == 2" ng-class="{'has-error': errors.show_song_ids != null}">
|
||||
<a pfm-popup="song-selector" pfm-popup-close-on-click href="#" class="btn btn-small">Show Songs: <strong>{{selectedSongsTitle}}</strong></a>
|
||||
<div id="song-selector" class="pfm-popup">
|
||||
<ul>
|
||||
<li ng-repeat="song in taxonomies.showSongs" ng-class="{selected: selectedSongs[song.id]}">
|
||||
<a pfm-eat-click href="#" ng-click="toggleSong(song); $event.stopPropagation();">{{song.title}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="error">{{errors.show_song_ids}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<div class="form-row span6" ng-class="{'has-error': errors.cover != null}">
|
||||
<label class="strong">Track Cover: </label>
|
||||
<pfm-image-upload set-image="setCover" image="track.cover" />
|
||||
</div>
|
||||
<div class="form-row span6" ng-class="{'has-error': errors.released_at != null}">
|
||||
<label for="released_at" class="strong">Release Date:</label>
|
||||
<input ng-disabled="isSaving" type="text" id="released_at" ui-date ng-model="track.released_at" ng-change="touchModel()" ui-date-format="yy-mm-dd" />
|
||||
<div class="error">{{errors.released_at}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<div class="span4 form-row">
|
||||
<label for="is_explicit"><input ng-disabled="isSaving" ng-change="touchModel()" id="is_explicit" type="checkbox" ng-model="track.is_explicit" /> Contains Explicit Content</label>
|
||||
</div>
|
||||
<div class="span4 form-row">
|
||||
<label for="is_downloadable"><input ng-disabled="isSaving" ng-change="touchModel()" id="is_downloadable" type="checkbox" ng-model="track.is_downloadable" /> Is Downloadable</label>
|
||||
</div>
|
||||
<div class="span4 form-row">
|
||||
<label for="is_listed"><input ng-disabled="isSaving" ng-change="touchModel()" id="is_listed" type="checkbox" ng-model="track.is_listed" /> Is Listed</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label class="strong">Choose a License:</label>
|
||||
<ul class="license-grid">
|
||||
<li ng-repeat="license in taxonomies.licenses" ng-class="{selected: track.license_id == license.id}">
|
||||
<div ng-click="track.license_id = license.id; touchModel()">
|
||||
<strong>{{license.title}}</strong>
|
||||
<p>{{license.description}}</p>
|
||||
<a href="#" pfm-eat-click class="btn" ng-class="{'btn-primary': track.license_id == license.id, 'disabled': isSaving}">
|
||||
<span ng-hide="track.license_id == license.id">Select</span>
|
||||
<span ng-show="track.license_id == license.id">Selected</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -14,149 +14,9 @@
|
|||
# You should have received a copy of the GNU Affero General Public License
|
||||
# along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
window.pfm.preloaders['account-track'] = [
|
||||
'account-tracks', 'account-albums', 'taxonomies', '$state'
|
||||
(tracks, albums, taxonomies, state) ->
|
||||
$.when.all [albums.refresh(), taxonomies.refresh(), tracks.getEdit(state.params.track_id, true)]
|
||||
]
|
||||
|
||||
angular.module('ponyfm').controller "account-track", [
|
||||
'$scope', '$state', 'taxonomies', '$dialog', 'account-albums', 'account-tracks', 'images'
|
||||
($scope, $state, taxonomies, $dialog, albums, tracks, images) ->
|
||||
$scope.isDirty = false
|
||||
$scope.isSaving = false
|
||||
$scope.taxonomies = taxonomies
|
||||
$scope.selectedSongsTitle = 'None'
|
||||
$scope.selectedSongs = {}
|
||||
$scope.albums = []
|
||||
$scope.selectedAlbum = null
|
||||
|
||||
albumsDb = {}
|
||||
albums.refresh().done (albums) ->
|
||||
$scope.albums.legnth = 0
|
||||
albumsDb = {}
|
||||
for album in albums
|
||||
albumsDb[album.id] = album
|
||||
$scope.albums.push album
|
||||
|
||||
$scope.selectAlbum = (album) ->
|
||||
$scope.selectedAlbum = album
|
||||
$scope.edit.album_id = if album then album.id else null
|
||||
$scope.isDirty = true
|
||||
|
||||
$scope.setCover = (image, type) ->
|
||||
delete $scope.edit.cover_id
|
||||
delete $scope.edit.cover
|
||||
|
||||
if image == null
|
||||
$scope.edit.remove_cover = true
|
||||
else if type == 'file'
|
||||
$scope.edit.cover = image
|
||||
else if type == 'gallery'
|
||||
$scope.edit.cover_id = image.id
|
||||
|
||||
$scope.isDirty = true
|
||||
|
||||
updateSongDisplay = () ->
|
||||
if _.size $scope.selectedSongs
|
||||
$scope.selectedSongsTitle = (_.map _.values($scope.selectedSongs), (s) -> s.title).join(', ')
|
||||
else
|
||||
$scope.selectedSongsTitle = 'None'
|
||||
|
||||
$scope.toggleSong = (song) ->
|
||||
$scope.isDirty = true
|
||||
if $scope.selectedSongs[song.id]
|
||||
delete $scope.selectedSongs[song.id]
|
||||
else
|
||||
$scope.selectedSongs[song.id] = song
|
||||
|
||||
updateSongDisplay()
|
||||
|
||||
$scope.updateIsVocal = () ->
|
||||
delete $scope.errors.lyrics if !$scope.edit.is_vocal
|
||||
|
||||
$scope.updateTrack = () ->
|
||||
xhr = new XMLHttpRequest()
|
||||
xhr.onload = -> $scope.$apply ->
|
||||
$scope.isSaving = false
|
||||
if xhr.status != 200
|
||||
errors =
|
||||
if xhr.getResponseHeader('content-type') == 'application/json'
|
||||
$.parseJSON(xhr.responseText).errors
|
||||
else
|
||||
['There was an unknown error!']
|
||||
|
||||
$scope.errors = {}
|
||||
_.each errors, (value, key) -> $scope.errors[key] = value.join ', '
|
||||
return
|
||||
|
||||
track = $.parseJSON(xhr.responseText)
|
||||
|
||||
trackDbItem = $scope.data.selectedTrack
|
||||
trackDbItem.title = $scope.edit.title
|
||||
trackDbItem.is_explicit = $scope.edit.is_explicit
|
||||
trackDbItem.is_vocal = $scope.edit.is_vocal
|
||||
trackDbItem.genre_id = $scope.edit.genre_id
|
||||
trackDbItem.is_published = true
|
||||
trackDbItem.cover_url = track.real_cover_url
|
||||
$scope.isDirty = false
|
||||
$scope.errors = {}
|
||||
images.refresh true
|
||||
|
||||
formData = new FormData();
|
||||
_.each $scope.edit, (value, name) ->
|
||||
if name == 'cover'
|
||||
return if value == null
|
||||
if typeof(value) == 'object'
|
||||
formData.append name, value, value.name
|
||||
else if value != null
|
||||
formData.append name, value
|
||||
|
||||
if parseInt($scope.edit.track_type_id) == 2
|
||||
formData.append 'show_song_ids', _.map(_.values($scope.selectedSongs), (s) -> s.id).join()
|
||||
|
||||
xhr.open 'POST', '/api/web/tracks/edit/' + $scope.edit.id, true
|
||||
xhr.setRequestHeader 'X-XSRF-TOKEN', $.cookie('XSRF-TOKEN')
|
||||
$scope.isSaving = true
|
||||
xhr.send formData
|
||||
|
||||
tracks.getEdit($state.params.track_id).done (track) ->
|
||||
$scope.edit =
|
||||
id: track.id
|
||||
title: track.title
|
||||
description: track.description
|
||||
lyrics: track.lyrics
|
||||
is_explicit: track.is_explicit
|
||||
is_downloadable: track.is_downloadable
|
||||
is_vocal: track.is_vocal
|
||||
license_id: track.license_id
|
||||
genre_id: track.genre_id
|
||||
track_type_id: track.track_type_id
|
||||
released_at: if track.released_at then track.released_at.date else ''
|
||||
remove_cover: false
|
||||
cover: track.cover_url
|
||||
album_id: track.album_id
|
||||
is_published: track.is_published
|
||||
is_listed: track.is_listed
|
||||
|
||||
$scope.selectedAlbum = if track.album_id then albumsDb[track.album_id] else null
|
||||
$scope.selectedSongs = {}
|
||||
$scope.selectedSongs[song.id] = song for song in track.show_songs
|
||||
updateSongDisplay()
|
||||
|
||||
$scope.touchModel = -> $scope.isDirty = true
|
||||
|
||||
$scope.deleteTrack = (track) ->
|
||||
$dialog.messageBox('Delete ' + track.title, 'Are you sure you want to delete "' + track.title + '"?', [
|
||||
{result: 'ok', label: 'Yes', cssClass: 'btn-danger'}, {result: 'cancel', label: 'No', cssClass: 'btn-primary'}
|
||||
]).open().then (res) ->
|
||||
return if res == 'cancel'
|
||||
$.post('/api/web/tracks/delete/' + track.id)
|
||||
.then -> $scope.$apply ->
|
||||
$scope.$emit 'track-deleted'
|
||||
$state.transitionTo 'account.tracks'
|
||||
|
||||
$scope.$on '$locationChangeStart', (e) ->
|
||||
return if !$scope.isDirty
|
||||
e.preventDefault() if !confirm('Are you sure you want to leave this page without saving your changes?')
|
||||
'$scope', '$state'
|
||||
($scope, $state) ->
|
||||
# All the fun stuff happens in the pfmTrackEditor directive.
|
||||
$scope.trackId = $state.params.track_id
|
||||
]
|
||||
|
|
|
|||
|
|
@ -54,7 +54,12 @@ angular.module('ponyfm').controller "account-tracks", [
|
|||
else
|
||||
$scope.selectTrack null
|
||||
|
||||
$scope.$on 'track-updated', (track) ->
|
||||
tracks.clearCache()
|
||||
$scope.refreshList()
|
||||
|
||||
$scope.$on 'track-deleted', () ->
|
||||
$state.transitionTo 'account.tracks'
|
||||
tracks.clearCache()
|
||||
$scope.refreshList()
|
||||
]
|
||||
|
|
|
|||
|
|
@ -14,18 +14,8 @@
|
|||
# You should have received a copy of the GNU Affero General Public License
|
||||
# along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
window.pfm.preloaders['track-edit'] = [
|
||||
'tracks', '$state', 'playlists'
|
||||
(tracks, $state, playlists) ->
|
||||
$.when.all [tracks.fetch $state.params.id, playlists.refreshOwned(true)]
|
||||
]
|
||||
|
||||
angular.module('ponyfm').controller "track-edit", [
|
||||
'$scope', 'tracks', '$state', 'playlists', 'auth', 'favourites', '$dialog'
|
||||
($scope, tracks, $state, playlists, auth, favourites, $dialog) ->
|
||||
track = null
|
||||
|
||||
tracks.fetch($state.params.id).done (trackResponse) ->
|
||||
$scope.track = trackResponse.track
|
||||
track = trackResponse.track
|
||||
'$scope', '$state'
|
||||
($scope, $state) ->
|
||||
]
|
||||
|
|
|
|||
167
resources/assets/scripts/app/directives/track-editor.coffee
Normal file
167
resources/assets/scripts/app/directives/track-editor.coffee
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
# Pony.fm - A community for pony fan music.
|
||||
# Copyright (C) 2016 Peter Deltchev
|
||||
#
|
||||
# This program is free software: you can redistribute it and/or modify
|
||||
# it under the terms of the GNU Affero General Public License as published by
|
||||
# the Free Software Foundation, either version 3 of the License, or
|
||||
# (at your option) any later version.
|
||||
#
|
||||
# This program is distributed in the hope that it will be useful,
|
||||
# but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
# GNU Affero General Public License for more details.
|
||||
#
|
||||
# You should have received a copy of the GNU Affero General Public License
|
||||
# along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
angular.module('ponyfm').directive 'pfmTrackEditor', () ->
|
||||
restrict: 'E'
|
||||
templateUrl: '/templates/directives/track-editor.html'
|
||||
scope:
|
||||
trackId: '=trackId'
|
||||
|
||||
controller: [
|
||||
'$scope', '$dialog', 'auth', 'account-tracks', 'account-albums', 'taxonomies', 'images'
|
||||
($scope, $dialog, auth, tracks, albums, taxonomies, images) ->
|
||||
$scope.isDirty = false
|
||||
$scope.isSaving = false
|
||||
$scope.taxonomies = taxonomies
|
||||
$scope.selectedSongsTitle = 'None'
|
||||
$scope.selectedSongs = {}
|
||||
$scope.albums = []
|
||||
$scope.selectedAlbum = null
|
||||
albumsDb = {}
|
||||
|
||||
$scope.selectAlbum = (album) ->
|
||||
$scope.selectedAlbum = album
|
||||
$scope.track.album_id = if album then album.id else null
|
||||
$scope.isDirty = true
|
||||
|
||||
$scope.setCover = (image, type) ->
|
||||
delete $scope.track.cover_id
|
||||
delete $scope.track.cover
|
||||
|
||||
if image == null
|
||||
$scope.track.remove_cover = true
|
||||
else if type == 'file'
|
||||
$scope.track.cover = image
|
||||
else if type == 'gallery'
|
||||
$scope.track.cover_id = image.id
|
||||
|
||||
$scope.isDirty = true
|
||||
|
||||
updateSongDisplay = () ->
|
||||
if _.size $scope.selectedSongs
|
||||
$scope.selectedSongsTitle = (_.map _.values($scope.selectedSongs), (s) -> s.title).join(', ')
|
||||
else
|
||||
$scope.selectedSongsTitle = 'None'
|
||||
|
||||
|
||||
$scope.toggleSong = (song) ->
|
||||
$scope.isDirty = true
|
||||
if $scope.selectedSongs[song.id]
|
||||
delete $scope.selectedSongs[song.id]
|
||||
else
|
||||
$scope.selectedSongs[song.id] = song
|
||||
|
||||
updateSongDisplay()
|
||||
|
||||
|
||||
$scope.updateIsVocal = () ->
|
||||
delete $scope.errors.lyrics if !$scope.track.is_vocal
|
||||
|
||||
$scope.updateTrack = () ->
|
||||
xhr = new XMLHttpRequest()
|
||||
xhr.onload = -> $scope.$apply ->
|
||||
$scope.isSaving = false
|
||||
if xhr.status != 200
|
||||
errors =
|
||||
if xhr.getResponseHeader('content-type') == 'application/json'
|
||||
$.parseJSON(xhr.responseText).errors
|
||||
else
|
||||
['There was an unknown error!']
|
||||
|
||||
$scope.errors = {}
|
||||
_.each errors, (value, key) -> $scope.errors[key] = value.join ', '
|
||||
return
|
||||
|
||||
track = $.parseJSON(xhr.responseText)
|
||||
$scope.$emit('track-updated', track)
|
||||
|
||||
$scope.track.is_published = true
|
||||
$scope.isDirty = false
|
||||
$scope.errors = {}
|
||||
images.refresh true
|
||||
|
||||
formData = new FormData();
|
||||
_.each $scope.track, (value, name) ->
|
||||
if name == 'cover'
|
||||
return if value == null
|
||||
if typeof(value) == 'object'
|
||||
formData.append name, value, value.name
|
||||
else if value != null
|
||||
formData.append name, value
|
||||
|
||||
if parseInt($scope.track.track_type_id) == 2
|
||||
formData.append 'show_song_ids', _.map(_.values($scope.selectedSongs), (s) -> s.id).join()
|
||||
|
||||
xhr.open 'POST', '/api/web/tracks/edit/' + $scope.track.id, true
|
||||
xhr.setRequestHeader 'X-XSRF-TOKEN', $.cookie('XSRF-TOKEN')
|
||||
$scope.isSaving = true
|
||||
xhr.send formData
|
||||
|
||||
$scope.deleteTrack = () ->
|
||||
$dialog.messageBox('Delete ' + $scope.track.title, 'Are you sure you want to delete "' + $scope.track.title + '"?', [
|
||||
{result: 'ok', label: 'Yes', cssClass: 'btn-danger'},
|
||||
{result: 'cancel', label: 'No', cssClass: 'btn-primary'}
|
||||
]).open().then (res) ->
|
||||
return if res == 'cancel'
|
||||
$.post('/api/web/tracks/delete/' + $scope.track.id)
|
||||
.then -> $scope.$apply ->
|
||||
$scope.$emit 'track-deleted'
|
||||
|
||||
# ========================================
|
||||
# The part where everything gets loaded!
|
||||
# ========================================
|
||||
$.when(
|
||||
albums.refresh(),
|
||||
taxonomies.refresh(),
|
||||
tracks.getEdit($scope.trackId)
|
||||
).done (albums, taxonomies, track)->
|
||||
# Update album data
|
||||
$scope.albums.length = 0
|
||||
albumsDb = {}
|
||||
for album in albums
|
||||
albumsDb[album.id] = album
|
||||
$scope.albums.push album
|
||||
|
||||
# Update track data
|
||||
$scope.track =
|
||||
id: track.id
|
||||
title: track.title
|
||||
description: track.description
|
||||
lyrics: track.lyrics
|
||||
is_explicit: track.is_explicit
|
||||
is_downloadable: track.is_downloadable
|
||||
is_vocal: track.is_vocal
|
||||
license_id: track.license_id
|
||||
genre_id: track.genre_id
|
||||
track_type_id: track.track_type_id
|
||||
released_at: if track.released_at then track.released_at.date else ''
|
||||
remove_cover: false
|
||||
cover: track.cover_url
|
||||
album_id: track.album_id
|
||||
is_published: track.is_published
|
||||
is_listed: track.is_listed
|
||||
|
||||
$scope.selectedAlbum = if track.album_id then albumsDb[track.album_id] else null
|
||||
$scope.selectedSongs = {}
|
||||
$scope.selectedSongs[song.id] = song for song in track.show_songs
|
||||
updateSongDisplay()
|
||||
|
||||
$scope.touchModel = -> $scope.isDirty = true
|
||||
|
||||
$scope.$on '$locationChangeStart', (e) ->
|
||||
return if !$scope.isDirty
|
||||
e.preventDefault() if !confirm('Are you sure you want to leave this page without saving your changes?')
|
||||
]
|
||||
Loading…
Reference in a new issue