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

Render cards with TagHelper

Browse source
This commit is contained in:
Laura Hausmann 2023-02-10 18:43:51 +01:00
parent d410e35bab
commit 772c9f913b
Signed by: zotan
GPG key ID: D044E84C5BE01605
2 changed files with 48 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,6 @@
@page "{id:int}"
@using AfRApay.Web.Backend
@using Microsoft.AspNetCore.Mvc.TagHelpers
@model EditUserModel
@{
ViewData["Title"] = "Edit User";
@ -16,10 +17,9 @@
}
@if (linkActive) {
@section Header {
<meta http-equiv="refresh" content="5"/>
}
}
@section Header {
<meta http-equiv="refresh" content="5"/>
}}
<div class="text-center">
<h1 class="display-5">
@ -59,54 +59,34 @@
<br/>
<h3 class="text-center">Cards</h3>
@{
<!-- We add all the cards here! -->
<div class="row justify-content-center">
@foreach (var card in cards) {
<div class="fake-card-wrapper blur-true m-2">
<a class="btn btn-danger btn-lg hover-button">Delete</a>
async Task RenderCard(string cardHolder, string cardNumber = "Awooo!", string expDate = "01/2038", EditUserModel.CardType type = EditUserModel.CardType.Normal) {
var cardTypeClasses = type switch {
EditUserModel.CardType.Normal => "fake-card",
EditUserModel.CardType.LinkPlaceholder => "fake-card ghost-card",
EditUserModel.CardType.DeletionConfirmation => "fake-card",
_ => throw new ArgumentOutOfRangeException(nameof(type), type, null)};
var blurClasses = type == EditUserModel.CardType.Normal ? " blur-true m-2" : "m-2";
<div class="fake-card-wrapper @blurClasses">
@if (type == EditUserModel.CardType.Normal) {
<form method="POST">
<input type="hidden" name="cardId" value="@card.CardId">
<input type="hidden" name="cardId" value="@cardNumber">
<button type="submit" class="btn btn-danger btn-lg hover-button" name="action" value="deleteCard">Delete</button>
</form>
<div class="fake-card">
<div class="face-card front">
<div class="chip">
<div>
<div>
<div>
</div>
</div>
</div>
</div>
<h2 class="card-number">@card.CardId</h2>
<h3 class="card-holder">@user.Nickname</h3>
<span class="validity">
<span class="small">VALID<br>THRU</span>
<span>01/2038</span>
</span>
<div class="fake-card-logo-top">
<img src="/img/afra.png" class="fake-card-logo-inner" alt="">
</div>
<div class="fake-card-logo-bottom">
<img src="/img/matecard.png" class="fake-card-logo-inner" alt="">
</div>
</div>
</div>
</div>
}
<!-- Here we display a faded placholder card, with the add button at its center -->
<div class="fake-card-wrapper m-2">
@if (linkActive) {
}
else if (type == EditUserModel.CardType.LinkPlaceholder) {
if (linkActive) {
<button class="btn btn-secondary btn-lg link-card-button-in-progress">Link in progress</button>
}
else {
<form method="POST">
<input type="hidden" name="userId" value="@user.Id">
<button type="submit" class="btn btn-success btn-lg link-card-button" name="action" value="linkCard">Link Card</button>
</form>
}
}
else {
<form method="POST">
<input type="hidden" name="userId" value="@user.Id">
<button type="submit" class="btn btn-success btn-lg link-card-button" name="action" value="linkCard">Link Card</button>
</form>
}
<div class="fake-card ghost-card">
<div class="@cardTypeClasses">
<div class="face-card front">
<div class="chip">
<div>
@ -116,11 +96,11 @@
</div>
</div>
</div>
<h2 class="card-number">Awooo!</h2>
<h3 class="card-holder">@user.Nickname</h3>
<h2 class="card-number">@cardNumber</h2>
<h3 class="card-holder">@cardHolder</h3>
<span class="validity">
<span class="small">VALID<br>THRU</span>
<span>01/2038</span>
<span>@expDate</span>
</span>
<div class="fake-card-logo-top">
@ -132,5 +112,16 @@
</div>
</div>
</div>
</div>
}
}
<!-- We add all the cards here! -->
<div class="row justify-content-center">
@foreach (var card in cards) {
await RenderCard(user.Nickname, card.CardId);
}
<!-- Here we display a faded placholder card, with the add button at its center -->
@{
await RenderCard(user.Nickname, type: EditUserModel.CardType.LinkPlaceholder);
}
</div>

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

@ -69,4 +69,10 @@ public class EditUserModel : PageModel {
Response.Redirect($"/#{user.Nickname}");
}
public enum CardType {
Normal = 1,
LinkPlaceholder = 2,
DeletionConfirmation = 3
}
}