Add home page buttons

.gitignore

@@ -131,4 +131,6 @@ dist
 
 *.db
 sessions/*
-.DS_Store
+.DS_Store
+
+test/*

index.js

@@ -621,7 +621,6 @@ app.get("/api/v1/directory/openBlocks", (req, res) => {
 	pool.query("SELECT block_start, block_length FROM routes").then((rows) => {
 		console.log(JSON.stringify(rows)); // for testing
 
-		return;
 		const takenBlocks = rows.map(row => {
 			return { start: row.block_start, end: row.block_start + row.block_length };
 		});

public/index.html

@@ -52,6 +52,8 @@
 		<div class="links">
 			<a href="/about">About (WIP)</a><span> </span>
 			<a href="/directory">Directory</a><span> </span>
+			<a href="/validator">Block Availability</a> <span> </span>
+			<a href="/status" class="disabled" aria-disabled="true" tabindex="-1" style="pointer-events: none; opacity: 0.5;">Status (WIP)</a><span> </span>
 			<a href="/discord">Discord Server</a>
 		</div>
 	</div>

public/validator/index.html

@@ -50,6 +50,47 @@
 			<button type="submit" class="btn btn-primary mt-3">Submit</button>
 		</form>
 	</div>
+
+	<div class="container mt-4" style="max-width: 400px;">
+		<h4>Available Blocks</h4>
+		<table class="table table-dark table-bordered">
+			<thead>
+				<tr>
+					<th id="availHeader" scope="col">Available Blocks</th>
+				</tr>
+			</thead>
+			<tbody id="availableBlocksTable">
+				<tr><td>Loading...</td></tr>
+			</tbody>
+		</table>
+	</div>
+	<script>
+		async function loadAvailableBlocks() {
+			const tableBody = document.getElementById('availableBlocksTable');
+			try {
+				const res = await fetch('/api/v1/directory/openBlocks');
+				const blocks = await res.json();
+				tableBody.innerHTML = '';
+				if (Array.isArray(blocks) && blocks.length > 0) {
+					blocks.forEach(block => {
+						const row = document.createElement('tr');
+						const cell = document.createElement('td');
+						cell.textContent = block;
+						row.appendChild(cell);
+						tableBody.appendChild(row);
+					});
+					// Set header text to "Available Blocks (X total)" where X is the number of available blocks
+					document.getElementById('availHeader').textContent = `${blocks.length} Available Blocks`;
+				} else {
+					tableBody.innerHTML = '<tr><td>No blocks available</td></tr>';
+				}
+			} catch {
+				tableBody.innerHTML = '<tr><td>Error loading blocks</td></tr>';
+			}
+		}
+		loadAvailableBlocks();
+	</script>
+
 	<script>
 		document.querySelector('form').addEventListener('submit', async (e) => {
 			e.preventDefault();