feat(codev): merge feat/codev-mvp - app entraide co-developpement
This commit is contained in:
Jules Neny
20
app.vue
20
app.vue
@@ -39,8 +39,7 @@
|
|||||||
class="nav-tab"
|
class="nav-tab"
|
||||||
:class="{ 'nav-tab--active': route.path === '/agences' }"
|
:class="{ 'nav-tab--active': route.path === '/agences' }"
|
||||||
>
|
>
|
||||||
Agences Inspirantes
|
Réseaux AEP
|
||||||
<span class="nav-tab-badge">en construction</span>
|
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
<NuxtLink
|
<NuxtLink
|
||||||
to="/rag"
|
to="/rag"
|
||||||
@@ -50,6 +49,20 @@
|
|||||||
RAG
|
RAG
|
||||||
<span class="nav-tab-badge">en construction</span>
|
<span class="nav-tab-badge">en construction</span>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
|
<NuxtLink
|
||||||
|
to="/trouver-du-taf"
|
||||||
|
class="nav-tab"
|
||||||
|
:class="{ 'nav-tab--active': route.path === '/trouver-du-taf' }"
|
||||||
|
>
|
||||||
|
Jobs
|
||||||
|
</NuxtLink>
|
||||||
|
<NuxtLink
|
||||||
|
to="/codev"
|
||||||
|
class="nav-tab"
|
||||||
|
:class="{ 'nav-tab--active': route.path.startsWith('/codev') }"
|
||||||
|
>
|
||||||
|
Codev
|
||||||
|
</NuxtLink>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<!-- ── Barre recherche mobile (640px–1024px) — masquée < 640px car accessible dans la sheet -->
|
<!-- ── Barre recherche mobile (640px–1024px) — masquée < 640px car accessible dans la sheet -->
|
||||||
@@ -165,8 +178,9 @@
|
|||||||
@click="hamburgerOpen = false"
|
@click="hamburgerOpen = false"
|
||||||
>
|
>
|
||||||
<NuxtLink to="/" class="block px-4 py-2.5 text-sm font-medium transition-opacity hover:opacity-70" :style="route.path === '/' ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text);'">Écosystème Entraide Architecture</NuxtLink>
|
<NuxtLink to="/" class="block px-4 py-2.5 text-sm font-medium transition-opacity hover:opacity-70" :style="route.path === '/' ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text);'">Écosystème Entraide Architecture</NuxtLink>
|
||||||
<NuxtLink to="/agences" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" style="color: var(--nav-text);">Agences Inspirantes</NuxtLink>
|
<NuxtLink to="/agences" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" style="color: var(--nav-text);">Réseaux AEP</NuxtLink>
|
||||||
<NuxtLink to="/rag" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" style="color: var(--nav-text);">RAG</NuxtLink>
|
<NuxtLink to="/rag" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" style="color: var(--nav-text);">RAG</NuxtLink>
|
||||||
|
<NuxtLink to="/codev" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" :style="route.path.startsWith('/codev') ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text);'">Codev</NuxtLink>
|
||||||
<div style="height: 1px; background: var(--nav-bg-alt); margin: 4px 0;"></div>
|
<div style="height: 1px; background: var(--nav-bg-alt); margin: 4px 0;"></div>
|
||||||
<NuxtLink to="/a-propos" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" style="color: var(--nav-text-muted);">À propos</NuxtLink>
|
<NuxtLink to="/a-propos" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" style="color: var(--nav-text-muted);">À propos</NuxtLink>
|
||||||
<NuxtLink to="/signaler" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" style="color: var(--nav-text-muted);">Signaler</NuxtLink>
|
<NuxtLink to="/signaler" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" style="color: var(--nav-text-muted);">Signaler</NuxtLink>
|
||||||
|
|||||||
@@ -221,7 +221,12 @@ function updateTileTheme(dark: boolean) {
|
|||||||
let themeObserver: MutationObserver | null = null
|
let themeObserver: MutationObserver | null = null
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
// Double rAF : laisser le browser calculer la hauteur du conteneur avant Leaflet
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
initMap()
|
initMap()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
// Observer les changements de classe dark sur <html>
|
// Observer les changements de classe dark sur <html>
|
||||||
themeObserver = new MutationObserver(() => {
|
themeObserver = new MutationObserver(() => {
|
||||||
|
|||||||
@@ -125,8 +125,8 @@
|
|||||||
<span
|
<span
|
||||||
v-for="fn in orgFonctions(org)"
|
v-for="fn in orgFonctions(org)"
|
||||||
:key="fn"
|
:key="fn"
|
||||||
class="px-1.5 py-0.5 rounded text-xs"
|
class="px-2 py-0.5 rounded-full text-xs font-medium"
|
||||||
style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
|
style="background: var(--nav-bg-alt); color: var(--nav-text-muted); border: 1px solid var(--nav-bg-alt); letter-spacing: 0.01em;"
|
||||||
>{{ fn }}</span>
|
>{{ fn }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="org.localisation_ville" class="mt-0.5 text-xs" style="color: var(--nav-text-muted);">
|
<div v-if="org.localisation_ville" class="mt-0.5 text-xs" style="color: var(--nav-text-muted);">
|
||||||
|
|||||||
450
components/codev/CodevGraph.vue
Normal file
450
components/codev/CodevGraph.vue
Normal file
@@ -0,0 +1,450 @@
|
|||||||
|
<template>
|
||||||
|
<div ref="container" class="codev-graph-wrap">
|
||||||
|
|
||||||
|
<!-- Placeholder si aucune fiche -->
|
||||||
|
<div v-if="fiches.length === 0" class="empty-state">
|
||||||
|
<p class="empty-msg">Encore personne. Sois la premiere fiche !</p>
|
||||||
|
<NuxtLink to="/codev/fiche" class="empty-link">Creer ma fiche →</NuxtLink>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- SVG D3 -->
|
||||||
|
<svg v-else ref="svgEl" class="codev-svg">
|
||||||
|
<defs>
|
||||||
|
<marker
|
||||||
|
id="arrow-solution"
|
||||||
|
viewBox="0 0 10 10"
|
||||||
|
refX="18"
|
||||||
|
refY="5"
|
||||||
|
markerWidth="6"
|
||||||
|
markerHeight="6"
|
||||||
|
orient="auto-start-reverse"
|
||||||
|
>
|
||||||
|
<path d="M 0 0 L 10 5 L 0 10 z" fill="#22c55e" />
|
||||||
|
</marker>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import * as d3 from 'd3'
|
||||||
|
import type { CodevFiche, CodevMatch } from '~/types/codev'
|
||||||
|
|
||||||
|
// ── Props / Emits ──────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<{
|
||||||
|
fiches: CodevFiche[]
|
||||||
|
matches?: CodevMatch[]
|
||||||
|
mode?: 'none' | 'solution' | 'alliance' | 'surprise'
|
||||||
|
showLabels?: boolean
|
||||||
|
}>(), {
|
||||||
|
matches: () => [],
|
||||||
|
mode: 'none',
|
||||||
|
showLabels: false,
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
'select-fiche': [id: number]
|
||||||
|
}>()
|
||||||
|
|
||||||
|
// ── Refs ───────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const container = ref<HTMLDivElement | null>(null)
|
||||||
|
const svgEl = ref<SVGSVGElement | null>(null)
|
||||||
|
const width = ref(800)
|
||||||
|
const height = ref(600)
|
||||||
|
|
||||||
|
// ── State interne ──────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
type SimNode = d3.SimulationNodeDatum & { id: number; nom: string; offre: string; besoin: string }
|
||||||
|
type SimLink = d3.SimulationLinkDatum<SimNode> & { score: number; mode: string }
|
||||||
|
|
||||||
|
let simulation: d3.Simulation<SimNode, SimLink> | null = null
|
||||||
|
let svgRoot: d3.Selection<SVGSVGElement, unknown, null, undefined> | null = null
|
||||||
|
let gLinks: d3.Selection<SVGGElement, unknown, null, undefined> | null = null
|
||||||
|
let gNodes: d3.Selection<SVGGElement, unknown, null, undefined> | null = null
|
||||||
|
|
||||||
|
const isMobile = computed(() => width.value < 600)
|
||||||
|
const nodeRadius = computed(() => isMobile.value ? 22 : 28)
|
||||||
|
|
||||||
|
// ── Helpers ────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
function truncate(str: string, max = 10): string {
|
||||||
|
if (!str) return ''
|
||||||
|
return str.length > max ? str.slice(0, max - 1) + '…' : str
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildNodes(): SimNode[] {
|
||||||
|
return props.fiches.map(f => ({
|
||||||
|
id: f.id,
|
||||||
|
nom: f.nom,
|
||||||
|
offre: f.offre,
|
||||||
|
besoin: f.besoin,
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildLinks(nodes: SimNode[]): SimLink[] {
|
||||||
|
if (!props.matches || props.matches.length === 0) return []
|
||||||
|
const nodeById = new Map(nodes.map(n => [n.id, n]))
|
||||||
|
return props.matches
|
||||||
|
.filter(m => nodeById.has(m.fromId) && nodeById.has(m.toId))
|
||||||
|
.map(m => ({
|
||||||
|
source: nodeById.get(m.fromId)!,
|
||||||
|
target: nodeById.get(m.toId)!,
|
||||||
|
score: m.score,
|
||||||
|
mode: m.mode,
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
function linkColor(mode: string): string {
|
||||||
|
if (mode === 'solution') return '#22c55e'
|
||||||
|
if (mode === 'alliance') return '#f97316'
|
||||||
|
if (mode === 'surprise') return '#3b82f6'
|
||||||
|
return '#ccc'
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Drag handler ───────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
function makeDrag(sim: d3.Simulation<SimNode, SimLink>): d3.DragBehavior<SVGGElement, SimNode, SimNode> {
|
||||||
|
return d3.drag<SVGGElement, SimNode>()
|
||||||
|
.on('start', (event, d) => {
|
||||||
|
if (!event.active) sim.alphaTarget(0.3).restart()
|
||||||
|
d.fx = d.x
|
||||||
|
d.fy = d.y
|
||||||
|
})
|
||||||
|
.on('drag', (event, d) => {
|
||||||
|
d.fx = event.x
|
||||||
|
d.fy = event.y
|
||||||
|
})
|
||||||
|
.on('end', (event, d) => {
|
||||||
|
if (!event.active) sim.alphaTarget(0)
|
||||||
|
d.fx = null
|
||||||
|
d.fy = null
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Initialisation SVG ─────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
function initSvg() {
|
||||||
|
if (!svgEl.value) return
|
||||||
|
|
||||||
|
svgRoot = d3.select(svgEl.value)
|
||||||
|
.attr('width', width.value)
|
||||||
|
.attr('height', height.value)
|
||||||
|
|
||||||
|
svgRoot.selectAll('*').remove()
|
||||||
|
|
||||||
|
gLinks = svgRoot.append('g').attr('class', 'links')
|
||||||
|
gNodes = svgRoot.append('g').attr('class', 'nodes')
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Rebuild liens (hook pour M4) ───────────────────────────────────────────
|
||||||
|
|
||||||
|
let currentNodes: SimNode[] = []
|
||||||
|
let currentLinks: SimLink[] = []
|
||||||
|
|
||||||
|
function rebuildLinks() {
|
||||||
|
currentLinks = buildLinks(currentNodes)
|
||||||
|
if (!gLinks || !simulation) return
|
||||||
|
|
||||||
|
// .join() moderne D3 pour garantir le re-rendu complet
|
||||||
|
gLinks
|
||||||
|
.selectAll<SVGLineElement, SimLink>('line')
|
||||||
|
.data(currentLinks)
|
||||||
|
.join(
|
||||||
|
enter => enter.append('line'),
|
||||||
|
update => update,
|
||||||
|
exit => exit.remove()
|
||||||
|
)
|
||||||
|
.attr('stroke', d => linkColor(d.mode))
|
||||||
|
.attr('stroke-width', d => 1 + d.score * 3)
|
||||||
|
.attr('stroke-opacity', 0.7)
|
||||||
|
.attr('marker-end', d => d.mode === 'solution' ? 'url(#arrow-solution)' : null)
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Rendu complet ──────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
function render() {
|
||||||
|
if (!svgEl.value || props.fiches.length === 0) return
|
||||||
|
|
||||||
|
initSvg()
|
||||||
|
|
||||||
|
currentNodes = buildNodes()
|
||||||
|
currentLinks = buildLinks(currentNodes)
|
||||||
|
|
||||||
|
const r = nodeRadius.value
|
||||||
|
const fontSize = isMobile.value ? 10 : 12
|
||||||
|
|
||||||
|
// Liens
|
||||||
|
gLinks!
|
||||||
|
.selectAll<SVGLineElement, SimLink>('line')
|
||||||
|
.data(currentLinks)
|
||||||
|
.join('line')
|
||||||
|
.attr('stroke', d => linkColor(d.mode))
|
||||||
|
.attr('stroke-width', d => 1 + d.score * 3)
|
||||||
|
.attr('stroke-opacity', 0.7)
|
||||||
|
.attr('marker-end', d => d.mode === 'solution' ? 'url(#arrow-solution)' : null)
|
||||||
|
|
||||||
|
// Noeuds = groupe <g> par personne
|
||||||
|
const nodeGroups = gNodes!
|
||||||
|
.selectAll<SVGGElement, SimNode>('g.node')
|
||||||
|
.data(currentNodes, d => String(d.id))
|
||||||
|
.join('g')
|
||||||
|
.attr('class', 'node')
|
||||||
|
.style('cursor', 'pointer')
|
||||||
|
.call(makeDrag(simulation!) as any)
|
||||||
|
.on('click', (_event, d) => emit('select-fiche', d.id))
|
||||||
|
|
||||||
|
// Cercle principal
|
||||||
|
nodeGroups.append('circle')
|
||||||
|
.attr('r', r)
|
||||||
|
.attr('fill', '#ffffff')
|
||||||
|
.attr('stroke', '#1B4436')
|
||||||
|
.attr('stroke-width', 2)
|
||||||
|
|
||||||
|
// Label nom
|
||||||
|
nodeGroups.append('text')
|
||||||
|
.attr('text-anchor', 'middle')
|
||||||
|
.attr('dominant-baseline', 'central')
|
||||||
|
.attr('font-size', fontSize)
|
||||||
|
.attr('font-weight', '700')
|
||||||
|
.attr('fill', '#1a1a2e')
|
||||||
|
.attr('pointer-events', 'none')
|
||||||
|
.text(d => truncate(d.nom, 10))
|
||||||
|
|
||||||
|
// Pastille offre (haut-droite, vert)
|
||||||
|
nodeGroups.append('circle')
|
||||||
|
.attr('r', 6)
|
||||||
|
.attr('cx', r * 0.65)
|
||||||
|
.attr('cy', -r * 0.65)
|
||||||
|
.attr('fill', '#22c55e')
|
||||||
|
.attr('stroke', '#fff')
|
||||||
|
.attr('stroke-width', 1.5)
|
||||||
|
|
||||||
|
// Pastille besoin (bas-droite, bleu)
|
||||||
|
nodeGroups.append('circle')
|
||||||
|
.attr('r', 6)
|
||||||
|
.attr('cx', r * 0.65)
|
||||||
|
.attr('cy', r * 0.65)
|
||||||
|
.attr('fill', '#3b82f6')
|
||||||
|
.attr('stroke', '#fff')
|
||||||
|
.attr('stroke-width', 1.5)
|
||||||
|
|
||||||
|
// Tooltip SVG natif <title>
|
||||||
|
nodeGroups.append('title')
|
||||||
|
.text(d => `${d.nom}\nOffre : ${d.offre}\nBesoin : ${d.besoin}`)
|
||||||
|
|
||||||
|
// Groupe label bulle (affiche si showLabels)
|
||||||
|
const labelGroups = nodeGroups.append('g')
|
||||||
|
.attr('class', 'label-bubble')
|
||||||
|
.attr('visibility', props.showLabels ? 'visible' : 'hidden')
|
||||||
|
|
||||||
|
// Fond bulle besoin (dessous du noeud)
|
||||||
|
labelGroups.append('rect')
|
||||||
|
.attr('class', 'bubble-besoin-bg')
|
||||||
|
.attr('x', -(r + 50))
|
||||||
|
.attr('y', r + 4)
|
||||||
|
.attr('width', 100)
|
||||||
|
.attr('height', 28)
|
||||||
|
.attr('rx', 6)
|
||||||
|
.attr('fill', '#eff6ff')
|
||||||
|
.attr('stroke', '#3b82f6')
|
||||||
|
.attr('stroke-width', 1)
|
||||||
|
|
||||||
|
// Texte besoin
|
||||||
|
labelGroups.append('text')
|
||||||
|
.attr('class', 'bubble-besoin-txt')
|
||||||
|
.attr('x', -(r) + 50)
|
||||||
|
.attr('y', r + 22)
|
||||||
|
.attr('text-anchor', 'middle')
|
||||||
|
.attr('font-size', 9)
|
||||||
|
.attr('fill', '#1e40af')
|
||||||
|
.attr('pointer-events', 'none')
|
||||||
|
.text(d => truncate(d.besoin, 18))
|
||||||
|
|
||||||
|
// Fond bulle offre (dessus du noeud)
|
||||||
|
labelGroups.append('rect')
|
||||||
|
.attr('class', 'bubble-offre-bg')
|
||||||
|
.attr('x', -(r + 50))
|
||||||
|
.attr('y', -(r + 32))
|
||||||
|
.attr('width', 100)
|
||||||
|
.attr('height', 28)
|
||||||
|
.attr('rx', 6)
|
||||||
|
.attr('fill', '#f0fdf4')
|
||||||
|
.attr('stroke', '#22c55e')
|
||||||
|
.attr('stroke-width', 1)
|
||||||
|
|
||||||
|
// Texte offre
|
||||||
|
labelGroups.append('text')
|
||||||
|
.attr('class', 'bubble-offre-txt')
|
||||||
|
.attr('x', -(r) + 50)
|
||||||
|
.attr('y', -(r + 14))
|
||||||
|
.attr('text-anchor', 'middle')
|
||||||
|
.attr('font-size', 9)
|
||||||
|
.attr('fill', '#166534')
|
||||||
|
.attr('pointer-events', 'none')
|
||||||
|
.text(d => truncate(d.offre, 18))
|
||||||
|
|
||||||
|
// Simulation
|
||||||
|
simulation = d3.forceSimulation<SimNode, SimLink>(currentNodes)
|
||||||
|
.force('link', d3.forceLink<SimNode, SimLink>(currentLinks)
|
||||||
|
.id(d => d.id)
|
||||||
|
.distance(120)
|
||||||
|
.strength(0.3))
|
||||||
|
.force('charge', d3.forceManyBody<SimNode>().strength(-400))
|
||||||
|
.force('center', d3.forceCenter(width.value / 2, height.value / 2))
|
||||||
|
.force('collide', d3.forceCollide<SimNode>().radius(r + 12))
|
||||||
|
.force('x', d3.forceX(width.value / 2).strength(0.05))
|
||||||
|
.force('y', d3.forceY(height.value / 2).strength(0.05))
|
||||||
|
.alphaDecay(0.02)
|
||||||
|
.on('tick', tick)
|
||||||
|
|
||||||
|
// Re-bind drag avec la nouvelle simulation
|
||||||
|
gNodes!.selectAll<SVGGElement, SimNode>('g.node')
|
||||||
|
.call(makeDrag(simulation) as any)
|
||||||
|
}
|
||||||
|
|
||||||
|
function tick() {
|
||||||
|
const r = nodeRadius.value
|
||||||
|
if (!gLinks || !gNodes) return
|
||||||
|
|
||||||
|
gLinks.selectAll<SVGLineElement, SimLink>('line')
|
||||||
|
.attr('x1', d => Math.max(r, Math.min(width.value - r, (d.source as SimNode).x ?? 0)))
|
||||||
|
.attr('y1', d => Math.max(r, Math.min(height.value - r, (d.source as SimNode).y ?? 0)))
|
||||||
|
.attr('x2', d => Math.max(r, Math.min(width.value - r, (d.target as SimNode).x ?? 0)))
|
||||||
|
.attr('y2', d => Math.max(r, Math.min(height.value - r, (d.target as SimNode).y ?? 0)))
|
||||||
|
|
||||||
|
gNodes.selectAll<SVGGElement, SimNode>('g.node')
|
||||||
|
.attr('transform', d => {
|
||||||
|
const x = Math.max(r, Math.min(width.value - r, d.x ?? 0))
|
||||||
|
const y = Math.max(r, Math.min(height.value - r, d.y ?? 0))
|
||||||
|
return `translate(${x},${y})`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Watch matches/mode (hook pour M4) ─────────────────────────────────────
|
||||||
|
|
||||||
|
watch(() => [props.matches, props.mode] as const, () => {
|
||||||
|
if (!simulation) return
|
||||||
|
rebuildLinks()
|
||||||
|
const newForce = d3.forceLink<SimNode, SimLink>(currentLinks)
|
||||||
|
.id(d => String(d.id))
|
||||||
|
.distance(120)
|
||||||
|
.strength(0.5)
|
||||||
|
simulation.force('link', newForce)
|
||||||
|
simulation.alpha(0.8).restart()
|
||||||
|
}, { deep: true })
|
||||||
|
|
||||||
|
// ── Watch showLabels ──────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
watch(() => props.showLabels, (val) => {
|
||||||
|
if (!svgEl.value) return
|
||||||
|
d3.select(svgEl.value).selectAll('.label-bubble').attr('visibility', val ? 'visible' : 'hidden')
|
||||||
|
})
|
||||||
|
|
||||||
|
// ── Watch fiches (re-render si nouvelles fiches) ───────────────────────────
|
||||||
|
|
||||||
|
watch(() => props.fiches, () => {
|
||||||
|
if (simulation) {
|
||||||
|
simulation.stop()
|
||||||
|
simulation = null
|
||||||
|
}
|
||||||
|
render()
|
||||||
|
}, { deep: true })
|
||||||
|
|
||||||
|
// ── ResizeObserver ─────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
let ro: ResizeObserver | null = null
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (!container.value) return
|
||||||
|
width.value = container.value.clientWidth || 800
|
||||||
|
height.value = container.value.clientHeight || 600
|
||||||
|
|
||||||
|
render()
|
||||||
|
|
||||||
|
ro = new ResizeObserver(() => {
|
||||||
|
if (!container.value) return
|
||||||
|
width.value = container.value.clientWidth || 800
|
||||||
|
height.value = container.value.clientHeight || 600
|
||||||
|
if (svgRoot) {
|
||||||
|
svgRoot.attr('width', width.value).attr('height', height.value)
|
||||||
|
}
|
||||||
|
if (simulation) {
|
||||||
|
simulation.force('center', d3.forceCenter(width.value / 2, height.value / 2))
|
||||||
|
simulation.alpha(0.3).restart()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
ro.observe(container.value!)
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
if (simulation) simulation.stop()
|
||||||
|
if (ro) ro.disconnect()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.codev-graph-wrap {
|
||||||
|
width: 100%;
|
||||||
|
height: 70vh;
|
||||||
|
min-height: 320px;
|
||||||
|
position: relative;
|
||||||
|
background: var(--nav-bg, #fafafa);
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.codev-svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Etat vide ── */
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-msg {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
color: var(--nav-text-muted, #6b7280);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-link {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--nav-primary-solid, #1B4436);
|
||||||
|
text-decoration: none;
|
||||||
|
border: 1.5px solid var(--nav-primary-solid, #1B4436);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 0.5rem 1.25rem;
|
||||||
|
transition: background 0.15s, color 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-link:hover {
|
||||||
|
background: var(--nav-primary-solid, #1B4436);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Mobile ── */
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.codev-graph-wrap {
|
||||||
|
height: 65vh;
|
||||||
|
min-height: 260px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,6 +1,11 @@
|
|||||||
export default defineNuxtConfig({
|
export default defineNuxtConfig({
|
||||||
modules: ['@nuxtjs/tailwindcss'],
|
modules: ['@nuxtjs/tailwindcss'],
|
||||||
css: ['~/assets/css/main.css'],
|
css: [
|
||||||
|
'~/assets/css/main.css',
|
||||||
|
'leaflet/dist/leaflet.css',
|
||||||
|
'leaflet.markercluster/dist/MarkerCluster.css',
|
||||||
|
'leaflet.markercluster/dist/MarkerCluster.Default.css',
|
||||||
|
],
|
||||||
|
|
||||||
runtimeConfig: {
|
runtimeConfig: {
|
||||||
nocodbUrl: process.env.NOCODB_URL,
|
nocodbUrl: process.env.NOCODB_URL,
|
||||||
@@ -14,16 +19,20 @@ export default defineNuxtConfig({
|
|||||||
redisUrl: process.env.REDIS_URL || 'redis://127.0.0.1:6379',
|
redisUrl: process.env.REDIS_URL || 'redis://127.0.0.1:6379',
|
||||||
resendApiKey: process.env.RESEND_API_KEY,
|
resendApiKey: process.env.RESEND_API_KEY,
|
||||||
emailJules: process.env.EMAIL_JULES || 'jules@trans-former.fr',
|
emailJules: process.env.EMAIL_JULES || 'jules@trans-former.fr',
|
||||||
|
codevTableId: '', // NUXT_CODEV_TABLE_ID
|
||||||
|
codevPassword: 'merci', // NUXT_CODEV_PASSWORD - défaut "merci", overridable
|
||||||
|
codevBaseId: '', // NUXT_CODEV_BASE_ID - base NocoDB (ex: pipilvsi7dibo80)
|
||||||
|
codevAdminPassword: 'admin2026', // NUXT_CODEV_ADMIN_PASSWORD
|
||||||
},
|
},
|
||||||
|
|
||||||
// Leaflet ne fonctionne pas en SSR — forcer le rendu côté client
|
// Leaflet ne fonctionne pas en SSR — forcer le rendu côté client
|
||||||
ssr: true,
|
ssr: true,
|
||||||
|
|
||||||
vite: {
|
vite: {
|
||||||
|
cacheDir: 'C:/Users/jules/AppData/Local/nav-carte-vite-cache',
|
||||||
optimizeDeps: {
|
optimizeDeps: {
|
||||||
include: ['leaflet', 'leaflet.markercluster'],
|
include: ['leaflet', 'leaflet.markercluster', 'd3'],
|
||||||
},
|
},
|
||||||
// Éviter l'import SSR de Leaflet qui utilise window
|
|
||||||
ssr: {
|
ssr: {
|
||||||
noExternal: [],
|
noExternal: [],
|
||||||
},
|
},
|
||||||
|
|||||||
459
package-lock.json
generated
459
package-lock.json
generated
@@ -10,6 +10,7 @@
|
|||||||
"@headlessui/vue": "^1.7.23",
|
"@headlessui/vue": "^1.7.23",
|
||||||
"@types/leaflet": "^1.9.21",
|
"@types/leaflet": "^1.9.21",
|
||||||
"@types/leaflet.markercluster": "^1.5.6",
|
"@types/leaflet.markercluster": "^1.5.6",
|
||||||
|
"d3": "^7.9.0",
|
||||||
"ioredis": "^5.3.2",
|
"ioredis": "^5.3.2",
|
||||||
"leaflet": "^1.9.4",
|
"leaflet": "^1.9.4",
|
||||||
"leaflet.markercluster": "^1.5.3",
|
"leaflet.markercluster": "^1.5.3",
|
||||||
@@ -5312,6 +5313,416 @@
|
|||||||
"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
|
"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/d3": {
|
||||||
|
"version": "7.9.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/d3/-/d3-7.9.0.tgz",
|
||||||
|
"integrity": "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"d3-array": "3",
|
||||||
|
"d3-axis": "3",
|
||||||
|
"d3-brush": "3",
|
||||||
|
"d3-chord": "3",
|
||||||
|
"d3-color": "3",
|
||||||
|
"d3-contour": "4",
|
||||||
|
"d3-delaunay": "6",
|
||||||
|
"d3-dispatch": "3",
|
||||||
|
"d3-drag": "3",
|
||||||
|
"d3-dsv": "3",
|
||||||
|
"d3-ease": "3",
|
||||||
|
"d3-fetch": "3",
|
||||||
|
"d3-force": "3",
|
||||||
|
"d3-format": "3",
|
||||||
|
"d3-geo": "3",
|
||||||
|
"d3-hierarchy": "3",
|
||||||
|
"d3-interpolate": "3",
|
||||||
|
"d3-path": "3",
|
||||||
|
"d3-polygon": "3",
|
||||||
|
"d3-quadtree": "3",
|
||||||
|
"d3-random": "3",
|
||||||
|
"d3-scale": "4",
|
||||||
|
"d3-scale-chromatic": "3",
|
||||||
|
"d3-selection": "3",
|
||||||
|
"d3-shape": "3",
|
||||||
|
"d3-time": "3",
|
||||||
|
"d3-time-format": "4",
|
||||||
|
"d3-timer": "3",
|
||||||
|
"d3-transition": "3",
|
||||||
|
"d3-zoom": "3"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/d3-array": {
|
||||||
|
"version": "3.2.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
|
||||||
|
"integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"internmap": "1 - 2"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/d3-axis": {
|
||||||
|
"version": "3.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
|
||||||
|
"integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
|
||||||
|
"license": "ISC",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/d3-brush": {
|
||||||
|
"version": "3.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
|
||||||
|
"integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"d3-dispatch": "1 - 3",
|
||||||
|
"d3-drag": "2 - 3",
|
||||||
|
"d3-interpolate": "1 - 3",
|
||||||
|
"d3-selection": "3",
|
||||||
|
"d3-transition": "3"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/d3-chord": {
|
||||||
|
"version": "3.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
|
||||||
|
"integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"d3-path": "1 - 3"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/d3-color": {
|
||||||
|
"version": "3.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
|
||||||
|
"integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
|
||||||
|
"license": "ISC",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/d3-contour": {
|
||||||
|
"version": "4.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz",
|
||||||
|
"integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"d3-array": "^3.2.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/d3-delaunay": {
|
||||||
|
"version": "6.0.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
|
||||||
|
"integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"delaunator": "5"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/d3-dispatch": {
|
||||||
|
"version": "3.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
|
||||||
|
"integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
|
||||||
|
"license": "ISC",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/d3-drag": {
|
||||||
|
"version": "3.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
|
||||||
|
"integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"d3-dispatch": "1 - 3",
|
||||||
|
"d3-selection": "3"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/d3-dsv": {
|
||||||
|
"version": "3.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
|
||||||
|
"integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"commander": "7",
|
||||||
|
"iconv-lite": "0.6",
|
||||||
|
"rw": "1"
|
||||||
|
},
|
||||||
|
"bin": {
|
||||||
|
"csv2json": "bin/dsv2json.js",
|
||||||
|
"csv2tsv": "bin/dsv2dsv.js",
|
||||||
|
"dsv2dsv": "bin/dsv2dsv.js",
|
||||||
|
"dsv2json": "bin/dsv2json.js",
|
||||||
|
"json2csv": "bin/json2dsv.js",
|
||||||
|
"json2dsv": "bin/json2dsv.js",
|
||||||
|
"json2tsv": "bin/json2dsv.js",
|
||||||
|
"tsv2csv": "bin/dsv2dsv.js",
|
||||||
|
"tsv2json": "bin/dsv2json.js"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/d3-dsv/node_modules/commander": {
|
||||||
|
"version": "7.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
|
||||||
|
"integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/d3-ease": {
|
||||||
|
"version": "3.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
|
||||||
|
"integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
|
||||||
|
"license": "BSD-3-Clause",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/d3-fetch": {
|
||||||
|
"version": "3.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
|
||||||
|
"integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"d3-dsv": "1 - 3"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/d3-force": {
|
||||||
|
"version": "3.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
|
||||||
|
"integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"d3-dispatch": "1 - 3",
|
||||||
|
"d3-quadtree": "1 - 3",
|
||||||
|
"d3-timer": "1 - 3"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/d3-format": {
|
||||||
|
"version": "3.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
|
||||||
|
"integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
|
||||||
|
"license": "ISC",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/d3-geo": {
|
||||||
|
"version": "3.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.1.tgz",
|
||||||
|
"integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"d3-array": "2.5.0 - 3"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/d3-hierarchy": {
|
||||||
|
"version": "3.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
|
||||||
|
"integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
|
||||||
|
"license": "ISC",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/d3-interpolate": {
|
||||||
|
"version": "3.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
|
||||||
|
"integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"d3-color": "1 - 3"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/d3-path": {
|
||||||
|
"version": "3.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
|
||||||
|
"integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
|
||||||
|
"license": "ISC",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/d3-polygon": {
|
||||||
|
"version": "3.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
|
||||||
|
"integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
|
||||||
|
"license": "ISC",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/d3-quadtree": {
|
||||||
|
"version": "3.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
|
||||||
|
"integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
|
||||||
|
"license": "ISC",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/d3-random": {
|
||||||
|
"version": "3.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
|
||||||
|
"integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
|
||||||
|
"license": "ISC",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/d3-scale": {
|
||||||
|
"version": "4.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
|
||||||
|
"integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"d3-array": "2.10.0 - 3",
|
||||||
|
"d3-format": "1 - 3",
|
||||||
|
"d3-interpolate": "1.2.0 - 3",
|
||||||
|
"d3-time": "2.1.1 - 3",
|
||||||
|
"d3-time-format": "2 - 4"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/d3-scale-chromatic": {
|
||||||
|
"version": "3.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
|
||||||
|
"integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"d3-color": "1 - 3",
|
||||||
|
"d3-interpolate": "1 - 3"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/d3-selection": {
|
||||||
|
"version": "3.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
|
||||||
|
"integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
|
||||||
|
"license": "ISC",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/d3-shape": {
|
||||||
|
"version": "3.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
|
||||||
|
"integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"d3-path": "^3.1.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/d3-time": {
|
||||||
|
"version": "3.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
|
||||||
|
"integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"d3-array": "2 - 3"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/d3-time-format": {
|
||||||
|
"version": "4.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
|
||||||
|
"integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"d3-time": "1 - 3"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/d3-timer": {
|
||||||
|
"version": "3.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
|
||||||
|
"integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
|
||||||
|
"license": "ISC",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/d3-transition": {
|
||||||
|
"version": "3.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
|
||||||
|
"integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"d3-color": "1 - 3",
|
||||||
|
"d3-dispatch": "1 - 3",
|
||||||
|
"d3-ease": "1 - 3",
|
||||||
|
"d3-interpolate": "1 - 3",
|
||||||
|
"d3-timer": "1 - 3"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"d3-selection": "2 - 3"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/d3-zoom": {
|
||||||
|
"version": "3.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
|
||||||
|
"integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"d3-dispatch": "1 - 3",
|
||||||
|
"d3-drag": "2 - 3",
|
||||||
|
"d3-interpolate": "1 - 3",
|
||||||
|
"d3-selection": "2 - 3",
|
||||||
|
"d3-transition": "2 - 3"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/db0": {
|
"node_modules/db0": {
|
||||||
"version": "0.3.4",
|
"version": "0.3.4",
|
||||||
"resolved": "https://registry.npmjs.org/db0/-/db0-0.3.4.tgz",
|
"resolved": "https://registry.npmjs.org/db0/-/db0-0.3.4.tgz",
|
||||||
@@ -5425,6 +5836,15 @@
|
|||||||
"integrity": "sha512-7z22QmUWiQ/2d0KkdYmANbRUVABpZ9SNYyH5vx6PZ+nE5bcC0l7uFvEfHlyld/HcGBFTL536ClDt3DEcSlEJAQ==",
|
"integrity": "sha512-7z22QmUWiQ/2d0KkdYmANbRUVABpZ9SNYyH5vx6PZ+nE5bcC0l7uFvEfHlyld/HcGBFTL536ClDt3DEcSlEJAQ==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/delaunator": {
|
||||||
|
"version": "5.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.1.0.tgz",
|
||||||
|
"integrity": "sha512-AGrQ4QSgssa1NGmWmLPqN5NY2KajF5MqxetNEO+o0n3ZwZZeTmt7bBnvzHWrmkZFxGgr4HdyFgelzgi06otLuQ==",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"robust-predicates": "^3.0.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/delegates": {
|
"node_modules/delegates": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
|
||||||
@@ -6480,6 +6900,18 @@
|
|||||||
"node": ">=16.17.0"
|
"node": ">=16.17.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/iconv-lite": {
|
||||||
|
"version": "0.6.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
|
||||||
|
"integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"safer-buffer": ">= 2.1.2 < 3.0.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.10.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/ieee754": {
|
"node_modules/ieee754": {
|
||||||
"version": "1.2.1",
|
"version": "1.2.1",
|
||||||
"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
|
"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
|
||||||
@@ -6555,6 +6987,15 @@
|
|||||||
"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
|
"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/internmap": {
|
||||||
|
"version": "2.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
|
||||||
|
"integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
|
||||||
|
"license": "ISC",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/ioredis": {
|
"node_modules/ioredis": {
|
||||||
"version": "5.10.1",
|
"version": "5.10.1",
|
||||||
"resolved": "https://registry.npmjs.org/ioredis/-/ioredis-5.10.1.tgz",
|
"resolved": "https://registry.npmjs.org/ioredis/-/ioredis-5.10.1.tgz",
|
||||||
@@ -9480,6 +9921,12 @@
|
|||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/robust-predicates": {
|
||||||
|
"version": "3.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.3.tgz",
|
||||||
|
"integrity": "sha512-NS3levdsRIUOmiJ8FZWCP7LG3QpJyrs/TE0Zpf1yvZu8cAJJ6QMW92H1c7kWpdIHo8RvmLxN/o2JXTKHp74lUA==",
|
||||||
|
"license": "Unlicense"
|
||||||
|
},
|
||||||
"node_modules/rollup": {
|
"node_modules/rollup": {
|
||||||
"version": "4.60.1",
|
"version": "4.60.1",
|
||||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.60.1.tgz",
|
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.60.1.tgz",
|
||||||
@@ -9595,6 +10042,12 @@
|
|||||||
"queue-microtask": "^1.2.2"
|
"queue-microtask": "^1.2.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/rw": {
|
||||||
|
"version": "1.3.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
|
||||||
|
"integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==",
|
||||||
|
"license": "BSD-3-Clause"
|
||||||
|
},
|
||||||
"node_modules/safe-buffer": {
|
"node_modules/safe-buffer": {
|
||||||
"version": "5.2.1",
|
"version": "5.2.1",
|
||||||
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
|
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
|
||||||
@@ -9633,6 +10086,12 @@
|
|||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/safer-buffer": {
|
||||||
|
"version": "2.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
|
||||||
|
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/sax": {
|
"node_modules/sax": {
|
||||||
"version": "1.6.0",
|
"version": "1.6.0",
|
||||||
"resolved": "https://registry.npmjs.org/sax/-/sax-1.6.0.tgz",
|
"resolved": "https://registry.npmjs.org/sax/-/sax-1.6.0.tgz",
|
||||||
|
|||||||
@@ -13,6 +13,7 @@
|
|||||||
"@headlessui/vue": "^1.7.23",
|
"@headlessui/vue": "^1.7.23",
|
||||||
"@types/leaflet": "^1.9.21",
|
"@types/leaflet": "^1.9.21",
|
||||||
"@types/leaflet.markercluster": "^1.5.6",
|
"@types/leaflet.markercluster": "^1.5.6",
|
||||||
|
"d3": "^7.9.0",
|
||||||
"ioredis": "^5.3.2",
|
"ioredis": "^5.3.2",
|
||||||
"leaflet": "^1.9.4",
|
"leaflet": "^1.9.4",
|
||||||
"leaflet.markercluster": "^1.5.3",
|
"leaflet.markercluster": "^1.5.3",
|
||||||
|
|||||||
550
pages/codev/carto.vue
Normal file
550
pages/codev/carto.vue
Normal file
@@ -0,0 +1,550 @@
|
|||||||
|
<template>
|
||||||
|
<div class="codev-carto">
|
||||||
|
|
||||||
|
<header class="carto-header">
|
||||||
|
<h1>Carto entraide</h1>
|
||||||
|
<p class="carto-subtitle">
|
||||||
|
<template v-if="pending">Chargement...</template>
|
||||||
|
<template v-else>
|
||||||
|
{{ fiches.length }} fiche{{ fiches.length !== 1 ? 's' : '' }} - clique sur un nom pour voir le detail
|
||||||
|
</template>
|
||||||
|
</p>
|
||||||
|
<NuxtLink to="/codev/qr" class="qr-link" title="QR Code">[ QR ]</NuxtLink>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="codev-tabs">
|
||||||
|
<button :class="{ active: tab === 'carto' }" @click="tab = 'carto'" type="button">Carto</button>
|
||||||
|
<button :class="{ active: tab === 'annuaire' }" @click="tab = 'annuaire'" type="button">Annuaire</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="tab === 'carto'">
|
||||||
|
<div class="show-labels-bar">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
:class="{ active: showLabels }"
|
||||||
|
@click="showLabels = !showLabels"
|
||||||
|
>
|
||||||
|
{{ showLabels ? 'Masquer besoins/offres' : 'Montrer besoins/offres' }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ClientOnly>
|
||||||
|
<CodevGraph
|
||||||
|
:fiches="fiches"
|
||||||
|
:matches="matches"
|
||||||
|
:mode="mode"
|
||||||
|
:show-labels="showLabels"
|
||||||
|
@select-fiche="onSelectFiche"
|
||||||
|
/>
|
||||||
|
<template #fallback>
|
||||||
|
<div class="graph-fallback">Chargement du graphe...</div>
|
||||||
|
</template>
|
||||||
|
</ClientOnly>
|
||||||
|
|
||||||
|
<!-- Bandeau info mode actif -->
|
||||||
|
<div v-if="mode !== 'none'" class="mode-banner">
|
||||||
|
<span>
|
||||||
|
Mode {{ MODE_LABELS[mode] }} actif -
|
||||||
|
{{ matches.length }} connexion{{ matches.length !== 1 ? 's' : '' }} trouvee{{ matches.length !== 1 ? 's' : '' }}.
|
||||||
|
</span>
|
||||||
|
<button class="banner-clear" @click="setMode('none')" type="button">Effacer</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Boutons matching -->
|
||||||
|
<div class="matching-controls">
|
||||||
|
<button
|
||||||
|
:class="{ active: mode === 'solution' }"
|
||||||
|
style="--mode-color: #22c55e"
|
||||||
|
@click="setMode('solution')"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
Solution
|
||||||
|
<span class="hint">besoin - compétence</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
:class="{ active: mode === 'alliance' }"
|
||||||
|
style="--mode-color: #f97316"
|
||||||
|
@click="setMode('alliance')"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
Alliance
|
||||||
|
<span class="hint">besoins partagés</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
v-if="mode !== 'none'"
|
||||||
|
class="reset"
|
||||||
|
@click="setMode('none')"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
Effacer
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else-if="tab === 'annuaire'" class="annuaire-wrap">
|
||||||
|
|
||||||
|
<div v-if="fiches.length === 0" class="list-empty">
|
||||||
|
Aucune fiche. <NuxtLink to="/codev/fiche">Ajouter la mienne</NuxtLink>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else class="annuaire-scroll">
|
||||||
|
<table class="annuaire-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="col-nom">Prénom</th>
|
||||||
|
<th class="col-besoin">Besoin</th>
|
||||||
|
<th class="col-offre">Ce que j'offre</th>
|
||||||
|
<th v-if="isAdmin" class="col-actions"></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="f in fiches" :key="f.id" @click="navigateTo(`/codev/fiche?id=${f.id}`)" class="annuaire-row">
|
||||||
|
<td class="col-nom">{{ f.nom }}</td>
|
||||||
|
<td class="col-besoin">{{ f.besoin }}</td>
|
||||||
|
<td class="col-offre">{{ f.offre }}</td>
|
||||||
|
<td v-if="isAdmin" class="col-actions">
|
||||||
|
<button @click.stop="deleteFiche(f.id)" class="delete-btn" type="button" title="Supprimer">✕</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="annuaire-hint">Clique sur une ligne pour modifier la fiche</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- FAB ajouter une fiche -->
|
||||||
|
<NuxtLink to="/codev/fiche" class="fab-add" title="Ajouter ma fiche" aria-label="Ajouter une fiche">
|
||||||
|
+
|
||||||
|
</NuxtLink>
|
||||||
|
|
||||||
|
<Transition name="sheet">
|
||||||
|
<div v-if="selectedFiche" class="bottom-sheet" @click.self="selectedFiche = null">
|
||||||
|
<div class="sheet-content">
|
||||||
|
<div class="sheet-handle"></div>
|
||||||
|
<div class="sheet-name">{{ selectedFiche.nom }}</div>
|
||||||
|
<div class="sheet-section">
|
||||||
|
<span class="sheet-label">Besoin</span>
|
||||||
|
<p class="sheet-text">{{ selectedFiche.besoin }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="sheet-section">
|
||||||
|
<span class="sheet-label">Ce que j'apporte</span>
|
||||||
|
<p class="sheet-text">{{ selectedFiche.offre }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="sheet-tags" v-if="selectedFiche.hashtags.length">
|
||||||
|
<span v-for="t in selectedFiche.hashtags" :key="t" class="sheet-tag">#{{ t }}</span>
|
||||||
|
</div>
|
||||||
|
<NuxtLink :to="`/codev/fiche?id=${selectedFiche.id}`" class="sheet-edit-btn">Modifier cette fiche</NuxtLink>
|
||||||
|
<button class="sheet-close" @click="selectedFiche = null" type="button">Fermer</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Transition>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import type { CodevFiche, CodevMatch } from '~/types/codev'
|
||||||
|
import { computeMatches } from '~/utils/codev/matching'
|
||||||
|
|
||||||
|
useHead({ title: 'Carto - Co-developpement' })
|
||||||
|
|
||||||
|
const { data, pending, refresh } = await useFetch<{ list: CodevFiche[] }>('/api/codev/fiches')
|
||||||
|
const fiches = computed(() => data.value?.list ?? [])
|
||||||
|
|
||||||
|
const matches = ref<CodevMatch[]>([])
|
||||||
|
const mode = ref<'none' | 'solution' | 'alliance' | 'surprise'>('none')
|
||||||
|
const showLabels = ref(false)
|
||||||
|
const tab = ref<'carto' | 'annuaire'>('carto')
|
||||||
|
const selectedFiche = ref<CodevFiche | null>(null)
|
||||||
|
const isMobileView = typeof window !== 'undefined' ? window.innerWidth < 600 : false
|
||||||
|
|
||||||
|
const isAdmin = ref(false)
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
try {
|
||||||
|
const r = await $fetch<{ admin: boolean }>('/api/codev/me')
|
||||||
|
isAdmin.value = r.admin
|
||||||
|
} catch { isAdmin.value = false }
|
||||||
|
})
|
||||||
|
|
||||||
|
const MODE_LABELS: Record<string, string> = {
|
||||||
|
solution: 'Solution',
|
||||||
|
alliance: 'Alliance',
|
||||||
|
surprise: 'Surprise',
|
||||||
|
}
|
||||||
|
|
||||||
|
function setMode(newMode: 'none' | 'solution' | 'alliance' | 'surprise') {
|
||||||
|
mode.value = newMode
|
||||||
|
if (newMode === 'none') {
|
||||||
|
matches.value = []
|
||||||
|
} else {
|
||||||
|
matches.value = computeMatches(fiches.value, newMode)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onSelectFiche(id: number) {
|
||||||
|
if (isMobileView) {
|
||||||
|
selectedFiche.value = fiches.value.find(f => f.id === id) ?? null
|
||||||
|
} else {
|
||||||
|
navigateTo(`/codev/fiche?id=${id}`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function deleteFiche(id: number) {
|
||||||
|
if (!confirm('Supprimer la fiche ?')) return
|
||||||
|
await $fetch(`/api/codev/fiches/${id}`, { method: 'DELETE' })
|
||||||
|
await refresh()
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.codev-carto {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: var(--nav-bg, #fafafa);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 1.25rem 1rem 2rem;
|
||||||
|
gap: 1rem;
|
||||||
|
max-width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── En-tete ── */
|
||||||
|
|
||||||
|
.carto-header {
|
||||||
|
text-align: center;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carto-header h1 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--nav-text, #1a1a2e);
|
||||||
|
margin: 0 0 0.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carto-subtitle {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--nav-text-muted, #6b7280);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Fallback ── */
|
||||||
|
|
||||||
|
.graph-fallback {
|
||||||
|
width: 100%;
|
||||||
|
height: 70vh;
|
||||||
|
min-height: 320px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: var(--nav-text-muted, #6b7280);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
background: var(--nav-bg-alt, #f3f4f6);
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Bandeau mode actif ── */
|
||||||
|
|
||||||
|
.mode-banner {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding: 0.5rem 0.875rem;
|
||||||
|
background: #f0fdf4;
|
||||||
|
border: 1px solid #bbf7d0;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: #166534;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-clear {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #166534;
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid #166534;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 0.2rem 0.6rem;
|
||||||
|
cursor: pointer;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-clear:hover {
|
||||||
|
background: #166534;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Boutons matching ── */
|
||||||
|
|
||||||
|
.matching-controls {
|
||||||
|
position: sticky;
|
||||||
|
bottom: 0;
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 12px;
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
border-top: 1px solid #e5e7eb;
|
||||||
|
margin: 0 -1rem -2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.matching-controls button {
|
||||||
|
flex: 1;
|
||||||
|
padding: 12px 8px;
|
||||||
|
border: 1px solid #d0d4dc;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: white;
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 2px;
|
||||||
|
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.matching-controls button .hint {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #6b7280;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.matching-controls button.active {
|
||||||
|
background: var(--mode-color, #1B4436);
|
||||||
|
color: white;
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.matching-controls button.active .hint {
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.matching-controls button.reset {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
padding: 12px 16px;
|
||||||
|
background: #f3f4f6;
|
||||||
|
border-color: #d0d4dc;
|
||||||
|
color: #374151;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.matching-controls button.reset:hover {
|
||||||
|
background: #e5e7eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
.matching-controls {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
margin: 0 -0.75rem -1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.matching-controls button.reset {
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Toggle besoins/offres ── */
|
||||||
|
|
||||||
|
.show-labels-bar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.show-labels-bar button {
|
||||||
|
border: 1px solid #d0d4dc;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 8px 16px;
|
||||||
|
background: white;
|
||||||
|
font-size: 13px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #374151;
|
||||||
|
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.show-labels-bar button.active {
|
||||||
|
background: #1B4436;
|
||||||
|
color: white;
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── FAB ajouter ── */
|
||||||
|
|
||||||
|
.fab-add {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 80px;
|
||||||
|
right: 16px;
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #1B4436;
|
||||||
|
color: white;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 300;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-decoration: none;
|
||||||
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
|
||||||
|
z-index: 100;
|
||||||
|
transition: transform 0.15s, opacity 0.15s;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fab-add:hover {
|
||||||
|
transform: scale(1.08);
|
||||||
|
opacity: 0.92;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Tabs ── */
|
||||||
|
|
||||||
|
.codev-tabs { display: flex; gap: 4px; background: #f3f4f6; border-radius: 10px; padding: 4px; }
|
||||||
|
.codev-tabs button { flex: 1; padding: 8px 4px; border: none; border-radius: 7px; background: transparent; font-size: 0.875rem; font-weight: 500; cursor: pointer; color: #6b7280; transition: all 0.15s; }
|
||||||
|
.codev-tabs button.active { background: white; color: #1a1a2e; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
|
||||||
|
|
||||||
|
/* ── List view ── */
|
||||||
|
|
||||||
|
.list-view { display: flex; flex-direction: column; gap: 12px; padding: 8px 0; }
|
||||||
|
.list-card { background: white; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
|
||||||
|
.list-card-name { font-weight: 700; font-size: 0.95rem; color: #1a1a2e; }
|
||||||
|
.list-card-text { font-size: 0.875rem; color: #4b5563; margin: 0; line-height: 1.5; }
|
||||||
|
.list-card-link { font-size: 0.8rem; color: #1B4436; text-decoration: none; align-self: flex-end; }
|
||||||
|
.list-empty { text-align: center; color: #6b7280; font-size: 0.9rem; }
|
||||||
|
|
||||||
|
/* ── Bottom sheet ── */
|
||||||
|
|
||||||
|
.bottom-sheet { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 200; display: flex; align-items: flex-end; }
|
||||||
|
.sheet-content { background: white; border-radius: 16px 16px 0 0; padding: 16px 20px 32px; width: 100%; display: flex; flex-direction: column; gap: 12px; max-height: 80vh; overflow-y: auto; }
|
||||||
|
.sheet-handle { width: 36px; height: 4px; background: #d1d5db; border-radius: 2px; align-self: center; margin-bottom: 4px; }
|
||||||
|
.sheet-name { font-size: 1.1rem; font-weight: 700; color: #1a1a2e; }
|
||||||
|
.sheet-section { display: flex; flex-direction: column; gap: 4px; }
|
||||||
|
.sheet-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; }
|
||||||
|
.sheet-text { font-size: 0.9rem; color: #374151; margin: 0; line-height: 1.5; }
|
||||||
|
.sheet-tags { display: flex; flex-wrap: wrap; gap: 6px; }
|
||||||
|
.sheet-tag { font-size: 0.75rem; background: #f3f4f6; color: #374151; padding: 2px 8px; border-radius: 12px; }
|
||||||
|
.sheet-edit-btn { display: block; text-align: center; background: #1B4436; color: white; border-radius: 8px; padding: 12px; text-decoration: none; font-weight: 600; }
|
||||||
|
.sheet-close { background: transparent; border: 1px solid #d1d5db; border-radius: 8px; padding: 10px; color: #6b7280; cursor: pointer; font-size: 0.875rem; }
|
||||||
|
.sheet-enter-active, .sheet-leave-active { transition: opacity 0.2s; }
|
||||||
|
.sheet-enter-from, .sheet-leave-to { opacity: 0; }
|
||||||
|
|
||||||
|
/* ── QR link ── */
|
||||||
|
|
||||||
|
.qr-link {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: #9ca3af;
|
||||||
|
text-decoration: none;
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
.qr-link:hover { color: #6b7280; }
|
||||||
|
|
||||||
|
/* ── Annuaire ── */
|
||||||
|
|
||||||
|
.annuaire-wrap {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.annuaire-scroll {
|
||||||
|
overflow-x: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.annuaire-table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
min-width: 480px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.annuaire-table thead tr {
|
||||||
|
background: #f9fafb;
|
||||||
|
border-bottom: 2px solid #e5e7eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.annuaire-table th {
|
||||||
|
padding: 10px 14px;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
color: #6b7280;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.annuaire-table td {
|
||||||
|
padding: 12px 14px;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: #374151;
|
||||||
|
vertical-align: top;
|
||||||
|
border-bottom: 1px solid #f3f4f6;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.annuaire-row {
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.12s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.annuaire-row:hover { background: #f9fafb; }
|
||||||
|
.annuaire-row:last-child td { border-bottom: none; }
|
||||||
|
|
||||||
|
.col-nom {
|
||||||
|
position: sticky;
|
||||||
|
left: 0;
|
||||||
|
z-index: 2;
|
||||||
|
background: #ffffff;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1a1a2e !important;
|
||||||
|
white-space: nowrap;
|
||||||
|
min-width: 80px;
|
||||||
|
border-right: 2px solid #e5e7eb;
|
||||||
|
box-shadow: 2px 0 6px rgba(0,0,0,0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.annuaire-row:hover .col-nom { background: #f9fafb; }
|
||||||
|
thead tr .col-nom { background: #f9fafb; z-index: 3; }
|
||||||
|
|
||||||
|
.col-besoin { min-width: 200px; max-width: 260px; }
|
||||||
|
.col-offre { min-width: 200px; max-width: 260px; }
|
||||||
|
|
||||||
|
.annuaire-hint {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: #9ca3af;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-actions { width: 40px; text-align: center; }
|
||||||
|
.delete-btn {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #ef4444;
|
||||||
|
font-size: 1rem;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: background 0.1s;
|
||||||
|
}
|
||||||
|
.delete-btn:hover { background: #fef2f2; }
|
||||||
|
|
||||||
|
/* ── Mobile ── */
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.codev-carto {
|
||||||
|
padding: 1rem 0.75rem 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carto-header h1 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
383
pages/codev/demo.vue
Normal file
383
pages/codev/demo.vue
Normal file
@@ -0,0 +1,383 @@
|
|||||||
|
<template>
|
||||||
|
<div class="codev-demo">
|
||||||
|
|
||||||
|
<header class="demo-header">
|
||||||
|
<span class="demo-badge">DEMO</span>
|
||||||
|
<h1>Co-developpement - exemple</h1>
|
||||||
|
<p class="subtitle">10 personnes fictives. Clique sur un mode pour voir les matchs.</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="codev-tabs">
|
||||||
|
<button :class="{ active: tab === 'carto' }" @click="tab = 'carto'" type="button">Carto</button>
|
||||||
|
<button :class="{ active: tab === 'annuaire' }" @click="tab = 'annuaire'" type="button">Annuaire</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="tab === 'carto'">
|
||||||
|
<ClientOnly>
|
||||||
|
<CodevGraph
|
||||||
|
:fiches="fiches"
|
||||||
|
:matches="matches"
|
||||||
|
:mode="mode"
|
||||||
|
/>
|
||||||
|
<template #fallback>
|
||||||
|
<div class="graph-fallback">Chargement du graphe...</div>
|
||||||
|
</template>
|
||||||
|
</ClientOnly>
|
||||||
|
|
||||||
|
<!-- Bandeau info mode actif -->
|
||||||
|
<div v-if="mode !== 'none'" class="mode-banner">
|
||||||
|
<span>
|
||||||
|
Mode {{ MODE_LABELS[mode] }} actif -
|
||||||
|
{{ matches.length }} connexion{{ matches.length !== 1 ? 's' : '' }} trouvee{{ matches.length !== 1 ? 's' : '' }}.
|
||||||
|
</span>
|
||||||
|
<button class="banner-clear" @click="setMode('none')" type="button">Effacer</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Boutons matching -->
|
||||||
|
<div class="matching-controls">
|
||||||
|
<button
|
||||||
|
:class="{ active: mode === 'solution' }"
|
||||||
|
style="--mode-color: #22c55e"
|
||||||
|
@click="setMode('solution')"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
Solution
|
||||||
|
<span class="hint">besoin - offre</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
:class="{ active: mode === 'alliance' }"
|
||||||
|
style="--mode-color: #f97316"
|
||||||
|
@click="setMode('alliance')"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
Alliance
|
||||||
|
<span class="hint">besoins partages</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
v-if="mode !== 'none'"
|
||||||
|
class="reset"
|
||||||
|
@click="setMode('none')"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
Effacer
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else-if="tab === 'annuaire'" class="annuaire-wrap">
|
||||||
|
<div class="annuaire-scroll">
|
||||||
|
<table class="annuaire-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="col-nom">Prénom</th>
|
||||||
|
<th class="col-besoin">Besoin</th>
|
||||||
|
<th class="col-offre">Ce que j'offre</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="f in fiches" :key="f.id" class="annuaire-row">
|
||||||
|
<td class="col-nom">{{ f.nom }}</td>
|
||||||
|
<td class="col-besoin">{{ f.besoin }}</td>
|
||||||
|
<td class="col-offre">{{ f.offre }}</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import type { CodevFiche, CodevMatch } from '~/types/codev'
|
||||||
|
import { computeMatches } from '~/utils/codev/matching'
|
||||||
|
|
||||||
|
const tab = ref<'carto' | 'annuaire'>('carto')
|
||||||
|
|
||||||
|
// 10 fiches sans hashtags — textes enrichis pour que scoreDirect discrimine bien les 3 modes :
|
||||||
|
//
|
||||||
|
// Solution (scoreDirect besoinA vs offreB) :
|
||||||
|
// Sami(besoin vendre formation) -> Ines(offre vente formations) ✓
|
||||||
|
// Nael(besoin site web formation) -> Sami(offre developpement web) ✓
|
||||||
|
// Eva(besoin coaching vente) -> Ines(offre vente formations) ✓
|
||||||
|
// Tom(besoin tiers-lieu) -> Zoe(offre facilitation tiers-lieux) ✓
|
||||||
|
//
|
||||||
|
// Alliance (besoins similaires) :
|
||||||
|
// Lea + Maya (coaching, lancer, offre) ✓
|
||||||
|
// Tom + Zoe (tiers-lieu, co-creer) ✓
|
||||||
|
// Sami + Kenji (vendre, formations) ✓
|
||||||
|
//
|
||||||
|
// Surprise (offres similaires) :
|
||||||
|
// Lea + Zoe (facilitation, groupes) ✓
|
||||||
|
// Tom + Roman (architecture) ✓
|
||||||
|
// Ines + Nael (marketing, formations) ✓
|
||||||
|
|
||||||
|
const FICHES_DEMO: CodevFiche[] = [
|
||||||
|
{
|
||||||
|
id: 1, nom: 'Lea',
|
||||||
|
besoin: 'Structurer et lancer mon offre de coaching professionnel cet automne',
|
||||||
|
offre: 'Facilitation de groupes et animation de cercles de parole',
|
||||||
|
hashtags: [],
|
||||||
|
created_at: '2026-05-08T10:00:00Z',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2, nom: 'Sami',
|
||||||
|
besoin: 'Vendre ma formation en ligne et attirer mes premiers clients',
|
||||||
|
offre: 'Developpement web sur mesure, creation de sites et applications',
|
||||||
|
hashtags: [],
|
||||||
|
created_at: '2026-05-08T10:01:00Z',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3, nom: 'Ines',
|
||||||
|
besoin: 'Ameliorer la facilitation de mes ateliers collaboratifs',
|
||||||
|
offre: 'Vente de formations en ligne et marketing pour formateurs',
|
||||||
|
hashtags: [],
|
||||||
|
created_at: '2026-05-08T10:02:00Z',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4, nom: 'Tom',
|
||||||
|
besoin: 'Trouver des associes pour co-creer un tiers-lieu rural',
|
||||||
|
offre: 'Architecture bioclimatique et eco-construction pour tiers-lieux',
|
||||||
|
hashtags: [],
|
||||||
|
created_at: '2026-05-08T10:03:00Z',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5, nom: 'Maya',
|
||||||
|
besoin: 'Creer et lancer mon offre de coaching en transition professionnelle',
|
||||||
|
offre: 'Accompagnement coaching de carriere et transitions professionnelles',
|
||||||
|
hashtags: [],
|
||||||
|
created_at: '2026-05-08T10:04:00Z',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6, nom: 'Kenji',
|
||||||
|
besoin: 'Apprendre a vendre mes formations sans pression commerciale',
|
||||||
|
offre: 'Photographie professionnelle et direction artistique editoriale',
|
||||||
|
hashtags: [],
|
||||||
|
created_at: '2026-05-08T10:05:00Z',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7, nom: 'Zoe',
|
||||||
|
besoin: 'Co-creer un tiers-lieu avec des porteurs de projet alignes',
|
||||||
|
offre: 'Facilitation de collectifs et animation en intelligence collective',
|
||||||
|
hashtags: [],
|
||||||
|
created_at: '2026-05-08T10:06:00Z',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8, nom: 'Nael',
|
||||||
|
besoin: 'Creer un site web pour presenter et vendre ma formation',
|
||||||
|
offre: 'Strategie marketing digital et lancement de produits en ligne',
|
||||||
|
hashtags: [],
|
||||||
|
created_at: '2026-05-08T10:07:00Z',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9, nom: 'Eva',
|
||||||
|
besoin: 'Lancer mon coaching avec une page de vente qui convertit',
|
||||||
|
offre: 'Ecriture longue forme, articles de fond et tribunes editoriales',
|
||||||
|
hashtags: [],
|
||||||
|
created_at: '2026-05-08T10:08:00Z',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10, nom: 'Roman',
|
||||||
|
besoin: 'Ecrire de meilleurs articles pour mon blog et ma newsletter',
|
||||||
|
offre: 'Architecture technique et plans pour renovation energetique',
|
||||||
|
hashtags: [],
|
||||||
|
created_at: '2026-05-08T10:09:00Z',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
const fiches = ref(FICHES_DEMO)
|
||||||
|
const matches = ref<CodevMatch[]>([])
|
||||||
|
const mode = ref<'none' | 'solution' | 'alliance' | 'surprise'>('none')
|
||||||
|
|
||||||
|
const MODE_LABELS: Record<string, string> = {
|
||||||
|
solution: 'Solution',
|
||||||
|
alliance: 'Alliance',
|
||||||
|
surprise: 'Surprise',
|
||||||
|
}
|
||||||
|
|
||||||
|
useHead({ title: 'Demo - Co-developpement' })
|
||||||
|
|
||||||
|
function setMode(newMode: typeof mode.value) {
|
||||||
|
mode.value = newMode
|
||||||
|
if (newMode === 'none') {
|
||||||
|
matches.value = []
|
||||||
|
} else {
|
||||||
|
matches.value = computeMatches(fiches.value, newMode, 0.12)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.codev-demo {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: var(--nav-bg, #fafafa);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 1.25rem 1rem 2rem;
|
||||||
|
gap: 1rem;
|
||||||
|
max-width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── En-tete ── */
|
||||||
|
|
||||||
|
.demo-header {
|
||||||
|
text-align: center;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-badge {
|
||||||
|
display: inline-block;
|
||||||
|
background: #f97316;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-header h1 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--nav-text, #1a1a2e);
|
||||||
|
margin: 0 0 0.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--nav-text-muted, #6b7280);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Fallback ── */
|
||||||
|
|
||||||
|
.graph-fallback {
|
||||||
|
width: 100%;
|
||||||
|
height: 70vh;
|
||||||
|
min-height: 320px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: var(--nav-text-muted, #6b7280);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
background: var(--nav-bg-alt, #f3f4f6);
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Bandeau mode actif ── */
|
||||||
|
|
||||||
|
.mode-banner {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding: 0.5rem 0.875rem;
|
||||||
|
background: #f0fdf4;
|
||||||
|
border: 1px solid #bbf7d0;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: #166534;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-clear {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #166534;
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid #166534;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 0.2rem 0.6rem;
|
||||||
|
cursor: pointer;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-clear:hover {
|
||||||
|
background: #166534;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Boutons matching ── */
|
||||||
|
|
||||||
|
.matching-controls {
|
||||||
|
position: sticky;
|
||||||
|
bottom: 0;
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 12px;
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
border-top: 1px solid #e5e7eb;
|
||||||
|
margin: 0 -1rem -2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.matching-controls button {
|
||||||
|
flex: 1;
|
||||||
|
padding: 12px 8px;
|
||||||
|
border: 1px solid #d0d4dc;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: white;
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 2px;
|
||||||
|
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.matching-controls button .hint {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #6b7280;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.matching-controls button.active {
|
||||||
|
background: var(--mode-color, #1B4436);
|
||||||
|
color: white;
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.matching-controls button.active .hint {
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.matching-controls button.reset {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
padding: 12px 16px;
|
||||||
|
background: #f3f4f6;
|
||||||
|
border-color: #d0d4dc;
|
||||||
|
color: #374151;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.matching-controls button.reset:hover {
|
||||||
|
background: #e5e7eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
.matching-controls {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
margin: 0 -0.75rem -1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.matching-controls button.reset {
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Mobile ── */
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.codev-demo {
|
||||||
|
padding: 1rem 0.75rem 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-header h1 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
415
pages/codev/fiche.vue
Normal file
415
pages/codev/fiche.vue
Normal file
@@ -0,0 +1,415 @@
|
|||||||
|
<template>
|
||||||
|
<div class="fiche-page">
|
||||||
|
<div class="fiche-inner">
|
||||||
|
|
||||||
|
<!-- En-tête -->
|
||||||
|
<div class="fiche-header">
|
||||||
|
<NuxtLink to="/codev/carto" class="back-link">← Retour à la carte</NuxtLink>
|
||||||
|
<h1>{{ isEdit ? 'Modifier ma fiche' : 'Ma fiche' }}</h1>
|
||||||
|
<p class="fiche-lead">3 lignes pour te présenter. Le reste se passe entre nous.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Formulaire -->
|
||||||
|
<form class="fiche-form" @submit.prevent="submit" novalidate>
|
||||||
|
|
||||||
|
<!-- Nom -->
|
||||||
|
<div class="field-group">
|
||||||
|
<label for="nom">
|
||||||
|
Prénom <span class="required">*</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="nom"
|
||||||
|
v-model="form.nom"
|
||||||
|
type="text"
|
||||||
|
placeholder="Ex : Camille"
|
||||||
|
required
|
||||||
|
minlength="2"
|
||||||
|
maxlength="50"
|
||||||
|
:disabled="loading"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Besoin -->
|
||||||
|
<div class="field-group">
|
||||||
|
<div class="label-row">
|
||||||
|
<label for="besoin">
|
||||||
|
Mon besoin actuel <span class="required">*</span>
|
||||||
|
</label>
|
||||||
|
<button type="button" class="tooltip-trigger" @click="toggleTip('besoin')" aria-label="C'est quoi un besoin ?">?</button>
|
||||||
|
</div>
|
||||||
|
<details v-if="activeTip === 'besoin'" class="tooltip-block" open>
|
||||||
|
<summary class="sr-only">Aide</summary>
|
||||||
|
<p>Un besoin, c'est ce qui te manque pour avancer. Ca peut etre concret (un coup de main sur un dossier) ou plus large (clarifier ou tu vas). Pas grave si c'est flou - la rencontre IRL aide a le preciser.</p>
|
||||||
|
</details>
|
||||||
|
<textarea
|
||||||
|
id="besoin"
|
||||||
|
v-model="form.besoin"
|
||||||
|
rows="3"
|
||||||
|
placeholder="Ex : J'ai besoin d'aide pour structurer mon offre de prestation"
|
||||||
|
required
|
||||||
|
minlength="5"
|
||||||
|
maxlength="300"
|
||||||
|
:disabled="loading"
|
||||||
|
/>
|
||||||
|
<span class="char-count" :class="{ 'char-warn': form.besoin.length > 260 }">
|
||||||
|
{{ form.besoin.length }}/300
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Offre -->
|
||||||
|
<div class="field-group">
|
||||||
|
<div class="label-row">
|
||||||
|
<label for="offre">
|
||||||
|
Ce que j'offre a la communaute <span class="required">*</span>
|
||||||
|
</label>
|
||||||
|
<button type="button" class="tooltip-trigger" @click="toggleTip('offre')" aria-label="C'est quoi une offre ?">?</button>
|
||||||
|
</div>
|
||||||
|
<details v-if="activeTip === 'offre'" class="tooltip-block" open>
|
||||||
|
<summary class="sr-only">Aide</summary>
|
||||||
|
<p>Une offre, c'est une competence, une experience ou une qualite que tu peux partager. Ce que les autres viennent chercher chez toi naturellement.</p>
|
||||||
|
</details>
|
||||||
|
<textarea
|
||||||
|
id="offre"
|
||||||
|
v-model="form.offre"
|
||||||
|
rows="3"
|
||||||
|
placeholder="Ex : Je peux partager mon expérience en facilitation de groupe"
|
||||||
|
required
|
||||||
|
minlength="5"
|
||||||
|
maxlength="300"
|
||||||
|
:disabled="loading"
|
||||||
|
/>
|
||||||
|
<span class="char-count" :class="{ 'char-warn': form.offre.length > 260 }">
|
||||||
|
{{ form.offre.length }}/300
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Hashtags -->
|
||||||
|
<div class="field-group">
|
||||||
|
<label for="hashtags">
|
||||||
|
Mots-clés
|
||||||
|
<span class="label-hint">(optionnel, 3 max, séparés par des virgules)</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="hashtags"
|
||||||
|
v-model="form.hashtagsRaw"
|
||||||
|
type="text"
|
||||||
|
placeholder="Ex : business, écriture, écologie"
|
||||||
|
maxlength="120"
|
||||||
|
:disabled="loading"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Erreur serveur -->
|
||||||
|
<div v-if="error" class="server-error" role="alert">
|
||||||
|
{{ error }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Bouton -->
|
||||||
|
<button type="submit" class="submit-btn" :disabled="loading">
|
||||||
|
{{ isEdit ? (loading ? 'Modification...' : 'Enregistrer les modifications') : (loading ? 'Envoi en cours...' : 'Ajouter ma fiche') }}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<NuxtLink to="/codev/carto" class="skip-link">
|
||||||
|
Voir la carte sans créer de fiche →
|
||||||
|
</NuxtLink>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
const route = useRoute()
|
||||||
|
const editId = computed(() => route.query.id ? Number(route.query.id) : null)
|
||||||
|
const isEdit = computed(() => editId.value !== null)
|
||||||
|
|
||||||
|
const form = ref({ nom: '', besoin: '', offre: '', hashtagsRaw: '' })
|
||||||
|
const error = ref('')
|
||||||
|
const loading = ref(false)
|
||||||
|
const activeTip = ref<'besoin' | 'offre' | null>(null)
|
||||||
|
|
||||||
|
useHead({ title: computed(() => isEdit.value ? 'Modifier ma fiche — Co-développement' : 'Ma fiche — Co-développement') })
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
if (!isEdit.value) return
|
||||||
|
try {
|
||||||
|
const fiche = await $fetch<any>(`/api/codev/fiches/${editId.value}`)
|
||||||
|
form.value.nom = fiche.nom
|
||||||
|
form.value.besoin = fiche.besoin
|
||||||
|
form.value.offre = fiche.offre
|
||||||
|
form.value.hashtagsRaw = fiche.hashtags.join(', ')
|
||||||
|
} catch {
|
||||||
|
error.value = 'Impossible de charger la fiche, elle a peut-etre ete supprimee.'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
function toggleTip(field: 'besoin' | 'offre') {
|
||||||
|
activeTip.value = activeTip.value === field ? null : field
|
||||||
|
}
|
||||||
|
|
||||||
|
async function submit() {
|
||||||
|
error.value = ''
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
const hashtags = form.value.hashtagsRaw
|
||||||
|
.split(',')
|
||||||
|
.map((h) => h.trim().toLowerCase().replace(/^#/, ''))
|
||||||
|
.filter(Boolean)
|
||||||
|
.slice(0, 3)
|
||||||
|
|
||||||
|
const payload = {
|
||||||
|
nom: form.value.nom,
|
||||||
|
besoin: form.value.besoin,
|
||||||
|
offre: form.value.offre,
|
||||||
|
hashtags,
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isEdit.value) {
|
||||||
|
await $fetch(`/api/codev/fiches/${editId.value}`, { method: 'PATCH', body: payload })
|
||||||
|
} else {
|
||||||
|
await $fetch('/api/codev/fiches', { method: 'POST', body: payload })
|
||||||
|
}
|
||||||
|
await navigateTo('/codev/carto')
|
||||||
|
} catch (e: any) {
|
||||||
|
error.value = e?.data?.message || e?.statusMessage || 'Erreur, reessaie'
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* ── Layout ── */
|
||||||
|
|
||||||
|
.fiche-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: var(--nav-bg, #fafafa);
|
||||||
|
padding: 1.5rem 1rem 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fiche-inner {
|
||||||
|
max-width: 480px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── En-tête ── */
|
||||||
|
|
||||||
|
.back-link {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--nav-text-muted, #6b7280);
|
||||||
|
text-decoration: none;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-link:hover {
|
||||||
|
color: var(--nav-primary-solid, #1B4436);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fiche-header h1 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--nav-text, #1a1a2e);
|
||||||
|
margin: 0 0 0.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fiche-lead {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--nav-text-muted, #6b7280);
|
||||||
|
margin: 0;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Formulaire ── */
|
||||||
|
|
||||||
|
.fiche-form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Champ ── */
|
||||||
|
|
||||||
|
.field-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-group label {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--nav-text, #1a1a2e);
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-hint {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--nav-text-muted, #6b7280);
|
||||||
|
margin-left: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.required {
|
||||||
|
color: #c0392b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-group input[type="text"],
|
||||||
|
.field-group input[type="password"],
|
||||||
|
.field-group textarea {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.75rem 0.875rem;
|
||||||
|
border: 1px solid var(--border-color, #d0d4dc);
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: var(--nav-text, #1a1a2e);
|
||||||
|
background: var(--nav-surface, #ffffff);
|
||||||
|
font-family: inherit;
|
||||||
|
transition: border-color 0.15s, box-shadow 0.15s;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-group input:focus,
|
||||||
|
.field-group textarea:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--nav-primary-solid, #1B4436);
|
||||||
|
box-shadow: 0 0 0 2px rgba(27, 68, 54, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-group input:disabled,
|
||||||
|
.field-group textarea:disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-group textarea {
|
||||||
|
resize: vertical;
|
||||||
|
min-height: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.char-count {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--nav-text-muted, #6b7280);
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.char-warn {
|
||||||
|
color: #e67e22;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Tooltip ── */
|
||||||
|
|
||||||
|
.tooltip-trigger {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background: var(--nav-surface, #ffffff);
|
||||||
|
border: 1px solid var(--border-color, #d0d4dc);
|
||||||
|
border-radius: 50%;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--nav-text-muted, #6b7280);
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0;
|
||||||
|
line-height: 1;
|
||||||
|
flex-shrink: 0;
|
||||||
|
transition: border-color 0.15s, color 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip-trigger:hover {
|
||||||
|
border-color: var(--nav-primary-solid, #1B4436);
|
||||||
|
color: var(--nav-primary-solid, #1B4436);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip-block {
|
||||||
|
background: var(--nav-surface, #ffffff);
|
||||||
|
border: 1px solid var(--border-color, #d0d4dc);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 0.75rem 0.875rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--nav-text-muted, #6b7280);
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip-block p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sr-only {
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
padding: 0;
|
||||||
|
margin: -1px;
|
||||||
|
overflow: hidden;
|
||||||
|
clip: rect(0, 0, 0, 0);
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Erreur serveur ── */
|
||||||
|
|
||||||
|
.server-error {
|
||||||
|
padding: 0.75rem 0.875rem;
|
||||||
|
background: #fdf0ee;
|
||||||
|
border: 1px solid #e74c3c;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: #c0392b;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Bouton ── */
|
||||||
|
|
||||||
|
.submit-btn {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.875rem 1rem;
|
||||||
|
background: var(--nav-primary-solid, #1B4436);
|
||||||
|
color: #ffffff;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: inherit;
|
||||||
|
transition: opacity 0.15s;
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn:hover:not(:disabled) {
|
||||||
|
opacity: 0.88;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn:disabled {
|
||||||
|
opacity: 0.45;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skip-link {
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.825rem;
|
||||||
|
color: var(--nav-text-muted, #9ca3af);
|
||||||
|
text-decoration: none;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
.skip-link:hover { color: var(--nav-text, #1a1a2e); }
|
||||||
|
|
||||||
|
/* ── Responsive ── */
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.fiche-page {
|
||||||
|
padding: 1.25rem 1rem 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
217
pages/codev/index.vue
Normal file
217
pages/codev/index.vue
Normal file
@@ -0,0 +1,217 @@
|
|||||||
|
<template>
|
||||||
|
<div class="lock-page">
|
||||||
|
<div class="lock-inner">
|
||||||
|
|
||||||
|
<div class="lock-header">
|
||||||
|
<h1>Co-développement</h1>
|
||||||
|
<p class="lock-subtitle">Entraide entre pairs</p>
|
||||||
|
<p class="lock-intro">Cet espace est un cercle. Pour entrer, il y a un mot.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form class="lock-form" @submit.prevent="submit" novalidate>
|
||||||
|
|
||||||
|
<div class="field-group">
|
||||||
|
<input
|
||||||
|
id="password"
|
||||||
|
v-model="password"
|
||||||
|
type="password"
|
||||||
|
placeholder="Mot de passe"
|
||||||
|
autocomplete="current-password"
|
||||||
|
required
|
||||||
|
:disabled="loading"
|
||||||
|
class="lock-input"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="error" class="lock-error" role="alert">
|
||||||
|
{{ error }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" class="lock-btn" :disabled="loading || !password">
|
||||||
|
{{ loading ? 'Vérification...' : 'Entrer' }}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="lock-footer">
|
||||||
|
<NuxtLink to="/codev/demo" class="demo-link">Voir l'exemple →</NuxtLink>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
const password = ref('')
|
||||||
|
const error = ref('')
|
||||||
|
const loading = ref(false)
|
||||||
|
|
||||||
|
useHead({ title: 'Co-développement — Entraide entre pairs' })
|
||||||
|
|
||||||
|
async function submit() {
|
||||||
|
error.value = ''
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
await $fetch('/api/codev/auth', {
|
||||||
|
method: 'POST',
|
||||||
|
body: { password: password.value },
|
||||||
|
})
|
||||||
|
await navigateTo('/codev/fiche')
|
||||||
|
} catch (e: any) {
|
||||||
|
error.value = e?.statusMessage || 'Mauvais mot de passe'
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* ── Layout ── */
|
||||||
|
|
||||||
|
.lock-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: var(--nav-bg, #fafafa);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 1.5rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lock-inner {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 400px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── En-tête ── */
|
||||||
|
|
||||||
|
.lock-header {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lock-header h1 {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--nav-text, #1a1a2e);
|
||||||
|
margin: 0 0 0.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lock-subtitle {
|
||||||
|
font-size: 1rem;
|
||||||
|
color: var(--nav-text-muted, #6b7280);
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lock-intro {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--nav-text-muted, #6b7280);
|
||||||
|
line-height: 1.5;
|
||||||
|
margin: 0;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Formulaire ── */
|
||||||
|
|
||||||
|
.lock-form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lock-input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.875rem 1rem;
|
||||||
|
border: 1px solid var(--border-color, #d0d4dc);
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: var(--nav-text, #1a1a2e);
|
||||||
|
background: var(--nav-surface, #ffffff);
|
||||||
|
font-family: inherit;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
transition: border-color 0.15s, box-shadow 0.15s;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lock-input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--nav-primary-solid, #1B4436);
|
||||||
|
box-shadow: 0 0 0 2px rgba(27, 68, 54, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lock-input:disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Erreur ── */
|
||||||
|
|
||||||
|
.lock-error {
|
||||||
|
padding: 0.625rem 0.875rem;
|
||||||
|
background: #fdf0ee;
|
||||||
|
border: 1px solid #e74c3c;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: #c0392b;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Bouton ── */
|
||||||
|
|
||||||
|
.lock-btn {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.875rem 1rem;
|
||||||
|
background: var(--nav-primary-solid, #1B4436);
|
||||||
|
color: #ffffff;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: inherit;
|
||||||
|
transition: opacity 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lock-btn:hover:not(:disabled) {
|
||||||
|
opacity: 0.88;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lock-btn:disabled {
|
||||||
|
opacity: 0.45;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Pied de page ── */
|
||||||
|
|
||||||
|
.lock-footer {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-link {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--nav-text-muted, #6b7280);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-link:hover {
|
||||||
|
color: var(--nav-primary-solid, #1B4436);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Responsive ── */
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.lock-page {
|
||||||
|
padding: 1.25rem 1rem 2.5rem;
|
||||||
|
align-items: flex-start;
|
||||||
|
padding-top: 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
94
pages/codev/qr.vue
Normal file
94
pages/codev/qr.vue
Normal file
@@ -0,0 +1,94 @@
|
|||||||
|
<template>
|
||||||
|
<div class="qr-page">
|
||||||
|
<div class="qr-card">
|
||||||
|
<h1>Co-développement</h1>
|
||||||
|
<p class="qr-subtitle">Scanne pour rejoindre la session</p>
|
||||||
|
|
||||||
|
<img
|
||||||
|
:src="`https://api.qrserver.com/v1/create-qr-code/?size=280x280&data=${encodeURIComponent(APP_URL)}&bgcolor=ffffff&color=1B4436&margin=2`"
|
||||||
|
alt="QR code aep.trans-former.fr/codev"
|
||||||
|
class="qr-img"
|
||||||
|
width="280"
|
||||||
|
height="280"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<p class="qr-url">{{ APP_URL }}</p>
|
||||||
|
<p class="qr-password">Mot de passe : <strong>merci</strong></p>
|
||||||
|
|
||||||
|
<a :href="`https://api.qrserver.com/v1/create-qr-code/?size=600x600&data=${encodeURIComponent(APP_URL)}&bgcolor=ffffff&color=1B4436&margin=2`"
|
||||||
|
download="codev-qr.png"
|
||||||
|
class="qr-download"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
Télécharger le QR code
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
const APP_URL = 'https://aep.trans-former.fr/codev'
|
||||||
|
useHead({ title: 'QR Code — Co-développement' })
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.qr-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: var(--nav-bg, #fafafa);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 2rem 1rem;
|
||||||
|
}
|
||||||
|
.qr-card {
|
||||||
|
background: white;
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 2rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
max-width: 360px;
|
||||||
|
width: 100%;
|
||||||
|
box-shadow: 0 4px 24px rgba(0,0,0,0.08);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.qr-card h1 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1a1a2e;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.qr-subtitle {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #6b7280;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.qr-img {
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 2px solid #e5e7eb;
|
||||||
|
}
|
||||||
|
.qr-url {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #9ca3af;
|
||||||
|
margin: 0;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
.qr-password {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
color: #374151;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.qr-download {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 10px 20px;
|
||||||
|
background: #1B4436;
|
||||||
|
color: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: opacity 0.15s;
|
||||||
|
}
|
||||||
|
.qr-download:hover { opacity: 0.88; }
|
||||||
|
</style>
|
||||||
46
server/api/codev/auth.post.ts
Normal file
46
server/api/codev/auth.post.ts
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
import { z } from 'zod'
|
||||||
|
|
||||||
|
const AuthSchema = z.object({
|
||||||
|
password: z.string().min(1).max(100),
|
||||||
|
})
|
||||||
|
|
||||||
|
export default defineEventHandler(async (event) => {
|
||||||
|
const body = await readBody(event)
|
||||||
|
const parsed = AuthSchema.safeParse(body)
|
||||||
|
|
||||||
|
if (!parsed.success) {
|
||||||
|
throw createError({ statusCode: 422, statusMessage: 'Mot de passe invalide' })
|
||||||
|
}
|
||||||
|
|
||||||
|
const config = useRuntimeConfig()
|
||||||
|
const expected = config.codevPassword || 'merci'
|
||||||
|
|
||||||
|
const isAdmin = parsed.data.password.trim().toLowerCase() === (config.codevAdminPassword || 'admin2026').trim().toLowerCase()
|
||||||
|
const isUser = parsed.data.password.trim().toLowerCase() === expected.trim().toLowerCase()
|
||||||
|
|
||||||
|
if (!isAdmin && !isUser) {
|
||||||
|
throw createError({ statusCode: 401, statusMessage: 'Mauvais mot de passe' })
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cookie session (user + admin)
|
||||||
|
setCookie(event, 'codev_session', 'ok', {
|
||||||
|
httpOnly: true,
|
||||||
|
sameSite: 'lax',
|
||||||
|
secure: process.env.NODE_ENV === 'production',
|
||||||
|
maxAge: 60 * 60 * 24, // 24h
|
||||||
|
path: '/',
|
||||||
|
})
|
||||||
|
|
||||||
|
// Cookie admin si mot de passe admin
|
||||||
|
if (isAdmin) {
|
||||||
|
setCookie(event, 'codev_admin', 'ok', {
|
||||||
|
httpOnly: true,
|
||||||
|
sameSite: 'lax',
|
||||||
|
secure: process.env.NODE_ENV === 'production',
|
||||||
|
maxAge: 60 * 60 * 24, // 24h
|
||||||
|
path: '/',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return { status: 200, ok: true, admin: isAdmin }
|
||||||
|
})
|
||||||
31
server/api/codev/fiches.get.ts
Normal file
31
server/api/codev/fiches.get.ts
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
import type { CodevFiche } from '~/types/codev'
|
||||||
|
|
||||||
|
export default defineEventHandler(async (event): Promise<{ list: CodevFiche[] }> => {
|
||||||
|
const config = useRuntimeConfig()
|
||||||
|
const tableId = config.codevTableId
|
||||||
|
|
||||||
|
if (!tableId) {
|
||||||
|
throw createError({ statusCode: 500, message: 'codevTableId non configuré' })
|
||||||
|
}
|
||||||
|
|
||||||
|
const url = `${config.nocodbUrl}/api/v2/tables/${tableId}/records?sort=created_at&limit=200`
|
||||||
|
|
||||||
|
const data: any = await $fetch(url, {
|
||||||
|
headers: { 'xc-token': config.nocodbToken },
|
||||||
|
}).catch(() => ({ list: [] }))
|
||||||
|
|
||||||
|
// Mapper chaque record NocoDB vers CodevFiche
|
||||||
|
const list: CodevFiche[] = (data?.list ?? []).map((r: any) => ({
|
||||||
|
id: r.Id ?? r.id,
|
||||||
|
nom: r.nom || '',
|
||||||
|
besoin: r.besoin || '',
|
||||||
|
offre: r.offre || '',
|
||||||
|
hashtags: (r.hashtags || '')
|
||||||
|
.split(',')
|
||||||
|
.map((h: string) => h.trim().toLowerCase().replace(/^#/, ''))
|
||||||
|
.filter(Boolean),
|
||||||
|
created_at: r.created_at || r.CreatedAt || new Date().toISOString(),
|
||||||
|
}))
|
||||||
|
|
||||||
|
return { list }
|
||||||
|
})
|
||||||
63
server/api/codev/fiches.post.ts
Normal file
63
server/api/codev/fiches.post.ts
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
import { z } from 'zod'
|
||||||
|
|
||||||
|
const FicheSchema = z.object({
|
||||||
|
nom: z.string().min(2).max(50).trim(),
|
||||||
|
besoin: z.string().min(5).max(300).trim(),
|
||||||
|
offre: z.string().min(5).max(300).trim(),
|
||||||
|
hashtags: z.array(z.string().max(30)).max(3).default([]),
|
||||||
|
})
|
||||||
|
|
||||||
|
export default defineEventHandler(async (event) => {
|
||||||
|
const body = await readBody(event)
|
||||||
|
const parsed = FicheSchema.safeParse(body)
|
||||||
|
|
||||||
|
if (!parsed.success) {
|
||||||
|
throw createError({
|
||||||
|
statusCode: 422,
|
||||||
|
statusMessage: 'Validation échouée',
|
||||||
|
data: parsed.error.flatten().fieldErrors,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const config = useRuntimeConfig()
|
||||||
|
const tableId = config.codevTableId
|
||||||
|
const baseId = config.codevBaseId || 'pipilvsi7dibo80'
|
||||||
|
|
||||||
|
const payload = {
|
||||||
|
nom: parsed.data.nom,
|
||||||
|
besoin: parsed.data.besoin,
|
||||||
|
offre: parsed.data.offre,
|
||||||
|
hashtags: parsed.data.hashtags
|
||||||
|
.map((h) => h.trim().toLowerCase().replace(/^#/, ''))
|
||||||
|
.filter(Boolean)
|
||||||
|
.slice(0, 3)
|
||||||
|
.join(','),
|
||||||
|
created_at: new Date().toISOString(),
|
||||||
|
}
|
||||||
|
|
||||||
|
// NocoDB v1 endpoint pour INSERT (cf. submit/index.post.ts pour le pattern)
|
||||||
|
const insertUrl = `${config.nocodbUrl}/api/v1/db/data/noco/${baseId}/${tableId}`
|
||||||
|
|
||||||
|
let inserted: any
|
||||||
|
try {
|
||||||
|
inserted = await $fetch(insertUrl, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'xc-token': config.nocodbToken,
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify(payload),
|
||||||
|
})
|
||||||
|
} catch (e: any) {
|
||||||
|
console.error('[codev/fiches.post] NocoDB insert error:', e?.message ?? e)
|
||||||
|
throw createError({
|
||||||
|
statusCode: 502,
|
||||||
|
statusMessage: 'Erreur serveur, réessaie',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
status: 201,
|
||||||
|
id: inserted?.Id ?? inserted?.id ?? null,
|
||||||
|
}
|
||||||
|
})
|
||||||
25
server/api/codev/fiches/[id].delete.ts
Normal file
25
server/api/codev/fiches/[id].delete.ts
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
export default defineEventHandler(async (event) => {
|
||||||
|
// Vérif cookie admin
|
||||||
|
const adminCookie = getCookie(event, 'codev_admin')
|
||||||
|
if (adminCookie !== 'ok') {
|
||||||
|
throw createError({ statusCode: 403, statusMessage: 'Accès refusé' })
|
||||||
|
}
|
||||||
|
|
||||||
|
const config = useRuntimeConfig()
|
||||||
|
const tableId = config.codevTableId
|
||||||
|
const id = getRouterParam(event, 'id')
|
||||||
|
|
||||||
|
if (!tableId || !id) {
|
||||||
|
throw createError({ statusCode: 400, message: 'Parametre manquant' })
|
||||||
|
}
|
||||||
|
|
||||||
|
await $fetch(`${config.nocodbUrl}/api/v2/tables/${tableId}/records`, {
|
||||||
|
method: 'DELETE',
|
||||||
|
headers: { 'xc-token': config.nocodbToken, 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ Id: Number(id) }),
|
||||||
|
}).catch(() => {
|
||||||
|
throw createError({ statusCode: 502, statusMessage: 'Erreur suppression' })
|
||||||
|
})
|
||||||
|
|
||||||
|
return { status: 200, ok: true }
|
||||||
|
})
|
||||||
34
server/api/codev/fiches/[id].get.ts
Normal file
34
server/api/codev/fiches/[id].get.ts
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
import type { CodevFiche } from '~/types/codev'
|
||||||
|
|
||||||
|
export default defineEventHandler(async (event): Promise<CodevFiche> => {
|
||||||
|
const config = useRuntimeConfig()
|
||||||
|
const tableId = config.codevTableId
|
||||||
|
const baseId = config.codevBaseId || 'pipilvsi7dibo80'
|
||||||
|
const id = getRouterParam(event, 'id')
|
||||||
|
|
||||||
|
if (!tableId || !id) {
|
||||||
|
throw createError({ statusCode: 400, message: 'Parametre manquant' })
|
||||||
|
}
|
||||||
|
|
||||||
|
const url = `${config.nocodbUrl}/api/v1/db/data/noco/${baseId}/${tableId}/${id}`
|
||||||
|
|
||||||
|
const r: any = await $fetch(url, {
|
||||||
|
headers: { 'xc-token': config.nocodbToken },
|
||||||
|
}).catch(() => null)
|
||||||
|
|
||||||
|
if (!r) {
|
||||||
|
throw createError({ statusCode: 404, message: 'Fiche introuvable' })
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: r.Id ?? r.id,
|
||||||
|
nom: r.nom || '',
|
||||||
|
besoin: r.besoin || '',
|
||||||
|
offre: r.offre || '',
|
||||||
|
hashtags: (r.hashtags || '')
|
||||||
|
.split(',')
|
||||||
|
.map((h: string) => h.trim().toLowerCase().replace(/^#/, ''))
|
||||||
|
.filter(Boolean),
|
||||||
|
created_at: r.created_at || r.CreatedAt || '',
|
||||||
|
}
|
||||||
|
})
|
||||||
59
server/api/codev/fiches/[id].patch.ts
Normal file
59
server/api/codev/fiches/[id].patch.ts
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
import { z } from 'zod'
|
||||||
|
|
||||||
|
const PatchSchema = z.object({
|
||||||
|
nom: z.string().min(2).max(50).trim(),
|
||||||
|
besoin: z.string().min(5).max(300).trim(),
|
||||||
|
offre: z.string().min(5).max(300).trim(),
|
||||||
|
hashtags: z.array(z.string().max(30)).max(3).default([]),
|
||||||
|
})
|
||||||
|
|
||||||
|
export default defineEventHandler(async (event) => {
|
||||||
|
const config = useRuntimeConfig()
|
||||||
|
const tableId = config.codevTableId
|
||||||
|
const baseId = config.codevBaseId || 'pipilvsi7dibo80'
|
||||||
|
const id = getRouterParam(event, 'id')
|
||||||
|
const body = await readBody(event)
|
||||||
|
|
||||||
|
if (!tableId || !id) {
|
||||||
|
throw createError({ statusCode: 400, message: 'Parametre manquant' })
|
||||||
|
}
|
||||||
|
|
||||||
|
const parsed = PatchSchema.safeParse(body)
|
||||||
|
if (!parsed.success) {
|
||||||
|
throw createError({
|
||||||
|
statusCode: 422,
|
||||||
|
statusMessage: 'Validation echouee',
|
||||||
|
data: parsed.error.flatten().fieldErrors,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const payload = {
|
||||||
|
nom: parsed.data.nom,
|
||||||
|
besoin: parsed.data.besoin,
|
||||||
|
offre: parsed.data.offre,
|
||||||
|
hashtags: parsed.data.hashtags
|
||||||
|
.map((h) => h.trim().toLowerCase().replace(/^#/, ''))
|
||||||
|
.filter(Boolean)
|
||||||
|
.slice(0, 3)
|
||||||
|
.join(','),
|
||||||
|
}
|
||||||
|
|
||||||
|
// NocoDB v1 PATCH par Id
|
||||||
|
const url = `${config.nocodbUrl}/api/v1/db/data/noco/${baseId}/${tableId}/${id}`
|
||||||
|
|
||||||
|
try {
|
||||||
|
await $fetch(url, {
|
||||||
|
method: 'PATCH',
|
||||||
|
headers: {
|
||||||
|
'xc-token': config.nocodbToken,
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify(payload),
|
||||||
|
})
|
||||||
|
} catch (e: any) {
|
||||||
|
console.error('[codev/fiches.patch] NocoDB patch error:', e?.message ?? e)
|
||||||
|
throw createError({ statusCode: 502, statusMessage: 'Erreur serveur' })
|
||||||
|
}
|
||||||
|
|
||||||
|
return { status: 200, ok: true }
|
||||||
|
})
|
||||||
5
server/api/codev/me.get.ts
Normal file
5
server/api/codev/me.get.ts
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
export default defineEventHandler((event) => {
|
||||||
|
const admin = getCookie(event, 'codev_admin') === 'ok'
|
||||||
|
const session = getCookie(event, 'codev_session') === 'ok'
|
||||||
|
return { admin, session }
|
||||||
|
})
|
||||||
21
server/middleware/codev-auth.ts
Normal file
21
server/middleware/codev-auth.ts
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
// Middleware server Nuxt — protection des routes /codev/fiche et /codev/carto
|
||||||
|
// Laisse passer /codev (lock screen), /codev/demo et toutes les routes /api/*
|
||||||
|
|
||||||
|
export default defineEventHandler((event) => {
|
||||||
|
const url = getRequestURL(event)
|
||||||
|
const path = url.pathname
|
||||||
|
|
||||||
|
// Seulement les routes sous /codev/
|
||||||
|
if (!path.startsWith('/codev/')) return
|
||||||
|
|
||||||
|
// Routes publiques : /codev/demo et /codev/qr (et sous-routes éventuelles)
|
||||||
|
if (path === '/codev/demo' || path.startsWith('/codev/demo/')) return
|
||||||
|
if (path === '/codev/qr' || path.startsWith('/codev/qr/')) return
|
||||||
|
|
||||||
|
// Vérification cookie
|
||||||
|
const session = getCookie(event, 'codev_session')
|
||||||
|
if (session === 'ok') return
|
||||||
|
|
||||||
|
// Non authentifié -> redirect vers /codev (lock screen)
|
||||||
|
return sendRedirect(event, '/codev', 302)
|
||||||
|
})
|
||||||
18
types/codev.ts
Normal file
18
types/codev.ts
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
export interface CodevFiche {
|
||||||
|
id: number
|
||||||
|
nom: string
|
||||||
|
besoin: string
|
||||||
|
offre: string
|
||||||
|
hashtags: string[] // parsé depuis CSV NocoDB
|
||||||
|
created_at: string // ISO
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CodevMatch {
|
||||||
|
fromId: number
|
||||||
|
toId: number
|
||||||
|
score: number // 0-1
|
||||||
|
mode: 'solution' | 'alliance' | 'surprise'
|
||||||
|
// solution : fromId.besoin matche toId.offre (orienté)
|
||||||
|
// alliance : symétrique sur besoin
|
||||||
|
// surprise : symétrique sur offre
|
||||||
|
}
|
||||||
106
utils/codev/matching.ts
Normal file
106
utils/codev/matching.ts
Normal file
@@ -0,0 +1,106 @@
|
|||||||
|
import type { CodevFiche, CodevMatch } from '~/types/codev'
|
||||||
|
|
||||||
|
const STOP_WORDS_FR = new Set([
|
||||||
|
'le', 'la', 'les', 'un', 'une', 'des', 'de', 'du', 'au', 'aux',
|
||||||
|
'et', 'ou', 'mais', 'donc', 'car', 'ni', 'or',
|
||||||
|
'a', 'en', 'pour', 'par', 'sur', 'avec', 'sans', 'dans', 'sous',
|
||||||
|
'je', 'tu', 'il', 'elle', 'on', 'nous', 'vous', 'ils', 'elles',
|
||||||
|
'mon', 'ma', 'mes', 'ton', 'ta', 'tes', 'son', 'sa', 'ses',
|
||||||
|
'notre', 'nos', 'votre', 'vos', 'leur', 'leurs',
|
||||||
|
'ce', 'cet', 'cette', 'ces', 'qui', 'que', 'quoi', 'dont',
|
||||||
|
'est', 'sont', 'etre', 'ai', 'as', 'avoir',
|
||||||
|
'pas', 'plus', 'moins', 'tres', 'aussi', 'bien', 'tout', 'tous',
|
||||||
|
'me', 'te', 'se', 'lui', 'leur', 'y',
|
||||||
|
])
|
||||||
|
|
||||||
|
function tokenize(text: string): Set<string> {
|
||||||
|
if (!text) return new Set()
|
||||||
|
const tokens = text
|
||||||
|
.toLowerCase()
|
||||||
|
.replace(/[.,;:!?()'"\-/]/g, ' ')
|
||||||
|
.split(/\s+/)
|
||||||
|
.filter((t) => t.length >= 3 && !STOP_WORDS_FR.has(t))
|
||||||
|
return new Set(tokens)
|
||||||
|
}
|
||||||
|
|
||||||
|
function jaccard(a: Set<string>, b: Set<string>): number {
|
||||||
|
if (a.size === 0 || b.size === 0) return 0
|
||||||
|
let inter = 0
|
||||||
|
for (const x of a) if (b.has(x)) inter++
|
||||||
|
const union = a.size + b.size - inter
|
||||||
|
return union === 0 ? 0 : inter / union
|
||||||
|
}
|
||||||
|
|
||||||
|
function score(textA: string, hashtagsA: string[], textB: string, hashtagsB: string[]): number {
|
||||||
|
const tagsA = new Set(hashtagsA.map((h) => h.toLowerCase()))
|
||||||
|
const tagsB = new Set(hashtagsB.map((h) => h.toLowerCase()))
|
||||||
|
|
||||||
|
if (tagsA.size > 0 && tagsB.size > 0) {
|
||||||
|
return jaccard(tagsA, tagsB)
|
||||||
|
}
|
||||||
|
return jaccard(tokenize(textA), tokenize(textB))
|
||||||
|
}
|
||||||
|
|
||||||
|
// scoreDirect tokenise TOUJOURS les textes, ignore les hashtags
|
||||||
|
// Utilise pour matchSolution : besoin vs offre doivent etre compares par leur contenu reel
|
||||||
|
function scoreDirect(textA: string, textB: string): number {
|
||||||
|
return jaccard(tokenize(textA), tokenize(textB))
|
||||||
|
}
|
||||||
|
|
||||||
|
export function matchSolution(fiches: CodevFiche[], threshold = 0.18): CodevMatch[] {
|
||||||
|
const matches: CodevMatch[] = []
|
||||||
|
for (const a of fiches) {
|
||||||
|
for (const b of fiches) {
|
||||||
|
if (a.id === b.id) continue
|
||||||
|
// Solution : on compare le TEXTE besoin de A avec le TEXTE offre de B
|
||||||
|
// On ignore les hashtags pour differencier besoin et offre
|
||||||
|
const s = scoreDirect(a.besoin, b.offre)
|
||||||
|
if (s >= threshold) {
|
||||||
|
matches.push({ fromId: a.id, toId: b.id, score: s, mode: 'solution' })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return matches
|
||||||
|
}
|
||||||
|
|
||||||
|
export function matchAlliance(fiches: CodevFiche[], threshold = 0.25): CodevMatch[] {
|
||||||
|
const matches: CodevMatch[] = []
|
||||||
|
for (let i = 0; i < fiches.length; i++) {
|
||||||
|
for (let j = i + 1; j < fiches.length; j++) {
|
||||||
|
const a = fiches[i], b = fiches[j]
|
||||||
|
// Alliance : besoins similaires — on compare hashtags si presents, sinon textes
|
||||||
|
const s = score(a.besoin, a.hashtags, b.besoin, b.hashtags)
|
||||||
|
if (s >= threshold) {
|
||||||
|
matches.push({ fromId: a.id, toId: b.id, score: s, mode: 'alliance' })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return matches
|
||||||
|
}
|
||||||
|
|
||||||
|
export function matchSurprise(fiches: CodevFiche[], threshold = 0.25): CodevMatch[] {
|
||||||
|
const matches: CodevMatch[] = []
|
||||||
|
for (let i = 0; i < fiches.length; i++) {
|
||||||
|
for (let j = i + 1; j < fiches.length; j++) {
|
||||||
|
const a = fiches[i], b = fiches[j]
|
||||||
|
// Surprise : offres similaires
|
||||||
|
const s = score(a.offre, a.hashtags, b.offre, b.hashtags)
|
||||||
|
if (s >= threshold) {
|
||||||
|
matches.push({ fromId: a.id, toId: b.id, score: s, mode: 'surprise' })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return matches
|
||||||
|
}
|
||||||
|
|
||||||
|
export function computeMatches(
|
||||||
|
fiches: CodevFiche[],
|
||||||
|
mode: 'solution' | 'alliance' | 'surprise',
|
||||||
|
threshold?: number,
|
||||||
|
): CodevMatch[] {
|
||||||
|
switch (mode) {
|
||||||
|
case 'solution': return matchSolution(fiches, threshold)
|
||||||
|
case 'alliance': return matchAlliance(fiches, threshold)
|
||||||
|
case 'surprise': return matchSurprise(fiches, threshold)
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user