src/pages/recipe/new.astro

@@ -9,27 +9,82 @@ async function submitRecipe() {
 }
 
 ---
-<script src="@/script/newRecipe.ts"/>
+
+<!-- INGREDIENT SCRIPT -->
+<script>
+    let ingredientFields: HTMLInputElement[] = []
+    let ingredientTable: HTMLTableSectionElement = document.querySelector('#ingredient-table')!
+    let ingredientAddButton: HTMLButtonElement = document.querySelector('#add-ingredient-btn')!
+    
+    document.addEventListener('DOMContentLoaded', function() {
+        
+        ingredientFields.push(
+            document.querySelector('#ing-qty')!,
+            document.querySelector('#ing-unit')!,
+            document.querySelector('#ing-name')!
+        )
+        
+        // show plus button once the user clicks off one of the text fields
+        ingredientFields.forEach(f => f.addEventListener('beforeinput', showAddIngredientButton))
+        // onclick for add button
+        document.querySelector('#add-ingredient-btn')?.addEventListener('click', addIngredient);
+        // for pressing enter to reset cursor
+        ingredientFields[2].addEventListener('keyup', e => clearInputFields(e))
+    });
+    
+    let ingredients: {qty: string, unit: string, name: string}[] = []
+    function addIngredient() {
+        const ing = {
+            qty: ingredientFields[0].value,
+            unit: ingredientFields[1].value,
+            name: ingredientFields[2].value
+        }
+
+        ingredients.push(ing)
+        
+        const newRow = document.createElement('tr')
+        newRow.innerHTML = `
+            <td class="px-4 py-2 border-t border-white/10">${ing.qty}</td>
+            <td class="px-4 py-2 border-t border-white/10">${ing.unit}</td>
+            <td class="px-4 py-2 border-t border-white/10">${ing.name}</td>
+        `
+        
+        ingredientTable.appendChild(newRow)
+        ingredientFields.forEach(f => f.value = '')
+        ingredientAddButton.style.display = 'none'
+    }
+
+    function clearInputFields(e: KeyboardEvent) {
+        // clear input fields
+        if (e.key === 'Enter') {
+            addIngredient()
+            ingredientFields.forEach(f => f.value == '')
+            // move cursor to Qty field again
+            ingredientFields[0].focus()
+        }
+    }
+
+    function showAddIngredientButton() {
+        // only show if there is text in the field
+
+        if (ingredientFields[0].value && ingredientFields[2].value) {
+            ingredientAddButton.style.display = 'block'
+        } else {
+            ingredientAddButton.style.display = 'hidden'
+        }
+    }
+</script>
 
 <SiteLayout>
     <div class="flex flex-col md:flex-row mx-auto justify-center w-full lg:max-w-3/4 xl:max-w-2/3 2xl:max-w-1/2">
         <div class="flex md:flex-1/3 flex-col mt-2 md:mt-4 sticky">
-            <div class="relative">
+            <div class="w-full bg-white/10 rounded-lg h-50">
-                <input 
+                Image Upload
-                    id="photo" 
-                    type="file" 
-                    accept="image/png,image/jpeg" 
-                    class="w-full bg-white/10 rounded-lg h-50
-                           file:mr-4 file:py-2 file:px-4 
-                           file:rounded-lg file:border-0 file:hidden
-                           before:content-['camera'] before:w-full before:h-full before:flex 
-                           before:items-center before:justify-center before:absolute
-                           relative cursor-pointer
-                           [&::-webkit-file-upload-button]:hidden"
-                >
             </div>
+            <!-- <ImageCarousel class="w-full" recipe={re} /> -->
             <textarea
                 id="rec-name"
+                name="name"
                 rows="1"
                 placeholder="Name"
                 class="text-[28pt] font-bold p-1 leading-none mt-2 bg-white/10 rounded-lg resize-none overflow-hidden"
