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

fix too many v-if

Browse Source
This commit is contained in:
Adam French
2026-01-20 20:27:24 +00:00
parent 82d90dd0f5
commit 4ed4d3a26f
3 changed files with 60 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,7 +8,15 @@ import { useAuthStore } from "@/stores/auth";
const auth = useAuthStore();
const userOwnsPost = ref(false);
const post = ref(null);
const post = ref({
title: "Can't fetch from the db yo",
content:
"This is meant to be pulling from a database, but for some reason that isn't working and this is filler text that should hopefully never see the light of day. If you are reading this, something has gone horribly, horribly wrong. Please start crying and prepare for the incoming wrath of hell. Furthermore, this is very, very long because I am trying to test the scroll feature so thank you ^_^.",
author: {
username: "stp",
},
createdAt: Date.now(),
});
const leftCap = ref(false);
const rightCap = ref(false);
let posts = [];
@@ -17,14 +25,17 @@ let len = 0;
async function fetchPosts() {
try {
const res = await axios.get("https://www.adam-french.co.uk/api/posts");
posts = res.data;
len = posts.length;
post.value = posts[0];
userOwnsPost.value = post.value.author.username == auth.user.username;
leftCap.value = true;
const res = await axios.get("/api/posts");
if (Array.isArray(res.data)) {
posts = res.data;
len = posts.length;
post.value = posts[0];
userOwnsPost.value =
post.value.author.username == auth.user.username;
leftCap.value = true;
} else {
throw new Error("Invalid response from API");
}
} catch (err) {
console.log("Cannot connect to API");
}
@@ -66,7 +77,7 @@ onMounted(() => {
</script>
<template>
<div v-if="post" class="flex-col pad scroll-y left-content">
<div 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>
@@ -81,24 +92,6 @@ onMounted(() => {
</div>
<button v-if="userOwnsPost" @click="deletePost">Delete</button>
</div>
<div class="flex-col pad left-content" v-else>
<h2>Can't fetch from the db yo</h2>
<div class="fill wrap scroll-y">
This is meant to be pulling from a database, but for some reason
that isn't working and this is filler text that should hopefully
never see the light of day. If you are reading this, something has
gone horribly, horribly wrong. Please start crying and prepare for
the incoming wrath of hell. Furthermore, this is very, very long
because I am trying to test the scroll feature so thank you ^_^.
</div>
<p>by: stp</p>
<small>Created at: 0/0/0</small>
<div class="flex-row fill-width">
<button class="fill">Prev</button>
<button class="fill">Next</button>
</div>
<button>Delete</button>
</div>
</template>
<style scoped>

26
nginx/vue/src/components/home/Gym.vue
View File

@@ -1,23 +1,17 @@
<script setup>
import OptionalLinkTable from "@/components/quick/OptionalLinkTable.vue";
const gym = [
{ name: "Row", type: "30 min" },
{ name: "Run", type: "5k" },
{ name: "Pushup & Squat", type: "50" },
];
</script>
<template>
<div class="flex-col center-content">
<h2>Gym</h2>
<p>I'm not a gym geek but I have a consistent routine:</p>
<table>
<tbody>
<tr>
<th>Row</th>
<td>30 min</td>
</tr>
<tr>
<th>Run</th>
<td>5k</td>
</tr>
<tr>
<th>Pushup & Squat</th>
<td>50</td>
</tr>
</tbody>
</table>
<OptionalLinkTable class="scroll fill center-text" :data="gym" />
</div>
</template>

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

@@ -1,48 +1,57 @@
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { ref, computed, onMounted, onUnmounted } from "vue";
import axios from "axios";
const song = ref(null);
const intervalId = ref(null);
const refreshId = ref(null);
let intervalId = null;
let refreshId = null;
let songs = [];
let idx = 0;
const song = computed(() => songs.value[idx.value]);
const songs = ref([
{
id: 1,
track: {
id: 1,
name: "^_^",
album: { images: [{ url: "/img/Untitled.png" }] },
artists: [{ name: ">_<" }],
},
},
]);
const idx = ref(0);
async function fetchRecent() {
try {
const res = await axios.get("/api/spotify/recent");
songs = res.data || [];
idx = 0;
song.value = songs[0] ?? null;
if (Array.isArray(res.data)) {
songs.value = res.data;
idx.value = 0;
} else {
throw new Error("Invalid response from Spotify API");
}
} catch (err) {
console.error("Cannot connect to Spotify API", err);
}
}
function nextSong() {
if (!songs.length) return;
song.value = songs[idx];
idx = (idx + 1) % songs.length;
if (!songs.value.length) return;
idx.value = (idx.value + 1) % songs.value.length;
}
onMounted(async () => {
await fetchRecent();
intervalId.value = setInterval(nextSong, 5000);
refreshId.value = setInterval(fetchRecent, 120000);
intervalId = setInterval(nextSong, 5000);
refreshId = setInterval(fetchRecent, 120000);
});
onUnmounted(() => {
clearInterval(intervalId.value);
clearInterval(refreshId.value);
clearInterval(intervalId);
clearInterval(refreshId);
});
</script>
<template>
<Transition v-if="song" name="fade" mode="out-in">
<Transition name="fade" mode="out-in">
<div
@click="nextSong"
:key="song.track.id"
@@ -54,12 +63,6 @@ onUnmounted(() => {
<p><strong>Artist:</strong> {{ song.track.artists[0].name }}</p>
</div>
</Transition>
<div v-else class="flex-col center-content center-text">
<h2>Listening To</h2>
<img src="/img/Untitled.png" />
<p><strong>Song:</strong> >_<</p>
<p><strong>Artist:</strong> ^_^</p>
</div>
</template>
<style scoped>