adb/spot2gether-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Debug

Browse Source
This commit is contained in:
adb-sh 2022-11-03 22:40:30 +01:00
parent 1650955045
commit e5f9f825cb
7 changed files with 36 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/App.vue
View File

@ -23,9 +23,16 @@ import DarkModeToggle from "@/components/DarkmodeToggle.vue";
>
login
</router-link>
<router-link
v-if="$api.isAuthorized()"
to="/me"
class="btn btn-outline"
>
me
</router-link>
<DarkModeToggle class="mx-2" v-slot="{ state }">
<i v-if="state" class="bi-moon"></i>
<i v-else class="bi-sun"></i>
<i v-if="state" class="bi-moon"/>
<i v-else class="bi-sun"/>
</DarkModeToggle>
</div>
</nav>
@ -42,7 +49,6 @@ import DarkModeToggle from "@/components/DarkmodeToggle.vue";
nav {
a {
font-weight: bold;
&.router-link-exact-active {
text-decoration: underline;
}

9
src/router/index.ts
View File

@ -8,15 +8,6 @@ const routes: Array<RouteRecordRaw> = [
name: "home",
component: HomeView,
},
{
path: "/connect",
name: "connect",
component: () =>
import(/* webpackChunkName: "connect" */ "../views/ConnectPage.vue"),
meta: {
requireAuth: true,
},
},
{
path: "/me",
name: "me",

4
src/views/AuthCallbackPage.vue
View File

@ -17,8 +17,8 @@ const route = useRoute();
<div class="alert alert-success">
Authorization completed
</div>
<router-link to="/connect" class="btn btn-primary">
Join a Session
<router-link to="/me" class="btn btn-primary">
Go to my Profile
</router-link>
</PromiseResolver>
</div>

55
src/views/ConnectPage.vue
View File

@ -1,55 +0,0 @@
<script setup lang="ts">
import PromiseResolver from "@/components/PromiseResolver.vue";
import CurrentlyPlaying from "@/components/CurrentlyPlaying.vue";
import { useRoute } from "vue-router";
const route = useRoute();
</script>
<template>
<div class="about">
<h1>Connect</h1>
<div class="card">
<div class="card-header">
test
</div>
<div class="card-body">
<PromiseResolver
:promise="$api.testConnection()"
v-slot="{ data }"
>
{{ data }}
</PromiseResolver>
</div>
</div>
<div class="card">
<div class="card-header">
role
</div>
<div class="card-body">
<PromiseResolver
:promise="$api.getRole()"
v-slot="{ data }"
>
{{ data }}
</PromiseResolver>
</div>
</div>
<div class="card">
<div class="card-header">
currently playing
</div>
<div class="card-body">
<PromiseResolver
:promise="$api.getCurrentlyPlaying()"
v-slot="{ data, update }"
class="col-md-4"
>
{{ data }}
<CurrentlyPlaying v-if="data.currentlyPlaying" :currentlyPlaying="data.currentlyPlaying" />
<button @click="update($api.getCurrentlyPlaying())" class="btn btn-secondary">update</button>
</PromiseResolver>
</div>
</div>
</div>
</template>

2
src/views/HomePage.vue
View File

@ -4,5 +4,7 @@
<p>
listen to music with your friends
</p>
<router-link v-if="!$api.isAuthorized()" to="/auth" class="btn btn-primary">Get started</router-link>
<router-link v-else to="/me" class="btn btn-primary">Go to my profile</router-link>
</div>
</template>

31
src/views/MePage.vue
View File

@ -20,7 +20,7 @@ onBeforeUnmount(() => {
<template>
<div>
<h1>Me</h1>
<h2>Currently Listening to</h2>
<h2>Currently listening to</h2>
<PromiseResolver
:promise="userInfo"
v-slot="{ data: { currentlyPlaying } }"
@ -41,25 +41,38 @@ onBeforeUnmount(() => {
</div>
<div class="card-body">
<b>Host</b>
<div class="my-2">
<img :src="session.host.images[0].url" :alt="session.host.displayName" :title="session.host.displayName" class="rounded-circle userThumbnail">
<div class="row">
<router-link
class="col-auto my-2 btn"
:to="`/user/${ session.host.id }`"
>
<img
v-if="session.host.images[0]?.url"
:src="session.host.images[0]?.url"
:alt="session.host.displayName"
:title="session.host.displayName"
class="rounded-circle userThumbnail"
/>
<i v-else class="bi-person-circle userThumbnail" :title="session.host.displayName" />
</router-link>
</div>
<b>Clients</b>
<div class="row">
<div
<router-link
v-for="client in session.clients"
:key="client"
class="col-auto"
class="col-auto btn"
:to="`/user/${ client.id }`"
>
<img
v-if="client.images[0]?.src"
:src="client.images[0]?.src"
v-if="client.images[0]?.url"
:src="client.images[0]?.url"
:alt="client.displayName"
:title="client.displayName"
class="userThumbnail rounded-circle"
/>
<i class="bi-person-circle userThumbnail" :title="client.displayName"/>
</div>
<i v-else class="bi-person-circle userThumbnail" :title="client.displayName" />
</router-link>
</div>
</div>
<div class="card-footer">

2
src/views/UserPage.vue
View File

@ -51,7 +51,7 @@ onBeforeUnmount(() => {
<div class="card-body">
<div class="row">
<div class="col-4">
<img :src="user.images[0].url" alt="user image" class="card-img">
<img :src="user.images[0]?.url" alt="user image" class="card-img">
</div>
<div class="col">
<p>{{ user.totalFollowers }} followers on Spotify</p>