Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | 1x 54x 54x 54x 54x 54x 54x 54x 54x 54x 54x 54x 54x 54x 54x 38x 27x 23x 23x 23x 23x 23x 23x 23x 23x 57x 48x | import { Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';
import { of } from 'rxjs';
import { ComponentWithText } from 'src/app/interfaces/ComponentWithText';
import { TextService } from 'src/app/services/db/text/text.service';
import { CvSkillBarComponent } from '../cv-skill-bar/cv-skill-bar.component';
import { CommonModule } from '@angular/common';
import { VisibleToLoadTextService } from 'src/app/services/visibletoloadtext/visible-to-load-text.service';
import { Preloaders } from 'src/app/services/preloader/preloaders/preloaders';
import { PreloaderService } from 'src/app/services/preloader/preloader.service';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
/**
* Component exposing the different skills to be displayed. See
* {@link CvSkillBarComponent}.
*/
@Component({
selector: 'app-cv-skills',
templateUrl: './cv-skills.component.html',
styleUrls: ['./cv-skills.component.css'],
standalone: true,
imports: [CommonModule, CvSkillBarComponent, MatProgressSpinnerModule],
})
export class CvSkillsComponent implements ComponentWithText, OnDestroy {
/** The main div element of the component. */
@ViewChild('mainDiv') mainDiv!: ElementRef<HTMLElement>;
/** Text used for the skill subtitle. */
skills = of('');
/** Text used for the java skill. */
java = of('');
/** Text used for the csharp skill. */
csharp = of('');
/** Text used for the python skill. */
python = of('');
/** Text used for the jsts skill. */
jsts = of('');
/** Text used for the sql skill. */
sql = of('');
/** Text used for the html skill. */
html = of('');
/** Text used for the latex skill. */
latex = of('');
/** Preloader for texts. */
loaderTexts = Preloaders.TEXTS;
/**
* The skill bar component constructor
*
* @param textService The {@link TextService}
* @param visibleToLoadTextService The {@link VisibleToLoadTextService}
* @param preloader The {@link PreloaderService}
*/
constructor(
private textService: TextService,
public visibleToLoadTextService: VisibleToLoadTextService,
public preloader: PreloaderService
) {
setTimeout(() => {
this.visibleToLoadTextService.subscribe(this);
}, 0);
}
/**
* Update the component's texts when the language is updated. See
* {@link VisibleToLoadTextService}. The subscriber design pattern is used and
* this function is used when the service notifies its subscribers to update
* the text contents after a language change. Uses {@link TextService} to get
* those contents from the database.
*/
updateTexts(): void {
this.textService
.getMulti([
'skills-title',
'java-language',
'csharp-language',
'python-language',
'js-ts-language',
'sql-language',
'html-language',
'latex-language',
])
.subscribe((r) => {
this.skills = of(r[0]);
this.java = of(r[1]);
this.csharp = of(r[2]);
this.python = of(r[3]);
this.jsts = of(r[4]);
this.sql = of(r[5]);
this.html = of(r[6]);
this.latex = of(r[7]);
this.visibleToLoadTextService.textLoaded(this);
});
}
/**
* On destroy, the component has to be unsubscribed rom the
* {@link VisibleToLoadTextService} to avoid having the service try to notify a
* destroyed subscriber.
*/
ngOnDestroy(): void {
this.visibleToLoadTextService.unsubscribe(this);
}
/**
* Get the main component element.
*
* @returns The element.
*/
getElement(): ElementRef<HTMLElement> {
return this.mainDiv;
}
}
|