From fb47883e5946ff70556fb54e699334112e490199 Mon Sep 17 00:00:00 2001
From: Adam French <adam.a.french@outlook.com>
Date: Tue, 9 Dec 2025 17:27:26 +0000
Subject: [PATCH] deleting unused components and restructuring

---
 nginx/vue/src/components/admin/Login.vue      | 13 ++++
 nginx/vue/src/components/api/Login.vue        | 21 -------
 nginx/vue/src/components/api/Posts.vue        | 32 ----------
 .../vue/src/components/borders/UtenaFrame.vue | 50 +++++++++++++++
 .../vue/src/components/spotify/Listening.vue  | 42 -------------
 nginx/vue/src/components/spotify/Recent.vue   | 63 -------------------
 6 files changed, 63 insertions(+), 158 deletions(-)
 create mode 100644 nginx/vue/src/components/admin/Login.vue
 delete mode 100644 nginx/vue/src/components/api/Login.vue
 delete mode 100644 nginx/vue/src/components/api/Posts.vue
 create mode 100644 nginx/vue/src/components/borders/UtenaFrame.vue
 delete mode 100644 nginx/vue/src/components/spotify/Listening.vue
 delete mode 100644 nginx/vue/src/components/spotify/Recent.vue

diff --git a/nginx/vue/src/components/admin/Login.vue b/nginx/vue/src/components/admin/Login.vue
new file mode 100644
index 0000000..01a2021
--- /dev/null
+++ b/nginx/vue/src/components/admin/Login.vue
@@ -0,0 +1,13 @@
+<script setup>
+import { ref, onMounted } from "vue";
+
+const loggedIn = ref(false);
+</script>
+
+<template>
+    <div v-if="!loggedIn">
+        <h1>login</h1>
+        <textarea>Username</textarea>
+        <textarea>Password</textarea>
+    </div>
+</template>
diff --git a/nginx/vue/src/components/api/Login.vue b/nginx/vue/src/components/api/Login.vue
deleted file mode 100644
index d06b7a5..0000000
--- a/nginx/vue/src/components/api/Login.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-    <div v-if="!loggedIn">
-        <h1>login</h1>
-    </div>
-</template>
-
-<script>
-import { ref, onMounted } from "vue";
-export default {
-    name: "api-login",
-    setup() {
-        const loggedIn = ref(false);
-
-        onMounted(() => {
-            loggedIn.value = true;
-        });
-
-        return { loggedIn };
-    },
-};
-</script>
diff --git a/nginx/vue/src/components/api/Posts.vue b/nginx/vue/src/components/api/Posts.vue
deleted file mode 100644
index 5ad4454..0000000
--- a/nginx/vue/src/components/api/Posts.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-    <!-- Input post display -->
-    <div v-if="posting"></div>
-    <!-- View post display -->
-    <div v-else>
-        <div v-for="(post, idx) in posts" :key="post.id || idx">
-            <h1>post info</h1>
-        </div>
-    </div>
-</template>
-
-<script>
-import { ref, onMounted } from "vue";
-export default {
-    name: "api-posts",
-    setup() {
-        const posting = ref(false);
-        const posts = ref([]);
-
-        async function fetchRecent() {}
-
-        onMounted(() => {
-            fetchRecent();
-            setInterval(fetchRecent, 120000);
-        });
-        return {
-            posting,
-            posts,
-        };
-    },
-};
-</script>
diff --git a/nginx/vue/src/components/borders/UtenaFrame.vue b/nginx/vue/src/components/borders/UtenaFrame.vue
new file mode 100644
index 0000000..ff06735
--- /dev/null
+++ b/nginx/vue/src/components/borders/UtenaFrame.vue
@@ -0,0 +1,50 @@
+<template>
+    <img src="/img/borders/utena.png" class="flower tl antirotate" />
+    <img src="/img/borders/utena.png" class="flower tr rotate" />
+    <img src="/img/borders/utena.png" class="flower bl rotate" />
+    <img src="/img/borders/utena.png" class="flower br antirotate" />
+    <slot />
+</template>
+
+<style scoped>
+.flower {
+    position: absolute;
+    width: 150px;
+}
+.tl {
+    top: 100px;
+    left: 0px;
+    --start: 0deg;
+}
+.tr {
+    top: 100px;
+    right: 0;
+    --start: 90deg;
+}
+.bl {
+    bottom: -100px;
+    left: 0;
+    --start: 180deg;
+}
+.br {
+    bottom: -100px;
+    right: 0;
+    --start: 270deg;
+}
+.rotate {
+    animation: spin 3s linear infinite;
+}
+
+.antirotate {
+    animation: spin 3s linear infinite reverse;
+}
+
+@keyframes spin {
+    from {
+        transform: rotate(var(--start));
+    }
+    to {
+        transform: rotate(calc(var(--start) + 360deg));
+    }
+}
+</style>
diff --git a/nginx/vue/src/components/spotify/Listening.vue b/nginx/vue/src/components/spotify/Listening.vue
deleted file mode 100644
index f480125..0000000
--- a/nginx/vue/src/components/spotify/Listening.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-    <h2 class="center-content">Listening to RN! ^_^</h2>
-    <div v-if="song.is_playing" class="center-content bg-white border2 shadow1">
-        <img :src="song.item.album.images[0].url" />
-        <p><strong>Song:</strong> {{ song.item.name }}</p>
-        <p><strong>Artist:</strong> {{ song.item.artists[0].name }}</p>
-    </div>
-    <div v-else class="center-content bg-white border2 shadow1">
-        <img src="/img/Untitled.png" />
-        <p>I ain't listenin to nofin rn :/</p>
-    </div>
-</template>
-
-<script>
-import { ref, onMounted } from "vue";
-import axios from "axios";
-
-export default {
-    name: "spotify-listening",
-    setup() {
-        const song = ref({});
-
-        async function fetchSpotify() {
-            try {
-                const res = await axios.get("/api/spotify/listening");
-                song.value = res.data;
-            } catch (err) {
-                console.error(err);
-            }
-        }
-
-        onMounted(() => {
-            fetchSpotify();
-            setInterval(fetchSpotify, 120000);
-        });
-
-        return {
-            song,
-        };
-    },
-};
-</script>
diff --git a/nginx/vue/src/components/spotify/Recent.vue b/nginx/vue/src/components/spotify/Recent.vue
deleted file mode 100644
index 06e2a55..0000000
--- a/nginx/vue/src/components/spotify/Recent.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-    <h2 class="center-content">Listening to RECENTLY</h2>
-    <div v-if="fetched" class="flex-row">
-        <div
-            v-if="fetched"
-            v-for="(song, idx) in played"
-            :key="song.track.id || idx"
-            class="bg-white border2 shadow1"
-            style="width: 280px"
-        >
-            <img :src="song.track.album.images[0].url" />
-            <p><strong>Song:</strong> {{ song.track.name }}</p>
-            <p><strong>Artist:</strong> {{ song.track.artists[0].name }}</p>
-        </div>
-    </div>
-    <div v-else class="flex-row">
-        <div class="bg-white border2 shadow1 tile1">
-            <img src="/img/Untitled.png" />
-            <p>I ain't listenin to nofin rn :/</p>
-        </div>
-        <div class="bg-white border2 shadow1 tile1">
-            <img src="/img/Untitled.png" />
-            <p>I ain't listenin to nofin rn :/</p>
-        </div>
-        <div class="bg-white border2 shadow1 tile1">
-            <img src="/img/Untitled.png" />
-            <p>I ain't listenin to nofin rn :/</p>
-        </div>
-    </div>
-</template>
-
-<script>
-import { ref, onMounted } from "vue";
-import axios from "axios";
-
-export default {
-    name: "spotify-recent",
-    setup() {
-        const played = ref([]);
-        const fetched = ref(false);
-
-        async function fetchRecent() {
-            try {
-                const res = await axios.get("/api/spotify/recent");
-                played.value = res.data;
-                fetched.value = true;
-            } catch (err) {
-                console.error(err);
-            }
-        }
-
-        onMounted(() => {
-            fetchRecent();
-            setInterval(fetchRecent, 120000);
-        });
-
-        return {
-            played,
-            fetched,
-        };
-    },
-};
-</script>