+6
-1
@@ -10,6 +10,9 @@
|
|||||||
<span class="ac__dot"></span>
|
<span class="ac__dot"></span>
|
||||||
{{ connected ? 'Live · 即時連線中' : 'Connecting… · 連線中' }}
|
{{ connected ? 'Live · 即時連線中' : 'Connecting… · 連線中' }}
|
||||||
</div>
|
</div>
|
||||||
|
<div class="ac__readonly" *ngIf="!isSunday">
|
||||||
|
View only · 唯讀 — counting opens on Sunday · 主日開放計數
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- One row per age group, each with its own big +/- controls -->
|
<!-- One row per age group, each with its own big +/- controls -->
|
||||||
@@ -22,17 +25,19 @@
|
|||||||
|
|
||||||
<div class="row__controls">
|
<div class="row__controls">
|
||||||
<button type="button" class="btn btn--minus"
|
<button type="button" class="btn btn--minus"
|
||||||
[disabled]="display(row.key) === 0"
|
[disabled]="!isSunday || display(row.key) === 0"
|
||||||
(click)="bump(row.key, -1)"
|
(click)="bump(row.key, -1)"
|
||||||
aria-label="Decrease">−</button>
|
aria-label="Decrease">−</button>
|
||||||
|
|
||||||
<button type="button" class="row__num" [attr.data-key]="row.key"
|
<button type="button" class="row__num" [attr.data-key]="row.key"
|
||||||
|
[disabled]="!isSunday"
|
||||||
(click)="openEditor(row)"
|
(click)="openEditor(row)"
|
||||||
[attr.aria-label]="'Edit ' + row.labelEn + ' count'">
|
[attr.aria-label]="'Edit ' + row.labelEn + ' count'">
|
||||||
{{ display(row.key) }}
|
{{ display(row.key) }}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button type="button" class="btn btn--plus"
|
<button type="button" class="btn btn--plus"
|
||||||
|
[disabled]="!isSunday"
|
||||||
(click)="bump(row.key, 1)"
|
(click)="bump(row.key, 1)"
|
||||||
aria-label="Increase">+</button>
|
aria-label="Increase">+</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+14
@@ -79,6 +79,19 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Shown only when it's not the worship day — the page is view-only. */
|
||||||
|
.ac__readonly {
|
||||||
|
margin-top: 0.65rem;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.4rem 0.85rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-size: 0.78rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #fbbf24;
|
||||||
|
background: rgba(251, 191, 36, 0.12);
|
||||||
|
border: 1px solid rgba(251, 191, 36, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
/* ── Counter rows ──────────────────────────────────────────────────────── */
|
/* ── Counter rows ──────────────────────────────────────────────────────── */
|
||||||
.ac__rows {
|
.ac__rows {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -171,6 +184,7 @@
|
|||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
|
|
||||||
&:active { transform: scale(0.94); }
|
&:active { transform: scale(0.94); }
|
||||||
|
&:disabled { cursor: default; }
|
||||||
|
|
||||||
&[data-key='adult'] { background-image: linear-gradient(135deg, #38bdf8, #6366f1); }
|
&[data-key='adult'] { background-image: linear-gradient(135deg, #38bdf8, #6366f1); }
|
||||||
&[data-key='youth'] { background-image: linear-gradient(135deg, #34d399, #14b8a6); }
|
&[data-key='youth'] { background-image: linear-gradient(135deg, #34d399, #14b8a6); }
|
||||||
|
|||||||
+13
@@ -26,6 +26,13 @@ export class AttendanceCounterPageComponent implements OnInit, OnDestroy {
|
|||||||
*/
|
*/
|
||||||
readonly worshipSunday = this.currentWeekSunday();
|
readonly worshipSunday = this.currentWeekSunday();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Counting is only allowed on the worship day itself. On any other day the page
|
||||||
|
* is read-only so volunteers can review the latest count without changing it.
|
||||||
|
* getDay() returns 0 on Sunday.
|
||||||
|
*/
|
||||||
|
readonly isSunday = new Date().getDay() === 0;
|
||||||
|
|
||||||
/** The Sunday that opens the week containing today. */
|
/** The Sunday that opens the week containing today. */
|
||||||
private currentWeekSunday(): Date {
|
private currentWeekSunday(): Date {
|
||||||
const now = new Date();
|
const now = new Date();
|
||||||
@@ -111,6 +118,9 @@ export class AttendanceCounterPageComponent implements OnInit, OnDestroy {
|
|||||||
|
|
||||||
/** Optimistic +/-: update the screen instantly, debounce the write to the DB. */
|
/** Optimistic +/-: update the screen instantly, debounce the write to the DB. */
|
||||||
bump(key: AttendanceCategory, step: number): void {
|
bump(key: AttendanceCategory, step: number): void {
|
||||||
|
if (!this.isSunday) {
|
||||||
|
return; // read-only outside the worship day
|
||||||
|
}
|
||||||
if (this.local[key] + step < 0) {
|
if (this.local[key] + step < 0) {
|
||||||
return; // never count below zero
|
return; // never count below zero
|
||||||
}
|
}
|
||||||
@@ -121,6 +131,9 @@ export class AttendanceCounterPageComponent implements OnInit, OnDestroy {
|
|||||||
|
|
||||||
/** Open the direct-entry dialog for a row, pre-filled with the current count. */
|
/** Open the direct-entry dialog for a row, pre-filled with the current count. */
|
||||||
openEditor(row: CounterRow): void {
|
openEditor(row: CounterRow): void {
|
||||||
|
if (!this.isSunday) {
|
||||||
|
return; // read-only outside the worship day
|
||||||
|
}
|
||||||
this.editing = row;
|
this.editing = row;
|
||||||
this.editValue = this.local[row.key];
|
this.editValue = this.local[row.key];
|
||||||
}
|
}
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 941 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 113 KiB |
+3
-1
@@ -6,7 +6,9 @@
|
|||||||
<title>ROLCC AC</title>
|
<title>ROLCC AC</title>
|
||||||
<base href="/">
|
<base href="/">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
<link rel="icon" type="image/svg+xml" href="assets/AppLogo.svg">
|
||||||
|
<link rel="icon" type="image/png" href="assets/AppLogo.png">
|
||||||
|
<link rel="apple-touch-icon" href="assets/AppLogo.png">
|
||||||
<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-fluent@12.0.0/dist/fluent-main.css" />
|
<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-fluent@12.0.0/dist/fluent-main.css" />
|
||||||
<!-- <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default@12.0.0/dist/all.css" />
|
<!-- <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default@12.0.0/dist/all.css" />
|
||||||
<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-utils@12.0.0/dist/all.css" /> -->
|
<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-utils@12.0.0/dist/all.css" /> -->
|
||||||
|
|||||||
Reference in New Issue
Block a user