File "select-servers.ejs"
Full Path: /home/wiomgjqe/neduas.store/v2/styles/auto-import/select-servers.ejs
File size: 4.54 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>Select API</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">Select Countries</h2>
<p class="text-secondary mb-3 text-center">
Below are all the countries provided by <%= api %> Api. Select Your
country and Click On submit Button
</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">Select Countries</h4>
</div>
<% if(countries[0].msg){ %>
<p>Enable to load countries list because <%= api %> API responded with: <%= countries[0].msg %></p>
<% } else { %>
<% countries[0].forEach(function (obj, index){ %>
<div class="col-12 row mt-3">
<div class="col form-group">
<% let str = obj.country %>
<% let modStr = str[0].toUpperCase() + str.slice(1); %>
<label for="country" class="form-label">
<input type="checkbox" name="country" id="<%= modStr %>" value="<%= obj.id %>" />
<%= flags[modStr] %> <%= modStr %>
</label>
</div>
<% if(countries[1][index]){ %>
<div class="col form-group">
<% let str1 = countries[1][index].country %>
<% let modStr1 = str1[0].toUpperCase() + str1.slice(1); %>
<label for="country" class="form-label">
<input type="checkbox" name="country" id="<%= modStr1 %>" value="<%= countries[1][index].id %>" />
<%= flags[modStr1] %> <%= modStr1 %>
</label>
</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>
document.querySelector("form").addEventListener("submit", (e) => {
e.preventDefault();
var data = [];
const inputs = document.querySelectorAll("input[type='checkbox']")
inputs.forEach((el) => {
if (el.checked) data.push({
id: el.value,
country: el.id
});
});
swal(
{
title: `Add ${data.length} Countries`,
text: `Click on the "Ok" button below. It will redirect you to available services page`,
type: "info",
showCancelButton: true,
closeOnConfirm: false,
showLoaderOnConfirm: true
},
function () {
var query = window.location.search
.substring(1)
.split("&")
.map((v) => v.split("="));
var path = {
location: window.location.origin,
query: Object.fromEntries(query)
};
window.location.replace(`${path.location}/v3?id=${path.query.id}&q=page&page=${path.query.page}&status=services&api=${path.query.api}&key=${path.query.key}&countries=${JSON.stringify(data)}`)
}
);
});
</script>
</body>
</html>