#837: create banner with information about update

Author: jgrobelski

package-lock.json

@@ -22,6 +22,7 @@ import { HintBoxComponent } from './hint-box/hint-box.component';
 import { LectureListComponent } from './lecture-list/lecture-list.component';
 import { MensaMealComponent } from './mensa-meal/mensa-meal.component';
 import { ModulesGridComponent } from './modules-grid/modules-grid.component';
+import { InfoBannerComponent } from './info-banner/info-banner.component';
 
 @NgModule({
   declarations: [
@@ -40,6 +41,7 @@ import { ModulesGridComponent } from './modules-grid/modules-grid.component';
     CampusReorderModalPage,
     DatePickerComponent,
     ModulesGridComponent,
+    InfoBannerComponent,
   ],
   imports: [
     IonicModule,
@@ -70,6 +72,7 @@ import { ModulesGridComponent } from './modules-grid/modules-grid.component';
     CourseDataComponent,
     DatePickerComponent,
     ModulesGridComponent,
+    InfoBannerComponent,
   ],
 })
 export class ComponentsModule {}

src/app/components/components.module.ts

@@ -0,0 +1,19 @@
+<div id="info-banner-card" class="card">
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>Neue Informationen</ion-card-title>
+      <ion-card-subtitle>Zu PULS Login & Mensaapp</ion-card-subtitle>
+    </ion-card-header>
+    <ion-card-content>
+      Der PULS-Login ist derzeit leider nicht möglich. <br />
+      Den aktueller Speiseplan finden Sie unter: https://swp.webspeiseplan.de.
+      <br />
+      Wir arbeiten an einer Lösung und bitten Sie um Geduld.
+    </ion-card-content>
+    <div style="display: block; margin: auto; width: fit-content">
+      <ion-button fill="clear" (click)="closeCard()"
+        >Hinweis schließen</ion-button
+      >
+    </div>
+  </ion-card>
+</div>

src/app/components/info-banner/info-banner.component.html

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { InfoBannerComponent } from './info-banner.component';
+
+describe('InfoBannerComponent', () => {
+  let component: InfoBannerComponent;
+  let fixture: ComponentFixture<InfoBannerComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [InfoBannerComponent],
+      imports: [IonicModule.forRoot()],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(InfoBannerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/info-banner/info-banner.component.scss

@@ -0,0 +1,44 @@
+import { Component, OnInit } from '@angular/core';
+import { Preferences } from '@capacitor/preferences';
+
+const prefKey = 'MobileUP_DontShowBanner';
+
+@Component({
+  selector: 'app-info-banner',
+  templateUrl: './info-banner.component.html',
+  styleUrls: ['./info-banner.component.scss'],
+})
+export class InfoBannerComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {
+    this.checkPref().then((prefValue) => {
+      console.log('render info banner: ' + prefValue);
+      if (prefValue === true) {
+        this.closeCard();
+      }
+    });
+  }
+
+  closeCard(): void {
+    document.querySelector('#info-banner-card').innerHTML = '';
+    this.setPref(true);
+  }
+
+  setPref = async (v: boolean) => {
+    await Preferences.set({
+      key: prefKey,
+      value: String(v),
+    });
+  };
+
+  checkPref = async (): Promise<boolean> => {
+    const { value } = await Preferences.get({ key: prefKey });
+    console.log(`Pref is ${value}!`);
+    return value === 'true';
+  };
+
+  removePref = async () => {
+    await Preferences.remove({ key: prefKey });
+  };
+}

src/app/components/info-banner/info-banner.component.spec.ts

@@ -34,6 +34,8 @@
     </div>
   </ng-template>
 
+  <app-info-banner> </app-info-banner>
+
   <app-hint-box
     *ngIf="displaySystemStatusWarning"
     [hintTypeAsString]="systemStatusWarning.title"