Add conditional button styling and logic to indicate vote availability based on last vote timestamp.
This commit is contained in:
parent
00bf7caec2
commit
d84d0c7fef
|
|
@ -49,7 +49,8 @@
|
||||||
<a (click)="clickVote(voteSite)" (contextmenu)="clickVote(voteSite); $event.preventDefault()"
|
<a (click)="clickVote(voteSite)" (contextmenu)="clickVote(voteSite); $event.preventDefault()"
|
||||||
target="_blank" rel="noopener"
|
target="_blank" rel="noopener"
|
||||||
[href]="voteSites[voteSite]">
|
[href]="voteSites[voteSite]">
|
||||||
<div class="button-outer">
|
<div class=button-outer [class.not-available-button-outer]="!canVote(voteSite)"
|
||||||
|
[class.available-button-outer]="canVote(voteSite)">
|
||||||
<span class="button-inner">{{ getVoteText(voteSite) }}</span>
|
<span class="button-inner">{{ getVoteText(voteSite) }}</span>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
|
||||||
|
|
@ -41,3 +41,11 @@
|
||||||
color: black;
|
color: black;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.available-button-outer {
|
||||||
|
background-color: #4caf50 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.not-available-button-outer {
|
||||||
|
background-color: var(--white) !important;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -88,4 +88,15 @@ export class VoteComponent implements OnInit, OnDestroy {
|
||||||
}
|
}
|
||||||
|
|
||||||
protected readonly Object = Object;
|
protected readonly Object = Object;
|
||||||
|
|
||||||
|
canVote(voteSite: string) {
|
||||||
|
if (!this.voteStats) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
const now: Date = new Date();
|
||||||
|
return (
|
||||||
|
this.voteStats.allVoteInfo.some(voteInfo => voteInfo.siteName === voteSite
|
||||||
|
&& voteInfo.lastVoteTimestamp - now.getTime() < 86400000)
|
||||||
|
)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user