AfRA/AfRApay
3
0
Fork 0
Code Issues 7 Pull requests Packages Projects Releases Wiki Activity

Web UI refresh

Browse source
This commit is contained in:
Lilian 2023-05-19 21:43:01 +02:00 committed by Laura Hausmann
parent 5ee9b802ea
commit 7031b6ff4a
Signed by: zotan
GPG key ID: D044E84C5BE01605
5 changed files with 137 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
AfRApay.Web/Pages/EditUser.cshtml
View file

@ -36,17 +36,34 @@
</div>
<form id="change_user" method="POST">
<h3>Account</h3>
<div class="d-flex flex-row align-items-center my-3">
<h3>Account</h3>
<button type="button" class="btn btn-lg btn-danger mx-3" name="action" data-bs-toggle="modal" data-bs-target="#deleteConfirmModal">Delete</button> <!-- Calls the below modal dialog to confirm user deletetion -->
</div>
<div class="mb-3">
<label for="nickname" class="form-label">Nickname</label>
<input type="text" maxlength="10" class="form-control" id="nickname" name="nickname" value="@user.Nickname" required>
</div>
<div class="mb-3">
<div class="my-3">
<label for="balance" class="form-label">Balance (&euro;)</label>
<input type="number" max="999.50" min="-99.50" step=".50" class="form-control" id="balance" name="balance" value="@formattedBalance" required>
</div>
<button type="submit" class="btn btn-lg btn-primary" name="action" value="save">Save</button>
<button type="button" class="btn btn-lg btn-danger" name="action" data-bs-toggle="modal" data-bs-target="#deleteConfirmModal">Delete</button> <!-- Calls the below modal dialog to confirm user deletetion -->
<div class="d-flex justify-content-evenly mx-1">
<button type="submit" class="btn btn-lg m-1 btn-primary" name="action" value="save">Save</button>
<div class="d-flex justify-content-center flex-wrap" role="group">
<button type="submit" class="btn transact-btn btn-danger" name="amount" value="-150">-1.50&euro;</button>
<button type="submit" class="btn transact-btn btn-danger" name="amount" value="-200">-2&euro;</button>
<button type="submit" class="btn transact-btn btn-danger" name="amount" value="-500">-5&euro;</button>
<button type="submit" class="btn transact-btn btn-danger" name="amount" value="-1000">-10&euro;</button>
</div>
<div class="d-flex justify-content-center flex-wrap" role="group">
<button type="submit" class="btn transact-btn btn-success" name="amount" value="150">+1.50&euro;</button>
<button type="submit" class="btn transact-btn btn-success" name="amount" value="200">+2&euro;</button>
<button type="submit" class="btn transact-btn btn-success" name="amount" value="500">+5&euro;</button>
<button type="submit" class="btn transact-btn btn-success" name="amount" value="1000">+10&euro;</button>
</div>
</div>
</form>
<!-- Modal dialog to confirm user deletion -->

15
AfRApay.Web/Pages/EditUser.cshtml.cs
View file

@ -77,6 +77,21 @@ public class EditUserModel : PageModel {
await db.SaveChangesAsync();
}
if (Request.Form.ContainsKey("amount")) {
var amount = int.Parse(Request.Form["amount"].ToString());
switch (user.Balance + amount) {
case < -9999:
Response.Redirect("/ErrorRedirect?message=" + WebUtility.UrlEncode("Balance too low!"));
return;
case > 99999:
Response.Redirect("/ErrorRedirect?message=" + WebUtility.UrlEncode("Balance too high!"));
return;
}
user.Balance += amount;
await db.SaveChangesAsync();
}
Response.Redirect($"/#{user.Nickname}");
}

158
AfRApay.Web/Pages/Index.cshtml
View file

@ -10,46 +10,21 @@
<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>
@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;"
>
}
<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">
@ -59,72 +34,53 @@
<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 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">Nickname</th>
<th scope="col">Balance</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>
<!-- 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-danger" name="amount" value="-200">-2&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-danger" name="amount" value="-200">-2&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>
<script>
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");
}
</tbody>
</table>
}
}
</script>
<div class="row row-cols-auto justify-content-start g-0">
@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 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>

7
AfRApay.Web/Pages/Shared/_Layout.cshtml
View file

@ -6,12 +6,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>@ViewData["Title"] - AfRApay</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true"/>
@await RenderSectionAsync("Header", false)
</head>
<body class="d-flex flex-column min-vh-100">
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<nav class="navbar fixed-top navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Index">AfRApay</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
@ -24,6 +25,10 @@
<a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
</li>
</ul>
<div class="d-flex">
@await RenderSectionAsync("HeaderAddSearch", false)
@await RenderSectionAsync("HeaderAddUser", false)
</div>
</div>
</div>
</nav>

38
AfRApay.Web/wwwroot/css/site.css
View file

@ -13,6 +13,10 @@ html {
min-height: 100%;
}
body {
padding-top: 75px;
}
/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */
@ -538,3 +542,37 @@ button.accept-policy {
color: transparent;
text-shadow: 0 0 15px #fff;
}
.user-card-container a:link {
text-decoration: none;
}
.user-card {
font-size: 1.5em;
width: 7em;
height: 5em;
margin-left: 0.5rem;
margin-right: 0.5rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.balance-pos {
color: #25be77;
}
.balance-neg {
color: #e02639;
}
.is-hidden {
display: none;
}
.transact-btn {
width: 5em;
height: 3.5em;
margin-right: 0.2em;
margin-left: 0.2em;
margin-top: 0.2em;
margin-bottom: 0.2em;
}