1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
<% content_for :title, "Ajouter une Cible" %>
<h1 class="display-1">Ajouter une Cible</h1>
<%= form_with(model: @target) do |f| %>
<div class="card shadow-sm">
<div class="card-header">
<%= f.text_field :name, class: "form-control", placeholder: "Nom de la cible" %>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover align-middle mb-0">
<thead class="table-light">
<tr>
<th>Profil</th>
<th class="text-end" style="width: 180px;">Proportion</th>
</tr>
</thead>
<tbody id="alloc-table-body">
<%= f.fields_for :target_allocations do |af| %>
<% np = af.object.nutrient_profile %>
<tr>
<td>
<%= af.hidden_field :nutrient_profile_id %>
<strong><%= np&.name.capitalize || "Profil ##{af.object.nutrient_profile_id}" %></strong>
</td>
<td class="text-end">
<div class="input-group input-group-sm" style="max-width: 160px; margin-left:auto;">
<%= af.number_field :percentage,
in: 0..100, step: 0.5,
class: "form-control text-end alloc-input",
placeholder: "0.0",
data: { action: "input->alloc#sum" } %>
<span class="input-group-text">%</span>
</div>
</td>
</tr>
<% end %>
</tbody>
<tfoot>
<tr>
<td class="small text-muted">Ajustez chaque pourcentage pour totaliser 100%.</td>
<td class="text-end">
<span class="badge bg-secondary" id="alloc-total">Total : 0%</span>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="card-footer d-flex gap-2 justify-content-end">
<div class="btn-group">
<%= f.submit "Enregistrer l’objectif", class: "btn btn-primary", id: "submit-btn" %>
<%= link_to "Annuler", targets_path, class: "btn btn-secondary" %>
</div>
</div>
</div>
<% end %>
<script>
// Lightweight client-side sum check (no Stimulus required).
document.addEventListener("turbo:load", initAllocSum);
document.addEventListener("DOMContentLoaded", initAllocSum);
function initAllocSum() {
const inputs = document.querySelectorAll(".alloc-input");
const totalBadge = document.getElementById("alloc-total");
const submitBtn = document.getElementById("submit-btn");
if (!inputs.length || !totalBadge) return;
function updateTotal() {
let sum = 0;
inputs.forEach(i => sum += parseFloat(i.value || "0"));
const rounded = Math.round(sum * 100) / 100;
totalBadge.textContent = `Total : ${rounded}%`;
totalBadge.className = "badge " + (Math.abs(rounded - 100) < 0.01 ? "bg-success" : "bg-danger");
if (submitBtn) submitBtn.disabled = !(Math.abs(rounded - 100) < 0.01);
}
inputs.forEach(i => i.addEventListener("input", updateTotal));
updateTotal();
}
</script>
|
