80 lines
2.0 KiB
TypeScript
80 lines
2.0 KiB
TypeScript
import { Component, OnInit, ViewEncapsulation } from '@angular/core'
|
|
|
|
/**
|
|
* Goal of this component is to recieve array of strings where every element is one state
|
|
* and to append them in html while showing the loading spinner.
|
|
* Even if states change quickly, this component will keep every state for at least miliseconds
|
|
* that are defines in `minDelay` variable.
|
|
*/
|
|
|
|
@Component({
|
|
selector: 'app-upload-stater',
|
|
templateUrl: './upload-stater.component.html',
|
|
styleUrls: ['./upload-stater.component.scss'],
|
|
encapsulation: ViewEncapsulation.None,
|
|
standalone: false
|
|
})
|
|
export class UploadStaterComponent implements OnInit {
|
|
public statesList: string[] = [] //States appended to be displayed
|
|
public processedStates: string[] = [] //States that has been displayed and processed
|
|
|
|
/**
|
|
* Stater config
|
|
*/
|
|
public staterInProgress: boolean = false
|
|
private stateInterval: any
|
|
private minDelay: number = 1000
|
|
|
|
constructor() {}
|
|
|
|
ngOnInit(): void {}
|
|
|
|
public appendState(state: string) {
|
|
if (state === '{finish}') {
|
|
/**
|
|
* Stop the stater progress
|
|
*/
|
|
this.staterInProgress = false
|
|
clearInterval(this.stateInterval)
|
|
|
|
return
|
|
}
|
|
|
|
this.statesList.push(state)
|
|
this.processedStates.push(state)
|
|
|
|
// We are disabling delaying functionality for now
|
|
// if (!this.staterInProgress) {
|
|
// this.startStater()
|
|
// }
|
|
}
|
|
|
|
public replaceLastState(state: string) {
|
|
if (this.statesList.length > 0) {
|
|
this.statesList.pop()
|
|
this.statesList.push(state)
|
|
} else {
|
|
this.processedStates[this.processedStates.length - 1] = state
|
|
}
|
|
}
|
|
|
|
public clearStates() {
|
|
this.processedStates = []
|
|
}
|
|
|
|
private startStater() {
|
|
this.staterInProgress = true
|
|
|
|
//First run
|
|
if (this.statesList.length > 0) {
|
|
this.processedStates.push(this.statesList.shift() || '')
|
|
}
|
|
|
|
this.stateInterval = setInterval(() => {
|
|
if (this.statesList.length > 0) {
|
|
this.processedStates.push(this.statesList.shift() || '')
|
|
}
|
|
}, this.minDelay)
|
|
}
|
|
}
|