Debug frontend

master
adb-sh 2 years ago
parent 4a6255185a
commit f674f28921

@ -79,11 +79,11 @@ http {
location / {
index index.html;
root /var/www/html;
try_files $uri $uri/ /index.html;
#proxy_set_header "Host" "127.0.0.1:8080";
#proxy_pass http://frontend:8080;
#index index.html;
#root /var/www/html;
#try_files $uri $uri/ /index.html;
proxy_set_header "Host" "127.0.0.1:8080";
proxy_pass http://frontend:8080;
}
location /api/public {

@ -57,10 +57,10 @@ export class Api {
return (await this.axios.get(`/test`))?.data;
}
async getRole() {
return (await this.axios.get(`/user/role`))?.data;
return (await this.axios.get(`/me/role`))?.data;
}
async getCurrentlyPlaying() {
return (await this.axios.get(`/user/currentlyPlaying`))?.data;
return (await this.axios.get(`/me/currentlyPlaying`))?.data;
}
async getUserInfo(userId: string) {

@ -11,7 +11,10 @@
import { ref, watch } from 'vue';
import { themeConfig } from '@/main';
const sliderState = ref(themeConfig.getTheme() === 'dark');
let currentTheme;
currentTheme = themeConfig.getTheme() === 'dark'
const sliderState = ref(currentTheme);
watch(sliderState, (state) => {
themeConfig.setTheme(state ? 'dark' : 'light');

@ -8,18 +8,26 @@
:data="getter(data)"
:update="update"
/>
<slot v-if="error" name="error">
<slot
v-if="error"
name="error"
:error="error"
:update="update"
>
<div class="alert alert-danger">
{{ error.message || 'Oops! Something went wrong :/' }}
</div>
</slot>
<slot v-else-if="loading && showThrobber" name="loading">
<transition name="fade">
<slot v-if="loading && showThrobber" name="loading">
<div class="overlay">
<div class="wrapper">
<ThrobberLoading />
<div class="background bg-darkmode-dark bg-light" />
<ThrobberLoading class="position-relative" />
</div>
</div>
</slot>
</transition>
</div>
</template>
@ -57,6 +65,7 @@ const update = async (promise: Promise | unknown) => {
data.value = await (promise.isPromiseList
? Promise.all(promise.promises)
: promise);
error.value = null;
} catch (e) {
error.value = e;
} finally {
@ -83,8 +92,6 @@ watch(() => props.promise, (to) => {
width: 100%;
height: 100%;
min-height: 5rem;
background-color: #fffd;
z-index: 9000;
.wrapper {
position: sticky;
display: flex;
@ -93,6 +100,14 @@ watch(() => props.promise, (to) => {
top: 0;
height: 100%;
max-height: 100vh;
.background {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0.9;
}
}
}
}

@ -30,13 +30,17 @@ onBeforeUnmount(() => {
class="progress-bar"
role="progressbar"
:style="{
width: `${ estimatedProgress / duration * 100 }%`
width: `${ Math.min(estimatedProgress / duration, 1) * 100 }%`
}"
/>
</div>
<div class="row my-2">
<div class="col">
<TimeFormatter :seconds="estimatedProgress / 1000"/>
<TimeFormatter
:seconds="
Math.min(estimatedProgress, duration) / 1000
"
/>
</div>
<div class="col-auto">
<TimeFormatter :seconds="duration / 1000"/>

@ -11,3 +11,16 @@ html, body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fade-enter-active, .fade-leave-active {
transition-property: opacity;
transition-duration: .25s;
}
.fade-enter-active {
transition-delay: .25s;
}
.fade-enter, .fade-leave-active {
opacity: 0
}

@ -23,7 +23,7 @@ const routes: Array<RouteRecordRaw> = [
component: () =>
import(/* webpackChunkName: "me" */ "../views/MePage.vue"),
meta: {
requireAuth: false,
requireAuth: true,
},
},
{

@ -1,21 +1,55 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import PromiseResolver from "@/components/PromiseResolver.vue";
import CurrentlyPlayingCompact from "@/components/CurrentlyPlayingCompact.vue";
import { onBeforeUnmount, ref } from "vue";
import { useApi } from "@/Api";
const api = useApi();
const userInfo = ref(api?.getCurrentlyPlaying());
let refreshUserInfo = setInterval(() => {
userInfo.value = api?.getCurrentlyPlaying();
}, 10000);
onBeforeUnmount(() => {
clearInterval(refreshUserInfo);
});
</script>
<template>
<div>
<h1>Me</h1>
<h2>Currently Listening to</h2>
<PromiseResolver
:promise="userInfo"
v-slot="{ data: { currentlyPlaying } }"
>
<CurrentlyPlayingCompact v-if="currentlyPlaying?.item" :currentlyPlaying="currentlyPlaying" />
<div v-else class="alert alert-info">
You are not listening to music.
</div>
</PromiseResolver>
<h2>Session</h2>
<PromiseResolver
:promise="$api.getSession()"
v-slot="slot"
>
<template #default="{ data: { session }, update }">
<div class="card">
<div class="card-header">
Your session
</div>
<div class="card-body">
<p>
{{ slot }}
</p>
<b>Host</b>
<div>
{{ session.host?.spotify.userId }}
</div>
<b>Clients</b>
<div>
<div v-for="client in session.clients" :key="client">
{{ client.displayName }}
</div>
</div>
</div>
<div class="card-footer">
<button
@ -32,6 +66,20 @@
</button>
</div>
</div>
</template>
<template #error="{ error, update }">
<div v-if="error.response.status === 404">
<div class="alert alert-info">
You are not part of a session.
</div>
<button
@click="$api.createSession().then(() => update($api.getSession()))"
class="btn btn-success"
>
Create Session
</button>
</div>
</template>
</PromiseResolver>
</div>
</template>

Loading…
Cancel
Save