177 lines
11 KiB
HTML
177 lines
11 KiB
HTML
{% extends "admin_base.html" %}
|
|
|
|
{% block title %}Plants{% endblock %}
|
|
|
|
{% block admin_content %}
|
|
<div class="bg-white rounded-lg shadow p-6">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h2 class="text-2xl font-bold">All Plants</h2>
|
|
<button id="show-add-plant" class="btn-main px-6 py-2 font-semibold">Add Plant</button>
|
|
</div>
|
|
<div id="add-plant-form-card" class="hidden mb-8">
|
|
<div class="bg-gray-50 rounded-lg shadow p-6 max-w-2xl mx-auto" style="overflow:visible;">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-xl font-bold">Add New Plant</h3>
|
|
<button type="button" id="close-add-plant" class="text-gray-500 hover:text-red-500 text-2xl font-bold leading-none">×</button>
|
|
</div>
|
|
<form id="add-plant-form" method="POST" action="{{ url_for('new_plant') }}" enctype="multipart/form-data" class="space-y-4 pb-16">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label for="name" class="block text-sm font-medium text-gray-700">Name</label>
|
|
<input type="text" name="name" id="name" required
|
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
|
|
</div>
|
|
<div>
|
|
<label for="picture" class="block text-sm font-medium text-gray-700">Picture</label>
|
|
<input type="file" name="picture" id="picture" accept="image/*"
|
|
class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-[#6b8f71] file:text-white hover:file:bg-[#5a7b5f]">
|
|
</div>
|
|
<div>
|
|
<label for="climate_id" class="block text-sm font-medium text-gray-700">Climate</label>
|
|
<select name="climate_id" id="climate_id" required
|
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
|
|
<option value="">Select a climate</option>
|
|
{% for climate in climates %}
|
|
<option value="{{ climate.id }}">{{ climate.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="environment_id" class="block text-sm font-medium text-gray-700">Environment</label>
|
|
<select name="environment_id" id="environment_id" required
|
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
|
|
<option value="">Select an environment</option>
|
|
{% for environment in environments %}
|
|
<option value="{{ environment.id }}">{{ environment.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="light_id" class="block text-sm font-medium text-gray-700">Light</label>
|
|
<select name="light_id" id="light_id" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
|
|
<option value="">Select light requirement</option>
|
|
{% for light in lights %}
|
|
<option value="{{ light.id }}">{{ light.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="toxicity_id" class="block text-sm font-medium text-gray-700">Toxicity</label>
|
|
<select name="toxicity_id" id="toxicity_id" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
|
|
<option value="">Select toxicity level</option>
|
|
{% for toxicity in toxicities %}
|
|
<option value="{{ toxicity.id }}">{{ toxicity.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="size_id" class="block text-sm font-medium text-gray-700">Size</label>
|
|
<select name="size_id" id="size_id" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
|
|
<option value="">Select size category</option>
|
|
{% for size in sizes %}
|
|
<option value="{{ size.id }}">{{ size.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="care_difficulty_id" class="block text-sm font-medium text-gray-700">Care Difficulty</label>
|
|
<select name="care_difficulty_id" id="care_difficulty_id" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
|
|
<option value="">Select difficulty level</option>
|
|
{% for difficulty in difficulties %}
|
|
<option value="{{ difficulty.id }}">{{ difficulty.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="growth_rate_id" class="block text-sm font-medium text-gray-700">Growth Rate</label>
|
|
<select name="growth_rate_id" id="growth_rate_id" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
|
|
<option value="">Select growth rate</option>
|
|
{% for rate in growth_rates %}
|
|
<option value="{{ rate.id }}">{{ rate.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="md:col-span-2">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Products</label>
|
|
<div class="flex flex-wrap gap-4">
|
|
{% for product in products %}
|
|
<label class="inline-flex items-center">
|
|
<input type="checkbox" name="product_ids" value="{{ product.id }}" class="form-checkbox rounded text-[#6b8f71] focus:ring-[#6b8f71]">
|
|
<span class="ml-2">{{ product.name }}</span>
|
|
</label>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<div class="md:col-span-2">
|
|
<label for="description" class="block text-sm font-medium text-gray-700">Description</label>
|
|
<textarea name="description" id="description" rows="6" required
|
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"></textarea>
|
|
</div>
|
|
<div class="md:col-span-2">
|
|
<label for="care_guide" class="block text-sm font-medium text-gray-700">Care Guide</label>
|
|
<div id="quill-care-guide" class="bg-white rounded border border-gray-300 mb-8" style="min-height: 120px;"></div>
|
|
<textarea name="care_guide" id="care_guide" style="display:none;"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-center">
|
|
<button type="submit" class="btn-main text-lg font-semibold px-8 py-3" style="margin-top: 85px;">
|
|
Add Plant
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full text-left text-sm">
|
|
<thead>
|
|
<tr class="border-b">
|
|
<th class="py-2 px-3">Name</th>
|
|
<th class="py-2 px-3">Added</th>
|
|
<th class="py-2 px-3">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for plant in plants %}
|
|
<tr class="border-b hover:bg-[#f5f7f2]">
|
|
<td class="py-2 px-3 font-semibold">{{ plant.name }}</td>
|
|
<td class="py-2 px-3"><span class="local-date" data-date="{{ plant.date_added.isoformat() }}"></span></td>
|
|
<td class="py-2 px-3">
|
|
<a href="{{ url_for('edit_plant', plant_id=plant.id) }}" class="btn-edit">Edit</a>
|
|
<form id="delete-plant-{{ plant.id }}" method="POST" action="{{ url_for('delete_plant', plant_id=plant.id) }}" style="display:inline;">
|
|
<button type="button" onclick="showDeleteModal('delete-plant-{{ plant.id }}', 'Are you sure you want to delete {{ plant.name }}?')" class="btn-delete ml-2">Delete</button>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
{% else %}
|
|
<tr><td colspan="5" class="py-4 text-center text-gray-500">No plants found.</td></tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
|
|
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
|
|
<script>
|
|
document.getElementById('show-add-plant').onclick = function() {
|
|
var card = document.getElementById('add-plant-form-card');
|
|
card.classList.toggle('hidden');
|
|
if (!card.classList.contains('hidden')) {
|
|
card.scrollIntoView({behavior: 'smooth'});
|
|
}
|
|
};
|
|
document.getElementById('close-add-plant').onclick = function() {
|
|
document.getElementById('add-plant-form-card').classList.add('hidden');
|
|
};
|
|
var quill = new Quill('#quill-care-guide', { theme: 'snow' });
|
|
document.getElementById('add-plant-form').onsubmit = function() {
|
|
document.getElementById('care_guide').value = quill.root.innerHTML;
|
|
};
|
|
// Auto-open the add plant form if ?add=1 is in the URL
|
|
if (window.location.search.includes('add=1')) {
|
|
document.getElementById('add-plant-form-card').classList.remove('hidden');
|
|
setTimeout(() => {
|
|
document.getElementById('add-plant-form-card').scrollIntoView({behavior: 'smooth'});
|
|
}, 100);
|
|
}
|
|
</script>
|
|
{% endblock %} |