it_asset/src/main/resources/templates/gcc-asset-list.html

<!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=${'&lt;img src=&quot;data:image/png;base64,' + assetlist.qrcodeimg + '&quot; width=&quot;100%&quot; /&gt;'}" 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>&nbsp;&nbsp; -->
                                    <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=${'&lt;img src=&quot;data:image/png;base64,' + assetlist.assetimg + '&quot; width=&quot;100%&quot; /&gt;'}" 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>