adamf/web_server
1
1
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

add consumptions

Browse Source
This commit is contained in:
Adam French
2026-01-20 12:54:30 +00:00
parent 6008614f61
commit c73f229b67
3 changed files with 82 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
nginx/vue/src/components/home/Feed.vue
View File

@@ -9,7 +9,6 @@ const auth = useAuthStore();
const userOwnsPost = ref(false); const userOwnsPost = ref(false);
const post = ref(null); const post = ref(null);
const fetched = ref(false);
const leftCap = ref(false); const leftCap = ref(false);
const rightCap = ref(false); const rightCap = ref(false);
let posts = []; let posts = [];
@@ -21,14 +20,13 @@ async function fetchPosts() {
const res = await axios.get("https://www.adam-french.co.uk/api/posts"); const res = await axios.get("https://www.adam-french.co.uk/api/posts");
posts = res.data; posts = res.data;
len = posts.length; len = posts.length;
fetched.value = true;
post.value = posts[0]; post.value = posts[0];
userOwnsPost.value = post.value.author.username == auth.user.username; userOwnsPost.value = post.value.author.username == auth.user.username;
leftCap.value = true; leftCap.value = true;
} catch (err) { } catch (err) {
console.error(err); console.log("Cannot connect to API");
} }
} }
@@ -68,7 +66,7 @@ onMounted(() => {
</script> </script>
<template> <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> <h2>{{ post.title }}</h2>
<Markdown class="fill wrap" :source="post.content" /> <Markdown class="fill wrap" :source="post.content" />
<p>by: {{ post.author.username }}</p> <p>by: {{ post.author.username }}</p>

38
nginx/vue/src/components/home/Listening.vue
View File

@@ -1,45 +1,51 @@
<script setup> <script setup>
import { ref, onMounted } from "vue"; import { ref, onMounted, onUnmounted } from "vue";
import axios from "axios"; import axios from "axios";
const song = ref(null); const song = ref(null);
const fetched = ref(false);
const intervalId = ref(null); const intervalId = ref(null);
const refreshId = ref(null);
let songs = []; let songs = [];
const len = 3;
let idx = 0; let idx = 0;
async function fetchRecent() { async function fetchRecent() {
try { try {
const res = await axios.get("/api/spotify/recent"); const res = await axios.get("/api/spotify/recent");
songs = res.data; songs = res.data || [];
fetched.value = true;
song.value = songs[0]; idx = 0;
song.value = songs[0] ?? null;
} catch (err) { } catch (err) {
console.error(err); console.error("Cannot connect to Spotify API", err);
} }
} }
function nextSong() { function nextSong() {
clearInterval(intervalId.value); if (!songs.length) return;
song.value = songs[idx]; song.value = songs[idx];
idx = (idx + 1) % len; idx = (idx + 1) % songs.length;
intervalId.value = setInterval(nextSong, 5000);
} }
onMounted(() => { onMounted(async () => {
fetchRecent(); await fetchRecent();
setInterval(fetchRecent, 120000);
intervalId.value = setInterval(nextSong, 5000); intervalId.value = setInterval(nextSong, 5000);
refreshId.value = setInterval(fetchRecent, 120000);
});
onUnmounted(() => {
clearInterval(intervalId.value);
clearInterval(refreshId.value);
}); });
</script> </script>
<template> <template>
<Transition name="fade" mode="out-in"> <Transition name="fade" mode="out-in">
<div <div
v-if="fetched" v-if="song"
:key="song" @click="nextSong"
v-on:click="nextSong"
class="flex-col center-content center-text" class="flex-col center-content center-text"
> >
<h2>Listening To</h2> <h2>Listening To</h2>

132
nginx/vue/src/components/home/Watching.vue
View File

@@ -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> <template>
<div class="flex-col center-content"> <div class="flex-col center-content">
<h2>Consumption</h2> <h2>Consumption</h2>
<div class="scroll fill"> <div class="scroll fill">
<table> <OptionalLinkTable :data="arr" />
<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>
</div> </div>
</div> </div>
</template> </template>