Telegram.Bot.SpaceApi/Pages/Index.cshtml

@page
@using Telegram.Bot.SpaceApi.Backend.Utils
@using Telegram.Bot.SpaceApi.Backend.Database
@using Telegram.Bot.SpaceApi.Backend
@model IndexModel
@{
	ViewData["Title"] = "Home";
	var db = new DatabaseContext();
	var bots = db.Bots.OrderBy(p => p.Id);
}

@section Stylesheets {
	<link rel="stylesheet" href="~/lib/datatables/dataTables.bootstrap5.min.css"/>
}

@section Scripts {
	<script src="~/lib/datatables/jquery.dataTables.min.js"></script>
	<script src="~/lib/datatables/dataTables.bootstrap5.min.js"></script>
	<script>
	$(document).ready( function () {
		const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
		const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
		
		let search = "";
		
		let table =  $('#bots');
		
		table.DataTable({
        	lengthMenu: [10, 25, 50, 100, -1],
        	pageLength: 25,
        	search: {
				search: search,
			},
			scrollX: true,
			bProcessing: true
        });
		
		setInterval(reloadTable, 60000);
    } );
	
	function reloadTable(){
		fetch("/").then(res => {
			res.text().then(text => {
				let dummyDOM = $('<div></div>');
				dummyDOM.html(text);
				let newTableContents = $('#bots>tbody>', dummyDOM);
				let table = $('#bots').DataTable();
				table.clear().rows.add(newTableContents).draw(false);
			})
		});
	}

	$('#add_bot_modal').on('shown.bs.modal', function() {
		$(this).find('input:first').focus();
	});
	
	function prepareDeleteModal(name, id) {
		$('#delete_bot_name').html(name);
		$('#delete_bot_id').val(id);
		new bootstrap.Modal($('#delete_bot_modal')).show();
	}
	</script>
}

<div class="modal fade" id="add_bot_modal" tabindex="-1" aria-labelledby="add_bot_modal_label" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="add_bot_modal_label">Add Bot</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				<form method="POST" id="add_bot">
					<label for="bot_name" class="form-label">Bot name</label>
					<input type="text" maxlength="32" class="form-control" id="bot_name" name="bot_name" placeholder="AfRA" required autofocus>
					<label for="bot_token" class="form-label">Bot token</label>
					<input type="text" maxlength="255" class="form-control" id="bot_token" name="bot_token" placeholder="8234975234:ABCsDkDkSeJnfJsDjdsakDieJdKiedJldwg" required>
					<label for="bot_name" class="form-label">Bot chat target</label>
					<input type="text" maxlength="64" class="form-control" id="bot_chat" name="bot_chat" placeholder="@@afra_status" required>
					<label for="api_url" class="form-label">SpaceAPI URL</label>
					<input type="text" maxlength="255" class="form-control" id="api_url" name="api_url" placeholder="https://spaceapi.afra-berlin.de/v1/status.json" required>
					<label for="api_override_address" class="form-label">Override address</label>
					<input type="text" maxlength="255" class="form-control" id="api_override_address" name="api_override_address" placeholder="1.2.3.4 (leave empty to disable)">
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
				<button type="submit" form="add_bot" class="btn btn-primary" name="action" value="add_bot">Save</button>
			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="delete_bot_modal" tabindex="-1" aria-labelledby="delete_bote_modal_label" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="delete_bot_modal_label">Delete bot?</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				<div>
					Are you sure you want to delete the bot "<span id="delete_bot_name" class=""></span>"?
				</div>
				<div id="delete_bot_services"></div>
				<form method="POST" id="delete_bot">
					<input type="hidden" id="delete_bot_id" name="bot_id" value="">
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
				<button type="submit" form="delete_bot" class="btn btn-danger" name="action" value="delete_bot">Confirm delete</button>
			</div>
		</div>
	</div>
</div>

<div class="text-center">
	<h1 class="display-5">
		Bots
		<button class="btn btn-lg btn-primary" data-bs-toggle="modal" data-bs-target="#add_bot_modal">Add</button>
	</h1>
	<table class="table table-striped table-bordered table-hover align-middle" id="bots" style="width: 100%;">
		<thead>
		<tr>
			<th scope="col">Name</th>
			<th scope="col">Chat</th>
			<th scope="col">Status</th>
			<th scope="col">Actions</th>
		</tr>
		</thead>
		<tbody>
		@foreach (var bot in bots) {
			<tr id="bot_@(bot.Id)">
				<td>
					@bot.Name
				</td>
				<td>
					<a href="https://t.me/@bot.Chat[1..]" target="_blank">@bot.Chat</a>
				</td>
				<td>
					@{
						var botInstance = BotOrchestrator.GetBot(bot);
						if (botInstance != null) {
							if (string.IsNullOrWhiteSpace(botInstance.Error)) {
								<span class="badge bg-success">OK ~ @(botInstance.LastStatus ? "open" : "closed")</span>
							}
							else {
								<span class="badge bg-danger" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="@botInstance.Error">Error</span>
							}
						}
						else {
							<span class="badge bg-secondary">Unknown</span>
						}
					}
				</td>
				<td>
					<div class="btn-group" role="group">
						<a class="btn btn-sm btn-secondary" href="/Edit/@bot.Id">Edit</a>
						<button class="btn btn-sm btn-danger" onclick="prepareDeleteModal('@bot.Name', @bot.Id)">Delete</button>
					</div>
				</td>
			</tr>
		}
		</tbody>
	</table>
</div>