Merge pull request #22 from admin-ch/info

gillerr · web-flow · commit c0a93b9f5813 · 2020-12-17T08:28:33.000+01:00
Info
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ha-ui",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "scripts": {
     "start": "ng serve",
     "build": "ng build",
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -20,10 +20,6 @@
 			{{ "footer.built.suffix" | translate }}
 		</p>
 	</ng-container>
-	<ng-container obOffCanvasTitle>{{ "help.title" | translate }}</ng-container>
-	<ng-container obOffCanvasContent>
-		<ha-help></ha-help>
-	</ng-container>
 	<ng-container *ngIf="isAuthenticated$ | async">
 		<ng-template #obHeaderControl>
 			<button [matTooltip]="'logout' | translate" class="control-link" (click)="logout()">
@@ -34,16 +30,6 @@
 			<ng-template #obHeaderControl>
 				<ha-eiam-self-admin [page]="currentPage" [name]="name$ | async"></ha-eiam-self-admin>
 			</ng-template>
-			<ng-template #obHeaderControl *ngIf="currentPage === '/generate-code'">
-				<button
-					obOffCanvasToggle
-					[matTooltip]="helpTooltip$ | async | translate"
-					id="help-toggle_button"
-					class="control-link"
-				>
-					<span class="fa fa-question-circle control-icon"></span>
-				</button>
-			</ng-template>
 		</ng-container>
 	</ng-container>
 	<ng-template #obFooterLink>
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
@@ -4,7 +4,6 @@ import {CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA} from '@angular/core';
 import {ObliqueTestingModule} from '@oblique/oblique';
 import {OidcSecurityService} from 'angular-auth-oidc-client';
 import {of} from 'rxjs';
-import {first, skip} from 'rxjs/operators';
 import {AppComponent} from './app.component';
 import {OauthService} from './auth/oauth.service';
 
