Sprint 1 : scaffolding complet de Glibredecision
Plateforme de decisions collectives pour Duniter/G1. Backend FastAPI async + PostgreSQL (14 tables, 8 routers, 6 services, moteur de vote avec formule d'inertie WoT/Smith/TechComm). Frontend Nuxt 4 + Nuxt UI v3 + Pinia (9 pages, 5 stores). Infrastructure Docker + Woodpecker CI + Traefik. Documentation technique et utilisateur (15 fichiers). Seed : Licence G1, Engagement Forgeron v2.0.0, 4 protocoles de vote. 30 tests unitaires (formules, mode params, vote nuance) -- tous verts. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Yvv
257
frontend/app/pages/protocols/index.vue
Normal file
257
frontend/app/pages/protocols/index.vue
Normal file
@@ -0,0 +1,257 @@
|
||||
<script setup lang="ts">
|
||||
const protocols = useProtocolsStore()
|
||||
|
||||
onMounted(async () => {
|
||||
await Promise.all([
|
||||
protocols.fetchProtocols(),
|
||||
protocols.fetchFormulas(),
|
||||
])
|
||||
})
|
||||
|
||||
const voteTypeLabel = (voteType: string) => {
|
||||
switch (voteType) {
|
||||
case 'binary': return 'Binaire'
|
||||
case 'nuanced': return 'Nuance'
|
||||
default: return voteType
|
||||
}
|
||||
}
|
||||
|
||||
const voteTypeColor = (voteType: string) => {
|
||||
switch (voteType) {
|
||||
case 'binary': return 'primary'
|
||||
case 'nuanced': return 'info'
|
||||
default: return 'neutral'
|
||||
}
|
||||
}
|
||||
|
||||
function formatModeParamsDisplay(modeParams: string | null): string {
|
||||
if (!modeParams) return '-'
|
||||
try {
|
||||
return formatModeParams(modeParams)
|
||||
} catch {
|
||||
return modeParams
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(dateStr: string): string {
|
||||
return new Date(dateStr).toLocaleDateString('fr-FR', {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
year: 'numeric',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-8">
|
||||
<!-- Header -->
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
Protocoles de vote
|
||||
</h1>
|
||||
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
||||
Configuration des protocoles de vote et formules de seuil WoT
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Loading state -->
|
||||
<template v-if="protocols.loading">
|
||||
<div class="space-y-3">
|
||||
<USkeleton v-for="i in 4" :key="i" class="h-32 w-full" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Error state -->
|
||||
<template v-else-if="protocols.error">
|
||||
<UCard>
|
||||
<div class="flex items-center gap-3 text-red-500">
|
||||
<UIcon name="i-lucide-alert-circle" class="text-xl" />
|
||||
<p>{{ protocols.error }}</p>
|
||||
</div>
|
||||
</UCard>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<!-- Voting Protocols -->
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
|
||||
Protocoles ({{ protocols.protocols.length }})
|
||||
</h2>
|
||||
|
||||
<div v-if="protocols.protocols.length === 0">
|
||||
<UCard>
|
||||
<div class="text-center py-8">
|
||||
<UIcon name="i-lucide-settings" class="text-4xl text-gray-400 mb-3" />
|
||||
<p class="text-gray-500">Aucun protocole de vote configure</p>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
|
||||
<div v-else class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<UCard
|
||||
v-for="protocol in protocols.protocols"
|
||||
:key="protocol.id"
|
||||
>
|
||||
<div class="space-y-4">
|
||||
<!-- Protocol header -->
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-white">
|
||||
{{ protocol.name }}
|
||||
</h3>
|
||||
<p v-if="protocol.description" class="text-sm text-gray-500 mt-0.5">
|
||||
{{ protocol.description }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<UBadge :color="voteTypeColor(protocol.vote_type)" variant="subtle" size="xs">
|
||||
{{ voteTypeLabel(protocol.vote_type) }}
|
||||
</UBadge>
|
||||
<UBadge v-if="protocol.is_meta_governed" color="warning" variant="subtle" size="xs">
|
||||
Meta-gouverne
|
||||
</UBadge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mode params -->
|
||||
<div v-if="protocol.mode_params" class="p-2 bg-gray-100 dark:bg-gray-800 rounded text-xs">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="font-mono font-bold text-primary">{{ protocol.mode_params }}</span>
|
||||
</div>
|
||||
<p class="text-gray-500">{{ formatModeParamsDisplay(protocol.mode_params) }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Formula config summary -->
|
||||
<div class="border-t border-gray-100 dark:border-gray-800 pt-3">
|
||||
<h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">
|
||||
Formule : {{ protocol.formula_config.name }}
|
||||
</h4>
|
||||
<div class="grid grid-cols-3 gap-2 text-xs">
|
||||
<div>
|
||||
<span class="text-gray-400 block">Duree</span>
|
||||
<span class="font-medium text-gray-900 dark:text-white">
|
||||
{{ protocol.formula_config.duration_days }}j
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-gray-400 block">Majorite</span>
|
||||
<span class="font-medium text-gray-900 dark:text-white">
|
||||
{{ protocol.formula_config.majority_pct }}%
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-gray-400 block">Base</span>
|
||||
<span class="font-medium text-gray-900 dark:text-white">
|
||||
{{ protocol.formula_config.base_exponent }}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-gray-400 block">Gradient</span>
|
||||
<span class="font-medium text-gray-900 dark:text-white">
|
||||
{{ protocol.formula_config.gradient_exponent }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="protocol.formula_config.smith_exponent !== null">
|
||||
<span class="text-gray-400 block">Smith</span>
|
||||
<span class="font-medium text-gray-900 dark:text-white">
|
||||
{{ protocol.formula_config.smith_exponent }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="protocol.formula_config.techcomm_exponent !== null">
|
||||
<span class="text-gray-400 block">TechComm</span>
|
||||
<span class="font-medium text-gray-900 dark:text-white">
|
||||
{{ protocol.formula_config.techcomm_exponent }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Formula Configurations -->
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
|
||||
Configurations de formule ({{ protocols.formulas.length }})
|
||||
</h2>
|
||||
|
||||
<div v-if="protocols.formulas.length === 0">
|
||||
<UCard>
|
||||
<div class="text-center py-8">
|
||||
<UIcon name="i-lucide-calculator" class="text-4xl text-gray-400 mb-3" />
|
||||
<p class="text-gray-500">Aucune configuration de formule</p>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<UCard>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="border-b border-gray-200 dark:border-gray-700">
|
||||
<th class="text-left px-4 py-3 font-medium text-gray-500">Nom</th>
|
||||
<th class="text-left px-4 py-3 font-medium text-gray-500">Duree</th>
|
||||
<th class="text-left px-4 py-3 font-medium text-gray-500">Majorite</th>
|
||||
<th class="text-left px-4 py-3 font-medium text-gray-500">B</th>
|
||||
<th class="text-left px-4 py-3 font-medium text-gray-500">G</th>
|
||||
<th class="text-left px-4 py-3 font-medium text-gray-500">C</th>
|
||||
<th class="text-left px-4 py-3 font-medium text-gray-500">Smith</th>
|
||||
<th class="text-left px-4 py-3 font-medium text-gray-500">TechComm</th>
|
||||
<th class="text-left px-4 py-3 font-medium text-gray-500">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="formula in protocols.formulas"
|
||||
:key="formula.id"
|
||||
class="border-b border-gray-100 dark:border-gray-800"
|
||||
>
|
||||
<td class="px-4 py-3 font-medium text-gray-900 dark:text-white">
|
||||
{{ formula.name }}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-gray-600">{{ formula.duration_days }}j</td>
|
||||
<td class="px-4 py-3 text-gray-600">{{ formula.majority_pct }}%</td>
|
||||
<td class="px-4 py-3 font-mono text-gray-600">{{ formula.base_exponent }}</td>
|
||||
<td class="px-4 py-3 font-mono text-gray-600">{{ formula.gradient_exponent }}</td>
|
||||
<td class="px-4 py-3 font-mono text-gray-600">{{ formula.constant_base }}</td>
|
||||
<td class="px-4 py-3 font-mono text-gray-600">
|
||||
{{ formula.smith_exponent ?? '-' }}
|
||||
</td>
|
||||
<td class="px-4 py-3 font-mono text-gray-600">
|
||||
{{ formula.techcomm_exponent ?? '-' }}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-gray-500 text-xs">
|
||||
{{ formatDate(formula.created_at) }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Formula explainer -->
|
||||
<UCard>
|
||||
<div class="space-y-3">
|
||||
<h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wide">
|
||||
Reference : Formule de seuil WoT
|
||||
</h3>
|
||||
<code class="block p-3 bg-gray-100 dark:bg-gray-800 rounded text-sm font-mono">
|
||||
Seuil = C + B^W + (M + (1-M) * (1 - (T/W)^G)) * max(0, T-C)
|
||||
</code>
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 gap-3 text-xs text-gray-500">
|
||||
<div><strong>C</strong> = constante de base (plancher fixe)</div>
|
||||
<div><strong>B</strong> = exposant de base (B^W tend vers 0 si B < 1)</div>
|
||||
<div><strong>W</strong> = taille du corpus WoT</div>
|
||||
<div><strong>T</strong> = nombre total de votes</div>
|
||||
<div><strong>M</strong> = ratio de majorite (M = majorite_pct / 100)</div>
|
||||
<div><strong>G</strong> = exposant du gradient d'inertie</div>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user