68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
import {Component, input, InputSignal, OnInit} from "@angular/core";
|
|
import {StatusCardsData} from "./status-cards-data";
|
|
import {IonCard, IonCardContent, IonCol, IonRow} from "@ionic/angular/standalone";
|
|
|
|
|
|
@Component({
|
|
selector: "tusha-status-cards",
|
|
templateUrl: "tusha-status-cards.component.html",
|
|
styleUrls: ["tusha-status-cards.component.css"],
|
|
standalone: true,
|
|
imports: [IonRow, IonCol, IonCard, IonCardContent]
|
|
})
|
|
export class TushaStatusCardsComponent implements OnInit {
|
|
card1: InputSignal<StatusCardsData> = input.required<StatusCardsData>();
|
|
card2: InputSignal<StatusCardsData> = input.required<StatusCardsData>();
|
|
card1_number_css: string = '';
|
|
card2_number_css: string = '';
|
|
card1_container_css: string = '';
|
|
card2_container_css: string = '';
|
|
card1_number: string = '';
|
|
card2_number: string = '';
|
|
|
|
getSuffix(statusCard: StatusCardsData): string {
|
|
console.log(statusCard);
|
|
if (statusCard.type === 'percentage') {
|
|
return '%';
|
|
} else {
|
|
return '';
|
|
}
|
|
}
|
|
|
|
getSizeClass(statusCard: StatusCardsData): string {
|
|
if (statusCard.type === 'percentage') {
|
|
return 'medium';
|
|
} else {
|
|
return 'large';
|
|
}
|
|
}
|
|
|
|
ngOnInit(): void {
|
|
function initCard(statusCardsData: StatusCardsData): { css_number: string, css_container: string, number: string } {
|
|
if (statusCardsData.type === 'percentage') {
|
|
return {
|
|
css_container: 'scorecard ' + statusCardsData.color.color,
|
|
css_number: 'number medium',
|
|
number: statusCardsData.amount + ' %'
|
|
}
|
|
} else {
|
|
return {
|
|
css_container: 'scorecard ' + statusCardsData.color.color,
|
|
css_number: 'number large',
|
|
number: statusCardsData.amount + ''
|
|
}
|
|
}
|
|
}
|
|
|
|
const values1 = initCard(this.card1());
|
|
this.card1_container_css = values1.css_container;
|
|
this.card1_number_css = values1.css_number;
|
|
this.card1_number = values1.number;
|
|
|
|
const values2 = initCard(this.card2());
|
|
this.card2_container_css = values2.css_container;
|
|
this.card2_number_css = values2.css_number;
|
|
this.card2_number = values2.number;
|
|
}
|
|
}
|