@@ -42,7 +97,7 @@ async function submitRecipe() {
 
             <div class="flex flex-row align-middle items-center">
                 <p class="mt-4 text-[22pt] font-bold 'mt-4'">Ingredients</p>
-                <button class="hidden ml-auto mt-5 text-white bg-white/10 rounded-lg px-3 py-1 " id="add-ingredient-btn" >Add</button>
+                <button class="hidden" id="add-ingredient-btn">add</button>
             </div>
             <table class={`table-fixed  text-left bg-[#2a2b2c] rounded-lg w-full`}>
                 <thead>
@@ -69,22 +124,12 @@ async function submitRecipe() {
             </table>
         </div>
         
-        <ul class="flex mt-4 md:flex-2/3 w-full flex-col">
+        <div class="flex mt-4 md:flex-2/3 w-full flex-col">
             <!-- <p class="hidden md:block text-[28pt] font-bold pl-5">Helloi</p> -->
 
             <!-- Steps -->
-            <p class="text-[22pt] font-bold md:hidden">Steps</p>
+            <!-- <StepView steps={steps} /> -->
- 
+        </div>
-            <div class="bg-[#2a2b2c] md:ml-3 rounded-lg mb-2 p-2">
-                <!-- <p class="text-bold text-[10pt]">Step</p> -->
-                <textarea
-                        id="new-instruction"
-                        class="bg-white/10 w-full h-full rounded-lg resize-none px-3 py-1"
-                        placeholder="New Step"
-                        oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"
-                    />
-            </div>
-        </ul>
 
     </div>
 </SiteLayout>

src/script/newRecipe.ts

@@ -1,69 +0,0 @@
-let ingredientFields: HTMLInputElement[] = []
-let ingredientTable: HTMLTableSectionElement = document.querySelector('#ingredient-table')!
-let ingredientAddButton: HTMLButtonElement = document.querySelector('#add-ingredient-btn')!
-
-// - VARS
-let ingredients: {qty: string, unit: string, name: string}[] = []
-let steps: {
-    name: string,
-    description: string,
-    servings: number,
-    rating: number,
-    worktime: number,
-    waittime: number,
-    images: string[], // record ID of uploaded image
-
-}[] = []
-
-// - INIT
-document.addEventListener('DOMContentLoaded', function() {
-    
-    ingredientFields.push(
-        document.querySelector('#ing-qty')!,
-        document.querySelector('#ing-unit')!,
-        document.querySelector('#ing-name')!
-    )
-    
-    // show plus button once the user clicks off one of the text fields
-    ingredientFields.forEach(f => f.addEventListener('beforeinput', showAddIngredientButton))
-    // onclick for add button
-    document.querySelector('#add-ingredient-btn')?.addEventListener('click', addIngredient);
-    // for pressing enter to reset cursor
-    ingredientFields[2].addEventListener('keyup', e => {if (e.key === 'Enter') addIngredient()} )
-});
-
-// - ADD
-function addIngredient() {
-    const ing = {
-        qty: ingredientFields[0].value,
-        unit: ingredientFields[1].value,
-        name: ingredientFields[2].value
-    }
-
-    ingredients.push(ing)
-    
-    const newRow = document.createElement('tr')
-    newRow.innerHTML = `
-        <td class="px-4 py-2 border-t border-white/10">${ing.qty}</td>
-        <td class="px-4 py-2 border-t border-white/10">${ing.unit}</td>
-        <td class="px-4 py-2 border-t border-white/10">${ing.name}</td>
-    `
-    
-    // Add row to table and clear fields
-    ingredientTable.appendChild(newRow)
-    ingredientFields.forEach(f => f.value = '')
-    ingredientAddButton.style.display = 'none' // Hide Add Ingredient button
-    // move cursor to Qty field again
-    ingredientFields[0].focus()
-}
-
-// - UTILS
-function showAddIngredientButton() {
-    // only show if there is text in the field
-
-    if (ingredientFields[0].value && ingredientFields[2].value) {
-        ingredientAddButton.style.display = 'block'
-    } else {
-        ingredientAddButton.style.display = 'hidden'
-    }
-}

tsconfig.json

@@ -7,7 +7,6 @@
     "paths": {
 			"@/components/*": ["src/components/*.astro"],
 			"@/layouts/*": ["src/layouts/*.astro"],
-			"@/script/*": ["src/script/*"],
 			"@/utils": ["src/utils/index.ts"],
 			"@/data/*": ["src/data/*"],
 			"@/site-config": ["src/site.config.ts"]