File "my-services.ejs"

Full Path: /home/wiomgjqe/neduas.store/v1/partials/partials/styles/partials/auto-import/my-services.ejs
File size: 10.24 KB
MIME-type: text/html
Charset: utf-8

<html>
	<head>
  <%- include("./partials/head") %>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap-sweetalert@1.0.1/dist/sweetalert.min.js"></script>
		<link
			href="https://cdn.jsdelivr.net/npm/bootstrap-sweetalert@1.0.1/dist/sweetalert.min.css"
			rel="stylesheet"
		/>
    <title>My Services</title>
	</head>
	<body class="bg-light">
	  <div id="alert" class="alert alert-dismissible fade show position-sticky top-0" role="alert" style="display:none;z-index:99999;">
      <span id="alert-text"></span>
      <button id="alert-close" type="button" class="btn-close"></button>
    </div>
		<!-- Credits - https://bootstrapbrain.com/component/bootstrap-table-card-example/#preview -->
		<section class="py-3 py-md-5">
			<div class="container">
				<div class="row justify-content-center">
				  <% data.forEach(function(listItem){ %>
					<div class="col-12 col-lg-9 col-xl-8 mb-4">
						<div class="card widget-card border-light shadow-sm">
							<div id="<%= listItem.name.toLowerCase().split(' ').join('_') %>" class="card-body p-4">
								<h5 class="card-title widget-card-title mb-4 border-bottom">
									<%= listItem.name %>
								</h5>
								<% if(listItem.data?.length){ %>
								
								<% if(listItem.name.includes("Servers")){ %>
								<div class="d-flex align-items-center mb-2">
								  <span>
								    Delete All Servers And Its Services (Bulk Delete) ?
								  </span>
								  <button onclick="bulkDelete()" class="btn btn-danger">Delete</button>
								</div>
								<% } else if(listItem.name.includes("Services")) { %>
								<div class="input-group mb-3">
  <input id="search-service-input" type="text" class="form-control" placeholder="Service Id/ Name/ Code/ Price" aria-label="Recipient's username" aria-describedby="search-input-btn">
  <button class="btn btn-primary input-group-append input-group-text" id="search-input-btn">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
  <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
</svg>
  </button>
</div>
								<% } %>
								
  								<div class="table-responsive">
  									<table
  										class="table table-striped bsb-table-xl text-wrap align-middle m-0"
  									>
  										<thead>
  											<tr>
  											  <th>#</th>
  												<% Object.keys(JSON.parse(JSON.stringify(listItem.data[0]))).forEach(function(title){ %>
  												<% if(title != "id"){ %>
  												<th><%= title %></th>
  												<% } %>
  												<% }) %>
  												<th>Action</th>
  											</tr>
  										</thead>
  										<tbody>
  											<% listItem.data.forEach(function(myObject, index){ %>
  											<tr id="<%= listItem.type %>-<%= myObject.id %>">
  											<td><%= index + 1 %></td>
  											  <% Object.entries(JSON.parse(JSON.stringify(myObject))).forEach(function(arr){ %>
  											  <% if(arr[0] != "id"){ %>
  												<td class="text-secondary fs-7" style="max-width: 250px;
    word-wrap: break-word;">
  												  <%= arr[0] == "flag" ? (flags[arr[1]] ? flags[arr[1]] : "🚩") + " - " + arr[1] : arr[1] %>
  												</td>
  												<% } %>
  												<% }) %>
  												<td>
  												  <% if(myObject.server_name){ %>
  												  <button class="badge rounded-pill bg-secondary text-decoration-none mb-2" style="border:0px;" onclick="editPrice('<%= myObject.id %>', '<%= myObject.server_name %>')">&#37; Edit Price</button>
  												  <% } %>
  													<a href="<%= url %>&page=<%= listItem.type %>&q=edit&pid=<%= myObject.id %>" class="badge rounded-pill bg-info text-decoration-none"
  														>&#9998; Edit</a>
  													<button class="badge rounded-pill bg-danger btn mt-2"
  												onclick="deleteData('<%= listItem.type %>', '<%= listItem.from %>', <%= JSON.stringify(myObject) %>)">&#9249; Delete</button>
  												</td>
  											</tr>
  											<% }) %>
  											
  										</tbody>
  									</table>
  								</div>
								<% } else { %>
								  <p class="fs-6">You Don't have any <%= listItem.from %>...</p>
								<% } %>
							</div>
							<nav id="<%= listItem.name.toLowerCase().split(' ').join('_') %>-btns" class="d-flex justify-content-center" aria-label="paginate-buttons">
                <ul class="pagination">
                  <% listItem.paginateButtons.forEach((val)=>{ %>
                  <% if(val != "0"){ %>
                  <% var isActive = "" %>
                  <% if(val * listItem.limit == listItem.offset + listItem.limit) { %>
                  <%   isActive = "active" %>
                  <% } %>
                  <li class="page-item"><a class="page-link <%= isActive %>" href="<%= listItem.paginateLink %><%= val %>#<%= listItem.name.toLowerCase().split(' ').join('_') %>"><%= val %></a></li>
                  <% } %>
                  <% }) %>
                </ul>
              </nav>
						</div>
					</div>
					<% }) %>
				</div>
			</div>
		</section>
		<%- include("./partials/my-data") %>
		<script>
		  function bulkDelete(){
        let url = path.location + "/v3?id=" + path.query.id + "&page=bulk_delete"; 
        swal({
          title: "Bulk Delete",
          text: "Are You Sure You Want To Delete All The Servers And Its Services ?",
          type: "info",
          showCancelButton: true,
          closeOnConfirm: false,
          showLoaderOnConfirm: true
        }, function () {
          fetch(url, {
            method: "delete",
            headers: {
            "Content-Type": "application/json"
            }
          })
          .then(r=>r.json())
          .then(res=>{
            swal({
						title: res.status == 1 ? "Success" : "Error",
						text: res.message,
						imageUrl: res.status == 1 ? "https://www.freeiconspng.com/uploads/success-icon-10.png" : "https://www.freeiconspng.com/uploads/high-resolution-photo-of-the-red-exclamation-point-error-23.png"
					});
          })
          .catch(err=>{
            console.error(err)
            swal({
						title: "Error",
						text: "Unable to communicate with Server",
						imageUrl: "https://www.freeiconspng.com/uploads/high-resolution-photo-of-the-red-exclamation-point-error-23.png"
					});
          })  
        });
		  }
		
		  function editPrice(id, name) {
		    var url = path.location + "/v3?id=" + path.query.id + "&page=edit_server_price&qid=" + id;
		    swal({
          title: "Edit Service Price",
          text: "Enter A Percentage Number And The Services Price Connected To This Server Will Increase/Decrease Accordingly",
          type: "input",
          inputType: "number",
          showCancelButton: true,
          closeOnConfirm: false,
          inputPlaceholder: "-10",
          showLoaderOnConfirm: true
        }, function (inputValue) {
          if (!Number(inputValue)) {
            swal.showInputError("You need to enter a valid number!");
            return false
          }
          fetch(url, {
            method: "post",
            headers: {
            "Content-Type": "application/json"
            },
            body: JSON.stringify({
              id,
              server_name: name,
              percentage: inputValue
            })
          })
          .then(r=>r.json())
          .then(res=>{
            swal({
						title: res.status == 1 ? "Success" : "Error",
						text: res.message,
						imageUrl: res.status == 1 ? "https://www.freeiconspng.com/uploads/success-icon-10.png" : "https://www.freeiconspng.com/uploads/high-resolution-photo-of-the-red-exclamation-point-error-23.png"
					});
          })
          .catch(err=>{
            console.error(err)
            swal({
						title: "Error",
						text: "Unable to communicate with server",
						imageUrl: "https://www.freeiconspng.com/uploads/high-resolution-photo-of-the-red-exclamation-point-error-23.png"
					});
          })
        });
		  }
		</script>
		<script>
		  document.getElementById("search-input-btn").addEventListener("click", searchMyServices)
		  
		  let prevVal = "";
		  function searchMyServices(){
		    const value = document.getElementById("search-service-input").value;
		    if(!value && !prevVal) return;
		    prevVal = value;
		    let url = path.location + "/v3?id=" + path.query.id + "&q=get_services&search=" + value + "&server_page="+ (path.query.server_page || 1) +"&api_page=" + (path.query.api_page || 1);
		    fetch(url)
		    .then(r=>r.json())
		    .then(res => {
		      // console.log(res)
		      const body = document.querySelector("#my_services tbody")
		      const paginatedButtons = document.querySelector("#my_services-btns ul")
		      paginatedButtons.innerHTML = "";
		      body.innerHTML = "";
		      res.paginateButtons.forEach((val, i) => {
		        if(val != "0") {
		          paginatedButtons.innerHTML += `<li class="page-item"><a class="page-link ${i == 0 ? "active" : ""}" href="${res.paginateLink}${val}#my_services">${val}</a></li>`
		        }
		      });
		      if(!res.data.length) {
		        body.innerHTML = `<p class='fs-6'>You Don't have any "${value}" in your services...</p>`
		      } else {
		        res.data.forEach((myObject, index) => {
		          body.innerHTML += `<tr id="${res.type}-${myObject.id}">
  											<td>${index + 1}</td>
  											<td>${myObject.service_id}</td>
  											<td>${myObject.name}</td>
  											<td>${myObject.code}</td>
  											<td>${myObject.description}</td>
  											<td>${myObject.price}</td>
  											<td>${myObject.cancel_disable}</td>
  												<td>
  													<a href="${res.location}page=${res.type}&q=edit&pid=${myObject.id}" class="badge rounded-pill bg-info text-decoration-none"
  														>&#9998; Edit</a>
  													<button class="badge rounded-pill bg-danger btn mt-2"
  												onclick="deleteData('${res.type}', '${res.from}', ${JSON.stringify(myObject)})">&#9249; Delete</button>
  												</td>
  											</tr>`
		        });
		      }
		    })
		    .catch(err => {
		      console.error(err)
		      swal({
						title: "Error",
						text: "Unable to communicate with server",
						imageUrl: "https://www.freeiconspng.com/uploads/high-resolution-photo-of-the-red-exclamation-point-error-23.png"
					});
		    })
		  }
		</script>
	</body>
</html>