Migliora badge stato aste: nuovi colori, icone, animazioni

Rivisti i metodi di calcolo e visualizzazione dello stato delle aste in Index.razor.cs, distinguendo tra stati di sistema e controllati dall’utente. Aggiunte nuove classi CSS e animazioni in modern-pages.css per badge più chiari, compatti e animati. Mantenuta compatibilità con classi Bootstrap legacy. Migliorata la leggibilità e l’usabilità della tabella aste.
This commit is contained in:
2026-01-22 15:28:05 +01:00
parent 2833cd0487
commit 21a1d57cab
2 changed files with 260 additions and 8 deletions

View File

@@ -639,31 +639,112 @@ namespace AutoBidder.Pages
private string GetStatusBadgeClass(AuctionInfo auction)
{
if (!auction.IsActive) return "bg-secondary";
if (auction.IsPaused) return "bg-warning text-dark";
return "bg-success";
// Prima controlla lo stato real-time dell'asta (da LastState)
if (auction.LastState != null)
{
return auction.LastState.Status switch
{
AuctionStatus.EndedWon => "status-won",
AuctionStatus.EndedLost => "status-lost",
AuctionStatus.Closed => "status-closed",
AuctionStatus.Paused => "status-system-paused",
AuctionStatus.Pending => "status-pending",
AuctionStatus.Scheduled => "status-scheduled",
AuctionStatus.NotStarted => "status-scheduled",
_ => GetUserControlStatusClass(auction)
};
}
return GetUserControlStatusClass(auction);
}
private string GetUserControlStatusClass(AuctionInfo auction)
{
// Stati controllati dall'utente
if (!auction.IsActive) return "status-stopped";
if (auction.IsPaused) return "status-paused";
if (auction.IsAttackInProgress) return "status-attacking";
return "status-active";
}
private string GetStatusText(AuctionInfo auction)
{
if (!auction.IsActive) return "Fermo";
// Prima controlla lo stato real-time dell'asta
if (auction.LastState != null)
{
switch (auction.LastState.Status)
{
case AuctionStatus.EndedWon:
return "Vinta!";
case AuctionStatus.EndedLost:
return "Persa";
case AuctionStatus.Closed:
return "Chiusa";
case AuctionStatus.Paused:
return "Sospesa";
case AuctionStatus.Pending:
return "In Attesa";
case AuctionStatus.Scheduled:
case AuctionStatus.NotStarted:
return "Programmata";
}
}
// Stati controllati dall'utente
if (!auction.IsActive) return "Fermata";
if (auction.IsPaused) return "Pausa";
return "Attivo";
if (auction.IsAttackInProgress) return "Puntando";
return "Attiva";
}
private string GetStatusIcon(AuctionInfo auction)
{
// Usa icone Bootstrap Icons invece di emoji
// Prima controlla lo stato real-time dell'asta
if (auction.LastState != null)
{
switch (auction.LastState.Status)
{
case AuctionStatus.EndedWon:
return "<i class='bi bi-trophy-fill'></i>";
case AuctionStatus.EndedLost:
return "<i class='bi bi-x-circle-fill'></i>";
case AuctionStatus.Closed:
return "<i class='bi bi-lock-fill'></i>";
case AuctionStatus.Paused:
return "<i class='bi bi-moon-fill'></i>";
case AuctionStatus.Pending:
return "<i class='bi bi-hourglass-split'></i>";
case AuctionStatus.Scheduled:
case AuctionStatus.NotStarted:
return "<i class='bi bi-calendar-event'></i>";
}
}
// Stati controllati dall'utente
if (!auction.IsActive) return "<i class='bi bi-stop-circle'></i>";
if (auction.IsPaused) return "<i class='bi bi-pause-circle'></i>";
if (auction.IsAttackInProgress) return "<i class='bi bi-lightning-charge-fill'></i>";
return "<i class='bi bi-play-circle-fill'></i>";
}
private string GetStatusAnimationClass(AuctionInfo auction)
{
// Animazioni per stati speciali
if (auction.LastState != null)
{
switch (auction.LastState.Status)
{
case AuctionStatus.EndedWon:
return "status-anim-won";
case AuctionStatus.Running when auction.IsAttackInProgress:
return "status-anim-attacking";
}
}
if (!auction.IsActive) return "";
if (auction.IsPaused) return "status-paused";
return "status-active";
if (auction.IsPaused) return "status-anim-paused";
if (auction.IsAttackInProgress) return "status-anim-attacking";
return "status-anim-active";
}
private string GetPriceDisplay(AuctionInfo? auction)

