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 @@
"startup.staffpromo.action": "CHECK ES AUS",
"startup.tabs.frontpage": "Startseite",
"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.input.placeholder": "Suche nach Songs, Tags & Profilen...",
......
src/i18n/en.json
View file @ e2dd6898
......@@ -24,7 +24,9 @@
"startup.tabs.frontpage": "Frontpage",
"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",
"search.header": "Search",
......
src/modules/module.api.js
View file @ e2dd6898
......@@ -36,98 +36,74 @@ class SSAPI {
}
async ping() {
let apiPath = this.apiBase + "ping";
return this.getOpenData("ping", false);
}
async getStreamStatus() {
let apiPath = this.apiBase + "streamStatus";
return this.getOpenData("streamStatus", false);
}
async getLatestVersion() {
let apiPath = this.apiBase + "latestVersion/" + process.platform;
return this.getOpenData("latestVersion/" + process.platform, false);
}
async getPromos() {
let apiPath = this.apiBase + "promos";
return this.getOpenData("promos", false);
}
async getNewSongs(_offset) {
let apiPath = this.apiBase + "songs/new/" + _offset;
return this.getOpenData("songs/new/" + _offset, false);
}
async getHotSongs(_offset) {
let apiPath = this.apiBase + "songs/hot/" + _offset;
async getUpdatedSongs(_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) {
let apiPath = this.apiBase + "song/" + _songId;
async getHotThisMonthSongs(_offset) {
return this.getOpenData("songs/hotThisMonth/" + _offset, false);
}
async getSongDetail(_songId) {
return this.getOpenData("song/" + _songId, true);
}
async getSongDetailReviews(_songId) {
let apiPath = this.apiBase + "song/" + _songId + "/reviews";
return this.getOpenData("song/" + _songId + "/reviews", true);
}
async getSongDetailSpinPlays(_songId) {
let apiPath = this.apiBase + "song/" + _songId + "/spinplays";
return this.getOpenData("song/" + _songId + "/spinplays", true);
}
async getUserDetail(_userId) {
let apiPath = this.apiBase + "user/" + _userId;
return this.getOpenData("user/" + _userId, true);
}
async getUserCharts(_userId) {
let apiPath = this.apiBase + "user/" + _userId + "/charts";
return this.getOpenData("user/" + _userId + "/charts", true);
}
async getUserPlaylists(_userId) {
let apiPath = this.apiBase + "user/" + _userId + "/playlists";
return this.getOpenData("user/" + _userId + "/playlists", true);
}
async getUserReviews(_userId) {
let apiPath = this.apiBase + "user/" + _userId + "/reviews";
return this.getOpenData("user/" + _userId + "/reviews", true);
}
async getUserSpinPlays(_userId) {
let apiPath = this.apiBase + "user/" + _userId + "/spinplays";
return this.getOpenData("user/" + _userId + "/spinplays", true);
}
async getPlaylistDetail(_playlistId) {
let apiPath = this.apiBase + "playlist/" + _playlistId;
return this.getOpenData("playlist/" + _playlistId, true);
}
async searchAll() {
let apiPath = this.apiBase + "searchAll";
return this.getOpenData("searchAll", true);
}
......
src/router/index.js
View file @ e2dd6898
......@@ -6,7 +6,9 @@ import ViewLogin from '../views/Login.vue';
import ViewStartup from '../views/Startup.vue';
import ViewStartupFrontpage from '../views/StartupFrontpage.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 ViewLibrary from '../views/Library.vue';
import ViewSongDetail from '../views/SongDetail.vue';
......@@ -43,14 +45,24 @@ const routes = [{
component: ViewStartupFrontpage
},
{
path: '/new',
path: '/new/:offset?',
name: 'StartupNew',
component: ViewStartupNewSongs
},
{
path: '/hot',
name: 'StartupHot',
component: ViewStartupHotSongs
path: '/updated/:offset?',
name: 'StartupUpdated',
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 @@
<div class="tabs">
<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="/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>
</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>
<SongRow>
<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 ' + (hotSongs.length < 9 ? 'button-disabled' : '')" v-on:click="hotNext()">{{ $t('songrow.navigation.next' )}} <i class="mdi mdi-chevron-right"></i></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 ' + (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="isHotSongsLoading"
v-if="isLoading"
v-for="n in 10"
v-bind:key="n" />
<SongItem
v-if="!isHotSongsLoading"
v-for="song in hotSongs"
v-if="!isLoading"
v-for="song in songs"
v-bind:key="song.id"
v-bind="song" />
</template>
......@@ -25,21 +25,16 @@
import SongItemPlaceholder from '@/components/Song/SongItemPlaceholder.vue';
export default {
name: 'Frontpage',
name: 'StartupHotThisWeek',
data: function() {
return {
isHotSongsLoading: true,
hotSongsOffset: 0,
hotSongs: []
isLoading: true,
offset: 0,
songs: []
}
},
mounted: function() {
let ssapi = new SSAPI();
ssapi.getHotSongs(this.$data.hotSongsOffset).then((data) => {
this.$data.isHotSongsLoading = false;
this.$data.hotSongs = data;
});
this.loadSongs();
},
components: {
SongRow,
......@@ -47,25 +42,29 @@
SongItemPlaceholder
},
methods: {
hotNext: function() {
if(this.$data.hotSongs.length > 9) {
this.$data.hotSongsOffset++;
this.updateHot();
newNext: function() {
if(this.$data.songs.length > 9) {
this.$router.push({ name: 'StartupHotThisWeek', params: { offset: (this.$data.offset + 1) } });
this.loadSongs();
}
},
hotPrevious: function() {
if(this.$data.hotSongsOffset > 0) {
this.$data.hotSongsOffset--;
this.updateHot();
newPrevious: function() {
if(this.$data.offset > 0) {
this.$router.push({ name: 'StartupHotThisWeek', params: { offset: (this.$data.offset - 1) } });
this.loadSongs();
}
},
updateHot: function() {
loadSongs: function() {
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) => {
this.$data.isHotSongsLoading = false;
this.$data.hotSongs = data;
ssapi.getHotThisWeekSongs(this.$data.offset).then((data) => {
this.$data.isLoading = false;
this.$data.songs = data;
});
}
}
......
src/views/StartupNewSongs.vue
View file @ e2dd6898
<template>
<SongRow>
<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 ' + (newSongs.length < 9 ? 'button-disabled' : '')" v-on:click="newNext()">{{ $t('songrow.navigation.next' )}} <i class="mdi mdi-chevron-right"></i></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 ' + (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="isNewSongsLoading"
v-if="isLoading"
v-for="n in 10"
v-bind:key="n" />
<SongItem
v-if="!isNewSongsLoading"
v-for="song in newSongs"
v-if="!isLoading"
v-for="song in songs"
v-bind:key="song.id"
v-bind="song" />
</template>
......@@ -25,21 +25,16 @@
import SongItemPlaceholder from '@/components/Song/SongItemPlaceholder.vue';
export default {
name: 'Frontpage',
name: 'StartupNew',
data: function() {
return {
isNewSongsLoading: true,
newSongsOffset: 0,
newSongs: []
isLoading: true,
offset: 0,
songs: []
}
},
mounted: function() {
let ssapi = new SSAPI();
ssapi.getNewSongs(this.$data.newSongsOffset).then((data) => {
this.$data.isNewSongsLoading = false;
this.$data.newSongs = data;
});
this.loadSongs();
},
components: {
SongRow,
......@@ -48,24 +43,28 @@
},
methods: {
newNext: function() {
if(this.$data.newSongs.length > 9) {
this.$data.newSongsOffset++;
this.updateNew();
if(this.$data.songs.length > 9) {
this.$router.push({ name: 'StartupNew', params: { offset: (this.$data.offset + 1) } });
this.loadSongs();
}
},
newPrevious: function() {
if(this.$data.newSongsOffset > 0) {
this.$data.newSongsOffset--;
this.updateNew();
if(this.$data.offset > 0) {
this.$router.push({ name: 'StartupNew', params: { offset: (this.$data.offset - 1) } });
this.loadSongs();
}
},
updateNew: function() {
loadSongs: function() {
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) => {
this.$data.isNewSongsLoading = false;
this.$data.newSongs = data;
ssapi.getNewSongs(this.$data.offset).then((data) => {
this.$data.isLoading = false;
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