Static file and tailwind conf

app/static/css/recipe_form.css

@@ -1,50 +1,74 @@
-.directions-section {
-	margin-bottom: 20px;
+.input-group {
+	display: flex;
+	align-items: center;
+	gap: 8px;
 }
 
-.direction-row {
-	display: flex;
-	align-items: flex-start;
-	margin-bottom: 10px;
+.input-group input {
+	flex: 1;
 }
 
-.direction-step-number {
-	width: 30px;
-	font-size: 1.5rem;
-	margin-right: 10px;
+.recipe-card {
+	border: 1px solid #E5E7EB;
+	padding: 16px;
+	border-radius: 8px;
+	background-color: #F9FAFB;
+	margin-bottom: 16px;
 }
 
-.direction-input {
-	flex: 1;
-	padding: 8px;
+.dropdown-menu {
+	position: absolute;
+	display: none;
+	max-width: 100%;
+	box-sizing: border-box;
+	background-color: #ffffff;
+	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+	border-radius: 0 0 0.375rem 0.375rem;
+	z-index: 100;
 	border: 1px solid #ccc;
-	border-radius: 4px;
-	resize: vertical;
-	min-height: 50px;
 }
 
-.remove-direction-btn {
-	background-color: #e74c3c;
-	color: white;
-	border: none;
-	padding: 8px 12px;
-	margin-left: 10px;
-	cursor: pointer;
-	border-radius: 4px;
+.dropdown-menu.show {
+	display: block;
 }
 
-.add-direction-btn {
-	background-color: #3498db;
-	color: white;
-	border: none;
-	padding: 10px 20px;
+.dropdown-item {
+	padding: 8px 16px;
 	cursor: pointer;
-	border-radius: 4px;
+	white-space: nowrap;
+	}
+
+	.dropdown-item:hover {
+		background-color: #F3F4F6;
+	}
+
+	.image-container {
+		position: relative;
+		width: 100%;
+		height: 60vh;
+		/* Increase the height as needed */
+		background-color: #e2e8f0;
+		/* Matching gray color */
+		border-radius: 0.375rem;
+		/* Rounded corners */
+		display: flex;
+		align-items: center;
+		justify-content: center;
 }
 
-.recipe-image {
-	max-width: 100%;
-	height: auto;
-	border-radius: 8px;
-	margin-bottom: 15px;
-}
+.image-preview {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	/* Ensure the image covers the container without distortion */
+	display: none;
+	/* Hide initially */
+	border-radius: 0.375rem;
+	/* Match rounded corners */
+}
+
+.button-container {
+	position: absolute;
+	bottom: 1rem;
+	right: 1rem;
+}

app/static/js/recipe_form.js

@@ -1,56 +1,134 @@
+// handle upload
 document.addEventListener('DOMContentLoaded', function ()
+{ 
+	document.getElementById('add-photo-btn').addEventListener('click', function (event)
+	{
+		event.preventDefault(); // Prevent default button action
+		document.getElementById('image-input').click();
+	});
+
+	document.getElementById('image-input').addEventListener('change', function (event)
+	{
+		const file = event.target.files[0];
+		if (file)
+		{
+			const reader = new FileReader();
+			reader.onload = function (e)
+			{
+				const imagePreview = document.getElementById('image-preview');
+				console.log('Image data URL:', e.target.result); // Debugging
+				imagePreview.src = e.target.result;
+				imagePreview.style.display = 'block'; // Show the image preview
+			};
+			reader.readAsDataURL(file);
+		}
+	});
+
+});
+
+// handle form drop down - not using select input
+function toggleDropdown()
 {
-	const ingredientsList = document.getElementById('ingredients-list');
-	const addIngredientBtn = document.getElementById('add-ingredient-btn');
-	const directionsList = document.getElementById('directions-list');
-	const addDirectionBtn = document.getElementById('add-direction-btn');
+	const dropdownMenu = document.getElementById('dropdownMenu');
+	dropdownMenu.classList.toggle('show');
+}
 
-	addIngredientBtn.addEventListener('click', function ()
+function selectCategory(categoryName, categoryId)
+{
+	const categoryInput = document.getElementById('categoryInput');
+	const categoryIdInput = document.getElementById('categoryIdInput');
+
+	// Set the selected category name in the visible input
+	categoryInput.value = categoryName;
+	// Set the selected category ID in the hidden input
+	categoryIdInput.value = categoryId;
+	toggleDropdown();
+}
+
+// Close dropdown if clicked outside
+document.addEventListener('click', function (event)
+{
+	const dropdownMenu = document.getElementById('dropdownMenu');
+	const categoryInput = document.getElementById('categoryInput');
+	if (!categoryInput.contains(event.target) && !dropdownMenu.contains(event.target))
 	{
-		const ingredientRow = document.createElement('div');
-		ingredientRow.classList.add('ingredient-row');
+		dropdownMenu.classList.remove('show');
+	}
+});
 
-		ingredientRow.innerHTML = `
-            <input type="text" name="ingredients[]" class="ingredient-input" placeholder="Enter ingredient" required />
-            <button type="button" class="remove-ingredient-btn">X</button>
-        `;
 
-		ingredientsList.appendChild(ingredientRow);
 
-		// Add event listener to the remove button
-		ingredientRow.querySelector('.remove-ingredient-btn').addEventListener('click', function ()
-		{
-			ingredientsList.removeChild(ingredientRow);
-		});
-	});
+// Add ingredient functionality
+function addIngredient()
+{
+	const ingredientCard = document.createElement('div');
+	ingredientCard.className = 'recipe-card';
+	ingredientCard.innerHTML = `
+                <div class="input-group ingredient-card">
+                    <input type="text" name="ingredients[]" class="w-full p-2 border border-gray-300 rounded" placeholder="New ingredient">
+                    <button type="button" class="text-red-500 hover:text-red-700" onclick="removeIngredient(this)">×</button>
+                </div>
+            `;
+	document.getElementById('ingredients-list').appendChild(ingredientCard);
+}
 
-	addDirectionBtn.addEventListener('click', function ()
-	{
-		const directionCount = directionsList.children.length + 1;
-		const directionRow = document.createElement('div');
-		directionRow.classList.add('direction-row');
+function removeIngredient(element)
+{
+	element.closest('.recipe-card').remove();
+}
 
-		directionRow.innerHTML = `
-            <div class="direction-step-number">${directionCount}</div>
-            <textarea name="directions[]" class="direction-input" placeholder="Enter instruction..." required></textarea>
-            <button type="button" class="remove-direction-btn">X</button>
-        `;
+// Add direction functionality
+function addDirection()
+{
+	const directionCard = document.createElement('div');
+	directionCard.className = 'recipe-card';
+	directionCard.innerHTML = `
+                <div class="input-group direction-card">
+                    <input type="text" name="instructions[]" class="w-full p-2 border border-gray-300 rounded" placeholder="Add new Instruction">
+                    <button type="button" class="text-red-500 hover:text-red-700" onclick="removeDirection(this)">×</button>
+                </div>
+            `;
+	document.getElementById('directions-list').appendChild(directionCard);
+}
 
-		directionsList.appendChild(directionRow);
+function removeDirection(element)
+{
+	element.closest('.recipe-card').remove();
+}
 
-		// Add event listener to the remove button
-		directionRow.querySelector('.remove-direction-btn').addEventListener('click', function ()
-		{
-			directionsList.removeChild(directionRow);
-			updateStepNumbers();
-		});
-	});
+//SortableJS Script for Drag-and-Drop
+// Enable sorting for ingredients and directions
+new Sortable(document.getElementById('ingredients-list'), {
+	animation: 150,
+	ghostClass: 'bg-yellow-100'
+});
+new Sortable(document.getElementById('directions-list'), {
+	animation: 150,
+	ghostClass: 'bg-yellow-100'
+});
 
-	function updateStepNumbers()
+
+
+document.addEventListener('DOMContentLoaded', function ()
+{
+	// Handle form submission and log to console
+	document.getElementById('recipe-form').addEventListener('submit', function (event)
 	{
-		document.querySelectorAll('.direction-step-number').forEach((step, index) =>
-		{
-			step.textContent = index + 1;
-		});
-	}
-});
+		// event.preventDefault(); // Prevent form from submitting
+
+		// Get all ingredients
+		const ingredients = Array.from(document.querySelectorAll('.ingredient-card input')).map(
+			input => input.value).filter(value => value.trim() != '');
+
+		// Get all directions
+		const directions = Array.from(document.querySelectorAll('.direction-card input')).map(
+			input => input.value).filter(value => value.trim() != '');
+
+		// Log the data to the console
+		console.log('Ingredients:', ingredients);
+		console.log('Directions:', directions);
+
+		// You can remove or comment out this part when you want to submit to the backend
+		this.submit();  // Uncomment to submit the form to the backend after testing
+	});
+ });

app/static/js/scripts.js

@@ -7,6 +7,6 @@ document.addEventListener('DOMContentLoaded', function ()
 		setTimeout(function ()
 		{
 			flash.style.display = 'none';
-		}, 3000); // Flash message disappears after 3 seconds
+		}, 5000); // Flash message disappears after 5 seconds
 	});
 });