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>