Add interactive citizen page with sidebar, display settings, and adaptive CSS
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
@@ -2,35 +2,43 @@
|
||||
<div>
|
||||
<div class="page-header">
|
||||
<NuxtLink :to="`/admin/communes/${slug}`" style="color: var(--color-text-muted);">← {{ 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>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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 = ''
|
||||
|
||||
@@ -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 = ''
|
||||
|
||||
Reference in New Issue
Block a user