wiki.unix7.org

It is example of very simple state engine on Angular II.

app.component.html

 
<h5>{{ header }}</h5>
 
{{ message }}
 
<table>
    <thead>
        <tr>
            <th>#</th>
            <th>имя</th>
            <th>рейтинг</th>
            <th>состояние</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let item of dataRecords; let i = index" >
            <td>{{ i + 1 }}</td>
            <td [ngStyle]="setStyle(i)" >{{ item.name  }}</td>
            <td>{{ item.rate / 2}}</td>
            <td>
                <button (click)="upRate(item)" 
                      [ngClass]="setButton(item)">{{ item.stateDesc }}</button>
            </td>
        </tr>
    </tbody>
</table>

app.component.ts

import {
    Component
} from '@angular/core';
import {
    DataRecord
} from './data-record';
 
 
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
 
export class AppComponent {
    header = 'Продавцы';
    message = '';
    topRate = 0
 
    dataRecords = [
        new DataRecord(1, "Борис Рубекин", 0, 'free', 'свободен'),
        new DataRecord(2, "Андрей Светлов", 0, 'free', 'свободен'),
        new DataRecord(3, "Олег Шавкунов", 0, 'free', 'свободен'),
        new DataRecord(4, "Борис Гребенщиков", 0, 'free', 'свободен')
    ];
 
    setStyle(index: number) : object {
        if (index == 0) return {'color' : 'red' }
        if (index == 1) return {'color' : 'green' }
        console.log(index)
    }
 
    setButton(item: DataRecord) : any {
        if (item.state === 'free') return ['button', 'success']
        if (item.state === 'busy') return ['button', 'warning']
        return ['button']
    }
 
    upRate(item: DataRecord) : void {
            this.dataRecords.forEach((elem) => {
 
                    if (item.id === elem.id) {
                        if (elem.state === 'free') { 
                            this.topRate += 1
                            elem.state = 'busy'
                            elem.stateDesc = 'занят'
                            elem.rate += 4
                        }
                        else if (elem.state === 'busy') {
                            elem.state = 'free'
                            elem.stateDesc = 'свободен'
                            elem.rate -= 2
                        }
                    }
            });
 
            this.dataRecords = this.dataRecords.sort(function(a, b) {
                        if (a.rate > b.rate) {
                            return 1;
                        }
                        if (a.rate < b.rate) {
                            return -1;
                        }
                        return 0;
            });
    };
}

app.module.ts

import { NgModule } from '@angular/core';
 
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
import { AppComponent } from './app.component';
 
@NgModule({
  declarations: [
    AppComponent
  ],
 
  imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],
 
  providers: [],
  bootstrap: [AppComponent]
})
 
export class AppModule { }

data-record.ts

 
export class DataRecord {
 
    constructor(
        public id: number,
        public name: string,
        public rate: number,
        public state: string,
        public stateDesc: string,
    ) { }
 
}