gilles/jardin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

avant codex

Browse Source
This commit is contained in:
gilles soulier
2026-02-22 15:05:40 +01:00
parent fed449c784
commit 20af00d653
291 changed files with 51868 additions and 424 deletions
Download Patch File Download Diff File Expand all files Collapse all files

361
frontend/src/views/PlantesView.vue Normal file
View File

@@ -0,0 +1,361 @@
<template>
<div class="p-4 max-w-4xl mx-auto">
<div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold text-green">🌱 Plantes</h1>
<button @click="showForm = true" class="bg-green text-bg px-4 py-2 rounded-lg text-sm font-semibold hover:opacity-90">+ Ajouter</button>
</div>
<!-- Filtres catégorie -->
<div class="flex gap-2 mb-4 flex-wrap">
<button v-for="cat in categories" :key="cat.val"
@click="selectedCat = cat.val"
:class="['px-3 py-1 rounded-full text-xs font-medium transition-colors',
selectedCat === cat.val ? 'bg-green text-bg' : 'bg-bg-soft text-text-muted hover:text-text']">
{{ cat.label }}
</button>
</div>
<!-- Liste -->
<div v-if="plantsStore.loading" class="text-text-muted text-sm">Chargement...</div>
<div v-else-if="!filteredPlants.length" class="text-text-muted text-sm py-4">Aucune plante.</div>
<div v-for="p in filteredPlants" :key="p.id"
class="bg-bg-soft rounded-lg mb-2 border border-bg-hard overflow-hidden">
<!-- En-tête cliquable -->
<div class="p-4 flex items-start justify-between gap-4 cursor-pointer"
@click="toggleDetail(p.id!)">
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2 mb-1 flex-wrap">
<span class="text-text font-semibold">{{ p.nom_commun }}</span>
<span v-if="p.variete" class="text-text-muted text-xs">— {{ p.variete }}</span>
<span v-if="p.categorie" :class="['text-xs px-2 py-0.5 rounded-full font-medium', catClass(p.categorie)]">{{ catLabel(p.categorie) }}</span>
</div>
<div class="text-text-muted text-xs flex gap-3 flex-wrap">
<span v-if="p.famille">🌿 {{ p.famille }}</span>
<span v-if="p.espacement_cm">↔ {{ p.espacement_cm }}cm</span>
<span v-if="p.besoin_eau">💧 {{ p.besoin_eau }}</span>
<span v-if="p.plantation_mois">🌱 Plantation: mois {{ p.plantation_mois }}</span>
</div>
</div>
<div class="flex items-center gap-2 shrink-0">
<span class="text-text-muted text-xs">{{ openId === p.id ? '▲' : '▼' }}</span>
<button @click.stop="startEdit(p)" class="text-yellow text-xs hover:underline">Édit.</button>
<button @click.stop="removePlant(p.id!)" class="text-red text-xs hover:underline">Suppr.</button>
</div>
</div>
<!-- Panneau détail -->
<div v-if="openId === p.id" class="border-t border-bg-hard px-4 pb-4 pt-3">
<!-- Notes -->
<p v-if="p.notes" class="text-text-muted text-sm mb-3 italic">{{ p.notes }}</p>
<!-- Galerie photos -->
<div class="mb-2 flex items-center justify-between">
<span class="text-text-muted text-xs font-medium uppercase tracking-wide">Photos</span>
<button @click="openUpload(p)" class="text-green text-xs hover:underline">+ Ajouter une photo</button>
</div>
<div v-if="loadingPhotos" class="text-text-muted text-xs">Chargement...</div>
<div v-else-if="!plantPhotos.length" class="text-text-muted text-xs mb-3">Aucune photo pour cette plante.</div>
<div v-else class="grid grid-cols-4 gap-2 mb-3">
<div v-for="m in plantPhotos" :key="m.id"
class="aspect-square rounded overflow-hidden bg-bg-hard relative group cursor-pointer"
@click="lightbox = m">
<img :src="m.thumbnail_url || m.url" class="w-full h-full object-cover" />
<div v-if="m.identified_common"
class="absolute bottom-0 left-0 right-0 bg-black/70 text-xs text-green px-1 py-0.5 truncate">
{{ m.identified_common }}
</div>
<button @click.stop="deletePhoto(m)" class="hidden group-hover:flex absolute top-1 right-1 bg-red/80 text-white text-xs rounded px-1">✕</button>
</div>
</div>
<!-- Lier une photo existante de la bibliothèque -->
<button @click="openLinkPhoto(p)" class="text-blue text-xs hover:underline">
🔗 Lier une photo existante de la bibliothèque
</button>
</div>
</div>
<!-- Modal formulaire création / édition -->
<div v-if="showForm || editPlant" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="closeForm">
<div class="bg-bg-hard rounded-xl p-6 w-full max-w-md border border-bg-soft max-h-[90vh] overflow-y-auto">
<h2 class="text-text font-bold text-lg mb-4">{{ editPlant ? 'Modifier la plante' : 'Nouvelle plante' }}</h2>
<form @submit.prevent="submitPlant" class="flex flex-col gap-3">
<input v-model="form.nom_commun" placeholder="Nom commun *" required
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
<input v-model="form.nom_botanique" placeholder="Nom botanique"
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
<input v-model="form.variete" placeholder="Variété"
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
<input v-model="form.famille" placeholder="Famille botanique"
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
<select v-model="form.categorie"
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green">
<option value="">Catégorie</option>
<option value="potager">Potager</option>
<option value="fleur">Fleur</option>
<option value="arbre">Arbre</option>
<option value="arbuste">Arbuste</option>
<option value="adventice">Adventice (mauvaise herbe)</option>
</select>
<select v-model="form.type_plante"
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green">
<option value="">Type</option>
<option value="legume">Légume</option>
<option value="fruit">Fruit</option>
<option value="aromatique">Aromatique</option>
<option value="fleur">Fleur</option>
<option value="adventice">Adventice</option>
</select>
<select v-model="form.besoin_eau"
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green">
<option value="">Besoin en eau</option>
<option value="faible">Faible</option>
<option value="moyen">Moyen</option>
<option value="élevé">Élevé</option>
</select>
<select v-model="form.besoin_soleil"
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green">
<option value="">Ensoleillement</option>
<option value="ombre">Ombre</option>
<option value="mi-ombre">Mi-ombre</option>
<option value="plein soleil">Plein soleil</option>
</select>
<div class="flex gap-2">
<input v-model.number="form.espacement_cm" type="number" placeholder="Espacement (cm)"
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm flex-1 outline-none focus:border-green" />
<input v-model.number="form.temp_min_c" type="number" placeholder="T° min (°C)"
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm flex-1 outline-none focus:border-green" />
</div>
<input v-model="form.plantation_mois" placeholder="Mois plantation (ex: 3,4,5)"
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
<input v-model="form.recolte_mois" placeholder="Mois récolte (ex: 7,8,9)"
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
<textarea v-model="form.notes" placeholder="Notes..."
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green resize-none h-20" />
<div class="flex gap-2 justify-end">
<button type="button" @click="closeForm"
class="px-4 py-2 text-text-muted hover:text-text text-sm">Annuler</button>
<button type="submit"
class="bg-green text-bg px-4 py-2 rounded-lg text-sm font-semibold hover:opacity-90">
{{ editPlant ? 'Enregistrer' : 'Créer' }}
</button>
</div>
</form>
</div>
</div>
<!-- Modal upload photo pour une plante -->
<div v-if="uploadTarget" class="fixed inset-0 bg-black/70 z-50 flex items-center justify-center p-4" @click.self="uploadTarget = null">
<div class="bg-bg-hard rounded-xl p-6 w-full max-w-sm border border-bg-soft">
<h3 class="text-text font-bold mb-4">Photo pour "{{ uploadTarget.nom_commun }}"</h3>
<label class="block border-2 border-dashed border-bg-soft rounded-lg p-6 text-center cursor-pointer hover:border-green transition-colors">
<input type="file" accept="image/*" class="hidden" @change="uploadPhoto" />
<div class="text-text-muted text-sm">📷 Choisir une image</div>
</label>
<button @click="uploadTarget = null" class="mt-3 w-full text-text-muted hover:text-text text-sm">Annuler</button>
</div>
</div>
<!-- Modal lier photo existante -->
<div v-if="linkTarget" class="fixed inset-0 bg-black/70 z-50 flex items-center justify-center p-4" @click.self="linkTarget = null">
<div class="bg-bg-hard rounded-xl p-6 w-full max-w-2xl border border-bg-soft max-h-[80vh] flex flex-col">
<h3 class="text-text font-bold mb-3">Lier une photo à "{{ linkTarget.nom_commun }}"</h3>
<p class="text-text-muted text-xs mb-3">Sélectionne une photo de la bibliothèque (non liée à une plante)</p>
<div v-if="!unlinkPhotos.length" class="text-text-muted text-sm py-4 text-center">Aucune photo disponible.</div>
<div v-else class="grid grid-cols-4 gap-2 overflow-y-auto flex-1">
<div v-for="m in unlinkPhotos" :key="m.id"
class="aspect-square rounded overflow-hidden bg-bg-hard relative cursor-pointer group border-2 transition-colors"
:class="selectedLinkPhoto === m.id ? 'border-green' : 'border-transparent'"
@click="selectedLinkPhoto = m.id">
<img :src="m.thumbnail_url || m.url" class="w-full h-full object-cover" />
<div v-if="m.identified_common" class="absolute bottom-0 left-0 right-0 bg-black/70 text-xs text-green px-1 py-0.5 truncate">{{ m.identified_common }}</div>
</div>
</div>
<div class="flex gap-2 justify-end mt-3">
<button @click="linkTarget = null" class="px-4 py-2 text-text-muted hover:text-text text-sm">Annuler</button>
<button @click="confirmLink" :disabled="!selectedLinkPhoto"
class="bg-green text-bg px-4 py-2 rounded-lg text-sm font-semibold hover:opacity-90 disabled:opacity-40">
Lier la photo
</button>
</div>
</div>
</div>
<!-- Lightbox -->
<div v-if="lightbox" class="fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4" @click.self="lightbox = null">
<div class="max-w-lg w-full">
<img :src="lightbox.url" class="w-full rounded-xl" />
<div v-if="lightbox.identified_species" class="text-center mt-3 text-text-muted text-sm">
<div class="text-green font-semibold text-base">{{ lightbox.identified_common }}</div>
<div class="italic">{{ lightbox.identified_species }}</div>
<div class="text-xs mt-1">Confiance : {{ Math.round((lightbox.identified_confidence || 0) * 100) }}% — via {{ lightbox.identified_source }}</div>
</div>
<button class="mt-4 w-full text-text-muted hover:text-text text-sm" @click="lightbox = null">Fermer</button>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from 'vue'
import axios from 'axios'
import { usePlantsStore } from '@/stores/plants'
import type { Plant } from '@/api/plants'
const plantsStore = usePlantsStore()
const showForm = ref(false)
const editPlant = ref<Plant | null>(null)
const selectedCat = ref('')
const openId = ref<number | null>(null)
const plantPhotos = ref<Media[]>([])
const loadingPhotos = ref(false)
const uploadTarget = ref<Plant | null>(null)
const linkTarget = ref<Plant | null>(null)
const unlinkPhotos = ref<Media[]>([])
const selectedLinkPhoto = ref<number | null>(null)
const lightbox = ref<Media | null>(null)
interface Media {
id: number; entity_type: string; entity_id: number
url: string; thumbnail_url?: string; titre?: string
identified_species?: string; identified_common?: string
identified_confidence?: number; identified_source?: string
}
const categories = [
{ val: '', label: 'Toutes' },
{ val: 'potager', label: '🥕 Potager' },
{ val: 'fleur', label: '🌸 Fleur' },
{ val: 'arbre', label: '🌳 Arbre' },
{ val: 'arbuste', label: '🌿 Arbuste' },
{ val: 'adventice', label: '🌾 Adventices' },
]
const form = reactive({
nom_commun: '', nom_botanique: '', variete: '', famille: '',
categorie: '', type_plante: '', besoin_eau: '', besoin_soleil: '',
espacement_cm: undefined as number | undefined,
temp_min_c: undefined as number | undefined,
plantation_mois: '', recolte_mois: '', notes: '',
})
const filteredPlants = computed(() =>
selectedCat.value ? plantsStore.plants.filter(p => p.categorie === selectedCat.value) : plantsStore.plants
)
const catClass = (cat: string) => ({
potager: 'bg-green/20 text-green',
fleur: 'bg-orange/20 text-orange',
arbre: 'bg-blue/20 text-blue',
arbuste: 'bg-yellow/20 text-yellow',
adventice: 'bg-red/20 text-red',
}[cat] || 'bg-bg text-text-muted')
const catLabel = (cat: string) => ({
potager: '🥕 Potager', fleur: '🌸 Fleur', arbre: '🌳 Arbre',
arbuste: '🌿 Arbuste', adventice: '🌾 Adventice',
}[cat] || cat)
async function toggleDetail(id: number) {
if (openId.value === id) { openId.value = null; return }
openId.value = id
await fetchPhotos(id)
}
async function fetchPhotos(plantId: number) {
loadingPhotos.value = true
try {
const { data } = await axios.get<Media[]>('/api/media', {
params: { entity_type: 'plante', entity_id: plantId }
})
plantPhotos.value = data
} finally {
loadingPhotos.value = false
}
}
function startEdit(p: Plant) {
editPlant.value = p
Object.assign(form, {
nom_commun: p.nom_commun || '', nom_botanique: (p as any).nom_botanique || '',
variete: p.variete || '', famille: p.famille || '',
categorie: p.categorie || '', type_plante: p.type_plante || '',
besoin_eau: p.besoin_eau || '', besoin_soleil: p.besoin_soleil || '',
espacement_cm: p.espacement_cm, temp_min_c: p.temp_min_c,
plantation_mois: p.plantation_mois || '', recolte_mois: p.recolte_mois || '',
notes: p.notes || '',
})
}
function closeForm() {
showForm.value = false
editPlant.value = null
Object.assign(form, {
nom_commun: '', nom_botanique: '', variete: '', famille: '', categorie: '',
type_plante: '', besoin_eau: '', besoin_soleil: '',
espacement_cm: undefined, temp_min_c: undefined,
plantation_mois: '', recolte_mois: '', notes: '',
})
}
async function submitPlant() {
if (editPlant.value) {
await axios.put(`/api/plants/${editPlant.value.id}`, { ...form })
await plantsStore.fetchAll()
} else {
await plantsStore.create({ ...form })
}
closeForm()
}
async function removePlant(id: number) {
if (confirm('Supprimer cette plante ?')) {
await plantsStore.remove(id)
if (openId.value === id) openId.value = null
}
}
function openUpload(p: Plant) { uploadTarget.value = p }
async function uploadPhoto(e: Event) {
const file = (e.target as HTMLInputElement).files?.[0]
if (!file || !uploadTarget.value) return
const fd = new FormData()
fd.append('file', file)
const { data: uploaded } = await axios.post('/api/upload', fd)
await axios.post('/api/media', {
entity_type: 'plante', entity_id: uploadTarget.value.id,
url: uploaded.url, thumbnail_url: uploaded.thumbnail_url,
})
uploadTarget.value = null
if (openId.value) await fetchPhotos(openId.value)
}
async function deletePhoto(m: Media) {
if (!confirm('Supprimer cette photo ?')) return
await axios.delete(`/api/media/${m.id}`)
if (openId.value) await fetchPhotos(openId.value)
}
async function openLinkPhoto(p: Plant) {
linkTarget.value = p
selectedLinkPhoto.value = null
const { data } = await axios.get<Media[]>('/api/media/all')
// Photos non liées à une plante (bibliothèque ou autres)
unlinkPhotos.value = data.filter(m => m.entity_type !== 'plante')
}
async function confirmLink() {
if (!selectedLinkPhoto.value || !linkTarget.value) return
await axios.patch(`/api/media/${selectedLinkPhoto.value}`, {
entity_type: 'plante', entity_id: linkTarget.value.id,
})
const pid = linkTarget.value.id
linkTarget.value = null
selectedLinkPhoto.value = null
if (openId.value === pid) await fetchPhotos(pid)
}
onMounted(() => plantsStore.fetchAll())
</script>