ColorRecipesExplorer
/
Backend
1
1
Fork 0
Code Issues 7 Pull Requests Projects 1 Releases 2 Wiki Activity

Ajout des icônes pour les produits en basse quantité.

This commit is contained in:
FyloZ 2020-10-09 00:28:46 -04:00
parent 6a56aa9fde
commit 6a5a254c41
2 changed files with 31 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/main/resources/templates/fragments.html
View File

@ -3,7 +3,7 @@
<head th:fragment="head(title, styleName)">
<title th:text="${title}"></title>
<meta charset="UTF-8"/>
<!-- <link rel="stylesheet" th:href="@{|${baseUrl}/css/bootstrap/bootstrap.min.css|}"/>-->
<!-- <link rel="stylesheet" th:href="@{|${baseUrl}/css/bootstrap/bootstrap.min.css|}"/>-->
<link rel="stylesheet" th:href="@{|${baseUrl}/css/main.css|}"/>
<link rel="stylesheet" th:href="@{|${baseUrl}/css/menu.css|}"/>
<link rel="stylesheet" th:href="@{|${baseUrl}/css/flex.css|}"/>
@ -170,7 +170,7 @@
th:text="#{footer.lang}"></a>
</th:block>
<!-- <script th:src="@{|${baseUrl}/js/libs/bootstrap/bootstrap.min.js|}"></script>-->
<!-- <script th:src="@{|${baseUrl}/js/libs/bootstrap/bootstrap.min.js|}"></script>-->
<script th:src="@{|${baseUrl}/js/libs/jquery-3.4.1.min.js|}"></script>
<script th:src="@{|${baseUrl}/js/libs/jquery-ui-1.12.1/jquery-ui.min.js|}"></script>
<script th:src="@{|${baseUrl}/js/libs/axios.min.js|}"></script>
@ -221,6 +221,7 @@
<script th:fragment="iconsPath">
const recipeNotApprovedIconPath = "[[@{|${baseUrl}/icons/warning.svg|}]]"
const materialLowQuantityIconPath = "[[@{|${baseUrl}/icons/bucket.svg|}]]"
</script>
</body>

36
src/main/resources/templates/inventory.html
View File

@ -6,7 +6,7 @@
<!-- Style de la page -->
<style>
td, th {
td:not(.iconsColumn), th:not(.iconsColumn) {
min-width: 100px;
}
@ -32,10 +32,6 @@
background-color: #e6e6e6;
}
.lowQuantity td {
background-color: #fff0b3;
}
.hidden, .hiddenWrongType {
display: none;
}
@ -52,6 +48,14 @@
.options div {
padding: 20px 0;
}
.iconsColumn {
padding: 0 20px;
}
.iconsColumn img {
margin-top: 5px;
}
</style>
</head>
<body>
@ -87,7 +91,7 @@
<th th:text="#{keyword.type}"></th>
<th></th>
<th class="iconsColumn"></th>
</tr>
<!--Produits-->
@ -104,6 +108,7 @@
<button class="modifyMaterial" th:data-materialId="${material.id}" type="button"
th:text="#{keyword.edit}"></button>
</td>
<td class="iconsColumn"></td>
</tr>
</table>
@ -146,6 +151,7 @@
<!-- Fragment du pied de page -->
<footer th:include="fragments.html :: footer(null, true)"></footer>
<script th:include="fragments.html :: iconsPath"></script>
<script>
/*<![CDATA[*/
@ -168,8 +174,22 @@
// Ajoute la classe "lowQuantity" au produits qui ont une quantité en inventaire inférieur à la quantité limite définie
function checkLowQuantity(value) {
materialRows.each(function () {
if (parseFloat($(this).find(".inventoryQuantity").text()) < value) $(this).addClass("lowQuantity");
else $(this).removeClass("lowQuantity");
if (parseFloat($(this).find(".inventoryQuantity").text()) < value) {
$(this).addClass("lowQuantity");
const iconsColumn = $(this).find(".iconsColumn");
if (iconsColumn.find("img").length === 0) {
const icon = $("<img />")
.attr({src: materialLowQuantityIconPath});
iconsColumn.append(icon);
}
} else {
$(this).removeClass("lowQuantity");
const iconsColumn = $(this).find(".iconsColumn");
if (iconsColumn.find("img").length !== 0) {
console.log(iconsColumn.find("img"))
iconsColumn.find("img").remove();
}
}
});
hide($("#hideOthers").is(":checked"));