102 lines
3.1 KiB
Plaintext
102 lines
3.1 KiB
Plaintext
@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 HeaderAddUser {
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#add_user_modal">
|
|
Add User
|
|
</button>
|
|
}
|
|
@section HeaderAddSearch {
|
|
<input
|
|
type="search"
|
|
class="form-control me-2 align-self-center"
|
|
placeholder="Search"
|
|
oninput="liveSearch()"
|
|
id="searchbox"
|
|
style="width: 40vw;"
|
|
>
|
|
}
|
|
|
|
@section Scripts {
|
|
<script>
|
|
$(() => {
|
|
setInterval(() => {
|
|
fetch("/").then(res => {
|
|
res.text().then(text => {
|
|
let dummyDOM = $('<div></div>');
|
|
dummyDOM.html(text);
|
|
let newTableContents = $('#users>', dummyDOM);
|
|
$('#users').html(newTableContents);
|
|
})
|
|
});
|
|
}, 1000);
|
|
});
|
|
|
|
function liveSearch() {
|
|
let cards = document.getElementsByClassName("user-card-container")
|
|
let search_query = document.getElementById("searchbox").value;
|
|
for (var i = 0; i < cards.length; i++) {
|
|
// If the text is within the card...
|
|
if(cards[i].innerText.toLowerCase()
|
|
// ...and the text matches the search query...
|
|
.includes(search_query.toLowerCase())) {
|
|
// ...remove the `.is-hidden` class.
|
|
cards[i].classList.remove("is-hidden");
|
|
} else {
|
|
// Otherwise, add the class.
|
|
cards[i].classList.add("is-hidden");
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
}
|
|
|
|
<!-- 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 class="row row-cols-auto justify-content-start g-0" id="users">
|
|
@foreach (var user in db.Users.OrderBy(p => p.Nickname.ToLower())) {
|
|
<div class="col user-card-container" id="user_@user.Id">
|
|
<a href="/EditUser/@user.Id">
|
|
<div class="d-flex flex-column align-items-center justify-content-center bg-light shadow-sm user-card">
|
|
<div class="text-dark">@user.Nickname</div>
|
|
@if (user.Balance < 0) {
|
|
<div class ="balance-neg">@($"{user.Balance / 100M:C}")</div>
|
|
}
|
|
else {
|
|
<div class ="balance-pos">@($"{user.Balance / 100M:C}")</div>
|
|
}
|
|
</div>
|
|
</a>
|
|
</div>
|
|
}
|
|
</div>
|