|
|
<!doctype html><html xmlns:th="http://www.thymeleaf.org"><head th:replace="fragments/head :: head"></head>
<body> <!-- Page Container --> <div id="page-container" class="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed page-header-dark"> <!-- Side Overlay aside (right)--> <aside th:replace="fragments/aside-right :: aside"></aside> <!-- END Side Overlay (right)-->
<!-- Sidebar Nav--> <nav th:replace="fragments/nav :: nav"></nav> <!-- END Sidebar -->
<!-- Header --> <header th:replace="fragments/header :: header"></header> <!-- END Header -->
<!-- Main Container --> <main id="main-container"> <!-- Hero --> <div class=""> <div class="content content-full"> <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center"> <h3 class="flex-grow-1 fs-5 fw-semibold my-2 my-sm-3">Master</h3> <nav class="flex-shrink-0 my-2 my-sm-0 ms-sm-3" aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item">Home</li> <li class="breadcrumb-item">Assets</li> <li class="breadcrumb-item active" aria-current="page">Asset List<li> </ol> </nav> </div> </div> </div> <!-- END Hero -->
<!-- Page Content --> <div class="content"> <div class="block block-rounded"> <div class="block-header block-header-default"> <h3 class="block-title">Asset List</h3> <div class="block-options"> <button type="button" class="btn-block-option" onclick="callAdd();"><i class="far fa-plus-square"></i> Add New Asset</button> </div> </div> <div class="block-content p-0"> <div class="p-sm-4 p-0"> <div class="table-responsive"> <table class="table table-bordered table-striped table-vcenter js-dataTable-buttons"> <thead class="thead-light"> <tr class="table-bordered"> <th class="text-center no-sort">S.No</th> <th class="text-center" width="20%">Category</th> <th class="text-center" width="20%">Department Name</th> <th class="text-center" width="20%">Assign Person </th> <th class="text-center" width="20%">Asset Name </th> <th class="text-center" width="20%">Room/Position/Floor</th> <th class="text-center" width="20%">QRcode</th> <th class="text-center" width="10%">IsActive</th> <th class="text-center" width="10%">Action</th>> </tr> </thead> <tbody> <tr th:each="assetlist, i : ${assetdetailslist}" class="${assetdetailslist}"> <td th:text="${i.count}">0</td> <td class="text-center" th:text="${assetlist.assetCategory?.catName}"></td> <td class="text-center" th:text="${assetlist.departmentName}"></td> <td th:text="${assetlist.person}"></td> <td th:text="${assetlist.assetId}"></td> <td th:text="${assetlist.position}"></td> <td> <a tabindex="0" class="text-danger" data-bs-toggle="popover" data-bs-trigger="focus" title="" th:attr="data-bs-content=${'<img src="data:image/png;base64,' + assetlist.qrcodeimg + '" width="100%" />'}" data-bs-html="true" th:text="${assetlist.assetCode}" style="font-size:10px;cursor:pointer"></a> </td> <td th:if="${assetlist.isActive}"><span class="badge bg-success">Active</span></td> <td th:unless="${assetlist.isActive}"><span class="badge bg-warning">InActive</span></td> <td class="text-center"> <a th:onclick="views( [[${assetlist}]] );" data-bs-toggle="tooltip" data-bs-animation="true" data-bs-placement="top" title=""> <i class="fa fa-pen-to-square" id="showModalButton" style="font-size: 18px;"></i></a><!-- <a th:href="@{#}" th:onclick="return false;" data-bs-toggle="tooltip" data-bs-animation="true" data-bs-placement="top" title="Edit"><i class="far fa-pen-to-square" style="font-size: 18px;"></i></a> --> <a th:href="@{#}" th:onclick="return callDelete([[${assetlist.assetName}]], [[${assetlist.assetId}]] );;" data-bs-toggle="tooltip" data-bs-animation="true" data-bs-placement="top" title="Delete"><i class="far fa-trash-can" style="font-size: 18px;"></i></a> <a tabindex="0" class="text-danger" data-bs-toggle="popover" data-bs-trigger="focus" title="" th:attr="data-bs-content=${'<img src="data:image/png;base64,' + assetlist.assetimg + '" width="100%" />'}" data-bs-html="true" style="font-size:10px;cursor:pointer"><i class="far fa-image" style="font-size: 18px;"></i></a> </td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="modal fade" id="addForm" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <form action="#" th:action="@{/saveAsset}" th:object="${saveAsset}" method="post" enctype="multipart/form-data"> <div class="block block-rounded block-themed block-transparent mb-0"> <div class="block-header bg-primary-dark"> <h3 class="block-title">Master Asset Add Form</h3> <div class="block-options"> <button type="button" class="btn-block-option" data-bs-dismiss="modal" aria-label="Close"> <i class="fa fa-fw fa-times"></i> </button> </div> </div> <div class="block-content"> <div class="row"> <div class="col-md-6 alert-light border-0"> <div class="mb-3"> <label class="form-check-label" for="assetCategory">Asset Catergory</label> <select class="form-select" name="assetCategory" id="assetCategory" required onchange="getParameter()"> <option value="">Select</option> <option th:each="category: ${assetcategorylist}" th:value="${category.cId}" th:text="${category.catName}">-</option> </select> </div> </div> <div class="col-md-6 alert-light border-0"> <label class="col-md-9 control-label">Asset Parameters</label> <div class="col-mb-9" id="parameterOpetionHtml"> <p class="text-info">Select Asset Categeory to load Parameters.</p> </div> </div> <div class="col-md-12 alert-light border-0"> <div class="mb-3"> <label class="form-check-label" for="assetName">Name of the Asset</label> <input type="text" class="form-control" id="AssetName" required="" name="assetName"> </div> </div> <div class="col-md-6 alert-light border-0"> <div class="mb-3"> <label class="form-check-label" for="departmentname">Department Name</label> <input type="text" class="form-control" name="departmentName" id="departmentname" required> </div> </div>
<div class="col-md-6 alert-light border-0"> <div class="mb-3"> <label class="form-check-label" for="person">Assign person</label> <input type="text" class="form-control" name="person" id="Person" required> </div> </div> <div class="col-md-6 alert-light border-0"> <div class="mb-3"> <label class="form-check-label" for="position">Room/Position/Floor</label> <input type="text" class="form-control" name="position" id="Position" required> </div> </div> <div class="col-md-3 alert-light border-0"> <div class="mb-3"> <label class="form-check-label" for="assetLatitude">Latitude</label> <input type="text" class="form-control" id="AssetLatitude" name="assetLatitude"> </div> </div> <div class="col-md-3 alert-light border-0"> <div class="mb-3"> <label class="form-check-label" for="assetLongitude">Longitude</label> <input type="text" class="form-control" id="assetLongitude" name="assetLongitude"> </div> </div> <div class="col-md-12a alert-light border-0"> <div class="mb-3"> <label class="form-check-label" for="assetfile">Asset File</label> <input type="file" accept="image/*" class="form-control" name="assetFile" id="assetFile"> </div> </div> <div id="viewimg"></div> </div><!--end row--> </div><!--end modal-body--> </div> <div class="block-content block-content-full text-end bg-body"> <button type="button" class="btn btn-de-secondary btn-sm" data-bs-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary btn-sm">Save</button> </div><!--end modal-footer--> </form> </div><!--end modal-content--> </div><!--end modal-dialog--> </div><!--end modal--> <div class="modal fade" id="views" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-content"> <form action="#" th:action="@{/updateAsset}" th:object="${asset}" method="post"> <div class="block block-rounded block-themed block-transparent mb-0"> <div class="block-header bg-primary-dark"> <h3 class="block-title">Edit/Save Gcc Assetlist</h3> <div class="block-options"> <button type="button" class="btn-block-option" data-bs-dismiss="modal" aria-label="Close"> <i class="fa fa-fw fa-times"></i> </button> </div> </div> <div class="block-content"> <input type="hidden" class="form-control" name="assetId" id="PopAssetId" d>
<div class="row"> <div class="col-md-6 alert-light border-0"> <div class="mb-3"> <label class="form-check-label" for="catName">Category</label> <input type="text" class="form-control" name="catName" id="catName" required> </div> </div> <div class="col-md-6 alert-light border-0"> <div class="mb-3"> <label class="form-check-label" for="departmentName">Department Name</label> <input type="text" class="form-control" name="departmentName" id="departmentName" required > </div> </div> <div class="col-md-6 alert-light border-0"> <div class="mb-3"> <label class="for1m-check-label" for="person">Assign Person</label> <input type="text" class="form-control" name="person" id="person" required> </div> </div> <div class="col-md-3 alert-light border-0"> <div class="mb-3"> <label class="form-check-label" for="assetId">Asset Id</label> <input type="text" class="form-control" name="assetId" id="assetId" required> </div> </div> <!-- <div class="col-md-6 alert-light border-0">
<div class="mb-3"> <label class="form-check-label" for="assetName">Asset Id</label> <input type="text" class="form-control" name="assetName" id="assetName" required> </div> </div>--> <div class="col-md-3 alert-light border-0"> <div class="mb-3"> <label class="form-check-label" for="position">Room/Position/Floor</label> <input type="text" class="form-control" id="position" name="position"> </div> </div> <div id="viewimg"></div> <div class="block-content block-content-full text-end bg-body"> <button type="submit" class="btn btn-sm btn-primary" data-bs-dismiss="modal">Update</button> <button type="button" class="btn btn-de-secondary btn-sm" data-bs-dismiss="modal">Close</button> </div><!--end modal-footer--> </div><!--end row--> </div> </div> </div> </div> </div> </form> </div>
</div> <!-- END Page Content --> </main> <!-- END Main Container -->
<!-- Footer --> <footer th:replace="fragments/footer :: footer"></footer> <!-- END Footer --> </div> <!-- END Page Container -->
<!-- Scripts --> <script th:replace="fragments/script :: script"></script> <script> document.getElementById("showModalButton").addEventListener("click", function() { $('#views').modal('show'); }); function callAdd(){ $('#addForm').modal({ backdrop: 'static', keyboard: false }) $('#addForm').modal('show'); }
// /* // function callEdit( id ) // { // $.ajax({ // type: "GET", // dataType: 'json', // url: "/api/category/"+id, // //data: "id=" + id + "&name=" + name, // success: function(data){ // activeVal=0; // if(data[0].isActive){ // activeVal=1; // } // $("#editformrow").html('<div class="row"><input type="hidden" name="cId" id="cId" value="'+data[0].cId+'"><div class="mb-3"><label for="catName">Asset Category Name</label><input type="text" class="form-control" name="catName" id="catName" value="'+data[0].catName+'" placeholder="Category Name" required> <!--<small id="emailHelp" class="form-text text-muted">Set of assets grouped under this unique category</small>--></div><div class="mb-3"> <label class="form-check-label">IsActive</label><select class="form-select" name="isActive" id="<strong></strong>"> <option value="1">Yes</option><option value="0">No</option></select></div></div><!--end row-->'); // $("#editformrow select[name=isActive]").val(activeVal); // $('#editForm').modal({ // backdrop: 'static', // keyboard: false // }) // $('#editForm').modal('show'); // } // }); // return false; // } // */
function callDelete(name,id){ Swal.fire({ title: 'Are you sure you want to delete the catergory question?<br> `'+name+'`', text: "You won't be able to revert this!", icon: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Yes, delete it!', }).then(function(result) { if (result.isConfirmed) {
$.ajax({ type: "GET", dataType: 'json', url: "/api/asset/"+id+"/delete", //data: "id=" + id + "&name=" + name, success: function(data){ Swal.fire( 'Deleted!', 'Category `'+name+'` has been deleted.', 'success' ).then(() => { location.reload(); }); } }) } }) return false; } // javascript file image const $file = document.querySelector("#assetFile"); $file.addEventListener("change", (event) => { const selectedfile = event.target.files; if (selectedfile.length > 0) { const [imageFile] = selectedfile; const allowedExtensions = ["jpg", "jpeg", "png"]; const maxSizeMB = 2; // Check file extension const fileExtension = imageFile.name.split('.').pop().toLowerCase(); if (!allowedExtensions.includes(fileExtension)) { alert("Only JPEG, JPG, and PNG images are allowed."); $file.value = ""; // Clear the file input return; } // Check file size if (imageFile.size > maxSizeMB * 1024 * 1024) { alert("Image size must be less than 2MB."); $file.value = ""; // Clear the file input return; } const fileReader = new FileReader(); fileReader.onload = () => { const srcData = fileReader.result; console.log('base64:', srcData); $("#viewimg").html('<img src="' + srcData + '" alt="" width="150px"/>'); }; fileReader.readAsDataURL(imageFile); } }); function getParameter(){ var catid = $('#assetCategory').val();//$('#catId').find(":selected").val(); var paramHTML='' if(catid!='' || catid>0){ $.ajax({ type: "GET", dataType: 'json', url: "/api/parameter/category/"+catid, //data: "id=" + id + "&name=" + name, success: function(data){ for(var k in data) { paramHTML+='<div class="form-check form-check-inline">'+ '<input class="form-check-input" type="checkbox" name="paramId[]" id="param'+data[k].paramId+'" value="'+data[k].paramId+'">'+ '<label class="form-check-label" for="param'+data[k].paramId+'">'+data[k].paramName+'</label>'+ '</div>'; } $('#parameterOpetionHtml').html(paramHTML); } }); } else{ $('#parameterOpetionHtml').html('<p class="text-info">Select Asset Categeory to load Parameters.</p>'); } return false; }function views(assetlist) { console.log(assetlist) $('#views').modal({ backdrop: 'static', keyboard: false }); $('#views').modal('show');
document.getElementById("PopAssetId").value = assetlist.assetId; /* document.getElementById("catName").value = assetlist.assetCategory.catName;*/ document.getElementById("departmentName").value = assetlist.departmentName; document.getElementById("person").value = assetlist.person; document.getElementById("position").value = assetlist.position; document.getElementById("assetId").value = assetlist.assetId;}
</script>
</body></html>
|
