{{* -*- brindille -*- *}}

{{:admin_header title="Conversion poids - volume" custom_css="./style.css" current="module_epicier"}}
{{:include file="./_nav.html" current="conversion"}}

{{:assign var="noms." value="vinaigre"}}
{{:assign var="coefficients." value=1.01}}
{{:assign var="noms." value="huile"}}
{{:assign var="coefficients." value=0.92}}
{{:assign var="noms." value="lait"}}
{{:assign var="coefficients." value=1.03}}
{{:assign var="noms." value="alcool"}}
{{:assign var="coefficients." value=0.78}}

{{:assign ind=0}}
{{#foreach from=$noms key="key" item="elem"}}
	{{:assign var="produit.name" value=$elem}}
	{{:assign var="produit.coeff" from="coefficients.%d"|args:$ind}}
	{{:assign var="liste_produits." value=$produit}}
	{{:assign var="produits.%s"|args:$ind value=$elem}}
	{{:assign ind="%d+1"|math:$ind}}
{{/foreach}}

<form method="post" action="">
	<fieldset class="saisie">
		<legend>Saisie</legend>
		<dl>
			{{:input type="select" name="produit" label="Produit" required=true default_empty="— Choisir —" options=$produits|sort}}
			{{:input type="text" pattern="[0-9]+\.[0-9]+" name="poids" label="Poids en kg" required=true title="Saisir le poids en kg" size="10"}}
			{{:input type="text" name="coeff" label="Coefficient" required=false readonly=true size="10"}}
			{{:input type="text" name="volume" label="Volume en litres" required=false readonly=true size="10"}}
			<div id="donnees" class="hidden">
				{{:input type="select" name="coefficients" options=$coefficients}}
			</div>
		</dl>
	</fieldset>
</form>

<script type="text/javascript">

// effacer le contenu de divers champs
function raz(field_list)
{
	for (const elem of field_list) {
		document.getElementById(elem).value = '';
	}
}

function modifProduit(evt,
					 id_produit = 'f_produit',
					 id_poids = 'f_poids',
					 id_coeff = 'f_coeff',
					 id_volume = 'f_volume',
					 id_liste_coeff = 'f_coefficients'
)
{
	const selected_prod = document.getElementById(id_produit);
	const ind_sel = selected_prod.selectedIndex;
	if (ind_sel > 0) {
		const ind_coeff = parseInt(selected_prod.options[ind_sel].value) + 1;
		const sel_coeff = document.getElementById(id_liste_coeff);
		const coefficient = sel_coeff.options[ind_coeff].label;

		// Afficher le coefficient
		document.getElementById(id_coeff).value = coefficient;

		const val_poids = document.getElementById(id_poids).value;
		if (val_poids != '') {
			computeVolume(evt, id_produit, id_poids, id_coeff, id_volume);
		} else {
			document.getElementById(id_poids).focus();
		}
	} else {
		raz([id_poids, id_coeff, id_volume]);
	}
}

function computeVolume(evt,
	id_produit = 'f_produit',
	id_poids = 'f_poids',
	id_coeff = 'f_coeff',
	id_volume = 'f_volume'
)
{
	const val_coeff = document.getElementById(id_coeff).value;
	if (val_coeff != '') {
		const coeff = parseFloat(val_coeff);
		const poids = parseFloat(document.getElementById(id_poids).value);
		const volume = poids * coeff;
		document.getElementById(id_volume).value = volume.toFixed(2);
	} else {
		document.getElementById(id_produit).focus();
	}
}


(function () {
	document.getElementById('f_produit').onchange = modifProduit;
	document.getElementById('f_poids').onchange = computeVolume;
})();

</script>