Finalisation des unitées de volume.
This commit is contained in:
parent
bbe436c758
commit
e7be998913
BIN
recipes.mv.db
BIN
recipes.mv.db
Binary file not shown.
|
@ -119,26 +119,31 @@ const galTomL = 3785.41;
|
|||
|
||||
// Change les unités selon la sélection de l'utilisateur
|
||||
function changeUnits(unitSelect, quantitiesSelector, unitsSelector) {
|
||||
const newUnit = unitSelect.value;
|
||||
|
||||
document.querySelectorAll(unitsSelector).forEach(e => {
|
||||
e.innerText = unitSelect.value;
|
||||
e.innerText = newUnit;
|
||||
|
||||
// Modifie la quantitée
|
||||
const quantityElem = e.parentElement.parentElement.querySelector(quantitiesSelector);
|
||||
const originalQuantity = parseInt(quantityElem.dataset.quantityml);
|
||||
|
||||
switch (unitSelect.value) {
|
||||
case "L":
|
||||
quantityElem.innerText = originalQuantity / lTomL;
|
||||
break;
|
||||
case "gal":
|
||||
quantityElem.innerText = originalQuantity / galTomL;
|
||||
break;
|
||||
default:
|
||||
quantityElem.innerText = originalQuantity;
|
||||
break;
|
||||
}
|
||||
|
||||
// Arrondi à deux décimaux
|
||||
quantityElem.innerText = Math.round(quantityElem.innerText * 100) / 100;
|
||||
quantityElem.innerText = convertMlToUnit(newUnit, originalQuantity);
|
||||
});
|
||||
}
|
||||
|
||||
// Convertit une quantité en millilitres vers une autre unité de volume
|
||||
function convertMlToUnit(unit, quantity) {
|
||||
let newQuantity = unit === "L" ? quantity / lTomL : unit === "gal" ? quantity / galTomL : quantity;
|
||||
return round(newQuantity);
|
||||
}
|
||||
|
||||
// Convertit une quantité d'une autre unité vers des millilitres
|
||||
function convertUnitToMl(unit, quantity) {
|
||||
let newQuantity = unit === "L" ? quantity * lTomL : unit === "gal" ? quantity * galTomL : quantity;
|
||||
return round(newQuantity);
|
||||
}
|
||||
|
||||
function round(x) {
|
||||
return Math.round(x * 100) / 100;
|
||||
}
|
|
@ -55,7 +55,8 @@
|
|||
<button id="modifyRecipe" type="button">Modifier</button>
|
||||
<button id="useSubmit" type="button">Utiliser</button>
|
||||
<br/>
|
||||
<select id="unitsSelect" onchange="changeUnits(this, '.inventoryQuantity', '.inventoryQuantityUnits')">
|
||||
<select id="unitsSelect"
|
||||
onchange="changeUnits(this, '.inventoryQuantity', '.inventoryQuantityUnits'); changeCustomizersUnits(this)">
|
||||
<option selected value="mL">Millilitres</option>
|
||||
<option value="L">Litres</option>
|
||||
<option value="gal">Gallons</option>
|
||||
|
@ -151,10 +152,9 @@
|
|||
<th>Produit</th>
|
||||
<th>Type</th>
|
||||
<th>Quantité</th>
|
||||
<!-- Unités -->
|
||||
<td></td>
|
||||
<!-- Changement des quantités -->
|
||||
<td></td>
|
||||
<td>Unités</td>
|
||||
</tr>
|
||||
<!-- Produits -->
|
||||
<th:block th:each="mixQuantity : ${mix.mixQuantities}"
|
||||
|
@ -171,15 +171,16 @@
|
|||
th:data-quantityML="${mixQuantity.quantity}"
|
||||
th:text="${mixQuantity.quantity}"></p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="inventoryQuantityUnits">mL</p>
|
||||
</td>
|
||||
<th:block th:if="${!material.isMixType()}">
|
||||
<td><input class="quantityCustomizer" min="0" step="0.01"
|
||||
th:data-quantityML="${mixQuantity.quantity}"
|
||||
th:data-materialID="${material.materialID}"
|
||||
th:data-mixID="${mix.mixID}"
|
||||
th:value="${mixQuantity.quantity}" type="number"/></td>
|
||||
</th:block>
|
||||
<td>
|
||||
<p class="inventoryQuantityUnits">mL</p>
|
||||
</td>
|
||||
</tr>
|
||||
</th:block>
|
||||
</table>
|
||||
|
@ -237,36 +238,40 @@
|
|||
});
|
||||
|
||||
document.querySelectorAll(".quantityCustomizer").forEach((e) => {
|
||||
// Modifie les quantités de tous les produits
|
||||
e.addEventListener("change", () => {
|
||||
const value = e.valueAsNumber;
|
||||
const oldValue = e.defaultValue;
|
||||
const currentUnit = document.querySelector("#unitsSelect").value;
|
||||
|
||||
const mixID = e.dataset.mixid;
|
||||
// Modifie les quantités de tous les produits
|
||||
// Les 3 parentElement récupèrent la table dans laquelle le produit se trouve
|
||||
// TODO simplifier ?
|
||||
e.parentElement.parentElement.parentElement.querySelectorAll(".quantityCustomizer").forEach((elem) => {
|
||||
const defaultValue = elem.defaultValue;
|
||||
const newValue = (defaultValue * value) / oldValue;
|
||||
|
||||
document.querySelectorAll(".quantityCustomizer").forEach((elem) => {
|
||||
if (elem.dataset.mixid === mixID) {
|
||||
const defaultValue = elem.defaultValue;
|
||||
const newValue = (defaultValue * value) / oldValue;
|
||||
elem.value = round(newValue);
|
||||
|
||||
elem.value = Math.round(newValue * 100) / 100;
|
||||
}
|
||||
// Recalcule la quantité en millilitres de chaque produit
|
||||
elem.dataset.quantityml = convertUnitToMl(currentUnit, newValue);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
const mixes = document.querySelectorAll(".mixes");
|
||||
let maxWidth = 0;
|
||||
mixes.forEach((e) => {
|
||||
const width = e.style.width;
|
||||
|
||||
if (width > maxWidth) {
|
||||
maxWidth = width;
|
||||
}
|
||||
});
|
||||
mixes.forEach((e) => {
|
||||
e.style.width = maxWidth;
|
||||
});
|
||||
// Fait que toutes les tables de mélange soit de la même largeur
|
||||
// TODO Voir si nécessaire, semble être fait par défault
|
||||
// const mixes = document.querySelectorAll(".mixes");
|
||||
// let maxWidth = 0;
|
||||
// mixes.forEach((e) => {
|
||||
// const width = e.style.width;
|
||||
//
|
||||
// if (width > maxWidth) {
|
||||
// maxWidth = width;
|
||||
// }
|
||||
// });
|
||||
// mixes.forEach((e) => {
|
||||
// e.style.width = maxWidth;
|
||||
// });
|
||||
|
||||
document.querySelector("#formSubmit").addEventListener("click", () => {
|
||||
let formData = {};
|
||||
|
@ -296,20 +301,12 @@
|
|||
formData[mixID] = {};
|
||||
}
|
||||
|
||||
formData[mixID][materialID] = e.value;
|
||||
formData[mixID][materialID] = e.dataset.quantityml;
|
||||
});
|
||||
|
||||
document.querySelectorAll(".notEnough").forEach(e => {
|
||||
e.classList.remove("notEnough");
|
||||
});
|
||||
clearNotEnoughClasses();
|
||||
|
||||
sendPost(formData, "/inventory/use", r => {
|
||||
const splitReason = r.split("-");
|
||||
const mixID = splitReason[0];
|
||||
const materialID = splitReason[1];
|
||||
|
||||
document.querySelector(`#recipe-${mixID}`).querySelector(`#material-${materialID}`).classList.add("notEnough");
|
||||
});
|
||||
sendPost(formData, "/inventory/use", r => displayNotEnoughReason(r));
|
||||
});
|
||||
|
||||
document.querySelectorAll(".useMixSubmit").forEach(e => {
|
||||
|
@ -324,24 +321,40 @@
|
|||
formData[mixID] = {};
|
||||
}
|
||||
|
||||
formData[mixID][materialID] = elem.value;
|
||||
formData[mixID][materialID] = elem.dataset.quantityml;
|
||||
});
|
||||
|
||||
document.querySelectorAll(".notEnough").forEach(elem => {
|
||||
elem.classList.remove("notEnough");
|
||||
});
|
||||
clearNotEnoughClasses();
|
||||
|
||||
sendPost(formData, "/inventory/use", r => {
|
||||
const splitReason = r.split("-");
|
||||
const mixID = splitReason[0];
|
||||
const materialID = splitReason[1];
|
||||
|
||||
document.querySelector(`#recipe-${mixID}`).querySelector(`#material-${materialID}`).classList.add("notEnough");
|
||||
});
|
||||
sendPost(formData, "/inventory/use", r => displayNotEnoughReason(r));
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
||||
function changeCustomizersUnits(unitSelect) {
|
||||
const unit = unitSelect.value;
|
||||
|
||||
document.querySelectorAll(".quantityCustomizer").forEach(e => {
|
||||
const originalValue = e.dataset.quantityml;
|
||||
|
||||
e.value = convertMlToUnit(unit, originalValue);
|
||||
});
|
||||
}
|
||||
|
||||
function clearNotEnoughClasses() {
|
||||
document.querySelectorAll(".notEnough").forEach(elem => {
|
||||
elem.classList.remove("notEnough");
|
||||
});
|
||||
}
|
||||
|
||||
function displayNotEnoughReason(reason) {
|
||||
const splitReason = reason.split("-");
|
||||
const mixID = splitReason[0];
|
||||
const materialID = splitReason[1];
|
||||
|
||||
document.querySelector(`#recipe-${mixID}`).querySelector(`#material-${materialID}`).classList.add("notEnough");
|
||||
}
|
||||
|
||||
function sendPost(data, url, errorCallback) {
|
||||
const successP = document.querySelector(".success");
|
||||
const errorP = document.querySelector(".error");
|
||||
|
|
Binary file not shown.
Loading…
Reference in New Issue