add consumptions
This commit is contained in:
@@ -9,7 +9,6 @@ const auth = useAuthStore();
|
||||
const userOwnsPost = ref(false);
|
||||
|
||||
const post = ref(null);
|
||||
const fetched = ref(false);
|
||||
const leftCap = ref(false);
|
||||
const rightCap = ref(false);
|
||||
let posts = [];
|
||||
@@ -21,14 +20,13 @@ async function fetchPosts() {
|
||||
const res = await axios.get("https://www.adam-french.co.uk/api/posts");
|
||||
posts = res.data;
|
||||
len = posts.length;
|
||||
fetched.value = true;
|
||||
post.value = posts[0];
|
||||
|
||||
userOwnsPost.value = post.value.author.username == auth.user.username;
|
||||
|
||||
leftCap.value = true;
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
console.log("Cannot connect to API");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -68,7 +66,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="fetched" class="flex-col pad scroll-y left-content">
|
||||
<div v-if="post" class="flex-col pad scroll-y left-content">
|
||||
<h2>{{ post.title }}</h2>
|
||||
<Markdown class="fill wrap" :source="post.content" />
|
||||
<p>by: {{ post.author.username }}</p>
|
||||
|
||||
@@ -1,45 +1,51 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import axios from "axios";
|
||||
|
||||
const song = ref(null);
|
||||
const fetched = ref(false);
|
||||
const intervalId = ref(null);
|
||||
const refreshId = ref(null);
|
||||
|
||||
let songs = [];
|
||||
const len = 3;
|
||||
let idx = 0;
|
||||
|
||||
async function fetchRecent() {
|
||||
try {
|
||||
const res = await axios.get("/api/spotify/recent");
|
||||
songs = res.data;
|
||||
fetched.value = true;
|
||||
song.value = songs[0];
|
||||
songs = res.data || [];
|
||||
|
||||
idx = 0;
|
||||
song.value = songs[0] ?? null;
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
console.error("Cannot connect to Spotify API", err);
|
||||
}
|
||||
}
|
||||
|
||||
function nextSong() {
|
||||
clearInterval(intervalId.value);
|
||||
if (!songs.length) return;
|
||||
|
||||
song.value = songs[idx];
|
||||
idx = (idx + 1) % len;
|
||||
intervalId.value = setInterval(nextSong, 5000);
|
||||
idx = (idx + 1) % songs.length;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchRecent();
|
||||
setInterval(fetchRecent, 120000);
|
||||
onMounted(async () => {
|
||||
await fetchRecent();
|
||||
|
||||
intervalId.value = setInterval(nextSong, 5000);
|
||||
refreshId.value = setInterval(fetchRecent, 120000);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(intervalId.value);
|
||||
clearInterval(refreshId.value);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Transition name="fade" mode="out-in">
|
||||
<div
|
||||
v-if="fetched"
|
||||
:key="song"
|
||||
v-on:click="nextSong"
|
||||
v-if="song"
|
||||
@click="nextSong"
|
||||
class="flex-col center-content center-text"
|
||||
>
|
||||
<h2>Listening To</h2>
|
||||
|
||||
@@ -1,81 +1,65 @@
|
||||
<script setup>
|
||||
import OptionalLinkTable from "@/components/quick/OptionalLinkTable.vue";
|
||||
|
||||
const arr = [
|
||||
{
|
||||
type: "Substack",
|
||||
name: "By Ellie",
|
||||
link: "https://oceandrops.substack.com/p/japan-is-what-late-stage-capitalist?utm_source=%2Finbox&utm_medium=reader2",
|
||||
},
|
||||
{
|
||||
type: "Substack",
|
||||
name: "By Cricket Guest",
|
||||
link: "https://finalgirldigital.substack.com/p/the-diet-coke-essay?utm_source=%2Finbox&utm_medium=reader2",
|
||||
},
|
||||
{
|
||||
type: "Book",
|
||||
name: "The Defining Decade",
|
||||
},
|
||||
{
|
||||
type: "Movie",
|
||||
name: "Funny Pages",
|
||||
},
|
||||
{
|
||||
type: "Series",
|
||||
name: "Curb Your Enthusiasm",
|
||||
},
|
||||
{
|
||||
type: "Game",
|
||||
name: "Hatsune Miku: Project Mirai DX",
|
||||
},
|
||||
{
|
||||
type: "Movie",
|
||||
name: "Redline",
|
||||
},
|
||||
{
|
||||
type: "Game",
|
||||
name: "Persona 5 Royal",
|
||||
},
|
||||
{
|
||||
type: "Anime",
|
||||
name: "GTO",
|
||||
},
|
||||
{
|
||||
type: "Anime",
|
||||
name: "Revolutionary Girl Utena",
|
||||
},
|
||||
{
|
||||
type: "Anime",
|
||||
name: "Chainsaw man",
|
||||
},
|
||||
{
|
||||
type: "Anime",
|
||||
name: "Azumanga Daioh",
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex-col center-content">
|
||||
<h2>Consumption</h2>
|
||||
<div class="scroll fill">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Substack</th>
|
||||
<td>
|
||||
<a
|
||||
href="https://oceandrops.substack.com/p/japan-is-what-late-stage-capitalist?utm_source=%2Finbox&utm_medium=reader2"
|
||||
>By Ellie</a
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Substack</th>
|
||||
<td>
|
||||
<a
|
||||
href="https://finalgirldigital.substack.com/p/the-diet-coke-essay?utm_source=%2Finbox&utm_medium=reader2"
|
||||
>By Cricket Guest</a
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Book</th>
|
||||
<td>The Defining Decade</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Book</th>
|
||||
<td>Atomic Habits</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Movie</th>
|
||||
<td>Funny Pages</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Series</th>
|
||||
<td>Curb Your Enthusiasm</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Game</th>
|
||||
<td>Hatsune Miku: Project Mirai DX</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Anime</th>
|
||||
<td>Welcome to the NHK</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Movie</th>
|
||||
<td>Redline</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Anime</th>
|
||||
<td>Neon Genesis Evangelion</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Game</th>
|
||||
<td>Persona 5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Anime</th>
|
||||
<td>GTO</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Anime</th>
|
||||
<td>Revolutionary Girl Utena</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Anime</th>
|
||||
<td>Chainsaw Man</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Anime</th>
|
||||
<td>Azumanga Daioh</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<OptionalLinkTable :data="arr" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user