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

many new components, renames and yays

Browse Source
This commit is contained in:
Adam French
2026-02-04 15:21:47 +00:00
parent 9bd2ea980a
commit 227fcadda6
10 changed files with 127 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
nginx/vue/src/components/Navbar.vue
View File

@@ -20,7 +20,7 @@ const inHome = computed(() => {
</script>
<template>
<nav class="flex flex-row w-fit">
<nav class="flex flex-row w-fit h-fit background">
<RouterLink class="bdr-2 bg-bg_primary" to="/" v-if="!inHome">
<a>HOME</a>
</RouterLink>

8
nginx/vue/src/components/home/Watching.vue → nginx/vue/src/components/home/Consumption.vue
View File

@@ -1,5 +1,7 @@
<script setup>
import AutoScroll from "@/components/util/AutoScroll.vue";
import OptionalLinkTable from "@/components/util/OptionalLinkTable.vue";
import Header from "@/components/text/Header.vue";
const data = [
{
@@ -57,9 +59,9 @@ const data = [
<template>
<div class="flex flex-col items-center">
<h2>Consumption</h2>
<div class="overflow-scroll flex-1 border-box">
<Header>Consumption</Header>
<AutoScroll>
<OptionalLinkTable :data="data" />
</div>
</AutoScroll>
</div>
</template>

8
nginx/vue/src/components/home/Favorites.vue
View File

@@ -1,5 +1,7 @@
<script setup>
import Header from "@/components/text/Header.vue";
import OptionalLinkTable from "@/components/util/OptionalLinkTable.vue";
import AutoScroll from "@/components/util/AutoScroll.vue";
const favs = [
{
type: "Daioh",
@@ -62,9 +64,9 @@ const favs = [
<template>
<div class="flex flex-col items-center">
<h2>favs</h2>
<div class="overflow-scroll w-full flex-1 border-box">
<Header>favs</Header>
<AutoScroll class="w-full flex-1">
<OptionalLinkTable class="w-full" :data="favs" />
</div>
</AutoScroll>
</div>
</template>

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

@@ -1,4 +1,5 @@
<script setup>
import Header from "@/components/text/Header.vue";
import OptionalLinkTable from "@/components/util/OptionalLinkTable.vue";
const gym = [
{ name: "Row", type: "30 min" },
@@ -9,7 +10,7 @@ const gym = [
<template>
<div class="flex flex-col items-center">
<h2>Gym</h2>
<Header>Gym</Header>
<p class="m-3">I'm not a gym geek but I always do:</p>
<div class="overflow-scroll w-full flex-1 border-box">
<OptionalLinkTable class="w-full" :data="gym" />

51
nginx/vue/src/components/util/AutoScroll.vue Normal file
View File

@@ -0,0 +1,51 @@
<template>
<div ref="container" class="overflow-y-auto">
<slot />
</div>
</template>
<script setup>
import { useTemplateRef, onMounted, onBeforeUnmount } from "vue";
const container = useTemplateRef("container");
const SPEED = 1; // px per frame
const PAUSE = 2000; // ms at top/bottom
const FRAME_TIME = 50; // ms at top/bottom
let direction = 1; // 1 = down, -1 = up
let paused = false;
let rafId;
let timeoutId;
function tick() {
const el = container.value;
el.scrollTop += SPEED * direction;
const reachedBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 1;
const reachedTop = el.scrollTop <= 0;
if (reachedBottom || reachedTop) {
direction *= -1;
timeoutId = setTimeout(() => {
paused = false;
rafId = setTimeout(tick, FRAME_TIME);
}, PAUSE);
return;
}
rafId = setTimeout(tick, FRAME_TIME);
}
onMounted(() => {
rafId = setTimeout(tick, FRAME_TIME);
});
onBeforeUnmount(() => {
clearTimeout(rafId);
clearTimeout(timeoutId);
});
</script>

2
nginx/vue/src/components/util/MusicPlayer.vue
View File

@@ -4,7 +4,7 @@
<template>
<audio/>
<div class="musicPlayerGrid w-50">
<div class="musicPlayerGrid">
<div class="album_cover">
<img src="/img/Untitled.png"></img>
</div>

7
nginx/vue/src/components/util/Time.vue
View File

@@ -1,4 +1,5 @@
<script setup>
import Header from "@/components/text/Header.vue";
import { ref } from "vue";
const time = ref("");
@@ -23,8 +24,8 @@ setInterval(updateDateTime, 60000);
</script>
<template>
<div class="flex flex-col">
<h4>{{ time }}</h4>
<h4>{{ weekday }} {{ day }}, {{ month }}</h4>
<div class="items-center flex flex-col bg-bg_primary border-primary border">
<h1>{{ time }}</h1>
<h1>{{ weekday }} {{ day }}, {{ month }}</h1>
</div>
</template>

52
nginx/vue/src/components/util/Timer.vue
View File

@@ -62,37 +62,53 @@ function playFinishedSound() {
</script>
<template>
<div class="flex flex-col gap-1 p-1">
<h4 class="items-center">Timer</h4>
<!-- Min input and Second input-->
<div v-if="finished && paused" class="flex flex-row">
<input v-model="minutesInput" type="number" min="0" max="59" />
<input v-model="secondsInput" type="number" min="0" max="59" />
<div
class="flex flex-col gap-1 items-center border-primary border p-1 bg-bg_primary"
>
<h2 class="items-center">Timer</h2>
<div v-if="finished && paused" class="flex flex-col">
<div class="flex flex-row p-2">
<input
class="w-full"
v-model="minutesInput"
type="range"
min="0"
max="59"
/>
<p>{{ minutesInput }}m</p>
</div>
<div class="flex flex-row p-2">
<input
class="w-full"
v-model="secondsInput"
type="range"
min="0"
max="59"
/>
<p>{{ secondsInput }}s</p>
</div>
<button @click="startTimer">Proceed</button>
</div>
<div v-if="finished && !paused" class="flex flex-col">
<h1>Timer finished!</h1>
<button @click="resetTimer">Reset</button>
</div>
<div v-if="!finished && paused">
<div v-if="!finished && paused" class="flex flex-col">
<h1>Paused</h1>
<button @click="resetTimer">Reset</button>
</div>
<div v-if="!finished && !paused" class="flex flex-col">
<h1>
<p>
{{ minutes.toString().padStart(2, "0") }}:{{
seconds.toString().padStart(2, "0")
}}
</h1>
<h1>
</p>
<p>
{{ minutesInput.toString().padStart(2, "0") }}:{{
secondsInput.toString().padStart(2, "0")
}}
</h1>
</div>
<div class="flex flex-col">
<button v-if="paused" @click="startTimer">Proceed</button>
<button v-if="!finished && !paused" @click="pauseTimer">
Pause
</button>
<button v-if="finished ^ paused" @click="resetTimer">Reset</button>
</p>
<button @click="pauseTimer">Pause</button>
</div>
</div>
</template>