@@ -76,26 +75,6 @@ describe('AppComponent', () => {
 	// 	});
 	// });
 
-	describe('helpTooltip$', () => {
-		it('should be defined', () => {
-			expect(app.helpTooltip$).toBeDefined();
-		});
-
-		it('should output a tooltip with default value', done => {
-			app.helpTooltip$.pipe(first()).subscribe(tooltip => {
-				expect(tooltip).toBe('help.tooltip.out');
-				done();
-			});
-		});
-
-		it('should output a tooltip with an event', done => {
-			app.helpTooltip$.pipe(skip(1)).subscribe(tooltip => {
-				expect(tooltip).toBe('help.tooltip.in');
-				done();
-			});
-		});
-	});
-
 	describe('ngAfterViewInit', () => {
 		let oAuth: OauthService;
 		beforeEach(() => {
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,7 +1,7 @@
 import {AfterViewInit, Component} from '@angular/core';
 import {NavigationEnd, Router} from '@angular/router';
 import {Observable} from 'rxjs';
-import {delay, filter, map, startWith, takeUntil} from 'rxjs/operators';
+import {delay, filter, map, takeUntil} from 'rxjs/operators';
 import {ObHttpApiInterceptorEvents, ObOffCanvasService, ObUnsubscribable} from '@oblique/oblique';
 import {OauthService} from './auth/oauth.service';
 
@@ -32,10 +32,6 @@ export class AppComponent extends ObUnsubscribable implements AfterViewInit {
 				takeUntil(this.unsubscribe)
 			)
 			.subscribe(url => (this.currentPage = url));
-		this.helpTooltip$ = offCanvas.opened.pipe(
-			startWith(false),
-			map(opened => (opened ? 'help.tooltip.in' : 'help.tooltip.out'))
-		);
 		interceptor.sessionExpired.subscribe(() => this.logout());
 	}
 
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -24,7 +24,6 @@ import {AppComponent} from './app.component';
 import {OpenIdConfigService} from './auth/open-id-config-service';
 import {HttpConfigInterceptor} from './auth/http.config.interceptor';
 import {EiamSelfAdminComponent} from './eiam-self-admin/eiam-self-admin.component';
-import {HelpComponent} from './help/help.component';
 
 export function loadConfig(oidcConfigService: OidcConfigService, openIdConfigService: OpenIdConfigService) {
 	return () => oidcConfigService.withConfig(openIdConfigService.config);
@@ -36,7 +35,7 @@ registerLocaleData(localeITCH);
 registerLocaleData(localeENGB);
 
 @NgModule({
-	declarations: [AppComponent, EiamSelfAdminComponent, HelpComponent],
+	declarations: [AppComponent, EiamSelfAdminComponent],
 	imports: [
 		BrowserModule,
 		BrowserAnimationsModule,
@@ -72,6 +71,7 @@ export class AppModule {
 		interceptor.api.url = '/v1/authcode';
 		meta.titleSuffix = 'application.title';
 		meta.description = 'application.description';
+		config.layout.hasOffCanvas = false;
 		config.layout.hasMainNavigation = false;
 		config.locale.locales = [
 			{id: 'locale-de_button', locale: 'de'},
diff --git a/src/app/generate-code/generate-code.component.html b/src/app/generate-code/generate-code.component.html
@@ -1,3 +1,12 @@
+<mat-card>
+	<mat-card-header>
+		<mat-card-title>{{ "generate-code.help.title" | translate }}</mat-card-title>
+	</mat-card-header>
+	<mat-card-content>
+		<ha-help></ha-help>
+	</mat-card-content>
+</mat-card>
+
 <form [formGroup]="test" (submit)="save(test.valid, test.value)" autocomplete="off">
 	<mat-form-field obErrorMessages>
 		<mat-label>{{ "generate-code.onset" | translate }} *</mat-label>
diff --git a/src/app/generate-code/generate-code.component.scss b/src/app/generate-code/generate-code.component.scss
@@ -3,7 +3,10 @@
 
 :host {
 	display: flex;
+	flex-direction: column;
+	align-items: center;
 	justify-content: center;
+	margin-top: $spacing-lg;
 }
 
 form {
diff --git a/src/app/generate-code/generate-code.module.ts b/src/app/generate-code/generate-code.module.ts
@@ -7,16 +7,18 @@ import {MatButtonModule} from '@angular/material/button';
 import {MatInputModule} from '@angular/material/input';
 import {MatDialogModule} from '@angular/material/dialog';
 import {DateAdapter} from '@angular/material/core';
+import {MatCardModule} from '@angular/material/card';
 import {TranslateService} from '@ngx-translate/core';
 import {map, startWith} from 'rxjs/operators';
 import {ObErrorMessagesModule} from '@oblique/oblique';
 import {SharedModule} from 'shared/shared.module';
 import {GenerateCodeComponent} from './generate-code.component';
 import {CodeComponent} from './code/code.component';
 import {AuthGuardService} from '../auth/auth-guard.service';
+import {HelpComponent} from './help/help.component';
 
 @NgModule({
-	declarations: [GenerateCodeComponent, CodeComponent],
+	declarations: [GenerateCodeComponent, CodeComponent, HelpComponent],
 	imports: [
 		SharedModule,
 		RouterModule.forChild([{path: '', component: GenerateCodeComponent, canActivate: [AuthGuardService]}]),
@@ -26,7 +28,8 @@ import {AuthGuardService} from '../auth/auth-guard.service';
 		MatFormFieldModule,
 		MatInputModule,
 		MatMomentDateModule,
-		ObErrorMessagesModule
+		ObErrorMessagesModule,
+		MatCardModule
 	]
 })
 export class GenerateCodeModule {
diff --git a/src/app/generate-code/help/help.component.html b/src/app/generate-code/help/help.component.html
@@ -0,0 +1,3 @@
+<ul>
+	<li *ngFor="let bullet of bullets$ | async">{{ bullet | translate }}</li>
+</ul>
diff --git a/src/app/generate-code/help/help.component.spec.ts b/src/app/generate-code/help/help.component.spec.ts
@@ -16,7 +16,8 @@ describe('HelpComponent', () => {
 					provide: TranslateService,
 					useValue: {
 						onLangChange: of({}),
-						getTranslation: () => of({a: 0, b: 0, help: 0, 'help.text1': 0, 'help.text2': 0})
+						getTranslation: () =>
+							of({a: 0, b: 0, help: 0, 'generate-code.help.info.1': 0, 'generate-code.help.info.2': 0})
 					}
 				}
 			],
@@ -34,14 +35,14 @@ describe('HelpComponent', () => {
 		expect(component).toBeTruthy();
 	});
 
-	describe('paragraph$', () => {
+	describe('bullets$', () => {
 		it('should be defined', () => {
-			expect(component.paragraph$).toBeTruthy();
+			expect(component.bullets$).toBeTruthy();
 		});
 
 		it('should', done => {
-			component.paragraph$.subscribe(data => {
-				expect(data).toEqual(['help.text1', 'help.text2']);
+			component.bullets$.subscribe(data => {
+				expect(data).toEqual(['generate-code.help.info.1', 'generate-code.help.info.2']);
 				done();
 			});
 		});
diff --git a/src/app/generate-code/help/help.component.ts b/src/app/generate-code/help/help.component.ts
@@ -1,21 +1,22 @@
 import {Component} from '@angular/core';
 import {TranslateService} from '@ngx-translate/core';
-import {first, map, switchMap} from 'rxjs/operators';
+import {first, map, startWith, switchMap, tap} from 'rxjs/operators';
 import {Observable} from 'rxjs';
 
 @Component({
 	selector: 'ha-help',
 	templateUrl: './help.component.html'
 })
 export class HelpComponent {
-	paragraph$: Observable<string[]>;
+	bullets$: Observable<string[]>;
 
 	constructor(translate: TranslateService) {
-		this.paragraph$ = translate.onLangChange.pipe(
+		this.bullets$ = translate.onLangChange.pipe(
 			first(),
+			startWith(translate.currentLang),
 			switchMap(() => translate.getTranslation(translate.currentLang)),
 			map(data => Object.keys(data)),
-			map(keys => keys.filter(key => key.indexOf('help.text') === 0))
+			map(keys => keys.filter(key => key.indexOf('generate-code.help.info') === 0))
 		);
 	}
 }
diff --git a/src/app/help/help.component.html b/src/app/help/help.component.html
diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
@@ -2,20 +2,19 @@
   "application.title": "Covidcode BAG",
   "application.description": "Die Fachperson gibt den Covidcode der infizierten Person bekannt. Diese kann den Covidcode in ihre SwissCovid-App eingeben.",
   "application.organization.name": "Bundesamt für Informatik und Telekommunikation BIT",
+  "generate-code.help.title": "Wichtige Informationen zur Covidcode Generierung",
+  "generate-code.help.info.1": "Ist das Datum des Auftretens der ersten Symptome nicht bekannt, bitte das Testdatum eingeben.",
+  "generate-code.help.info.2": "Der Covidcode ist für 24 Stunden gültig. Er ist nur für den persönlichen Gebrauch bestimmt und darf in keiner Form an Dritte weitergegeben werden.",
+  "generate-code.help.info.3": "Covidcodes werden weder lokal gespeichert, noch automatisch an die Patientin/den Patienten aus diesem System versandt.",
+  "generate-code.help.info.4": "Sollte die Patientin/der Patient den Code erneut benötigen, muss ein neuer Code generiert werden.",
+  "generate-code.help.info.5": "Der infektiöse Zeitraum wird automatisch berechnet.",
   "generate-code.generate": "Covidcode erzeugen",
   "generate-code.onset": "Datum Erstsymptome",
   "generate-code.hint": "Datum Erstsymptome, \"tt.mm.jjjj\"",
   "code.title": "Covidcode",
   "code.date": "Datum Erstsymptome",
   "code.instruction": "Bitte teilen Sie diesen Covidcode der positiv getesteten Person mit.",
   "code.close": "Ich habe den Covidcode dem Patienten kommuniziert.",
-  "help.tooltip.in": "Hilfe verbergen",
-  "help.tooltip.out": "Hilfe anzeigen",
-  "help.title": "Hilfe",
-  "help.text1": "Falls die positiv getestete Person keine Symptome gezeigt hat, bitte das Testdatum eingeben. Das Ansteckungsfenster wird dann automatisch berechnet.",
-  "help.text2": "Basierend auf dem Datum der Erstsymptome wird ein Einmal-Covidcode generiert.",
-  "help.text3": "Bitte teilen Sie diesen Covidcode ohne die Leerzeichen Ihrem Patienten mit, damit er diesen Covidcode in der SwissCovid App eingeben kann. Dieser Code ist für 24 Stunden gültig.",
-  "help.text4": "Covidcodes werden nicht lokal gespeichert. D. h. es muss ein neuer Covidcode generiert werden, falls der Patient diesen erneut benötigt.",
   "home.warning": "Bitte beachten Sie, dass dies eine Testumgebung ist und möglicherweise nicht wie erwartet funktioniert. Sie finden die produktive Umgebung auf: ",
   "home.text1": "Guten Tag",
   "home.text2": "Sie befinden sich auf der Internetseite, mit deren Hilfe Personen des Kontakt-Managements Zugang zum Erstellen von Covidcodes erhalten.",
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
@@ -2,20 +2,19 @@
   "application.title": "Covidcode FOPH",
   "application.description": "The specialist gives the Covidcode to the infected person. The infected person may choose to enter the Covidcode into their SwissCovid app.",
   "application.organization.name": "Federal Office of Information Technology, Systems and Telecommunication FOITT",
+  "generate-code.help.title": "Important information on Covidcode generation",
+  "generate-code.help.info.1": "If the date on which the initial symptoms occurred is unknown, please enter the test date.",
+  "generate-code.help.info.2": "The Covidcode is valid for 24 hours. It is for personal use only and may not be passed on to third parties in any form.",
+  "generate-code.help.info.3": "Covidcodes are neither stored locally nor sent automatically to the patient from this system.",
+  "generate-code.help.info.4": "Should the patient require the code again, a new code must be generated.",
+  "generate-code.help.info.5": "The infectious period is calculated automatically.",
   "generate-code.generate": "Generate Covidcode",
   "generate-code.onset": "Date of first symptoms",
   "generate-code.hint": "Date of first symptoms, \"dd/mm/yyyy\"",
   "code.title": "Covidcode",
   "code.date": "Date of first symptoms",
   "code.instruction": "Please provide this Covidcode to the person who tested positive.",
   "code.close": "I communicated the Covidcode to the patient.",
-  "help.tooltip.in": "Hide help",
-  "help.tooltip.out": "Show help",
-  "help.title": "Help",
-  "help.text1": "If the person who tested positive hasn’t shown any symptoms, please type in the date of testing. The incubation period is calculated automatically.",
-  "help.text2": "Based on the date of infection a onetime Covidcode is generated.",
-  "help.text3": "Pass on the Covidcode to your patient, leaving out the spaces, so that they can enter it into the SwissCovid app. This code is valid for 24 hours.",
-  "help.text4": "Covidcodes are not stored locally. This means a new Covidcode has to be generated, if the patient requires a new one.",
   "home.warning": "Please note this is a test environment and may not work as expected. You'll find the productive environment on: ",
   "home.text1": "Hello",
   "home.text2": "You are on the website that gives persons of the contact management access to create Covidcodes.",
diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json
@@ -2,20 +2,19 @@
   "application.title": "Covidcode OFSP",
   "application.description": "Le professionnel communique le code COVID à la personne infectée. Celle-ci peut saisir le code COVID dans son application SwissCovid.",
   "application.organization.name": "Office fédéral de l'informatique et de la télécommunication OFIT",
+  "generate-code.help.title": "Informations importantes sur la génération du code COVID",
+  "generate-code.help.info.1": "Si vous ne connaissez pas la date des premiers symptômes, indiquez celle du test.",
+  "generate-code.help.info.2": "Le code COVID est valable 24 heures. Il est réservé à un usage personnel et ne peut être transmis à des tiers sous quelque forme que ce soit.",
+  "generate-code.help.info.3": "Le système n’enregistre pas les codes COVID localement et ne les envoie pas automatiquement au patient.",
+  "generate-code.help.info.4": "Si le patient a encore une fois besoin du code, un nouveau doit être généré.",
+  "generate-code.help.info.5": "La période de contagion est calculée automatiquement.",
   "generate-code.generate": "Générer Covidcode",
   "generate-code.onset": "Date des premiers symptômes",
   "generate-code.hint": "Date des premiers symptômes, \"jj.mm.aaaa\"",
   "code.title": "Covidcode",
   "code.date": "Date des premiers symptômes",
   "code.instruction": "Veuillez fournir ce Covidcode à la personne qui a été testée positive.",
   "code.close": "J'ai communiqué le Covidcode au patient.",
-  "help.tooltip.in": "Cacher l'aide",
-  "help.tooltip.out": "Montrer l'aide",
-  "help.title": "Aide",
-  "help.text1": "Si la personne testée positive ne présentait aucun symptôme, veuillez indiquer la date du test. La fenêtre d'infection est alors calculée automatiquement.",
-  "help.text2": "En fonction de la date d'apparition des premiers symptômes, un Covidcode unique est généré.",
-  "help.text3": "Veuillez indiquer ce Covidcode sans les espaces à votre patient afin qu'il puisse l'entrer dans l'application SwissCovid. Ce code est valable 24 heures.",
-  "help.text4": "Les Covidcodes ne sont pas enregistrés localement, c'est-à-dire qu'un nouveau Covidcode doit être généré si le patient en a à nouveau besoin.",
   "home.warning": "Veuillez noter qu'il s'agit d'un environnement de test et qu'il se peut qu'il ne fonctionne pas comme prévu. Vous trouverez l'environnement productif sur : ",
   "home.text1": "Bonjour",
   "home.text2": "Vous êtes sur le site web qui donne accès aux personnes chargées de la gestion des contacts pour créer des Covidcodes.",
diff --git a/src/assets/i18n/it.json b/src/assets/i18n/it.json
@@ -2,20 +2,19 @@
   "application.title": "Covidcode UFSP",
   "application.description": "Lo specialista comunica il codice Covid alla persona infetta. Quest’ultima lo può immettere nella sua app SwissCovid.",
   "application.organization.name": "Ufficio federale dell'informatica e della telecomunicazione UFIT",
+  "generate-code.help.title": "Informazioni importanti sulla generazione dei codici Covid",
+  "generate-code.help.info.1": "Se non è nota la data di comparsa dei primi sintomi, immettere la data del test.",
+  "generate-code.help.info.2": "Il codice Covid è valido per 24 ore. Il solo per uso personale e non può essere ceduto a terzi in nessuna forma.",
+  "generate-code.help.info.3": "I codici Covid non vengono salvati localmente, né inviati automaticamente al paziente da questo sistema.",
+  "generate-code.help.info.4": "Se il paziente necessitasse nuovamente del codice, occorre generarne uno nuovo.",
+  "generate-code.help.info.5": "Il periodo infettivo viene calcolato automaticamente.",
   "generate-code.generate": "Genera Covidcode",
   "generate-code.onset": "Data di primi sintomi",
   "generate-code.hint": "Data di primi sintomi, \"gg.mm.aaaa\"",
   "code.title": "Covidcode",
   "code.date": "Data di primi sintomi",
   "code.instruction": "Si prega di fornire questo Covidcode alla persona che è risultata positiva.",
   "code.close": "Ho comunicato il Covidcode al paziente.",
-  "help.tooltip.in": "Nascondi l'aiuto",
-  "help.tooltip.out": "Vedi l’aiuto",
-  "help.title": "Aiuto",
-  "help.text1": "In caso di mancati sintomi della persona risultata positiva, inserire la data dell’effettuazione del test. La finestra infettiva (periodo dove l'infezione può essere avvenuta) viene calcolata automaticamente.",
-  "help.text2": "In base alla data di infezione, viene generato un Covidcode univoco.",
-  "help.text3": "Si prega di comunicare questo Covidcode (senza spazi) al paziente, in modo che possa inserire questo codice nella l'app SwissCovid. Questo codice è valido per 24 ore.",
-  "help.text4": "I Covidcodes non vengono memorizzati localmente. Qualché il paziente ne abbia nuovamente bisogno, egli deve creare un nuovo Covidcode.",
   "home.warning": "Si prega di notare che questo è un ambiente di prova e potrebbe non funzionare come previsto. Troverete l'ambiente produttivo acceso: ",
   "home.text1": "Ciao",
   "home.text2": "Sei sul sito web che dà accesso alle persone di gestione dei contatti per creare Covidcodes.",

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "ha-ui",`
`3`		`- "version": "1.0.9",`
	`3`	`+ "version": "1.0.10",`
`4`	`4`	`"scripts": {`
`5`	`5`	`"start": "ng serve",`
`6`	`6`	`"build": "ng build",`
Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,10 @@`
`3`	`3`
`4`	`4`	`:host {`
`5`	`5`	`display: flex;`
	`6`	`+ flex-direction: column;`
	`7`	`+ align-items: center;`
`6`	`8`	`justify-content: center;`
	`9`	`+ margin-top: $spacing-lg;`
`7`	`10`	`}`
`8`	`11`
`9`	`12`	`form {`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<ul>`
	`2`	`+ <li *ngFor="let bullet of bullets$ \| async">{{ bullet \| translate }}</li>`
	`3`	`+</ul>`