Correction d'un bug d'affichage dans le créateur de produit

This commit is contained in:
FyloZ 2020-03-09 23:42:41 -04:00
parent 295f30f3f4
commit f07c1c71db
2 changed files with 32 additions and 22 deletions

View File

@ -9,7 +9,6 @@
<header th:include="fragments.html :: header(false)"></header>
<!-- Corps de la page -->
<section>
<p th:if="${name != null}" th:text="#{material.success.created(${name})}" class="success"></p>
<div th:include="fragments.html :: messages"></div>
<h1 th:text="#{material.add.title}"></h1>
@ -37,7 +36,6 @@
<input type="text"
class="rawInput"
th:field="*{name}"
style="width: 145px"
required/>
</div>
<div style="display: flex; flex-direction: row">
@ -46,7 +44,7 @@
id="quantity"
min="0"
name="quantity"
onchange="calculateMilliliters(this.value, this.dataset.unit)"
onchange="calculateMilliliters(this)"
required
step="0.001"
th:value="${material.inventoryQuantity}"
@ -54,7 +52,7 @@
style="margin-right: 10px; width: 50px">
<!--Contient la quantité en millilitres-->
<input type="hidden"
th:field="*{inventoryQuantity}"/>
th:field="*{inventoryQuantity}" required/>
<select id="units"
name="units"
@ -74,7 +72,8 @@
<input id="simdut"
class="rawInput"
name="simdut"
type="file"/>
type="file"
style="width: 145px"/>
</div>
</div>
</div>
@ -91,10 +90,14 @@
const quantityElem = $("#quantity");
quantityElem.data({unit: unitSelect.val()});
calculateMilliliters(quantityElem.val(), unitSelect.val());
calculateMilliliters(quantityElem);
}
function calculateMilliliters(quantity, unit) {
function calculateMilliliters(input) {
input = $(input);
const quantity = input.val();
const unit = $("#units").val();
let convertedQuantity = quantity;
switch (unit) {

View File

@ -1,10 +1,7 @@
<!DOCTYPE html>
<html lang="fr" xmlns:th="http://www.thymeleaf.org">
<head>
<th:block
th:include="fragments.html :: head(#{material.editing.title(${material.name})}, 'form')"></th:block>
<link th:href="@{|${baseUrl}/css/forms.css|}" rel="stylesheet"/>
<th:block th:include="fragments.html :: head(#{material.editing.title(${material.name})}, 'form')"></th:block>
</head>
<body>
@ -14,7 +11,7 @@
<section>
<div th:include="fragments.html :: messages"></div>
<h1 class="materialCode" th:text="#{material.editing.title(${material.name})}"></h1>
<h1 th:text="#{material.editing.title(${material.name})}"></h1>
<form th:action="@{/material/editor}" th:object="${material}" class="requireAuth" method="POST">
<input type="hidden" th:field="*{id}"/>
@ -29,10 +26,10 @@
<label th:for="${#ids.next('name')}" th:text="#{material.code} + ':'"></label>
</div>
<div>
<label for="quantity" th:text="#{material.inventoryQuantity}"></label>
<label for="quantity" th:text="#{material.inventoryQuantity} + ':'"></label>
</div>
<div>
<label th:for="${#ids.next('materialType')}">Type de produit: </label>
<label th:for="${#ids.next('materialType')}" th:text="#{material.type} + ':'"></label>
</div>
<div>
<label th:text="#{material.simdut} + ':'"></label>
@ -43,20 +40,26 @@
<input type="number" th:field="*{id}" required readonly/>
</div>
<div>
<input type="text" th:field="*{name}"/>
<input type="text"
class="rawInput"
th:field="*{name}"
required />
</div>
<div style="display: flex; flex-direction: row">
<input data-unit="mL"
class="rawInput"
id="quantity"
min="0"
name="quantity"
onchange="calculateMilliliters(this.value, this.dataset.unit)"
step="0.01"
required
onchange="calculateMilliliters(this)"
step="0.001"
th:value="${material.inventoryQuantity}"
type="number"
style="margin-right: 10px; width: 50px">
style="margin-right: 10px; width: 50px"
>
<!--Contient la quantité en millilitres-->
<input type="hidden" th:field="*{inventoryQuantity}"/>
<input type="hidden" th:field="*{inventoryQuantity}" required/>
<select id="units"
name="units"
@ -109,11 +112,15 @@
function switchUnits(unitSelect) {
unitSelect = $(unitSelect);
const quantityElem = $("#quantity");
quantityElem.data({unit: unitSelect.val()})
calculateMilliliters(quantityElem.val(), unitSelect.val());
quantityElem.data({unit: unitSelect.val()});
calculateMilliliters(quantityElem);
}
function calculateMilliliters(quantity, unit) {
function calculateMilliliters(input) {
input = $(input);
const quantity = input.val();
const unit = $("#units").val();
let convertedQuantity = quantity;
switch (unit) {