File "api-services.ejs"
Full Path: /home/wiomgjqe/neduas.store/v1/partials/partials/styles/partials/auto-import/api-services.ejs
File size: 8.79 KB
MIME-type: text/html
Charset: utf-8
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"
></script>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<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>Auto Import API Services</title>
</head>
<body>
<!-- Contact 1 - Bootstrap Brain Component
Credits: https://bootstrapbrain.com/component/bootstrap-5-simple-contact-form-example/#tab-css
-->
<section class="py-3 py-md-5">
<div class="container">
<div class="row justify-content-md-center">
<div class="col-12 col-md-10 col-lg-8 col-xl-7 col-xxl-6">
<h2 class="mb-2 display-5 text-center">API Services</h2>
<p class="text-secondary mb-3 text-center">
Below are all the services and countries provided by <%= api %>
Api. Add your profit margin and hit submit to import all of them.
</p>
<hr class="w-50 mx-auto mb-5 mb-xl-9 border-dark-subtle" />
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-lg-center">
<div class="col-12 col-lg-9">
<div class="bg-white border rounded shadow-sm overflow-hidden">
<form id="add-form">
<div class="row gy-4 gy-xl-5 p-4 p-xl-5">
<div class="col-12">
<h4 class="text-center mb-4">API Country + Services</h4>
</div>
<% apiServices.forEach(function (data, i){ %>
<div class="accordion" id="accordionExample-<%= i %>">
<div class="accordion-item">
<h2 class="accordion-header" id="heading-<%= i %>">
<button
class="accordion-button my-api-country"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapse-<%= i %>"
aria-expanded="true"
aria-controls="collapse-<%= i %>"
data-country-name="<%= data[0].country.name %>"
data-country-code="<%= data[0].country.code %>"
data-country-profit="<%= data[0].country.profit %>"
>
<%= flags[data[0].country.name] ? flags[data[0].country.name] : "" %> <%= data[0].country.name %>
</button>
</h2>
<div
id="collapse-<%= i %>"
class="accordion-collapse collapse show"
aria-labelledby="headingOne"
data-bs-parent="#accordionExample-<%= i %>"
>
<div class="accordion-body">
<% if(data[0].err){ %>
<p>This Country server will not be added because API for this server has responded with: <%= data[0].err %></p>
<% } else { %>
<div class="mb-4">
<div class="input-group">
<span class="input-group-text">Profit Margin: </span>
<input type="number" step="0.01" class="form-control" value="<%= data[0].country.profit %>" onchange="setProfit('<%= data[0].country.name %>', this.value)">
<span class="input-group-text">%</span>
</div>
<div class="form-text">Enter the profit margin in percentage you would like to have on services of this server.</div>
</div>
<% var [arr_one, arr_two] = sliceArrayIntoTwo(data[0]?.list || []) %>
<% arr_one.forEach(function (obj, index){ %>
<div class="row mb-4">
<div class="col d-flex flex-column justify-content-center align-items-center">
<img
src="<%= obj.logo %>"
alt="service logo"
class="img-fluid"
height="46"
width="46"
/>
<span class="caption"><%= obj.name %> - ₹<span class="profit-amount-<%= data[0].country.name %>"><%= obj.profitAmt %></span></span>
<figcaption class="figure-caption" contenteditable="true" oninput="setDescription('<%= data[0].country.name %>', '<%= obj.name %>', this.innerText)"><%= obj.description %></figcaption>
</div>
<% if(arr_two[index]){ %>
<div class="col d-flex flex-column justify-content-center align-items-center">
<img
src="<%= arr_two[index].logo %>"
alt="service logo"
class="img-fluid"
height="46"
width="46"
/>
<span class="caption"><%= arr_two[index].name %> - ₹<span class="profit-amount-<%= data[0].country.name %>"><%= arr_two[index].profitAmt %></span></span>
<figcaption class="figure-caption" contenteditable="true" oninput="setDescription('<%= data[0].country.name %>', '<%= arr_two[index].name %>', this.innerText)"><%= arr_two[index].description %></figcaption>
</div>
<% } %>
</div>
<% }) %>
<% } %>
</div>
</div>
</div>
</div>
<% }) %>
<div class="col-12">
<div class="d-grid">
<button
class="btn btn-primary btn-md"
type="submit"
id="submit-btn"
>
Submit
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<script>
const apiData = {}
// JSON.parse(document.getElementById("currScript").dataset.apiData)
document.querySelectorAll((".my-api-country")).forEach((el, i)=>{
apiData[el.dataset.countryName] = {
id: el.dataset.countryCode,
profit: el.dataset.countryProfit,
services: {}
}
// console.log(el.dataset.countryName, apiData[el.dataset.countryName])
})
function setDescription(country, service, value){
apiData[country].services[service] = value;
}
function setProfit(country, profit){
alert(profit)
apiData[country].profit = profit
document.querySelectorAll(`.profit-amount-${country}`).forEach((el, i)=>{
var prevAmt = Number(el.innerText) || 0;
var newAmt = getPercentage(prevAmt, profit)
el.innerText = +(prevAmt + newAmt).toFixed(2);
})
}
function getPercentage(amount, percentage) {
return +((amount / 100) * percentage).toFixed(2);
}
var query = window.location.search
.substring(1)
.split("&")
.map((v) => v.split("="));
var path = {
location: window.location.origin,
query: Object.fromEntries(query)
};
document.querySelector("form").addEventListener("submit", (e) => {
e.preventDefault();
console.log(apiData)
const arr = Object.keys(apiData)
swal(
{
title: `Auto Import ${arr.length} Country Services`,
text: `We will try to import services from ${arr.length} Countries to your bot. Click "Ok" button below to continue. Auto import process may take upto a minute, so please wait for a while`,
type: "info",
showCancelButton: true,
closeOnConfirm: false,
showLoaderOnConfirm: true
},
function(){
fetch(`${path.location}/v3?id=${path.query.id}&q=page&page=${path.query.page}&status=data&api=${path.query.api}&key=${path.query.key}`, {
method: "post",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(apiData)
})
.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("error making fetch reques: ", err)
swal({
title: "Error",
text: "Unable to upload this services list. Please try again later",
imageUrl: "https://www.freeiconspng.com/uploads/high-resolution-photo-of-the-red-exclamation-point-error-23.png"
});
})
}
)
});
</script>
</body>
</html>