View File

@@ -458,3 +458,174 @@
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* === AUCTION MONITOR STATUS BADGES === */
/* Base badge styling for auction status - COMPACT */
.col-stato .badge {
font-size: 0.65rem;
font-weight: 600;
padding: 0.25rem 0.45rem;
border-radius: 4px;
display: inline-flex;
align-items: center;
gap: 0.25rem;
min-width: 65px;
justify-content: center;
text-transform: uppercase;
letter-spacing: 0.2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
white-space: nowrap;
}
/* Icon inside badge - smaller */
.col-stato .badge i {
font-size: 0.7rem;
}
/* === USER-CONTROLLED STATES === */
/* Active - Monitoring enabled, bright green */
.col-stato .badge.status-active {
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
color: white;
box-shadow: 0 0 8px rgba(34, 197, 94, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* Paused by user - Orange */
.col-stato .badge.status-paused {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
color: #1a1a1a;
box-shadow: 0 0 6px rgba(245, 158, 11, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* Stopped by user - Gray */
.col-stato .badge.status-stopped {
background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
color: #e5e5e5;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
/* Attacking/Bidding - Electric blue with glow */
.col-stato .badge.status-attacking {
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
color: white;
box-shadow: 0 0 12px rgba(59, 130, 246, 0.6), 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* === AUCTION LIFECYCLE STATES === */
/* Won - Gold/Yellow celebration */
.col-stato .badge.status-won {
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
color: #1a1a1a;
box-shadow: 0 0 12px rgba(251, 191, 36, 0.6), 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* Lost - Red muted */
.col-stato .badge.status-lost {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
color: white;
box-shadow: 0 0 6px rgba(239, 68, 68, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
opacity: 0.85;
}
/* Closed - Dark gray */
.col-stato .badge.status-closed {
background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
color: #9ca3af;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
/* System Paused (night pause) - Purple/Indigo */
.col-stato .badge.status-system-paused {
background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
color: white;
box-shadow: 0 0 6px rgba(139, 92, 246, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* Pending/Waiting - Cyan */
.col-stato .badge.status-pending {
background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
color: white;
box-shadow: 0 0 6px rgba(6, 182, 212, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* Scheduled - Teal */
.col-stato .badge.status-scheduled {
background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
color: white;
box-shadow: 0 0 6px rgba(20, 184, 166, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* === ANIMATIONS === */
/* Active pulse - subtle */
.col-stato .badge.status-anim-active {
animation: statusPulseActive 2.5s ease-in-out infinite;
}
@keyframes statusPulseActive {
0%, 100% {
box-shadow: 0 0 8px rgba(34, 197, 94, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
}
50% {
box-shadow: 0 0 14px rgba(34, 197, 94, 0.7), 0 1px 3px rgba(0, 0, 0, 0.2);
}
}
/* Paused blink */
.col-stato .badge.status-anim-paused {
animation: statusBlink 1.5s ease-in-out infinite;
}
@keyframes statusBlink {
0%, 100% { opacity: 1; }
50% { opacity: 0.65; }
}
/* Attacking - fast pulse */
.col-stato .badge.status-anim-attacking {
animation: statusAttacking 0.5s ease-in-out infinite;
}
@keyframes statusAttacking {
0%, 100% {
box-shadow: 0 0 12px rgba(59, 130, 246, 0.6), 0 1px 3px rgba(0, 0, 0, 0.2);
transform: scale(1);
}
50% {
box-shadow: 0 0 20px rgba(59, 130, 246, 0.9), 0 1px 3px rgba(0, 0, 0, 0.2);
transform: scale(1.02);
}
}
/* Won celebration */
.col-stato .badge.status-anim-won {
animation: statusWon 1s ease-in-out infinite;
}
@keyframes statusWon {
0%, 100% {
box-shadow: 0 0 12px rgba(251, 191, 36, 0.6), 0 1px 3px rgba(0, 0, 0, 0.2);
}
50% {
box-shadow: 0 0 20px rgba(251, 191, 36, 0.9), 0 1px 3px rgba(0, 0, 0, 0.2);
}
}
/* Legacy Bootstrap classes override for backward compatibility */
.col-stato .badge.bg-success {
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
color: white !important;
}
.col-stato .badge.bg-warning {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
color: #1a1a1a !important;
}
.col-stato .badge.bg-secondary {
background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
color: #e5e5e5 !important;
}