AfRApay/AfRApay.Web/Pages/Index.cshtml

@page
@using AfRApay.Web.Backend.Database
@model IndexModel
@{
	ViewData["Title"] = "Index";
	var db = new DatabaseContext();
}

@section Header {
	<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 () {
		let search = "";
		if (window.location.hash.startsWith("#")) {
			if (window.location.hash === "#add_user")
				$("#add_user_modal").modal('show');
			else
				search = decodeURI(window.location.hash.substring(1));
		}
		
		$('#add_user_modal').on('shown.bs.modal', function() {
			$(this).find('input:first').focus();
		});

		$('#users').DataTable({
			// Setting the DOM for dataTables. Using default with adjustments for margin. See here for syntax details https://datatables.net/reference/option/dom
			dom: "<'row'<'col-sm-12 col-md-6 my-1'l><'col-sm-12 col-md-6 my-1'f>>" +
				 "<'row'<'col-sm-12'tr>>" +
				 "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
			lengthMenu: [10, 25, 50, 100, -1],
			pageLength: 25,
			search: {
				search: search,
			}
		});
	});
	</script>
}

<div class="text-center">
	<h1 class="display-5">
		Users
		<button type="button" class="btn btn-lg btn-primary" data-bs-toggle="modal" data-bs-target="#add_user_modal">
  			Add
  		</button>
	</h1>
</div>

<!-- Modal dialog for adding a user -->
<div class="modal fade" id="add_user_modal" tabindex="-1" aria-labelledby="add_user_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_user_modal_label">Add User</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_user">
						<label for="nickname" class="form-label">Nickname</label>
						<input type="text" maxlength="10" class="form-control" id="nickname" name="nickname" placeholder="nick" required autofocus>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-lg btn-secondary" data-bs-dismiss="modal">Cancel</button>
				<button type="submit" form="add_user" class="btn btn-lg btn-primary" name="action" value="add_user">Save</button>
			</div>
		</div>
	</div>
</div>

<div>
	<table class="table table-striped table-hover" id="users">
		<thead>
		<tr>
			<th scope="col">Nickame</th>
			<th scope="col">Balance</th>
			<th scope="col">Cards</th>
			<th scope="col">Actions</th>
		</tr>
		</thead>
		<tbody>
		@foreach (var user in db.Users.OrderBy(p => p.Nickname.ToLower())) {
			<tr id="user_@user.Id">
				<td>
					<b>@user.Nickname</b>
				</td>
				<td>
					@($"{user.Balance / 100M:C}")
				</td>
				<td>
					<b>@db.Cards.Count(p => p.User.Id == user.Id)</b> cards linked.
				</td>
				<td>
					<!-- Displayed when in big layout -->
					<form method="POST">
						<input type="hidden" name="action" value="transaction">
						<input type="hidden" name="userId" value="@user.Id">
						<div class="d-none d-md-flex btn-group btn-group-lg" role="group">
							<!-- Make sure these buttons match the small/mobile layout ones below -->
							<button type="submit" class="btn px-3 btn-danger" name="amount" value="-150">-1.50&euro;</button>
							<button type="submit" class="btn px-3 btn-success" name="amount" value="500">+5&euro;</button>
							<button type="submit" class="btn px-3 btn-success" name="amount" value="1000">+10&euro;</button>
							<a class="btn px-2 btn-primary" href="/EditUser/@user.Id">Edit</a>
						</div>
						<!-- Displayed when in compact/phone layout -->
						<div class="dropdown d-md-none">
							<a class="btn btn-lg px-1 btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
								Actions
							</a>
							<div class="dropdown-menu p-1 mw-max-content" aria-labelledby="dropdownMenuLink">
								<!-- Inline CSS, sets minimum width of drop down to maxium size of content -->
								<div class="d-grid gap-1">
									<!-- Make sure these buttons match the big layout ones above-->
									<button type="submit" class="btn btn-lg btn-danger" name="amount" value="-150">-1.50&euro;</button>
									<button type="submit" class="btn btn-lg btn-success" name="amount" value="500">+5&euro;</button>
									<button type="submit" class="btn btn-lg btn-success" name="amount" value="1000">+10&euro;</button>
									<a class="btn btn-lg btn-primary" href="/EditUser/@user.Id">Edit</a>
								</div>
							</div>
						</div>
					</form>
				</td>
			</tr>
		}
		</tbody>
	</table>
</div>