archive
/
AquaDX
mirror of https://github.com/hykilpikonna/AquaDX
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

[S] Style existing cards, display card type

pull/14/head
Azalea 2024-02-21 15:03:49 -05:00
parent fce5ca592a
commit 06993b9d66
1 changed files with 34 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
AquaNet/src/components/BindCard.svelte
View File

@ -11,7 +11,10 @@
let me: UserMe | null = null let me: UserMe | null = null
// Fetch data for current user // Fetch data for current user
USER.me().then(m => me = m).catch(e => error = e.message) USER.me().then(m => {
me = m
m.cards.sort((a, b) => a.registerTime < b.registerTime ? 1 : -1)
}).catch(e => error = e.message)
// Access code input // Access code input
const inputACRegex = /^(\d{4} ){0,4}\d{0,4}$/ const inputACRegex = /^(\d{4} ){0,4}\d{0,4}$/
@ -54,22 +57,23 @@
} }
function formatLUID(luid: string) { function formatLUID(luid: string) {
// Check if LUID is Felica SN switch (cardType(luid)) {
if (luid.startsWith("00")) { case "Felica SN":
return (+luid).toString(16).toUpperCase().padStart(16, "0").match(/.{1,2}/g)!.join(":") return (+luid).toString(16).toUpperCase().padStart(16, "0").match(/.{1,2}/g)!.join(":")
} case "Access Code":
// Check if LUID is a 20-digit access code
if (luid.length === 20) {
return luid.match(/.{4}/g)!.join(" ") return luid.match(/.{4}/g)!.join(" ")
} case "Account Card":
return luid.slice(0, 6) + " " + luid.slice(6).match(/.{4}/g)!.join(" ")
// Ghost card default:
return luid return luid
} }
}
function isGhostCard(luid: string) { function cardType(luid: string) {
return luid.length === 18 if (luid.startsWith("00")) return "Felica SN"
if (luid.length === 20) return "Access Code"
if (luid.length === 18) return "Account Card"
return "Unknown"
} }
</script> </script>
@ -80,10 +84,12 @@
{#if me} {#if me}
<div class="existing-cards"> <div class="existing-cards">
{#each me.cards as card} {#each me.cards as card}
<div class={clz({ghost: isGhostCard(card.luid)}, 'existing-card')}> <div class={clz({ghost: cardType(card.luid) === 'Account Card'}, 'existing-card')}>
<span class="type">{cardType(card.luid)}</span>
<span class="register">Registered: {moment(card.registerTime).format("YYYY MMM DD")}</span> <span class="register">Registered: {moment(card.registerTime).format("YYYY MMM DD")}</span>
<span class="last">Last used: {moment(card.accessTime).format("YYYY MMM DD")}</span> <span class="last">Last used: {moment(card.accessTime).format("YYYY MMM DD")}</span>
<span class="id">ID: {formatLUID(card.luid)}</span> <div/>
<span class="id">{formatLUID(card.luid)}</span>
</div> </div>
{/each} {/each}
</div> </div>
@ -147,20 +153,29 @@
.existing-cards .existing-cards
display: grid display: grid
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))
gap: 1rem gap: 1rem
.existing-card .existing-card
display: flex display: flex
flex-direction: column flex-direction: column
min-height: 90px
border-radius: 5px border-radius: 5px
padding: 12px 16px padding: 12px 16px
background: $ov-light background: $ov-light
.id &.ghost
background: rgba($c-darker, 0.8)
.register, .last
opacity: 0.7
span:not(.type)
font-size: 0.8rem font-size: 0.8rem
opacity: 0.5
> div
flex: 1
</style> </style>