move project to separated item

components/DxfUpload.vue

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <label
+      for="dxfFiles"
+      class="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:border-gray-400 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-black"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="w-12 h-12 text-black"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        stroke-width="2"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M12 4v16m8-8H4"
+        />
+      </svg>
+      <span class="mt-2 text-l text-black">
+        Drag & drop or click to upload DXF files
+      </span>
+    </label>
+    <input
+      type="file"
+      id="dxfFiles"
+      name="dxf"
+      accept=".dxf"
+      multiple
+      @change="onDXFChange"
+      class="hidden"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DxfUpload",
+  methods: {
+    onDXFChange(event) {
+      const files = Array.from(event.target.files);
+      this.$emit("files", files);
+    },
+  },
+};
+</script>
+
+<style scoped></style>

layouts/default.vue

@@ -17,14 +17,17 @@
         <a
           href="/"
           class="flex-1 text-xl text-center text-white bg-black hover:bg-white hover:text-black py-4"
-        >
-          Projects
+          ><p class="underline underline-offset-2">Nest your project</p>
+        </a>
+        <a
+          href="/projects"
+          class="flex-1 text-xl text-center text-white bg-black hover:bg-white hover:text-black py-4"
+          ><p class="underline underline-offset-2">Projects</p>
         </a>
         <a
           href="/blog"
           class="flex-1 text-xl text-center text-white bg-black hover:bg-white hover:text-black py-4"
-        >
-          Blog
+          ><p class="underline underline-offset-2">Blog</p>
         </a>
       </div>
     </header>

pages/index.vue

@@ -1,28 +1,5 @@
 <template>
-  <div class="container mx-auto p-4">
-    <div
-      class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"
-    >
-      <div v-if="pending" class="col-span-full text-center text-gray-500">
-        Loading projects...
-      </div>
-
-      <UploadProjectCard />
-
-      <ProjectGridItem
-        v-for="project in data.projects"
-        :key="project.slug"
-        :imageSrc="project.imageUrl"
-        :imageAlt="project.projectName"
-        :text="project.projectName"
-      />
-    </div>
-  </div>
+  <h2>index page</h2>
 </template>
 
-<script setup>
-import { useFetch } from "#app";
-const { data, pending } = useFetch("/api/projects");
-</script>
-
-<style scoped></style>
+<script></script>

pages/project/[slug].vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="container mx-auto p-4">
+    <h2 class="text-3xl font-semibold text-center text-black">Project</h2>
+  </div>
+</template>
+
+<script setup>
+import { useRoute } from "vue-router";
+import { useFetch } from "#app";
+
+const route = useRoute();
+const slug = route.params.slug;
+
+console.log(slug);
+</script>
+
+<style scoped></style>

pages/projects.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="container mx-auto p-4">
+    <div
+      class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"
+    >
+      <div v-if="pending" class="col-span-full text-center text-gray-500">
+        Loading projects...
+      </div>
+
+      <UploadProjectCard />
+
+      <ProjectGridItem
+        v-for="project in data.projects"
+        :key="project.slug"
+        :imageSrc="project.imageUrl"
+        :imageAlt="project.projectName"
+        :text="project.projectName"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useFetch } from "#app";
+const { data, pending } = useFetch("/api/projects");
+</script>
+
+<style scoped></style>

pages/upload.vue

@@ -60,42 +60,12 @@
 
       <div class="mb-6">
         <label
-          for="dxfFiles"
+          for="dxfFilesLabel"
           class="block text-xl font-medium text-gray-800 mb-2"
         >
           DXF Files
         </label>
-        <label
-          for="dxfFiles"
-          class="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:border-gray-400 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-black"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="w-12 h-12 text-black"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            stroke-width="2"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M12 4v16m8-8H4"
-            />
-          </svg>
-          <span class="mt-2 text-l text-black">
-            Drag & drop or click to upload DXF files
-          </span>
-        </label>
-        <input
-          type="file"
-          id="dxfFiles"
-          name="dxf"
-          accept=".dxf"
-          multiple
-          @change="handleDXFUpload"
-          class="hidden"
-        />
+        <DxfUpload @files="handleDxfChange" />
       </div>
 
       <button
