add input field component

VovaStelmashchuk · Jan 11, 2025 · 97dbb6a · 97dbb6a
1 parent e4a18fc
commit 97dbb6a
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 44 deletions.
diff --git a/components/InputField.vue b/components/InputField.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <label :for="id" class="block text-sm font-medium text-gray-700 mb-1">
+      {{ label }}
+    </label>
+    <input
+      :id="id"
+      :type="type"
+      :placeholder="placeholder"
+      class="w-full border border-gray-300 rounded-lg shadow-sm p-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+      :value="modelValue"
+      @input="$emit('update:modelValue', $event.target.value)"
+    />
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  id: { type: String, required: true },
+  label: { type: String, required: true },
+  modelValue: { type: [String, Number], required: true }, // For v-model binding
+  type: { type: String, default: "text" },
+  placeholder: { type: String, default: "" },
+});
+</script>
diff --git a/pages/project/[slug].vue b/pages/project/[slug].vue
@@ -48,45 +48,27 @@
           Nesting settings
         </h2>
         <div class="flex flex-col space-y-4 p-4">
-          <div>
-            <label
-              for="width"
-              class="block text-sm font-medium text-gray-700 mb-1"
-              >Width</label
-            >
-            <input
-              id="width"
-              type="text"
-              v-model="widthPlate"
-              class="w-full border border-gray-300 rounded-lg shadow-sm p-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
-            />
-          </div>
-          <div>
-            <label
-              for="height"
-              class="block text-sm font-medium text-gray-700 mb-1"
-              >Height</label
-            >
-            <input
-              id="height"
-              type="text"
-              v-model="heightPlate"
-              class="w-full border border-gray-300 rounded-lg shadow-sm p-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
-            />
-          </div>
-          <div>
-            <label
-              for="tolerance"
-              class="block text-sm font-medium text-gray-700 mb-1"
-              >Tolerance</label
-            >
-            <input
-              id="tolerance"
-              type="text"
-              v-model="tolerance"
-              class="w-full border border-gray-300 rounded-lg shadow-sm p-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
-            />
-          </div>
+          <InputField
+            id="width"
+            label="Width"
+            v-model="widthPlate"
+            placeholder="Enter width"
+          />
+
+          <InputField
+            id="height"
+            label="Height"
+            v-model="heightPlate"
+            placeholder="Enter height"
+          />
+
+          <InputField
+            id="tolerance"
+            label="Tolerance"
+            v-model="tolerance"
+            placeholder="Enter tolerance"
+          />
+
           <div>
             <span class="text-2xl font-bold text-black my-2 text-center">
               Files selected: {{ selectedFileCount }}

diff --git a/server/api/project/[slug]/nest.post.js b/server/api/project/[slug]/nest.post.js
@@ -31,5 +31,8 @@ export default defineEventHandler(async (event) => {
   return {
     message: message,
     usage: nestResult.usage,
+    nestResult: {
+      svg: nestResult.svg.svg,
+    },
   };
 });
diff --git a/server/core/nest.js b/server/core/nest.js
@@ -6,11 +6,15 @@ import { connectDB } from "~~/server/db/mongo";
 
 import fs from "fs";
 import { generateSvg } from "./svg/generator";
+import { generateRandomString } from "../utils/strings";
 
 export async function nest(files, params, projectSlug) {
   const db = await connectDB();
+  const nestedSlug = `${projectSlug}-nested-${generateRandomString(4)}`;
+
   const nestRequestInsert = await db.collection("nest_request").insertOne({
-    slug: projectSlug,
+    slug: nestedSlug,
+    projectSlug: projectSlug,
     files: files,
     params: params,
     requestedAt: new Date(),
@@ -59,16 +63,29 @@ export async function nest(files, params, projectSlug) {
 
   originDxfObject.__entities = newEntities;
 
+  await db
+    .collection("nest_request")
+    .updateOne(
+      { _id: nestRequestInsert.insertedId },
+      { $set: { dxfResultAsObject: originDxfObject } }
+    );
+
   const svg = generateSvg(originDxfObject);
 
   await db
     .collection("nest_request")
     .updateOne({ _id: nestRequestInsert.insertedId }, { $set: { svg: svg } });
 
-  fs.writeFileSync(
-    "test.dxf",
-    json2Dxf({ jsonData: JSON.stringify(originDxfObject) })
-  );
+  const dxfAsString = json2Dxf({ jsonData: JSON.stringify(originDxfObject) });
+
+  await db
+    .collection("nest_request")
+    .updateOne(
+      { _id: nestRequestInsert.insertedId },
+      { $set: { dxfResult: dxfAsString } }
+    );
+
+  fs.writeFileSync("test.dxf", dxfAsString);
 
   return nestRequestInsert.insertedId;
 }