docker-sites-status-server/frontend/SiteStatus/src/app/directives/status-led.directive.ts

import {Directive, ElementRef, Input, OnChanges, SimpleChanges} from '@angular/core';
import {StatusEnumViewModel} from '../view-models/status-enum.view-model';

@Directive({
    selector: '[appStatusLed]'
})
export class StatusLedDirective implements OnChanges {
    @Input()
    appStatusLed: string;

    constructor(private el: ElementRef) {
        const size = 15;
        this.el.nativeElement.style.width = `${size}px`;
        this.el.nativeElement.style.height = `${size}px`;
        this.el.nativeElement.style.borderRadius = `${size / 2}px`;
        this.el.nativeElement.style.display = 'inline-block';
    }

    static colorFromValue(value: StatusEnumViewModel): string {
        if (value === StatusEnumViewModel.Ok) {
            return '#01ff01';
        } else if (value === StatusEnumViewModel.Warning) {
            return '#ffa500';
        } else if (value === StatusEnumViewModel.Error) {
            return '#ff0000';
        }
        return null;
    }

    ngOnChanges(changes: SimpleChanges): void {
        if (changes.appStatusLed) {
            this.el.nativeElement.style.backgroundColor = StatusLedDirective.colorFromValue(changes.appStatusLed.currentValue);
        }
    }
}