diff --git a/client/.env.development b/client/.env.development index 3829422..fd0530c 100644 --- a/client/.env.development +++ b/client/.env.development @@ -7,7 +7,7 @@ ROBOTS_USER_AGENT=* ROBOTS_ALLOW= ROBOTS_DISALLOW=["/"] SERVICE_SELF_URL=//it-radio.flexidev.ru -SERVICE_URL=//82.97.242.49 +SERVICE_URL=//it-radio.flexidev.ru SERVICE_URL_AUDIO=//82.97.242.49:10084 SERVICE_PROTOCOL=http SERVICE_PORT=8000 diff --git a/client/.env.production b/client/.env.production index ab04de6..fb042b5 100644 --- a/client/.env.production +++ b/client/.env.production @@ -6,11 +6,12 @@ CACHE_STORAGE=tempStorage ROBOTS_USER_AGENT=* ROBOTS_ALLOW= ROBOTS_DISALLOW=["/"] -SERVICE_SELF_URL=//tender.alidi.ru -SERVICE_URL=//backend.tender.alidi.ru +SERVICE_SELF_URL=//itradio.team +SERVICE_URL=//itradio.team +SERVICE_URL_AUDIO=//82.97.242.49:10084 SERVICE_PROTOCOL=https SERVICE_PORT=8000 -SERVICE_API= +SERVICE_API=/api SERVICE_ON_LOCAL=false SENTRY_DSN=https://e6dd82de128240cd8858fc6d47a0fff9@glitchtip.flexidev.ru/6 METRIKA_ID= diff --git a/client/package.json b/client/package.json index 0215ee3..8e5d008 100644 --- a/client/package.json +++ b/client/package.json @@ -11,6 +11,7 @@ "serve": "npx cross-env NODE_ENV=development quasar dev", "serve:ssr": "quasar dev -m ssr", "build": "npx cross-env NODE_ENV=development quasar build", + "build:prod": "npx cross-env NODE_ENV=production quasar build", "build:ssr": "quasar build -m ssr", "build:dev": "quasar build", "build:ssr:dev": "npx cross-env NODE_ENV=development quasar build -m ssr" diff --git a/client/src/assets/css/module/fiald.scss b/client/src/assets/css/module/fiald.scss index f59892a..3770ce7 100644 --- a/client/src/assets/css/module/fiald.scss +++ b/client/src/assets/css/module/fiald.scss @@ -43,6 +43,9 @@ border: 1px solid var(--color-primary); } } + &.m--hidden{ + display: none; + } } &__checkbox { &-label{ diff --git a/client/src/assets/css/module/playlist.scss b/client/src/assets/css/module/playlist.scss index 2f1b127..ec6cf5e 100644 --- a/client/src/assets/css/module/playlist.scss +++ b/client/src/assets/css/module/playlist.scss @@ -1,6 +1,40 @@ .playlist { position: relative; z-index: 2; + &__header{ + display: flex; + align-items: center; + gap: calc(var(--space-between-block) / 2); + margin-bottom: var(--space-between-block); + } + &__title{ + font-size: 32px; + margin: 0; + padding: 0; + &.m--margin{ + margin-bottom: 1rem; + } + } + &__back{ + width: 30px; + height: 30px; + background: svg-load('./assets/img/icon/arrow-right.svg', stroke=$color-white) no-repeat 100%; + cursor: url("./assets/img/icon/cursor.svg"), auto; + transition: all .3s ease; + &:hover{ + background: svg-load('./assets/img/icon/arrow-right.svg', stroke=$color-primary) no-repeat 100%; + } + } + &__edit{ + width: 30px; + height: 30px; + background: svg-load('./assets/img/icon/ellipsis.svg', fill=$color-white) no-repeat 100%; + cursor: url("./assets/img/icon/cursor.svg"), auto; + transition: all .3s ease; + &:hover{ + background: svg-load('./assets/img/icon/ellipsis.svg', fill=$color-primary) no-repeat 100%; + } + } &-roster { display: flex; flex-wrap: wrap; @@ -31,6 +65,27 @@ background-image: var(--linear-gradient); margin-bottom: 1rem; } + &__upload{ + cursor: url("./assets/img/icon/cursor.svg"), auto; + border: none; + padding: 0; + background-clip: text; + color: transparent; + background-image: var(--linear-gradient-highlight); + margin: 0 0 var(--space-between-block); + transition: all .3s ease; + display: flex; + gap: 10px; + &:before{ + content: ''; + width: 20px; + height: 20px; + background: svg-load('./assets/img/icon/paper-clip.svg', fill=$color-primary) no-repeat 100%; + } + &:hover{ + color: var(--color-white); + } + } } &-item { diff --git a/client/src/components/player.vue b/client/src/components/player.vue index 54c5c2b..df4d088 100644 --- a/client/src/components/player.vue +++ b/client/src/components/player.vue @@ -25,9 +25,11 @@ - -
-
+
-
{{playlist.title}}
+
{{playlist.name}}
+
...
@@ -15,6 +16,9 @@ export default { } }, methods:{ + editPlaylist(){ + this.$emit('editPlaylist', this.playlist) + }, selectPlaylist(){ this.$emit('selectPlaylist', this.playlist) } diff --git a/client/src/components/playlist-roster.vue b/client/src/components/playlist-roster.vue index 75ffe9a..7044c95 100644 --- a/client/src/components/playlist-roster.vue +++ b/client/src/components/playlist-roster.vue @@ -5,6 +5,7 @@ :key="`playlist_${item.id}`" :playlist="item" @selectPlaylist="selectPlaylist" + @editPlaylist="editPlaylist" />
@@ -31,6 +32,9 @@ export default { }, selectPlaylist(params) { this.$router.push({name: 'playlist', params: {id: params.id}}) + }, + editPlaylist(params) { + this.$router.push({name: 'playlist-edit', params: {id: params.id}}) } } } diff --git a/client/src/components/song-item.vue b/client/src/components/song-item.vue index fa451b0..b882a8e 100644 --- a/client/src/components/song-item.vue +++ b/client/src/components/song-item.vue @@ -21,7 +21,7 @@
- +
diff --git a/client/src/services/app.js b/client/src/services/app.js index 8c763c7..83270c1 100644 --- a/client/src/services/app.js +++ b/client/src/services/app.js @@ -132,6 +132,21 @@ export default class extends REST { throw new RESTError(error, 'Ошибка при получении плейлистов'); }); } + static removeSongToPlaylist(params) { + return this._post(`radio/playlists/delete_song_with_playlist`, {}, params).then((data) => { + return data; + }).catch((error) => { + throw new RESTError(error, 'Ошибка при удаления треков из плейлиста'); + }); + } + static updatePlaylist(params) { + return this._post(`radio/playlists/update_playlist`, {}, params).then((data) => { + return data; + }).catch((error) => { + throw new RESTError(error, 'Ошибка при удаления треков из плейлиста'); + }); + } + static createPlaylists() { return this._post(`radio/playlists/create_playlist`, {}, {}).then((data) => { return data; diff --git a/client/src/views/playlist-edit.vue b/client/src/views/playlist-edit.vue index 1c37bcb..6f62261 100644 --- a/client/src/views/playlist-edit.vue +++ b/client/src/views/playlist-edit.vue @@ -8,7 +8,18 @@ { name: 'Добавление плейлиста', route: { name: 'playlist-create' } }: { name: 'Редактирование плейлиста', route: { name: 'playlist-edit' } }, ]"/> -

{{ $route.name==='playlist-create'?'Новый плейлист':playlist.name }}

+

{{ $route.name === 'playlist-create' ? 'Новый плейлист' : playlist.name }}

+ +
+ +
- +
Каталог музыки пуст!
@@ -36,7 +52,13 @@ Загрузка данных
- +
Добавьте музыку в плейлист!
@@ -64,44 +86,93 @@ export default { this.getAllSong(); this.getPlaylist(); }, - methods:{ - getPlaylist(){ + computed: { + songsFiltered() { + return this.songs.filter(song => { + const alreadyAdd = this.playlist.song.find(item => item.azura_id === song.azura_id) + return !alreadyAdd + }) + } + }, + methods: { + getPlaylist() { this.showLoaderPlaylist = true; - app.getPlaylist(this.$route.params.id).then(res=>{ + app.getPlaylist(this.$route.params.id).then(res => { this.showLoaderPlaylist = false; this.playlist = res; - }).catch(err=>{ + }).catch(err => { this.showLoaderPlaylist = false; console.error(err) }) }, - getAllSong(){ + getAllSong() { this.showLoaderSongs = true; - app.getAllSong().then(res=>{ + app.getAllSong().then(res => { this.showLoaderSongs = false; this.songs = res; - }).catch(err=>{ + }).catch(err => { this.showLoaderSongs = false; console.error(err) }) }, - addPlaylist(song){ + addPlaylist(song) { console.log(song) + const params = { + playlist_id: this.$route.params.id, + ...song + } + this.showLoaderSongs = true; + this.showLoaderPlaylist = true; + app.addSongToPlaylist(params).then(() => { + this.showLoaderPlaylist = false; + this.showLoaderSongs = false; + this.getPlaylist(); + }).catch(err => { + this.showLoaderPlaylist = false; + this.showLoaderSongs = false; + console.error(err) + }) + }, + removePlaylist(song) { const params = { playlist_id: this.$route.params.id, azura_id: song.azura_id } + this.showLoaderSongs = true; this.showLoaderPlaylist = true; - app.addSongToPlaylist(params).then(()=>{ + app.removeSongToPlaylist(params).then(() => { this.showLoaderPlaylist = false; + this.showLoaderSongs = false; this.getPlaylist(); - }).catch(err=>{ + }).catch(err => { this.showLoaderPlaylist = false; + this.showLoaderSongs = false; console.error(err) }) }, - removePlaylist(){ - + handlerUploadCover(){ + let logoInput = this.$refs.coverInput; + let click = new MouseEvent('click'); + + logoInput.onchange = this.uploadCover; + logoInput.dispatchEvent(click); + }, + uploadCover(event){ + let file = event.target.files ? event.target.files[0] : null + if (file) { + const data = new FormData(); + data.append('playlist_art', file); + data.append('playlist_id', this.$route.params.id); + app.updatePlaylist(data).then((res) => { + this.showLoaderPlaylist = false; + this.showLoaderSongs = false; + this.playlist = res; + }).catch(err => { + this.showLoaderPlaylist = false; + this.showLoaderSongs = false; + console.error(err) + }) + } } } } diff --git a/client/src/views/playlist.vue b/client/src/views/playlist.vue index f80ec46..b672fe1 100644 --- a/client/src/views/playlist.vue +++ b/client/src/views/playlist.vue @@ -1,11 +1,55 @@ diff --git a/client/src/views/profile.vue b/client/src/views/profile.vue index 2e3a1f8..017e07f 100644 --- a/client/src/views/profile.vue +++ b/client/src/views/profile.vue @@ -1,6 +1,6 @@