@@ -123,12 +93,17 @@
 </template>
 
 <script>
+import DxfUpload from "~/components/DxfUpload.vue";
+
 export default {
+  components: {
+    DxfUpload,
+  },
   data() {
     return {
       projectName: "",
       imageFile: null,
-      dxfFiles: [],
+      dxfFiles: [], // Will be updated via the DxfUpload component
       message: "",
       error: "",
     };
@@ -137,22 +112,30 @@ export default {
     handleImageUpload(event) {
       this.imageFile = event.target.files[0];
     },
-    handleDXFUpload(event) {
-      this.dxfFiles = Array.from(event.target.files);
+    handleDxfChange(files) {
+      this.dxfFiles = files;
+      console.log("from child DXF files event: ", files);
     },
     async handleSubmit() {
       try {
         this.message = "";
         this.error = "";
 
-        if (!this.projectName) throw new Error("Project name is required.");
-        if (!this.imageFile) throw new Error("An image file is required.");
-        if (this.dxfFiles.length === 0)
+        if (!this.projectName) {
+          throw new Error("Project name is required.");
+        }
+        if (!this.imageFile) {
+          throw new Error("An image file is required.");
+        }
+        if (this.dxfFiles.length === 0) {
           throw new Error("At least one DXF file is required.");
+        }
 
         const formData = new FormData();
         formData.append("projectName", this.projectName);
         formData.append("image", this.imageFile);
+
+        // Append each of our DXF files
         this.dxfFiles.forEach((file) => formData.append("dxf", file));
 
         const response = await fetch("/api/upload", {

server/api/project/[slug].get.js

@@ -0,0 +1,19 @@
+import { connectDB } from "~~/server/db/mongo";
+
+export default defineEventHandler(async (event) => {
+  const slug = getRouterParam(event, "slug");
+
+  const db = await connectDB();
+  const project = await db.collection("projects_v2").findOne({ slug: slug });
+
+  if (!project) {
+    return { statusCode: 404, body: { error: "Project not found" } };
+  }
+
+  const response = {
+    projectName: project.projectName,
+  };
+
+  event.node.res.setHeader("Content-Type", "image/jpeg");
+  return project.image.buffer;
+});

server/api/project/[slug]/preview.get.js

@@ -0,0 +1,15 @@
+import { connectDB } from "~~/server/db/mongo";
+
+export default defineEventHandler(async (event) => {
+  const slug = getRouterParam(event, "slug");
+
+  const db = await connectDB();
+  const project = await db.collection("projects_v2").findOne({ slug: slug });
+
+  if (!project) {
+    return { statusCode: 404, body: { error: "Project not found" } };
+  }
+
+  event.node.res.setHeader("Content-Type", "image/jpeg");
+  return project.image.buffer;
+});

server/api/upload.js

@@ -16,7 +16,7 @@ export default defineEventHandler(async (event) => {
     const imageBuffer = getImageBuffer(imageField);
 
     const dxfFileFields = fields.filter((field) => field.name === "dxf");
-    const dxfStrings = getDxfStringArray(dxfFileFields);
+    const dxfStrings = getDxfArray(dxfFileFields);
 
     const db = await connectDB();
     await db.collection("projects_v2").insertOne({
@@ -65,7 +65,7 @@ function getImageBuffer(field) {
   return imageBuffer;
 }
 
-function getDxfStringArray(fields) {
+function getDxfArray(fields) {
   return fields.map((field) => {
     const dxfBuffer = field.data;
     if (!dxfBuffer) {
@@ -75,6 +75,11 @@ function getDxfStringArray(fields) {
       });
     }
 
-    return dxfBuffer.toString();
+    const dxfString = dxfBuffer.toString();
+
+    return {
+      filename: field.filename,
+      data: dxfString,
+    };
   });
 }