Create Target and nutrient target table on dashboard.

1 files changed, 85 insertions, 0 deletions

diff --git a/app/views/targets/new.html.erb b/app/views/targets/new.html.erb
new file mode 100644
index 0000000..42cb7bd
--- /dev/null
+++ b/app/views/targets/new.html.erb
@@ -0,0 +1,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>