Theaninova/openstapps
1
0
Fork 0
mirror of https://gitlab.com/openstapps/openstapps.git synced 2026-04-16 11:19:14 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: upgrade to Capacitor 7 & Angular 18

Browse Source
This commit is contained in:
Rainer Killinger
2025-08-26 17:06:11 +02:00
parent 5a48342a8d
commit 3a274a3a7f
57 changed files with 4018 additions and 2517 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/app/src/app/app.component.spec.ts
View File

@@ -33,6 +33,7 @@ import {sampleAuthConfiguration} from './_helpers/data/sample-configuration';
import {StorageProvider} from './modules/storage/storage.provider';
import {SimpleBrowser} from './util/browser.factory';
import {provideHttpClient, withInterceptorsFromDi} from '@angular/common/http';
import {InAppReviewProvider} from './modules/settings/in-app-review/in-app-review.provider';
describe('AppComponent', () => {
let platformReadySpy: any;
@@ -40,6 +41,7 @@ describe('AppComponent', () => {
let translateServiceSpy: jasmine.SpyObj<TranslateService>;
let thingTranslateServiceSpy: jasmine.SpyObj<ThingTranslateService>;
let settingsProvider: jasmine.SpyObj<SettingsProvider>;
let inAppReviewProvider: jasmine.SpyObj<InAppReviewProvider>;
let configProvider: jasmine.SpyObj<ConfigProvider>;
let ngxLogger: jasmine.SpyObj<NGXLogger>;
let scheduleSyncServiceSpy: jasmine.SpyObj<ScheduleSyncService>;
@@ -85,6 +87,7 @@ describe('AppComponent', () => {
{provide: ThingTranslateService, useValue: thingTranslateServiceSpy},
{provide: ScheduleSyncService, useValue: scheduleSyncServiceSpy},
{provide: SettingsProvider, useValue: settingsProvider},
{provide: InAppReviewProvider, useValue: inAppReviewProvider},
{provide: ConfigProvider, useValue: configProvider},
{provide: NGXLogger, useValue: ngxLogger},
{provide: StorageProvider, useValue: storageProvider},

4
frontend/app/src/app/app.component.ts
View File

@@ -17,6 +17,7 @@ import {Router} from '@angular/router';
import {App, URLOpenListenerEvent} from '@capacitor/app';
import {Platform, ToastController} from '@ionic/angular/standalone';
import {SettingsProvider} from './modules/settings/settings.provider';
import {InAppReviewProvider} from './modules/settings/in-app-review/in-app-review.provider';
import {AuthHelperService} from './modules/auth/auth-helper.service';
import {environment} from '../environments/environment';
import {Capacitor} from '@capacitor/core';
@@ -55,6 +56,7 @@ export class AppComponent implements AfterContentInit {
constructor(
private readonly platform: Platform,
private readonly settingsProvider: SettingsProvider,
private readonly inAppReviewProvider: InAppReviewProvider,
private readonly router: Router,
private readonly zone: NgZone,
private readonly authHelper: AuthHelperService,
@@ -86,6 +88,8 @@ export class AppComponent implements AfterContentInit {
async hideSplash() {
if (Capacitor.isNativePlatform()) {
void SplashScreen.hide();
await this.inAppReviewProvider.increaseSessionCount();
void this.inAppReviewProvider.startInAppReviewIfFeasible();
}
}

2
frontend/app/src/app/modules/dashboard/dashboard.component.html
View File

@@ -19,7 +19,7 @@
</ion-toolbar>
</ion-header>
<div #schedule class="schedule">
<a [routerLink]="['/schedule/week-overview']">
<a [routerLink]="['/schedule/weekly-view']">
<ion-icon [size]="36" [weight]="300" name="calendar_month"></ion-icon>
<ion-label [innerHTML]="'schedule.recurring' | translate"></ion-label>
</a>

1
frontend/app/src/app/modules/data/chips/data/add-event-action-chip.component.ts
View File

@@ -127,6 +127,7 @@ export class AddEventActionChipComponent {
.filter(it => it.selected)
.map(it => it.item),
},
mode: 'md', // TODO Remove if Issue 239 is solved.
});
await modal.present();

4
frontend/app/src/app/modules/data/chips/filter/chip-filter.component.ts
View File

@@ -36,7 +36,7 @@ export class ChipFilterComponent {
/**
* Emits when the chip has been activated/deactivated
*/
@Output() toggle = new EventEmitter<unknown>();
@Output() toggled = new EventEmitter<unknown>();
/**
* Value to emit when chip has been activated/deactivated
@@ -47,6 +47,6 @@ export class ChipFilterComponent {
* Signalize that the chip filter has been activated/deactivated
*/
emitToggle(value: unknown) {
this.toggle.emit(value);
this.toggled.emit(value);
}
}

2
frontend/app/src/app/modules/data/elements/favorite-button.component.html
View File

@@ -19,6 +19,6 @@
[size]="24"
[fill]="(isFavorite$ | async) || false"
[class.selected]="isFavorite$ | async"
name="grade"
name="star"
></ion-icon>
</ion-button>

2
frontend/app/src/app/modules/data/elements/rating.html
View File

@@ -31,7 +31,7 @@
slot="icon-only"
[size]="32"
color="medium"
name="grade"
name="star"
></ion-icon>
}
<label class="thank-you">{{ 'ratings.thank_you' | translate }}</label>

1
frontend/app/src/app/modules/data/list/search-page.component.ts
View File

@@ -383,6 +383,7 @@ export class SearchPageComponent implements OnInit {
cssClass: 'context-menu-modal',
showBackdrop: true,
backdropDismiss: true,
mode: 'md', // TODO has to be fixed to md for now. ios mode is unresponsive. Remove if Issue 239 is solved
enterAnimation: (baseElement: HTMLElement) => enterAnimation(baseElement, this.animationController),
leaveAnimation: (baseElement: HTMLElement) => leaveAnimation(baseElement, this.animationController),
componentProps: {

3
frontend/app/src/app/modules/data/list/search-page.html
View File

@@ -37,7 +37,8 @@
>
</ion-searchbar>
@if (showContextMenu) {
<ion-menu-button menu="context" auto-hide="false" slot="end" (click)="openContextMenu()">
<!-- TODO has to be fixed to md for now. ios mode displays broken/missing icon -->
<ion-menu-button mode="md" menu="context" auto-hide="false" slot="end" (click)="openContextMenu()">
<ion-icon name="tune"></ion-icon>
</ion-menu-button>
}

3
frontend/app/src/app/modules/menu/context/context-menu-modal.component.spec.ts
View File

@@ -25,7 +25,7 @@ import {FilterContext, SortContext} from './context-type';
import {provideIonicAngular, ModalController} from '@ionic/angular/standalone';
import {BehaviorSubject, of} from 'rxjs';
import {addIcons} from 'ionicons';
import {swapVertical, trash} from 'ionicons/icons';
import {swapVertical, trash, menu} from 'ionicons/icons';
describe('ContextMenuModalComponent', () => {
let fixture: ComponentFixture<ContextMenuModalComponent>;
@@ -37,6 +37,7 @@ describe('ContextMenuModalComponent', () => {
addIcons({
delete: trash,
sort: swapVertical,
menu: menu,
});
beforeEach(async () => {

4
frontend/app/src/app/modules/menu/navigation/tabs.component.ts
View File

@@ -62,7 +62,9 @@ export class TabsComponent {
void this.loadMenuEntries();
this.router.events.subscribe((event: unknown) => {
if (event instanceof NavigationEnd) {
this.selectTab(event.url);
setTimeout(() => {
this.selectTab(event.url);
}, 300);
}
});
this.selectTab(router.url);

2
frontend/app/src/app/modules/schedule/page/schedule-page.component.ts
View File

@@ -136,7 +136,7 @@ export class SchedulePageComponent implements OnInit, AfterViewInit {
onInit() {
this.tabChoreographer = new SharedAxisChoreographer(this.activatedRoute.snapshot.paramMap.get('mode'), [
'calendar',
'week-overview',
'weekly-view',
'single',
]);
}

6
frontend/app/src/app/modules/schedule/page/schedule-page.html
View File

@@ -21,7 +21,7 @@
@if (tabChoreographer.currentValue === 'calendar') {
<ion-title [innerHTML]="'schedule.calendar' | translate | titlecase"></ion-title>
}
@if (tabChoreographer.currentValue === 'week-overview') {
@if (tabChoreographer.currentValue === 'weekly-view') {
<ion-title [innerHTML]="'schedule.recurring' | translate | titlecase"></ion-title>
}
@if (tabChoreographer.currentValue === 'single') {
@@ -39,7 +39,7 @@
<ion-label class="ion-text-wrap" [innerHTML]="'schedule.calendar' | translate"></ion-label>
<ion-icon name="calendar_today"></ion-icon>
</ion-segment-button>
<ion-segment-button value="week-overview" layout="icon-start">
<ion-segment-button value="weekly-view" layout="icon-start">
<ion-label class="ion-text-wrap" [innerHTML]="'schedule.recurring' | translate"></ion-label>
<ion-icon name="event_repeat"></ion-icon>
</ion-segment-button>
@@ -61,7 +61,7 @@
<stapps-calendar-view [layout]="layout"></stapps-calendar-view>
}
<!-- Schedule view needs full week -->
@case ('week-overview') {
@case ('weekly-view') {
<stapps-schedule-view [layout]="layout"></stapps-schedule-view>
}
@case ('single') {

2
frontend/app/src/app/modules/schedule/schedule.module.ts
View File

@@ -66,7 +66,7 @@ import {IonIconDirective} from 'src/app/util/ion-icon/ion-icon.directive';
const settingsRoutes: Routes = [
{path: 'schedule', redirectTo: 'schedule/calendar/now'},
{path: 'schedule/calendar', redirectTo: 'schedule/calendar/now'},
{path: 'schedule/week-overview', redirectTo: 'schedule/week-overview/now'},
{path: 'schedule/weekly-view', redirectTo: 'schedule/weekly-view/now'},
{path: 'schedule/single', redirectTo: 'schedule/single/now'},
// calendar | recurring | single
{path: 'schedule/:mode/:date', component: SchedulePageComponent},

94
frontend/app/src/app/modules/settings/in-app-review/in-app-review.provider.spec.ts Normal file
View File

@@ -0,0 +1,94 @@
/*
* Copyright (C) 2022 StApps
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
* more details.
*
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
/* eslint-disable unicorn/no-useless-undefined, @typescript-eslint/no-non-null-assertion */
import {TestBed} from '@angular/core/testing';
import {StorageProvider} from '../../storage/storage.provider';
import {
InAppReviewProvider,
IN_APP_REVIEW_COOLDOWN_DAYS,
IN_APP_REVIEW_NECESSARY_SESSIONS,
IN_APP_REVIEW_SETTINGS_KEY,
IN_APP_REVIEW_SESSIONS_KEY,
IN_APP_REVIEW_LAST_RATING_KEY,
} from './in-app-review.provider';
describe('InappRatingProvider', () => {
let storageProviderSpy: jasmine.SpyObj<StorageProvider>;
let inappRatingProvider: InAppReviewProvider;
const ONE_DAY_IN_MILLIS = 1000 * 3600 * 24;
beforeEach(async () => {
storageProviderSpy = jasmine.createSpyObj('StorageProvider', ['init', 'get', 'has', 'put']);
TestBed.configureTestingModule({
imports: [],
providers: [
InAppReviewProvider,
{
provide: StorageProvider,
useValue: storageProviderSpy,
},
],
});
// set settings returned from config
inappRatingProvider = TestBed.inject(InAppReviewProvider);
storageProviderSpy.has.and.returnValue(Promise.resolve(false));
});
it('should set user sessions count starting with one', async () => {
storageProviderSpy.get.and.returnValue(Promise.resolve(0));
const sessionCount = await inappRatingProvider.increaseSessionCount();
expect(sessionCount).toEqual(1);
});
it('should start in app rating/review flow if contitions are met', async () => {
const nowMinusCooldownDays = Date.now() - (IN_APP_REVIEW_COOLDOWN_DAYS + 1) * ONE_DAY_IN_MILLIS;
spyOn(inappRatingProvider, 'requestReview').and.returnValue(Promise.resolve());
storageProviderSpy.get
.withArgs(`${IN_APP_REVIEW_SETTINGS_KEY}.${IN_APP_REVIEW_SESSIONS_KEY}`)
.and.returnValue(Promise.resolve(IN_APP_REVIEW_NECESSARY_SESSIONS));
storageProviderSpy.get
.withArgs(`${IN_APP_REVIEW_SETTINGS_KEY}.${IN_APP_REVIEW_LAST_RATING_KEY}`)
.and.returnValue(Promise.resolve(nowMinusCooldownDays));
await inappRatingProvider.startInAppReviewIfFeasible();
expect(inappRatingProvider.requestReview).toHaveBeenCalledTimes(1);
});
it('should not start in app rating/review flow if contitions are not met', async () => {
const nowMinusCooldownDays = Date.now() - IN_APP_REVIEW_COOLDOWN_DAYS * ONE_DAY_IN_MILLIS;
spyOn(inappRatingProvider, 'requestReview').and.returnValue(Promise.resolve());
storageProviderSpy.get
.withArgs(`${IN_APP_REVIEW_SETTINGS_KEY}.${IN_APP_REVIEW_SESSIONS_KEY}`)
.and.returnValue(Promise.resolve(IN_APP_REVIEW_NECESSARY_SESSIONS - 1));
storageProviderSpy.get
.withArgs(`${IN_APP_REVIEW_SETTINGS_KEY}.${IN_APP_REVIEW_LAST_RATING_KEY}`)
.and.returnValue(Promise.resolve(nowMinusCooldownDays));
await inappRatingProvider.startInAppReviewIfFeasible();
storageProviderSpy.get
.withArgs(`${IN_APP_REVIEW_SETTINGS_KEY}.${IN_APP_REVIEW_SESSIONS_KEY}`)
.and.returnValue(Promise.resolve(IN_APP_REVIEW_NECESSARY_SESSIONS));
storageProviderSpy.get
.withArgs(`${IN_APP_REVIEW_SETTINGS_KEY}.${IN_APP_REVIEW_LAST_RATING_KEY}`)
.and.returnValue(Promise.resolve(nowMinusCooldownDays + ONE_DAY_IN_MILLIS));
await inappRatingProvider.startInAppReviewIfFeasible();
expect(inappRatingProvider.requestReview).toHaveBeenCalledTimes(0);
});
});

120
frontend/app/src/app/modules/settings/in-app-review/in-app-review.provider.ts Normal file
View File

@@ -0,0 +1,120 @@
import {Injectable} from '@angular/core';
import {InAppReview} from '@capacitor-community/in-app-review';
import {StorageProvider} from '../../storage/storage.provider';
export const IN_APP_REVIEW_COOLDOWN_DAYS = 365;
export const IN_APP_REVIEW_NECESSARY_SESSIONS = 3;
export const IN_APP_REVIEW_SETTINGS_KEY = 'inapp-rating';
export const IN_APP_REVIEW_SESSIONS_KEY = 'sessions';
export const IN_APP_REVIEW_LAST_RATING_KEY = 'last-rating';
export type IN_APP_REVIEW_KEYS = typeof IN_APP_REVIEW_SESSIONS_KEY | typeof IN_APP_REVIEW_LAST_RATING_KEY;
/**
* Provider for In-App Review
*/
@Injectable()
export class InAppReviewProvider {
requestReview: () => Promise<void>;
/**
* @param storageProvider TODO
*/
constructor(private readonly storageProvider: StorageProvider) {
this.requestReview = InAppReview.requestReview;
}
/**
*
*/
private inappRatingSettingStorageKey(key: string): string {
return `${IN_APP_REVIEW_SETTINGS_KEY}.${key}`;
}
/**
*
*/
private async getInAppReviewSetting<T>(
key: IN_APP_REVIEW_KEYS,
defaultValue: T,
): Promise<typeof defaultValue> {
try {
return await this.storageProvider.get<typeof defaultValue>(this.inappRatingSettingStorageKey(key));
} catch {
return defaultValue;
}
}
/**
*
*/
private async setInAppReviewSetting<T>(key: IN_APP_REVIEW_KEYS, value: T) {
return this.storageProvider.put<typeof value>(this.inappRatingSettingStorageKey(key), value);
}
/**
*
*/
private async setInAppReviewSessions(value: number) {
return this.setInAppReviewSetting(IN_APP_REVIEW_SESSIONS_KEY, value);
}
/**
*
*/
private async getInAppReviewSessions(): Promise<number> {
return this.getInAppReviewSetting(IN_APP_REVIEW_SESSIONS_KEY, 0);
}
/**
*
*/
private async setInAppReviewLastRating(value: Date) {
return this.setInAppReviewSetting(IN_APP_REVIEW_LAST_RATING_KEY, value.getTime());
}
/**
*
*/
private async getInAppReviewLastRating(): Promise<Date> {
return this.getInAppReviewSetting(IN_APP_REVIEW_LAST_RATING_KEY, 0).then(timestamp => {
return new Date(timestamp);
});
}
/**
* Increases session count to keep local info how often the app was used.
*/
public async increaseSessionCount(increment = 1): Promise<number> {
try {
const currentSessions = await this.getInAppReviewSessions();
await this.setInAppReviewSessions(currentSessions + increment);
return currentSessions + increment;
} catch {
return -1;
}
}
/**
* Invokes In App Review Flow/Views depending on the OS iff conditions are met.
*/
public async startInAppReviewIfFeasible(): Promise<boolean> {
try {
const currentSessions = await this.getInAppReviewSessions();
const lastRating = await this.getInAppReviewLastRating();
const dateDiffMillis = Math.abs(lastRating.getTime() - Date.now());
const dateDiffDays = Math.floor(dateDiffMillis / (1000 * 3600 * 24));
if (currentSessions < IN_APP_REVIEW_NECESSARY_SESSIONS || dateDiffDays < IN_APP_REVIEW_COOLDOWN_DAYS) {
return false;
}
await this.requestReview();
await this.setInAppReviewLastRating(new Date());
return true;
} catch {
return false;
}
}
}

2
frontend/app/src/app/modules/settings/item/settings-item.html
View File

@@ -33,7 +33,7 @@
}
<ion-card-content>
@if (!compactView) {
<ion-note>{{ 'description' | thingTranslate: setting | titlecase }}</ion-note>
<ion-note>{{ 'description' | thingTranslate: setting }}</ion-note>
}
@if (isVisible) {
<div>

10
frontend/app/src/app/modules/settings/settings.module.ts
View File

@@ -55,6 +55,7 @@ import {
IonToolbar,
} from '@ionic/angular/standalone';
import {IonIconDirective} from 'src/app/util/ion-icon/ion-icon.directive';
import {InAppReviewProvider} from './in-app-review/in-app-review.provider';
const settingsRoutes: Routes = [{path: 'settings', component: SettingsPageComponent}];
@@ -101,6 +102,13 @@ const settingsRoutes: Routes = [{path: 'settings', component: SettingsPageCompon
IonInput,
IonNote,
],
providers: [ScheduleSyncService, SettingsProvider, CalendarService, ScheduleProvider, ThingTranslatePipe],
providers: [
ScheduleSyncService,
SettingsProvider,
InAppReviewProvider,
CalendarService,
ScheduleProvider,
ThingTranslatePipe,
],
})
export class SettingsModule {}

4
frontend/app/src/app/modules/settings/settings.provider.spec.ts
View File

@@ -304,8 +304,8 @@ describe('SettingsProvider', () => {
},
en: {
description:
'The user group the app is going to be used.' +
'This settings for example is getting used for the predefined price category of mensa meals.',
'The user group the app is going to use primarily.' +
' This settings for example is getting used for the predefined price category of mensa meals.',
name: 'Group',
},
},

1
frontend/app/src/app/modules/storage/storage.provider.spec.ts
View File

@@ -106,7 +106,6 @@ describe('StorageProvider', () => {
});
it('should put multiple values into the storage', async () => {
// @ts-expect-error no need to return anything for this case
spyOn(storageProvider, 'put').and.callFake(() => Promise.resolve());
await storageProvider.putMultiple(sampleEntries);

3
frontend/app/src/app/modules/storage/storage.provider.ts
View File

@@ -120,8 +120,9 @@ export class StorageProvider {
* Puts a value of type T into the storage using provided key
* @param key Unique identifier
* @param value Resource to store under the key
* @returns Returns a promise that resolves when the key and value are set
*/
async put<T>(key: string, value: T): Promise<T> {
async put<T>(key: string, value: T) {
return this.storage.set(key, value);
}

2
frontend/app/src/app/util/ion-icon/ion-icon-custom-component.ts
View File

@@ -150,7 +150,7 @@ const iconMap = new Map<string, MaterialSymbol>([
[menuSharp, SCIcon.menu],
[searchOutline, SCIcon.search],
[searchSharp, SCIcon.search],
[chevronExpand, SCIcon.expand_more],
[chevronExpand, SCIcon.expand_all],
[caretDownSharp, SCIcon.expand_more],
[close, SCIcon.close],
[closeSharp, SCIcon.close],

93
frontend/app/src/assets/about/licenses.json
View File

File diff suppressed because one or more lines are too long

2
frontend/app/src/assets/i18n/de.json
View File

@@ -500,7 +500,7 @@
"view": {
"today": "Heute"
},
"recurring": "Wochen&shy;übersicht",
"recurring": "Wochen&shy;ansicht",
"calendar": "Kalender",
"single": "Einzel&shy;termine",
"addEventPage": {

2
frontend/app/src/assets/i18n/en.json
View File

@@ -500,7 +500,7 @@
"view": {
"today": "Today"
},
"recurring": "Week Overview",
"recurring": "Weekly View",
"calendar": "Calendar",
"single": "Single Events",
"addEventPage": {

BIN
frontend/app/src/assets/icons.min.woff2
View File

Binary file not shown.

2
frontend/app/src/config/profile-page-sections.ts
View File

@@ -62,7 +62,7 @@ export const profilePageSections: SCSection[] = [
links: [
{
name: 'Favorites',
icon: SCIcon.grade,
icon: SCIcon.star,
link: ['/favorites'],
translations: {
de: {

3
frontend/app/src/theme/common/_ion-searchbar.scss
View File

@@ -17,14 +17,13 @@ $icon-size: 22px;
app-root ion-searchbar[class*='sc-ion-searchbar-'] {
--border-radius: var(--border-radius-default);
--background: var(--ion-item-background) !important;
--box-shadow: none;
height: 38px;
padding-top: 0;
padding-bottom: 0;
&.filterable {
--box-shadow: none;
position: relative;
padding-right: 0;
padding-left: 0;