EHV/sejeteralo
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add interactive citizen page with sidebar, display settings, and adaptive CSS

Browse Source 
Major rework of the citizen-facing page:
- Chart + sidebar layout (auth/vote/countdown in right sidebar)
- DisplaySettings component (font size, chart density, color palettes)
- Adaptive CSS with clamp() throughout, responsive breakpoints at 480/768/1024
- Baseline charts zoomed on first tier for small consumption detail
- Marginal price chart with dual Y-axes (foyers left, €/m³ right)
- Key metrics banner (5 columns: recettes, palier, prix palier, prix médian, mon prix)
- Client-side p0/impacts computation, draggable median price bar
- Household dots toggle, vote overlay curves
- Auth returns volume_m3, vote captures submitted_at
- Cleaned header nav (removed Accueil/Super Admin for public visitors)
- Terminology: foyer for bills, électeur for votes
- 600m³ added to impact reference volumes
- Realistic seed votes (50 votes, 3 profiles)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Yvv
2026-02-23 21:00:22 +01:00
parent 6caea1b809
commit 5dc42af33e
19 changed files with 2109 additions and 416 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/app/assets/css/main.css
View File

@@ -14,6 +14,7 @@
--radius: 8px;
--shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--chart-scale: 1;
}
* {
@@ -42,15 +43,15 @@ a:hover {
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
padding: 0 clamp(0.75rem, 3vw, 1.5rem);
}
.page-header {
margin-bottom: 2rem;
margin-bottom: clamp(1rem, 3vw, 2rem);
}
.page-header h1 {
font-size: 1.75rem;
font-size: clamp(1.25rem, 4vw, 1.75rem);
font-weight: 700;
}
@@ -59,7 +60,7 @@ a:hover {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 1.5rem;
padding: clamp(0.75rem, 3vw, 1.5rem);
box-shadow: var(--shadow);
}
@@ -71,10 +72,15 @@ a:hover {
padding: 0.5rem 1rem;
border: none;
border-radius: var(--radius);
font-size: 0.875rem;
font-size: clamp(0.8rem, 2vw, 0.875rem);
font-weight: 500;
cursor: pointer;
transition: all 0.15s;
touch-action: manipulation;
}
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.btn-primary {
@@ -228,3 +234,19 @@ a:hover {
@keyframes spin {
to { transform: rotate(360deg); }
}
/* ── Responsive table ── */
@media (max-width: 480px) {
.table th, .table td {
padding: 0.4rem 0.35rem;
font-size: 0.78rem;
}
}
/* ── Touch-friendly form inputs ── */
@media (max-width: 768px) {
.form-input {
font-size: 16px; /* Prevents iOS zoom on focus */
padding: 0.6rem 0.75rem;
}
}

281
frontend/app/components/DisplaySettings.vue Normal file
View File

@@ -0,0 +1,281 @@
<template>
<div class="ds-selector" ref="selectorRef">
<button class="ds-trigger" aria-label="Réglages d'affichage" @click="isOpen = !isOpen">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
</svg>
</button>
<Transition name="ds-drop">
<div v-if="isOpen" class="ds-dropdown">
<h4 class="ds-title">Affichage</h4>
<!-- Font size -->
<div class="ds-section">
<span class="ds-label">Taille texte</span>
<div class="ds-toggle-group">
<button v-for="s in fontSizes" :key="s.value"
class="ds-toggle" :class="{ 'ds-toggle--active': currentFontSize === s.value }"
@click="setFontSize(s.value)">
{{ s.label }}
</button>
</div>
</div>
<!-- Chart density -->
<div class="ds-section">
<span class="ds-label">Densite graphiques</span>
<div class="ds-toggle-group">
<button v-for="d in densities" :key="d.value"
class="ds-toggle" :class="{ 'ds-toggle--active': currentDensity === d.value }"
@click="setDensity(d.value)">
{{ d.label }}
</button>
</div>
</div>
<!-- Palette -->
<div class="ds-section">
<span class="ds-label">Ambiance</span>
<div class="ds-palette-grid">
<button v-for="p in palettes" :key="p.name"
class="ds-palette-btn" :class="{ 'ds-palette-btn--active': currentPalette === p.name }"
@click="setPalette(p.name)">
<span class="ds-palette-dots">
<span class="ds-dot" :style="{ background: p.primary }"></span>
<span class="ds-dot" :style="{ background: p.accent }"></span>
</span>
<span class="ds-palette-name">{{ p.label }}</span>
</button>
</div>
</div>
</div>
</Transition>
</div>
</template>
<script setup lang="ts">
const selectorRef = ref<HTMLElement>()
const isOpen = ref(false)
// ── Font size ──
const fontSizes = [
{ label: 'A-', value: 'small' },
{ label: 'A', value: 'normal' },
{ label: 'A+', value: 'large' },
]
const currentFontSize = ref('normal')
function setFontSize(size: string) {
currentFontSize.value = size
if (import.meta.client) {
localStorage.setItem('sej-fontSize', size)
const map: Record<string, string> = { small: '14px', normal: '16px', large: '18px' }
document.documentElement.style.fontSize = map[size] || '16px'
}
}
// ── Chart density ──
const densities = [
{ label: 'Compact', value: 'compact' },
{ label: 'Normal', value: 'normal' },
{ label: 'Large', value: 'large' },
]
const currentDensity = ref('normal')
function setDensity(d: string) {
currentDensity.value = d
if (import.meta.client) {
localStorage.setItem('sej-density', d)
const map: Record<string, string> = { compact: '0.85', normal: '1', large: '1.15' }
document.documentElement.style.setProperty('--chart-scale', map[d] || '1')
}
}
// ── Palette (color ambiance) ──
const palettes = [
{ name: 'eau', label: 'Eau', primary: '#2563eb', accent: '#059669' },
{ name: 'terre', label: 'Terre', primary: '#92400e', accent: '#d97706' },
{ name: 'foret', label: 'Foret', primary: '#166534', accent: '#65a30d' },
{ name: 'ardoise', label: 'Ardoise', primary: '#475569', accent: '#64748b' },
]
const currentPalette = ref('eau')
function setPalette(name: string) {
currentPalette.value = name
const p = palettes.find(x => x.name === name)
if (!p || !import.meta.client) return
localStorage.setItem('sej-palette', name)
const root = document.documentElement.style
root.setProperty('--color-primary', p.primary)
root.setProperty('--color-primary-dark', darken(p.primary))
root.setProperty('--color-secondary', p.accent)
}
function darken(hex: string): string {
const r = parseInt(hex.slice(1, 3), 16)
const g = parseInt(hex.slice(3, 5), 16)
const b = parseInt(hex.slice(5, 7), 16)
const f = 0.82
return `#${Math.round(r * f).toString(16).padStart(2, '0')}${Math.round(g * f).toString(16).padStart(2, '0')}${Math.round(b * f).toString(16).padStart(2, '0')}`
}
// ── Init from localStorage ──
onMounted(() => {
if (!import.meta.client) return
const savedFont = localStorage.getItem('sej-fontSize')
if (savedFont) setFontSize(savedFont)
const savedDensity = localStorage.getItem('sej-density')
if (savedDensity) setDensity(savedDensity)
const savedPalette = localStorage.getItem('sej-palette')
if (savedPalette) setPalette(savedPalette)
})
// ── Click outside to close ──
function onClickOutside(e: MouseEvent) {
if (selectorRef.value && !selectorRef.value.contains(e.target as Node)) {
isOpen.value = false
}
}
onMounted(() => document.addEventListener('click', onClickOutside))
onUnmounted(() => document.removeEventListener('click', onClickOutside))
</script>
<style scoped>
.ds-selector { position: relative; }
.ds-trigger {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 6px;
color: var(--color-text-muted);
background: none;
border: none;
cursor: pointer;
transition: all 0.15s;
}
.ds-trigger:hover {
color: var(--color-text);
background: var(--color-bg);
}
.ds-dropdown {
position: absolute;
top: calc(100% + 0.5rem);
right: 0;
width: 240px;
padding: 0.75rem;
border-radius: 10px;
background: var(--color-surface);
border: 1px solid var(--color-border);
box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
display: flex;
flex-direction: column;
gap: 0.65rem;
z-index: 100;
}
.ds-title {
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-text-muted);
margin: 0;
}
.ds-section {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.ds-label {
font-size: 0.68rem;
font-weight: 600;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.ds-toggle-group {
display: flex;
gap: 0.2rem;
background: var(--color-bg);
border-radius: 6px;
padding: 2px;
}
.ds-toggle {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 0.3rem 0.4rem;
border-radius: 4px;
font-size: 0.72rem;
font-weight: 500;
color: var(--color-text-muted);
background: none;
border: none;
cursor: pointer;
transition: all 0.15s;
}
.ds-toggle:hover { color: var(--color-text); }
.ds-toggle--active {
background: var(--color-primary);
color: white;
box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25);
}
.ds-palette-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.3rem;
}
.ds-palette-btn {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.4rem;
border-radius: 6px;
background: var(--color-bg);
border: 1.5px solid transparent;
cursor: pointer;
transition: all 0.15s;
}
.ds-palette-btn:hover { border-color: var(--color-border); }
.ds-palette-btn--active {
border-color: var(--color-primary);
background: white;
}
.ds-palette-dots {
display: flex;
gap: 2px;
}
.ds-dot {
width: 10px;
height: 10px;
border-radius: 50%;
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.ds-palette-name {
font-size: 0.7rem;
font-weight: 600;
color: var(--color-text);
}
/* Transition */
.ds-drop-enter-active { transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.ds-drop-leave-active { transition: all 0.12s ease; }
.ds-drop-enter-from, .ds-drop-leave-to {
opacity: 0;
transform: translateY(-4px) scale(0.96);
}
</style>

27
frontend/app/components/charts/VoteOverlayChart.vue
View File

@@ -1,6 +1,12 @@
<template>
<div class="overlay-chart">
<svg :viewBox="`0 0 ${svgW} ${svgH}`" preserveAspectRatio="xMidYMid meet">
<defs>
<clipPath id="overlay-clip">
<rect :x="margin.left" :y="margin.top" :width="plotW" :height="plotH" />
</clipPath>
</defs>
<!-- Grid -->
<g>
<line
@@ -17,16 +23,19 @@
/>
</g>
<!-- Vote curves (semi-transparent) -->
<g v-for="(vote, i) in votes" :key="i">
<path :d="getVotePath(vote, 1)" fill="none" stroke="#3b82f6" stroke-width="1.5" opacity="0.4" />
<path :d="getVotePath(vote, 2)" fill="none" stroke="#ef4444" stroke-width="1.5" opacity="0.4" />
</g>
<!-- Clipped curves -->
<g clip-path="url(#overlay-clip)">
<!-- Vote curves (semi-transparent) -->
<g v-for="(vote, i) in votes" :key="i">
<path :d="getVotePath(vote, 1)" fill="none" stroke="#3b82f6" stroke-width="1.5" opacity="0.4" />
<path :d="getVotePath(vote, 2)" fill="none" stroke="#ef4444" stroke-width="1.5" opacity="0.4" />
</g>
<!-- Median curve (if available) -->
<g v-if="medianVote">
<path :d="getVotePath(medianVote, 1)" fill="none" stroke="#1e40af" stroke-width="4" />
<path :d="getVotePath(medianVote, 2)" fill="none" stroke="#991b1b" stroke-width="4" />
<!-- Median curve (if available) -->
<g v-if="medianVote">
<path :d="getVotePath(medianVote, 1)" fill="none" stroke="#1e40af" stroke-width="4" />
<path :d="getVotePath(medianVote, 2)" fill="none" stroke="#991b1b" stroke-width="4" />
</g>
</g>
<!-- Axis labels -->

48
frontend/app/layouts/default.vue
View File

@@ -3,19 +3,26 @@
<header class="app-header">
<div class="container header-inner">
<NuxtLink to="/" class="logo">SejeteralO</NuxtLink>
<nav class="header-nav">
<NuxtLink to="/">Accueil</NuxtLink>
<template v-if="authStore.isAuthenticated">
<NuxtLink v-if="authStore.isSuperAdmin" to="/admin">Super Admin</NuxtLink>
<div class="header-right">
<template v-if="authStore.isAuthenticated && authStore.isAdmin">
<NuxtLink
v-else-if="authStore.isAdmin && authStore.communeSlug"
v-if="authStore.isSuperAdmin"
to="/admin"
class="header-link"
>
Administration
</NuxtLink>
<NuxtLink
v-else-if="authStore.communeSlug"
:to="`/admin/communes/${authStore.communeSlug}`"
class="header-link"
>
Gestion commune
</NuxtLink>
<button class="btn btn-secondary btn-sm" @click="logout">Déconnexion</button>
<button class="btn btn-secondary btn-sm" @click="logout">Deconnexion</button>
</template>
</nav>
<DisplaySettings />
</div>
</div>
</header>
<main class="app-main container">
@@ -23,7 +30,7 @@
</main>
<footer class="app-footer">
<div class="container">
SejeteralO — Outil de démocratie participative pour la tarification de l'eau
SejeteralO — Outil de democratie participative pour la tarification de l'eau
</div>
</footer>
</div>
@@ -50,6 +57,9 @@ function logout() {
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
padding: 0.75rem 0;
position: sticky;
top: 0;
z-index: 40;
}
.header-inner {
@@ -59,21 +69,25 @@ function logout() {
}
.logo {
font-size: 1.25rem;
font-size: clamp(1.05rem, 3vw, 1.25rem);
font-weight: 700;
color: var(--color-primary);
}
.logo:hover { text-decoration: none; }
.logo:hover {
text-decoration: none;
}
.header-nav {
.header-right {
display: flex;
align-items: center;
gap: 1.5rem;
gap: clamp(0.5rem, 2vw, 1rem);
}
.header-link {
font-size: clamp(0.75rem, 2vw, 0.85rem);
white-space: nowrap;
color: var(--color-text-muted);
}
.header-link:hover { color: var(--color-primary); text-decoration: none; }
.btn-sm {
padding: 0.25rem 0.75rem;
font-size: 0.8rem;
@@ -81,8 +95,8 @@ function logout() {
.app-main {
flex: 1;
padding-top: 2rem;
padding-bottom: 2rem;
padding-top: clamp(1rem, 3vw, 2rem);
padding-bottom: clamp(1rem, 3vw, 2rem);
}
.app-footer {

183
frontend/app/pages/admin/communes/[slug]/params.vue
View File

@@ -2,35 +2,43 @@
<div>
<div class="page-header">
<NuxtLink :to="`/admin/communes/${slug}`" style="color: var(--color-text-muted);">&larr; {{ slug }}</NuxtLink>
<h1>Paramètres tarifs</h1>
<h1>Parametres tarifs</h1>
</div>
<div v-if="saved" class="alert alert-success">Paramètres enregistrés.</div>
<div v-if="saved" class="alert alert-success">Parametres enregistres.</div>
<div v-if="published" class="alert alert-success">Courbe publiee avec succes (p0 = {{ publishedP0.toFixed(3) }} €/m3).</div>
<div v-if="error" class="alert alert-error">{{ error }}</div>
<div class="card" style="max-width: 600px;">
<div class="card" style="max-width: 600px; margin-bottom: 1.5rem;">
<form @submit.prevent="save">
<div class="form-group">
<label>Recettes cibles (€)</label>
<input v-model.number="form.recettes" type="number" class="form-input" step="1000" min="0" />
</div>
<div class="grid grid-2">
<div class="form-group">
<label>Abonnement RP/PRO (€)</label>
<input v-model.number="form.abop" type="number" class="form-input" step="1" min="0" />
</div>
<div class="form-group">
<label>Abonnement RS (€)</label>
<input v-model.number="form.abos" type="number" class="form-input" step="1" min="0" />
</div>
<div class="form-group">
<label>Abonnement (€)</label>
<input v-model.number="form.abop" type="number" class="form-input" step="1" min="0" />
</div>
<div class="form-group" style="margin-bottom: 1rem;">
<label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
<input type="checkbox" v-model="form.differentiated_tariff" />
Tarif differencie RS / RP / PRO
</label>
<p style="font-size: 0.8rem; color: var(--color-text-muted); margin-top: 0.25rem;">
Si coche, un abonnement different est applique aux residences secondaires (RS).
</p>
</div>
<div v-if="form.differentiated_tariff" class="form-group">
<label>Abonnement RS (€)</label>
<input v-model.number="form.abos" type="number" class="form-input" step="1" min="0" />
</div>
<div class="grid grid-2">
<div class="form-group">
<label>Prix max/m³ (€)</label>
<label>Prix max/m3 (€)</label>
<input v-model.number="form.pmax" type="number" class="form-input" step="0.5" min="0" />
</div>
<div class="form-group">
<label>Volume max (m³)</label>
<label>Volume max (m3)</label>
<input v-model.number="form.vmax" type="number" class="form-input" step="100" min="0" />
</div>
</div>
@@ -39,6 +47,58 @@
</button>
</form>
</div>
<!-- ══════════════════════════════════════════════
COURBE DE REFERENCE — Editeur + Publier
══════════════════════════════════════════════ -->
<div class="card" style="margin-bottom: 1.5rem;">
<h3 style="margin-bottom: 0.5rem;">Courbe de reference</h3>
<p style="font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 1rem;">
Ajustez les parametres de la courbe Bezier, puis publiez-la. C'est la courbe initiale que les citoyens voient.
</p>
<!-- Curve params sliders -->
<div class="curve-params">
<div class="slider-group">
<label>v<sub>inf</sub> <span class="slider-val">{{ curve.vinf.toFixed(0) }} m3</span></label>
<input type="range" v-model.number="curve.vinf" :min="50" :max="form.vmax - 100" step="10" class="slider" />
</div>
<div class="slider-group">
<label>a <span class="slider-val">{{ curve.a.toFixed(2) }}</span></label>
<input type="range" v-model.number="curve.a" min="0" max="1" step="0.01" class="slider" />
</div>
<div class="slider-group">
<label>b <span class="slider-val">{{ curve.b.toFixed(2) }}</span></label>
<input type="range" v-model.number="curve.b" min="0" max="1" step="0.01" class="slider" />
</div>
<div class="slider-group">
<label>c <span class="slider-val">{{ curve.c.toFixed(2) }}</span></label>
<input type="range" v-model.number="curve.c" min="0" max="1" step="0.01" class="slider" />
</div>
<div class="slider-group">
<label>d <span class="slider-val">{{ curve.d.toFixed(2) }}</span></label>
<input type="range" v-model.number="curve.d" min="0" max="1" step="0.01" class="slider" />
</div>
<div class="slider-group">
<label>e <span class="slider-val">{{ curve.e.toFixed(2) }}</span></label>
<input type="range" v-model.number="curve.e" min="0" max="1" step="0.01" class="slider" />
</div>
</div>
<p v-if="curveP0 !== null" style="margin: 0.75rem 0; font-size: 0.9rem;">
<strong>p0 calcule :</strong> {{ curveP0.toFixed(3) }} €/m3
</p>
<div v-if="currentPublished" style="margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; background: #eff6ff; border-radius: 6px; font-size: 0.82rem; color: #1e40af;">
Courbe actuellement publiee : vinf={{ currentPublished.vinf?.toFixed(0) }}, p0={{ currentPublished.p0?.toFixed(3) }} €/m3
<span style="color: #64748b;">({{ currentPublished.at }})</span>
</div>
<button class="btn btn-primary" @click="publishCurve" :disabled="publishing" style="background: #059669;">
<span v-if="publishing">Publication...</span>
<span v-else>Publier la courbe</span>
</button>
</div>
</div>
</template>
@@ -49,15 +109,56 @@ const route = useRoute()
const api = useApi()
const slug = route.params.slug as string
const form = reactive({ recettes: 75000, abop: 100, abos: 100, pmax: 20, vmax: 2100 })
const form = reactive({ recettes: 75000, abop: 100, abos: 100, pmax: 20, vmax: 2100, differentiated_tariff: false })
const curve = reactive({ vinf: 400, a: 0.5, b: 0.5, c: 0.5, d: 0.5, e: 0.5 })
const loading = ref(false)
const saved = ref(false)
const published = ref(false)
const publishing = ref(false)
const error = ref('')
const curveP0 = ref<number | null>(null)
const publishedP0 = ref(0)
const currentPublished = ref<{ vinf: number; p0: number; at: string } | null>(null)
let computeTimeout: ReturnType<typeof setTimeout> | null = null
watch(curve, () => {
if (computeTimeout) clearTimeout(computeTimeout)
computeTimeout = setTimeout(async () => {
try {
const result = await api.post<any>('/tariff/compute', {
commune_slug: slug, vinf: curve.vinf,
a: curve.a, b: curve.b, c: curve.c, d: curve.d, e: curve.e,
})
curveP0.value = result.p0
} catch {}
}, 200)
}, { deep: true })
onMounted(async () => {
try {
const params = await api.get<typeof form>(`/communes/${slug}/params`)
const params = await api.get<any>(`/communes/${slug}/params`)
Object.assign(form, params)
// Load published curve if exists
if (params.published_vinf != null) {
curve.vinf = params.published_vinf
curve.a = params.published_a
curve.b = params.published_b
curve.c = params.published_c
curve.d = params.published_d
curve.e = params.published_e
currentPublished.value = {
vinf: params.published_vinf,
p0: params.published_p0,
at: new Date(params.published_at).toLocaleDateString('fr-FR'),
}
}
// Trigger initial p0 compute
const result = await api.post<any>('/tariff/compute', {
commune_slug: slug, vinf: curve.vinf,
a: curve.a, b: curve.b, c: curve.c, d: curve.d, e: curve.e,
})
curveP0.value = result.p0
} catch {}
})
@@ -74,4 +175,54 @@ async function save() {
loading.value = false
}
}
async function publishCurve() {
publishing.value = true
published.value = false
error.value = ''
try {
const result = await api.post<any>(`/communes/${slug}/params/publish`, {
vinf: curve.vinf, a: curve.a, b: curve.b,
c: curve.c, d: curve.d, e: curve.e,
})
publishedP0.value = result.published_p0
published.value = true
currentPublished.value = {
vinf: result.published_vinf,
p0: result.published_p0,
at: new Date(result.published_at).toLocaleDateString('fr-FR'),
}
} catch (e: any) {
error.value = e.message
} finally {
publishing.value = false
}
}
</script>
<style scoped>
.curve-params {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem 1.5rem;
margin-bottom: 0.75rem;
}
@media (max-width: 600px) { .curve-params { grid-template-columns: 1fr; } }
.slider-group label {
display: flex;
justify-content: space-between;
font-size: 0.82rem;
font-weight: 500;
margin-bottom: 0.2rem;
}
.slider-val {
font-family: monospace;
color: var(--color-primary, #2563eb);
font-weight: 600;
}
.slider {
width: 100%;
accent-color: #2563eb;
}
</style>

1627
frontend/app/pages/commune/[slug]/index.vue
View File

File diff suppressed because it is too large Load Diff

6
frontend/app/pages/login/admin.vue
View File

@@ -22,6 +22,11 @@
<span v-else>Se connecter</span>
</button>
</form>
<!-- Dev credentials hint -->
<div v-if="isDev" style="margin-top: 1rem; padding: 0.75rem; background: #fef3c7; border: 1px solid #f59e0b; border-radius: 6px; font-size: 0.8rem;">
<strong>Dev:</strong> superadmin@sejeteralo.fr / superadmin
</div>
</div>
<p style="text-align: center; margin-top: 1rem;">
@@ -39,6 +44,7 @@ const email = ref('')
const password = ref('')
const error = ref('')
const loading = ref(false)
const isDev = import.meta.dev
async function login() {
error.value = ''

6
frontend/app/pages/login/commune.vue
View File

@@ -22,6 +22,11 @@
<span v-else>Se connecter</span>
</button>
</form>
<!-- Dev credentials hint -->
<div v-if="isDev" style="margin-top: 1rem; padding: 0.75rem; background: #fef3c7; border: 1px solid #f59e0b; border-radius: 6px; font-size: 0.8rem;">
<strong>Dev:</strong> saou@sejeteralo.fr / saou2024
</div>
</div>
<p style="text-align: center; margin-top: 1rem;">
@@ -39,6 +44,7 @@ const email = ref('')
const password = ref('')
const error = ref('')
const loading = ref(false)
const isDev = import.meta.dev
async function login() {
error.value = ''

2
frontend/app/utils/bezier-math.ts
View File

@@ -277,7 +277,7 @@ export function computeImpacts(
c: number,
d: number,
e: number,
referenceVolumes: number[] = [30, 60, 90, 150, 300],
referenceVolumes: number[] = [30, 60, 90, 150, 300, 600],
): { p0: number; impacts: ImpactRow[] } {
const p0 = computeP0(households, recettes, abop, abos, vinf, vmax, pmax, a, b, c, d, e)