<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>