implement create rowing component

nginx/vue/src/router/index.js

@@ -17,7 +17,7 @@ const router = createRouter({
         {
             path: "/admin",
             name: "admin",
-            component: () => import("../views/Admin.vue"),
+            component: () => import("../views/admin/Admin.vue"),
         },
         {
             path: "/bookmarks",

nginx/vue/src/views/admin/Admin.vue

@@ -2,11 +2,12 @@
 import { ref } from "vue";
 import { useAuthStore } from "@/stores/auth";
 
-import Login from "@/components/admin/Login.vue";
-import CreateUser from "@/components/admin/CreateUser.vue";
-import CreatePost from "@/components/admin/CreatePost.vue";
-import CreateFavorite from "@/components/admin/CreateFavorite.vue";
-import CreateActivity from "@/components/admin/CreateActivity.vue";
+import Login from "./Login.vue";
+import CreateUser from "./CreateUser.vue";
+import CreatePost from "./CreatePost.vue";
+import CreateFavorite from "./CreateFavorite.vue";
+import CreateActivity from "./CreateActivity.vue";
+import CreateRowing from "./CreateRowing.vue";
 
 const auth = useAuthStore();
 </script>
@@ -21,6 +22,7 @@ const auth = useAuthStore();
             <CreatePost class="bdr-2 bg-bg_primary" v-if="auth.loggedIn" />
             <CreateFavorite class="bdr-2 bg-bg_primary" v-if="auth.loggedIn" />
             <CreateActivity class="bdr-2 bg-bg_primary" v-if="auth.loggedIn" />
+            <CreateRowing class="bdr-2 bg-bg_primary" v-if="auth.loggedIn" />
         </div>
     </main>
 </template>

nginx/vue/src/views/admin/CreateRowing.vue

@@ -0,0 +1,46 @@
+<script setup>
+import Button from "@/components/input/Button.vue";
+import { ref } from "vue";
+import axios from "axios";
+
+const image = ref(null);
+const status = ref("");
+const error = ref("");
+
+function onFileChange(e) {
+    image.value = e.target.files[0] || null;
+}
+
+async function submit() {
+    if (!image.value) {
+        error.value = "Please select an image";
+        return;
+    }
+    error.value = "";
+    status.value = "Uploading...";
+
+    const formData = new FormData();
+    formData.append("image", image.value);
+
+    try {
+        const res = await axios.post("/api/rowing", formData, {
+            headers: { "Content-Type": "multipart/form-data" },
+        });
+        status.value = `Saved: ${res.data.Distance}m in ${Math.floor(res.data.Time / 1e9 / 60)}:${String(Math.floor((res.data.Time / 1e9) % 60)).padStart(2, "0")}`;
+        image.value = null;
+    } catch (err) {
+        status.value = "";
+        error.value = err.response?.data?.error || "Upload failed";
+    }
+}
+</script>
+
+<template>
+    <div class="flex flex-col gap-2">
+        <h1>Create Rowing</h1>
+        <input type="file" accept="image/jpeg,image/png,image/gif,image/webp" @change="onFileChange" />
+        <Button @click="submit">Upload</Button>
+        <p v-if="status">{{ status }}</p>
+        <p v-if="error" class="text-red-500">{{ error }}</p>
+    </div>
+</template>