Skip to content

D
Desktop Client
Commit e2dd6898 authored by Laura Heimann's avatar Laura Heimann
Browse files
Options

refactored startup tabs and added updated and this month

parent 7f426c75
Show whitespace changes
Inline Side-by-side
Showing with 295 additions and 68 deletions
src/i18n/de.json
View file @ e2dd6898
...@@ -25,7 +25,9 @@ ...@@ -25,7 +25,9 @@
"startup.staffpromo.action": "CHECK ES AUS", "startup.staffpromo.action": "CHECK ES AUS",
"startup.tabs.frontpage": "Startseite", "startup.tabs.frontpage": "Startseite",
"startup.tabs.new": "Neu", "startup.tabs.new": "Neu",
"startup.tabs.hot": "Heiß", "startup.tabs.updated": "Geupdated",
"startup.tabs.hotThisWeek": "Heiß (Diese Woche)",
"startup.tabs.hotThisMonth": "Heiß (Diesen Monat)",
"search.header": "Suche", "search.header": "Suche",
"search.input.placeholder": "Suche nach Songs, Tags & Profilen...", "search.input.placeholder": "Suche nach Songs, Tags & Profilen...",
......
src/i18n/en.json
View file @ e2dd6898
...@@ -24,7 +24,9 @@ ...@@ -24,7 +24,9 @@
"startup.tabs.frontpage": "Frontpage", "startup.tabs.frontpage": "Frontpage",
"startup.tabs.new": "New", "startup.tabs.new": "New",
"startup.tabs.hot": "Hot", "startup.tabs.updated": "Updated",
"startup.tabs.hotThisWeek": "Hot (This Week)",
"startup.tabs.hotThisMonth": "Hot (This Month)",
"startup.staffpromo.action": "CHECK IT OUT", "startup.staffpromo.action": "CHECK IT OUT",
"search.header": "Search", "search.header": "Search",
......
src/modules/module.api.js
View file @ e2dd6898
...@@ -36,98 +36,74 @@ class SSAPI { ...@@ -36,98 +36,74 @@ class SSAPI {
} }
async ping() { async ping() {
let apiPath = this.apiBase + "ping";
return this.getOpenData("ping", false); return this.getOpenData("ping", false);
} }
async getStreamStatus() { async getStreamStatus() {
let apiPath = this.apiBase + "streamStatus";
return this.getOpenData("streamStatus", false); return this.getOpenData("streamStatus", false);
} }
async getLatestVersion() { async getLatestVersion() {
let apiPath = this.apiBase + "latestVersion/" + process.platform;
return this.getOpenData("latestVersion/" + process.platform, false); return this.getOpenData("latestVersion/" + process.platform, false);
} }
async getPromos() { async getPromos() {
let apiPath = this.apiBase + "promos";
return this.getOpenData("promos", false); return this.getOpenData("promos", false);
} }
async getNewSongs(_offset) { async getNewSongs(_offset) {
let apiPath = this.apiBase + "songs/new/" + _offset;
return this.getOpenData("songs/new/" + _offset, false); return this.getOpenData("songs/new/" + _offset, false);
} }
async getHotSongs(_offset) { async getUpdatedSongs(_offset) {
let apiPath = this.apiBase + "songs/hot/" + _offset; return this.getOpenData("songs/updated/" + _offset, false);
}
return this.getOpenData("songs/hot/" + _offset, false); async getHotThisWeekSongs(_offset) {
return this.getOpenData("songs/hotThisWeek/" + _offset, false);
} }
async getSongDetail(_songId) { async getHotThisMonthSongs(_offset) {
let apiPath = this.apiBase + "song/" + _songId; return this.getOpenData("songs/hotThisMonth/" + _offset, false);
}
async getSongDetail(_songId) {
return this.getOpenData("song/" + _songId, true); return this.getOpenData("song/" + _songId, true);
} }
async getSongDetailReviews(_songId) { async getSongDetailReviews(_songId) {
let apiPath = this.apiBase + "song/" + _songId + "/reviews";
return this.getOpenData("song/" + _songId + "/reviews", true); return this.getOpenData("song/" + _songId + "/reviews", true);
} }
async getSongDetailSpinPlays(_songId) { async getSongDetailSpinPlays(_songId) {
let apiPath = this.apiBase + "song/" + _songId + "/spinplays";
return this.getOpenData("song/" + _songId + "/spinplays", true); return this.getOpenData("song/" + _songId + "/spinplays", true);
} }
async getUserDetail(_userId) { async getUserDetail(_userId) {
let apiPath = this.apiBase + "user/" + _userId;
return this.getOpenData("user/" + _userId, true); return this.getOpenData("user/" + _userId, true);
} }
async getUserCharts(_userId) { async getUserCharts(_userId) {
let apiPath = this.apiBase + "user/" + _userId + "/charts";
return this.getOpenData("user/" + _userId + "/charts", true); return this.getOpenData("user/" + _userId + "/charts", true);
} }
async getUserPlaylists(_userId) { async getUserPlaylists(_userId) {
let apiPath = this.apiBase + "user/" + _userId + "/playlists";
return this.getOpenData("user/" + _userId + "/playlists", true); return this.getOpenData("user/" + _userId + "/playlists", true);
} }
async getUserReviews(_userId) { async getUserReviews(_userId) {
let apiPath = this.apiBase + "user/" + _userId + "/reviews";
return this.getOpenData("user/" + _userId + "/reviews", true); return this.getOpenData("user/" + _userId + "/reviews", true);
} }
async getUserSpinPlays(_userId) { async getUserSpinPlays(_userId) {
let apiPath = this.apiBase + "user/" + _userId + "/spinplays";
return this.getOpenData("user/" + _userId + "/spinplays", true); return this.getOpenData("user/" + _userId + "/spinplays", true);
} }
async getPlaylistDetail(_playlistId) { async getPlaylistDetail(_playlistId) {
let apiPath = this.apiBase + "playlist/" + _playlistId;
return this.getOpenData("playlist/" + _playlistId, true); return this.getOpenData("playlist/" + _playlistId, true);
} }
async searchAll() { async searchAll() {
let apiPath = this.apiBase + "searchAll";
return this.getOpenData("searchAll", true); return this.getOpenData("searchAll", true);
} }
......
src/router/index.js
View file @ e2dd6898
...@@ -6,7 +6,9 @@ import ViewLogin from '../views/Login.vue'; ...@@ -6,7 +6,9 @@ import ViewLogin from '../views/Login.vue';
import ViewStartup from '../views/Startup.vue'; import ViewStartup from '../views/Startup.vue';
import ViewStartupFrontpage from '../views/StartupFrontpage.vue'; import ViewStartupFrontpage from '../views/StartupFrontpage.vue';
import ViewStartupNewSongs from '../views/StartupNewSongs.vue'; import ViewStartupNewSongs from '../views/StartupNewSongs.vue';
import ViewStartupHotSongs from '../views/StartupHotSongs.vue'; import ViewStartupUpdatedSongs from '../views/StartupUpdatedSongs.vue';
import ViewStartupHotThisWeekSongs from '../views/StartupHotThisWeekSongs.vue';
import ViewStartupHotThisMonthSongs from '../views/StartupHotThisMonthSongs.vue';
import ViewSearch from '../views/Search.vue'; import ViewSearch from '../views/Search.vue';
import ViewLibrary from '../views/Library.vue'; import ViewLibrary from '../views/Library.vue';
import ViewSongDetail from '../views/SongDetail.vue'; import ViewSongDetail from '../views/SongDetail.vue';
...@@ -43,14 +45,24 @@ const routes = [{ ...@@ -43,14 +45,24 @@ const routes = [{
component: ViewStartupFrontpage component: ViewStartupFrontpage
}, },
{ {
path: '/new', path: '/new/:offset?',
name: 'StartupNew', name: 'StartupNew',
component: ViewStartupNewSongs component: ViewStartupNewSongs
}, },
{ {
path: '/hot', path: '/updated/:offset?',
name: 'StartupHot', name: 'StartupUpdated',
component: ViewStartupHotSongs component: ViewStartupUpdatedSongs
},
{
path: '/hotThisWeek/:offset?',
name: 'StartupHotThisWeek',
component: ViewStartupHotThisWeekSongs
},
{
path: '/hotThisMonth/:offset?',
name: 'StartupHotThisMonth',
component: ViewStartupHotThisMonthSongs
} }
] ]
}, { }, {
......
src/views/Startup.vue
View file @ e2dd6898
...@@ -4,7 +4,9 @@ ...@@ -4,7 +4,9 @@
<div class="tabs"> <div class="tabs">
<router-link to="/frontpage" class="tab"><span>{{ $t('startup.tabs.frontpage') }}</span></router-link> <router-link to="/frontpage" class="tab"><span>{{ $t('startup.tabs.frontpage') }}</span></router-link>
<router-link to="/new" class="tab"><span>{{ $t('startup.tabs.new') }}</span></router-link> <router-link to="/new" class="tab"><span>{{ $t('startup.tabs.new') }}</span></router-link>
<router-link to="/hot" class="tab"><span>{{ $t('startup.tabs.hot') }}</span></router-link> <router-link to="/updated" class="tab"><span>{{ $t('startup.tabs.updated') }}</span></router-link>
<router-link to="/hotThisWeek" class="tab"><span>{{ $t('startup.tabs.hotThisWeek') }}</span></router-link>
<router-link to="/hotThisMonth" class="tab"><span>{{ $t('startup.tabs.hotThisMonth') }}</span></router-link>
</div> </div>
</header> </header>
......
src/views/StartupHotThisMonthSongs.vue 0 → 100644
View file @ e2dd6898
<template>
<SongRow>
<template v-slot:controls>
<div :class="'button ' + (offset == 0 ? 'button-disabled' : '')" v-on:click="newPrevious()"><i class="mdi mdi-chevron-left"></i> {{ $t('songrow.navigation.previous' )}}</div>
<div :class="'button ' + (songs.length < 9 ? 'button-disabled' : '')" v-on:click="newNext()">{{ $t('songrow.navigation.next' )}} <i class="mdi mdi-chevron-right"></i></div>
</template>
<template v-slot:song-list>
<SongItemPlaceholder
v-if="isLoading"
v-for="n in 10"
v-bind:key="n" />
<SongItem
v-if="!isLoading"
v-for="song in songs"
v-bind:key="song.id"
v-bind="song" />
</template>
</SongRow>
</template>
<script>
import SSAPI from '@/modules/module.api.js';
import SongRow from '@/components/Song/SongRow.vue';
import SongItem from '@/components/Song/SongItem.vue';
import SongItemPlaceholder from '@/components/Song/SongItemPlaceholder.vue';
export default {
name: 'StartupHotThisMonth',
data: function() {
return {
isLoading: true,
offset: 0,
songs: []
}
},
mounted: function() {
this.loadSongs();
},
components: {
SongRow,
SongItem,
SongItemPlaceholder
},
methods: {
newNext: function() {
if(this.$data.songs.length > 9) {
this.$router.push({ name: 'StartupHotThisMonth', params: { offset: (this.$data.offset + 1) } });
this.loadSongs();
}
},
newPrevious: function() {
if(this.$data.offset > 0) {
this.$router.push({ name: 'StartupHotThisMonth', params: { offset: (this.$data.offset - 1) } });
this.loadSongs();
}
},
loadSongs: function() {
let ssapi = new SSAPI();
this.$data.isLoading = true;
if(this.$route.params.offset != undefined) {
this.$data.offset = this.$route.params.offset;
}
ssapi.getHotThisMonthSongs(this.$data.offset).then((data) => {
this.$data.isLoading = false;
this.$data.songs = data;
});
}
}
}
</script>
<style scoped lang="less">
.song-row {
padding: 50px;
}
</style>
\ No newline at end of file
src/views/StartupHotSongs.vue → src/views/StartupHotThisWeekSongs.vue
View file @ e2dd6898
<template> <template>
<SongRow> <SongRow>
<template v-slot:controls> <template v-slot:controls>
<div :class="'button ' + (hotSongsOffset == 0 ? 'button-disabled' : '')" v-on:click="hotPrevious()"><i class="mdi mdi-chevron-left"></i> {{ $t('songrow.navigation.previous' )}}</div> <div :class="'button ' + (offset == 0 ? 'button-disabled' : '')" v-on:click="newPrevious()"><i class="mdi mdi-chevron-left"></i> {{ $t('songrow.navigation.previous' )}}</div>
<div :class="'button ' + (hotSongs.length < 9 ? 'button-disabled' : '')" v-on:click="hotNext()">{{ $t('songrow.navigation.next' )}} <i class="mdi mdi-chevron-right"></i></div> <div :class="'button ' + (songs.length < 9 ? 'button-disabled' : '')" v-on:click="newNext()">{{ $t('songrow.navigation.next' )}} <i class="mdi mdi-chevron-right"></i></div>
</template> </template>
<template v-slot:song-list> <template v-slot:song-list>
<SongItemPlaceholder <SongItemPlaceholder
v-if="isHotSongsLoading" v-if="isLoading"
v-for="n in 10" v-for="n in 10"
v-bind:key="n" /> v-bind:key="n" />
<SongItem <SongItem
v-if="!isHotSongsLoading" v-if="!isLoading"
v-for="song in hotSongs" v-for="song in songs"
v-bind:key="song.id" v-bind:key="song.id"
v-bind="song" /> v-bind="song" />
</template> </template>
...@@ -25,21 +25,16 @@ ...@@ -25,21 +25,16 @@
import SongItemPlaceholder from '@/components/Song/SongItemPlaceholder.vue'; import SongItemPlaceholder from '@/components/Song/SongItemPlaceholder.vue';
export default { export default {
name: 'Frontpage', name: 'StartupHotThisWeek',
data: function() { data: function() {
return { return {
isHotSongsLoading: true, isLoading: true,
hotSongsOffset: 0, offset: 0,
hotSongs: [] songs: []
} }
}, },
mounted: function() { mounted: function() {
let ssapi = new SSAPI(); this.loadSongs();
ssapi.getHotSongs(this.$data.hotSongsOffset).then((data) => {
this.$data.isHotSongsLoading = false;
this.$data.hotSongs = data;
});
}, },
components: { components: {
SongRow, SongRow,
...@@ -47,25 +42,29 @@ ...@@ -47,25 +42,29 @@
SongItemPlaceholder SongItemPlaceholder
}, },
methods: { methods: {
hotNext: function() { newNext: function() {
if(this.$data.hotSongs.length > 9) { if(this.$data.songs.length > 9) {
this.$data.hotSongsOffset++; this.$router.push({ name: 'StartupHotThisWeek', params: { offset: (this.$data.offset + 1) } });
this.updateHot(); this.loadSongs();
} }
}, },
hotPrevious: function() { newPrevious: function() {
if(this.$data.hotSongsOffset > 0) { if(this.$data.offset > 0) {
this.$data.hotSongsOffset--; this.$router.push({ name: 'StartupHotThisWeek', params: { offset: (this.$data.offset - 1) } });
this.updateHot(); this.loadSongs();
} }
}, },
updateHot: function() { loadSongs: function() {
let ssapi = new SSAPI(); let ssapi = new SSAPI();
this.$data.isHotSongsLoading = true; this.$data.isLoading = true;
if(this.$route.params.offset != undefined) {
this.$data.offset = this.$route.params.offset;
}
ssapi.getHotSongs(this.$data.hotSongsOffset).then((data) => { ssapi.getHotThisWeekSongs(this.$data.offset).then((data) => {
this.$data.isHotSongsLoading = false; this.$data.isLoading = false;
this.$data.hotSongs = data; this.$data.songs = data;
}); });
} }
} }
......
src/views/StartupNewSongs.vue
View file @ e2dd6898
<template> <template>
<SongRow> <SongRow>
<template v-slot:controls> <template v-slot:controls>
<div :class="'button ' + (newSongsOffset == 0 ? 'button-disabled' : '')" v-on:click="newPrevious()"><i class="mdi mdi-chevron-left"></i> {{ $t('songrow.navigation.previous' )}}</div> <div :class="'button ' + (offset == 0 ? 'button-disabled' : '')" v-on:click="newPrevious()"><i class="mdi mdi-chevron-left"></i> {{ $t('songrow.navigation.previous' )}}</div>
<div :class="'button ' + (newSongs.length < 9 ? 'button-disabled' : '')" v-on:click="newNext()">{{ $t('songrow.navigation.next' )}} <i class="mdi mdi-chevron-right"></i></div> <div :class="'button ' + (songs.length < 9 ? 'button-disabled' : '')" v-on:click="newNext()">{{ $t('songrow.navigation.next' )}} <i class="mdi mdi-chevron-right"></i></div>
</template> </template>
<template v-slot:song-list> <template v-slot:song-list>
<SongItemPlaceholder <SongItemPlaceholder
v-if="isNewSongsLoading" v-if="isLoading"
v-for="n in 10" v-for="n in 10"
v-bind:key="n" /> v-bind:key="n" />
<SongItem <SongItem
v-if="!isNewSongsLoading" v-if="!isLoading"
v-for="song in newSongs" v-for="song in songs"
v-bind:key="song.id" v-bind:key="song.id"
v-bind="song" /> v-bind="song" />
</template> </template>
...@@ -25,21 +25,16 @@ ...@@ -25,21 +25,16 @@
import SongItemPlaceholder from '@/components/Song/SongItemPlaceholder.vue'; import SongItemPlaceholder from '@/components/Song/SongItemPlaceholder.vue';
export default { export default {
name: 'Frontpage', name: 'StartupNew',
data: function() { data: function() {
return { return {
isNewSongsLoading: true, isLoading: true,
newSongsOffset: 0, offset: 0,
newSongs: [] songs: []
} }
}, },
mounted: function() { mounted: function() {
let ssapi = new SSAPI(); this.loadSongs();
ssapi.getNewSongs(this.$data.newSongsOffset).then((data) => {
this.$data.isNewSongsLoading = false;
this.$data.newSongs = data;
});
}, },
components: { components: {
SongRow, SongRow,
...@@ -48,24 +43,28 @@ ...@@ -48,24 +43,28 @@
}, },
methods: { methods: {
newNext: function() { newNext: function() {
if(this.$data.newSongs.length > 9) { if(this.$data.songs.length > 9) {
this.$data.newSongsOffset++; this.$router.push({ name: 'StartupNew', params: { offset: (this.$data.offset + 1) } });
this.updateNew(); this.loadSongs();
} }
}, },
newPrevious: function() { newPrevious: function() {
if(this.$data.newSongsOffset > 0) { if(this.$data.offset > 0) {
this.$data.newSongsOffset--; this.$router.push({ name: 'StartupNew', params: { offset: (this.$data.offset - 1) } });
this.updateNew(); this.loadSongs();
} }
}, },
updateNew: function() { loadSongs: function() {
let ssapi = new SSAPI(); let ssapi = new SSAPI();
this.$data.isNewSongsLoading = true; this.$data.isLoading = true;
if(this.$route.params.offset != undefined) {
this.$data.offset = this.$route.params.offset;
}
ssapi.getNewSongs(this.$data.newSongsOffset).then((data) => { ssapi.getNewSongs(this.$data.offset).then((data) => {
this.$data.isNewSongsLoading = false; this.$data.isLoading = false;
this.$data.newSongs = data; this.$data.songs = data;
}); });
} }
} }
......
src/views/StartupUpdatedSongs.vue 0 → 100644
View file @ e2dd6898
<template>
<SongRow>
<template v-slot:controls>
<div :class="'button ' + (offset == 0 ? 'button-disabled' : '')" v-on:click="newPrevious()"><i class="mdi mdi-chevron-left"></i> {{ $t('songrow.navigation.previous' )}}</div>
<div :class="'button ' + (songs.length < 9 ? 'button-disabled' : '')" v-on:click="newNext()">{{ $t('songrow.navigation.next' )}} <i class="mdi mdi-chevron-right"></i></div>
</template>
<template v-slot:song-list>
<SongItemPlaceholder
v-if="isLoading"
v-for="n in 10"
v-bind:key="n" />
<SongItem
v-if="!isLoading"
v-for="song in songs"
v-bind:key="song.id"
v-bind="song" />
</template>
</SongRow>
</template>
<script>
import SSAPI from '@/modules/module.api.js';
import SongRow from '@/components/Song/SongRow.vue';
import SongItem from '@/components/Song/SongItem.vue';
import SongItemPlaceholder from '@/components/Song/SongItemPlaceholder.vue';
export default {
name: 'StartupUpdated',
data: function() {
return {
isLoading: true,
offset: 0,
songs: []
}
},
mounted: function() {
this.loadSongs();
},
components: {
SongRow,
SongItem,
SongItemPlaceholder
},
methods: {
newNext: function() {
if(this.$data.songs.length > 9) {
this.$router.push({ name: 'StartupUpdated', params: { offset: (this.$data.offset + 1) } });
this.loadSongs();
}
},
newPrevious: function() {
if(this.$data.offset > 0) {
this.$router.push({ name: 'StartupUpdated', params: { offset: (this.$data.offset - 1) } });
this.loadSongs();
}
},
loadSongs: function() {
let ssapi = new SSAPI();
this.$data.isLoading = true;
if(this.$route.params.offset != undefined) {
this.$data.offset = this.$route.params.offset;
}
ssapi.getUpdatedSongs(this.$data.offset).then((data) => {
this.$data.isLoading = false;
this.$data.songs = data;
});
}
}
}
</script>
<style scoped lang="less">
.song-row {
padding: 50px;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment