201 lines
11 KiB
HTML
201 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html
|
|
xmlns:th="http:/www.thymeleaf.org"
|
|
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
|
lang="en">
|
|
|
|
<head th:replace="fragments/header::headerLink">
|
|
</head>
|
|
|
|
<body>
|
|
<div>
|
|
<div class="container" th:fragment="table">
|
|
<!-- Begin Page Content -->
|
|
<div class="container-fluid" >
|
|
<div>
|
|
<!-- Page Heading -->
|
|
|
|
</div>
|
|
<!-- DataTales Example -->
|
|
<div class="card shadow mb-4">
|
|
|
|
<div class="card-body">
|
|
<p th:text="${message}" th:if="${message ne null}" class="alert alert-primary"></p>
|
|
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal" style="margin-bottom: 10px;">
|
|
<i class="far fa-edit mr-2"></i>
|
|
Add product
|
|
</button>
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="myModal" role="dialog">
|
|
<div class="modal-dialog">
|
|
|
|
<!-- Modal content-->
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">Product</h4>
|
|
<button type="button" class="close" data-dismiss="modal">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form class="user" id="frmProductAdd" th:action="@{/admin/product/add}" th:object="${product}" enctype="multipart/form-data" method="POST">
|
|
<div class="form-group">
|
|
<input type="text" class="form-control" id="name" name="name" placeholder="Product..." required pattern="{5}">
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="text" class="form-control" id="price" name="price" placeholder="Price" required pattern="[0-9]+(\.[0-9]{1,2})?%?">
|
|
</div>
|
|
<select class="form-control" name="color" required>
|
|
<option>Black</option>
|
|
<option>Red</option>
|
|
<option>Green</option>
|
|
</select>
|
|
<label for="comment"></label>
|
|
<div class="custom-file">
|
|
<input type="file" class="custom-file-input" id="customFile" name="file">
|
|
<label class="custom-file-label" for="customFile">Choose file</label>
|
|
</div>
|
|
<label for="comment"></label>
|
|
<div class="form-group">
|
|
<textarea class="form-control" rows="3" id="comment" name="des"></textarea>
|
|
</div>
|
|
<button class="btn btn-primary" type="submit" onclick="check()">Save</button>
|
|
</form>
|
|
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Modal -->
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Name</th>
|
|
<th>Price</th>
|
|
<th>Color</th>
|
|
<th>Description</th>
|
|
<th>Image</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tfoot>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Name</th>
|
|
<th>Price</th>
|
|
<th>Color</th>
|
|
<th>Description</th>
|
|
<th>Image</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</tfoot>
|
|
<tbody>
|
|
<tr th:each="food:${products}">
|
|
<td th:text="${food.id}"></td>
|
|
<td th:text="${food.name}"></td>
|
|
<td th:text="${food.price}"></td>
|
|
<td th:text="${food.color}"></td>
|
|
<td th:text="${food.des}"></td>
|
|
<td>
|
|
<img th:src="'/img/'+${food.img}" alt="" class="img-rounded" style="width: 100px; height: 100px;">
|
|
</td>
|
|
<!-- Modal -->
|
|
<div class="modal fade" th:id="${'my'+food.id}" role="dialog">
|
|
<div class="modal-dialog">
|
|
|
|
<!-- Modal content-->
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">Product</h4>
|
|
<button type="button" class="close" data-dismiss="modal">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form class="user" id="frmFoodEdit" th:action="@{/admin/product/update}" th:object="${product}" th:method="POST" enctype="multipart/form-data">
|
|
<div class="form-group" th:id="${'food'+food.id}">
|
|
<input type="text" class="form-control" th:value="${food.id}" id="foodid" name="id" placeholder="Price">
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="text" class="form-control" th:value="${food.name}" id="name" name="name" placeholder="Price" required >
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="text" class="form-control " th:value="${food.price}" id="price" name="Price" placeholder="Price" required pattern="[0-9]+(\.[0-9]{1,2})?%?">
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="text" class="form-control" th:value="${food.color}" id="color" name="color" placeholder="Price">
|
|
</div>
|
|
<label for="comment"></label>
|
|
<div class="custom-file" th:id="${'updateFile'+food.id}">
|
|
<input type="file" class="custom-file-input" id="customFile" name="file">
|
|
<label class="custom-file-label" for="customFile">Choose file</label>
|
|
</div>
|
|
<label for="comment"></label>
|
|
<div class="form-group">
|
|
<textarea class="form-control" rows="3" id="comment" name="des" th:value="${food.des}"></textarea>
|
|
<button class="btn btn-primary" type="submit">Update</button>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<!-- Modal -->
|
|
<td>
|
|
<button type="button" class="btn btn-primary" data-toggle="modal" th:id="${'btn'+ food.id}" th:onclick="'popup('+${food.id}+')'">
|
|
<i class="far fa-edit mr-2"></i>
|
|
Update
|
|
</button>
|
|
|
|
<button type="button" class="btn btn-danger" th:id="${'btndelete'+ food.id}" th:onclick="'deleteFood('+${food.id}+')'">
|
|
<i class="fas fa-trash-alt mr-2"></i>
|
|
Delete
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- /.container-fluid -->
|
|
</div>
|
|
<!-- End of Main Content -->
|
|
|
|
<!-- Java Script-->
|
|
<script>
|
|
function popup(id){
|
|
document.getElementById("food"+id).style.display="none";
|
|
var btn=document.getElementById("btn"+id);
|
|
var file=document.getElementById("updateFile"+id);
|
|
btn.dataset.target="#my"+id;
|
|
|
|
}
|
|
function deleteFood(id){
|
|
window.location.replace("/admin/product/delete/"+id+"");
|
|
}
|
|
</script>
|
|
|
|
<!-- jQuery-->
|
|
<script>
|
|
$(".custom-file-input").on("change", function() {
|
|
var fileName = $(this).val().split("\\").pop();
|
|
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
|
|
});
|
|
</script>
|
|
|
|
<!-- Footer -->
|
|
<div th:replace="fragments/footer::footer"></div>
|
|
|
|
<!-- Footer -->
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|