62 lines
2.7 KiB
HTML
62 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="/assets/css/bootstrap.min.css">
|
|
<title>AstroCom Availability Checker</title>
|
|
</head>
|
|
|
|
<body class="bg-dark text-white">
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="/">AstroCom</a>
|
|
</div>
|
|
<div class="ms-auto d-flex text-nowrap">
|
|
<a href="/user" class="btn btn-outline-light me-2">User Login</a>
|
|
<a href="/admin" class="btn btn-outline-light">Admin Login</a>
|
|
</div>
|
|
</nav>
|
|
<div class="d-flex align-items-center gap-3 mb-3">
|
|
<h2 class="m-0 text-center w-100">Block Availability Checker</h2>
|
|
</div>
|
|
<div class="container mt-4" style="max-width: 400px;">
|
|
<div id="resultDialog" class="alert alert-secondary d-none">
|
|
<p id="resultMessage" class="mb-0"></p>
|
|
</div>
|
|
<form>
|
|
<div class="form-group">
|
|
<label for="numberInput">Enter 3-digit NXX:</label>
|
|
<input type="text" class="form-control" id="numberInput" pattern="[0-9]{3}" maxlength="3" required>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary mt-3">Submit</button>
|
|
</form>
|
|
</div>
|
|
<script>
|
|
document.querySelector('form').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const number = document.querySelector('#numberInput').value + '0000';
|
|
const response = await fetch(`/api/v1/checkAvailability/${number}`);
|
|
// Reponse body is json, if data.error exists, an error occurred, set resultMessage text to error message and resultDialog class to alert-danger
|
|
const data = await response.json();
|
|
if (data.error) {
|
|
document.querySelector('#resultMessage').innerText = `Error: ${data.error}`;
|
|
document.querySelector('#resultDialog').classList.remove('d-none');
|
|
document.querySelector('#resultDialog').classList.add('alert-danger');
|
|
} else {
|
|
// No error, check if available is true or false, set resultMessage to "Block is available" or "Block is not available" and resultDialog class to alert-success or alert-danger
|
|
document.querySelector('#resultMessage').innerText = `Block is ${data.available ? 'available' : 'not available'}`;
|
|
document.querySelector('#resultDialog').classList.remove('d-none');
|
|
document.querySelector('#resultDialog').classList.remove('alert-danger');
|
|
document.querySelector('#resultDialog').classList.remove('alert-success');
|
|
document.querySelector('#resultDialog').classList.add(data.available ? 'alert-success' : 'alert-danger');
|
|
}
|
|
});
|
|
</script>
|
|
<script src="/assets/js/bootstrap.min.js"></script>
|
|
<script src="/assets/js/bootstrap.bundle.min.js"></script>
|
|
<script src="/assets/js/jquery.min.js"></script>
|
|
</body>
|
|
|
|
</html> |