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>