Issue
This is the function defined in MainService.ts, it can change the color set in badgesColorSet ,i have 3 colors defined in the json config already and i want these 3 colors to change everytime i open the website lets it is red then i refresh the page it should be green and then i refresh again it should be blue. so is this function correct and should i use for loop ?and i think i need to divide it by something so it increments and goes from 0 ,1 ,2 as index ?
getIteriateColor(){
//gets color out of color set from turnkey.config file for badges
let badgesColorSet = 0; badgesColorSet < Array.length; badgesColorSet++;
console.log(badgesColorSet);
return badgesColorSet;
the colors are defined in turnkey-config.json
"badgesColorSet":["#ffff00","#f51307","#0cc902"],
this code is in the mainservice to define the background color of the material badge
badge: {bg: this.getNextColor() , fg: 'white' , title: moduleBadge},
Solution
Assuming getNextColor()
calls getIteriateColor()
to get the next color.
On getIteriateColor()
let's loop through "badgesColorSet":["#ffff00","#f51307","#0cc902"]
and starting again from [0]
when iterate reaches [2]
.
To remember what color was last used we should store it somewhere on the client where the state remains (e.g localStorage), that way we know what color to choose next.
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
badgesColorSet = ['#ffff00', '#f51307', '#0cc902'];
badgesColorSelected: string;
constructor() {
this.getIteriateColor();
}
getIteriateColor() {
// if there is no color in localStorage, set the first color
if (!localStorage.getItem('badgesColorSelected')) {
localStorage.setItem('badgesColorSelected', this.badgesColorSet[0]);
} else {
// if there is color, select the next color
const storageColor = localStorage.getItem('badgesColorSelected');
const colorIndex = this.badgesColorSet.indexOf(storageColor);
if (colorIndex + 1 > this.badgesColorSet.length - 1) {
this.badgesColorSelected = this.badgesColorSet[0];
localStorage.setItem('badgesColorSelected', this.badgesColorSet[0]);
} else {
this.badgesColorSelected = this.badgesColorSet[colorIndex + 1];
localStorage.setItem('badgesColorSelected',this.badgesColorSet[colorIndex + 1]
);
}
}
}
}
Working example: https://stackblitz.com/edit/angular-ivy-mw7s49?file=src%2Fapp%2Fapp.component.ts
Or for backend something similar except without localStorage.
badgesColorSet: string[] = ['#ffff00', '#f51307', '#0cc902'];
badgesColorSelected: string;
getIteriateColor() {
if (!this.badgesColorSelected) {
this.badgesColorSelected = this.badgesColorSet[0];
} else {
let nextColorIndex = 0;
for (let i = 0; i < this.badgesColorSet.length; i++) {
if (this.badgesColorSet[i] === this.badgesColorSelected) {
if (i <= this.badgesColorSet.length - 2) {
nextColorIndex = i + 1;
break;
}
}
}
this.badgesColorSelected = this.badgesColorSet[nextColorIndex];
}
console.log('current color is: ', this.badgesColorSelected);
}
badge: {bg: badgesColorSelected , fg: 'white' , title: moduleBadge},
Answered By - Joosep.P
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.