diff --git a/src/components/Navigation/PlayerControl.vue b/src/components/Navigation/PlayerControl.vue
index 1dbf0e5..829b09d 100644
--- a/src/components/Navigation/PlayerControl.vue
+++ b/src/components/Navigation/PlayerControl.vue
@@ -25,6 +25,9 @@
+
+
+
@@ -89,6 +92,14 @@ div.control-button {
font-size: 150%;
}
+div.amplitude-shuffle-on {
+ color: rgb(175, 118, 12);
+}
+
+div.amplitude-shuffle-on:hover {
+ color: rgb(85, 57, 5);
+}
+
div.control-button-paused {
animation: blinker 3s linear infinite;
}
diff --git a/src/components/Playlist/PlaylistEdit.vue b/src/components/Playlist/PlaylistEdit.vue
index 587382a..a870a4f 100644
--- a/src/components/Playlist/PlaylistEdit.vue
+++ b/src/components/Playlist/PlaylistEdit.vue
@@ -9,6 +9,13 @@
+
+
+
@@ -31,7 +38,9 @@ export default defineComponent({
data() {
return {
playlist: new Playlist(),
- msg: ''
+ msg: '',
+ playlistTypes: null as Array<{value: string, label: string}>|null,
+ selectedPlaylistType: 1 as number
}
},
components: {
@@ -51,21 +60,36 @@ export default defineComponent({
let playlistId = +this.$route.params.playlistId;
if (playlistId !== 0) {
EntityLoader.loadPlaylist(playlistId).then((playlist: PlaylistInterface) => this.playlist = playlist);
+ } else {
+ HttpRequest.get(
+ 'playlist_types'
+ ).then((response: AxiosResponse): void => {
+ this.playlistTypes = response.data.items.map((typeId: number): object => {
+ return {
+ 'value': typeId,
+ 'label': 'playlist_type.' + typeId
+ };
+ });
+ });
}
},
methods: {
async save(): Promise {
- if (this.playlist.getId() === 0) {
+ if (this.isNewPlaylist()) {
this.create();
} else {
this.persist();
}
},
+ isNewPlaylist(): boolean {
+ return this.playlist.getId() === 0
+ },
async create(): Promise {
HttpRequest.post(
'playlist',
{
name: this.playlist.getName(),
+ typeId: this.selectedPlaylistType,
}
).then((response: AxiosResponse): void => {
let data = response.data;
@@ -110,7 +134,9 @@ div.creationBox form div {
width: 100%;
}
-input[type=text], input[type=password] {
+input[type=text],
+input[type=password],
+select {
width: 80%;
}
diff --git a/src/locales/de.json b/src/locales/de.json
index cc6261e..cfd7d05 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -143,7 +143,8 @@
"previous": "Letzter",
"next": "Nächster",
"play": "Abspielen",
- "pause": "Pausieren"
+ "pause": "Pausieren",
+ "shuffle": "Zufallswiedergabe"
},
"songs": {
"title": "Titel",
@@ -185,5 +186,9 @@
"country_iso2": {
"en": "Englisch",
"de": "Deutsch"
+ },
+ "playlist_type": {
+ "1": "Statische Playlist",
+ "2": "Favoriten"
}
}
\ No newline at end of file
diff --git a/src/locales/en.json b/src/locales/en.json
index 72d577b..46cbc8e 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -143,7 +143,8 @@
"previous": "Previous",
"next": "Next",
"play": "Play",
- "pause": "Pause"
+ "pause": "Pause",
+ "shuffle": "Shuffle"
},
"songs": {
"title": "Songs",
@@ -185,5 +186,9 @@
"country_iso2": {
"en": "English",
"de": "German"
+ },
+ "playlist_type": {
+ "1": "Static playlist",
+ "2": "Favorites"
}
}
diff --git a/src/main.ts b/src/main.ts
index 121172e..23280f0 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -18,6 +18,7 @@ import { faTools } from '@fortawesome/free-solid-svg-icons'
import { faPlus } from '@fortawesome/free-solid-svg-icons';
import { faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
import { faCircleCheck } from '@fortawesome/free-solid-svg-icons';
+import { faShuffle } from '@fortawesome/free-solid-svg-icons';
import enLocaleMessages from './locales/en.json'
import deLocaleMessages from './locales/de.json'
import { createI18n } from 'vue-i18n';
@@ -46,6 +47,7 @@ library.add(faTools);
library.add(faPlus);
library.add(faTriangleExclamation);
library.add(faCircleCheck);
+library.add(faShuffle);
const emitter = mitt();