Update to Angular 17
This commit is contained in:
parent
d0150def51
commit
0442b6b3d6
4 changed files with 3509 additions and 3586 deletions
|
|
@ -82,21 +82,21 @@
|
|||
"serve": {
|
||||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
"options": {
|
||||
"browserTarget": "twigs:build"
|
||||
"buildTarget": "twigs:build"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"browserTarget": "twigs:build:production"
|
||||
"buildTarget": "twigs:build:production"
|
||||
},
|
||||
"codeserver": {
|
||||
"browserTarget": "twigs:build:codeserver"
|
||||
"buildTarget": "twigs:build:codeserver"
|
||||
}
|
||||
}
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||
"options": {
|
||||
"browserTarget": "twigs:build"
|
||||
"buildTarget": "twigs:build"
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
|
|
|
|||
6832
package-lock.json
generated
6832
package-lock.json
generated
File diff suppressed because it is too large
Load diff
30
package.json
30
package.json
|
|
@ -15,29 +15,29 @@
|
|||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^16.2.12",
|
||||
"@angular/animations": "^17.2.3",
|
||||
"@angular/cdk": "^15.2.9",
|
||||
"@angular/common": "^16.2.12",
|
||||
"@angular/compiler": "^16.2.12",
|
||||
"@angular/core": "^16.2.12",
|
||||
"@angular/forms": "^16.2.12",
|
||||
"@angular/common": "^17.2.3",
|
||||
"@angular/compiler": "^17.2.3",
|
||||
"@angular/core": "^17.2.3",
|
||||
"@angular/forms": "^17.2.3",
|
||||
"@angular/material": "^15.2.9",
|
||||
"@angular/platform-browser": "^16.2.12",
|
||||
"@angular/platform-browser-dynamic": "^16.2.12",
|
||||
"@angular/router": "^16.2.12",
|
||||
"@angular/service-worker": "^16.2.12",
|
||||
"@angular/platform-browser": "^17.2.3",
|
||||
"@angular/platform-browser-dynamic": "^17.2.3",
|
||||
"@angular/router": "^17.2.3",
|
||||
"@angular/service-worker": "^17.2.3",
|
||||
"chart.js": "^3.7.0",
|
||||
"core-js": "^3.20.3",
|
||||
"ng2-charts": "^3.0.8",
|
||||
"rxjs": "^7.5.2",
|
||||
"tslib": "^2.3.1",
|
||||
"zone.js": "~0.13.3"
|
||||
"zone.js": "~0.14.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^16.2.12",
|
||||
"@angular/cli": "^16.2.12",
|
||||
"@angular/compiler-cli": "^16.2.12",
|
||||
"@angular/language-service": "^16.2.12",
|
||||
"@angular-devkit/build-angular": "^17.2.2",
|
||||
"@angular/cli": "^17.2.2",
|
||||
"@angular/compiler-cli": "^17.2.3",
|
||||
"@angular/language-service": "^17.2.3",
|
||||
"@types/jasmine": "~3.10.3",
|
||||
"@types/jasminewd2": "^2.0.10",
|
||||
"@types/node": "^17.0.10",
|
||||
|
|
@ -53,6 +53,6 @@
|
|||
"protractor": "^7.0.0",
|
||||
"ts-node": "~10.4.0",
|
||||
"tslint": "^6.1.3",
|
||||
"typescript": "4.9.5"
|
||||
"typescript": "5.3.3"
|
||||
}
|
||||
}
|
||||
|
|
@ -9,133 +9,126 @@ import { Router, ActivationEnd, ActivatedRoute } from '@angular/router';
|
|||
import { Actionable, isActionable } from './shared/actionable';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.css']
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.css']
|
||||
})
|
||||
export class AppComponent implements OnInit {
|
||||
public title = 'Twigs';
|
||||
public backEnabled = false;
|
||||
public user = new BehaviorSubject<User>(null);
|
||||
public online = window.navigator.onLine;
|
||||
public currentVersion = '';
|
||||
public actionable: Actionable;
|
||||
public loggedIn = false;
|
||||
public title = 'Twigs';
|
||||
public backEnabled = false;
|
||||
public user = new BehaviorSubject<User>(null);
|
||||
public online = window.navigator.onLine;
|
||||
public currentVersion = '';
|
||||
public actionable: Actionable;
|
||||
public loggedIn = false;
|
||||
|
||||
constructor(
|
||||
@Inject(TWIGS_SERVICE) private twigsService: TwigsService,
|
||||
private location: Location,
|
||||
private router: Router,
|
||||
private appRef: ApplicationRef,
|
||||
private updates: SwUpdate,
|
||||
private changeDetector: ChangeDetectorRef,
|
||||
private storage: Storage,
|
||||
@Inject(DOCUMENT) private document: Document
|
||||
) { }
|
||||
constructor(
|
||||
@Inject(TWIGS_SERVICE) private twigsService: TwigsService,
|
||||
private location: Location,
|
||||
private router: Router,
|
||||
private appRef: ApplicationRef,
|
||||
private updates: SwUpdate,
|
||||
private changeDetector: ChangeDetectorRef,
|
||||
private storage: Storage,
|
||||
@Inject(DOCUMENT) private document: Document
|
||||
) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
const unauthenticatedRoutes = [
|
||||
'',
|
||||
'/',
|
||||
'/login',
|
||||
'/register'
|
||||
]
|
||||
let auth = this.storage.getItem('Authorization');
|
||||
let userId = this.storage.getItem('userId');
|
||||
let savedUser = JSON.parse(this.storage.getItem('user')) as User;
|
||||
if (auth && auth.length == 255 && userId) {
|
||||
if (savedUser) {
|
||||
this.user.next(savedUser);
|
||||
}
|
||||
this.twigsService.getProfile(userId).then(fetchedUser => {
|
||||
this.storage.setItem('user', JSON.stringify(fetchedUser));
|
||||
this.user.next(fetchedUser);
|
||||
if (unauthenticatedRoutes.indexOf(this.location.path()) != -1) {
|
||||
//TODO: Save last opened budget and redirect to there instead of the main list
|
||||
this.router.navigateByUrl("/budgets");
|
||||
ngOnInit(): void {
|
||||
const unauthenticatedRoutes = [
|
||||
'',
|
||||
'/',
|
||||
'/login',
|
||||
'/register'
|
||||
]
|
||||
let auth = this.storage.getItem('Authorization');
|
||||
let userId = this.storage.getItem('userId');
|
||||
let savedUser = JSON.parse(this.storage.getItem('user')) as User;
|
||||
if (auth && auth.length == 255 && userId) {
|
||||
if (savedUser) {
|
||||
this.user.next(savedUser);
|
||||
}
|
||||
this.twigsService.getProfile(userId).then(fetchedUser => {
|
||||
this.storage.setItem('user', JSON.stringify(fetchedUser));
|
||||
this.user.next(fetchedUser);
|
||||
if (unauthenticatedRoutes.indexOf(this.location.path()) != -1) {
|
||||
//TODO: Save last opened budget and redirect to there instead of the main list
|
||||
this.router.navigateByUrl("/budgets");
|
||||
}
|
||||
});
|
||||
} else if (unauthenticatedRoutes.indexOf(this.location.path()) == -1) {
|
||||
this.router.navigateByUrl(`/login?redirect=${this.location.path()}`);
|
||||
}
|
||||
});
|
||||
} else if (unauthenticatedRoutes.indexOf(this.location.path()) == -1) {
|
||||
this.router.navigateByUrl(`/login?redirect=${this.location.path()}`);
|
||||
|
||||
this.updates.versionUpdates.subscribe(
|
||||
event => {
|
||||
if (event.type == "VERSION_READY") {
|
||||
console.log('current version is', event.currentVersion);
|
||||
console.log('available version is', event.latestVersion);
|
||||
// TODO: Prompt user to click something to update
|
||||
this.updates.activateUpdate();
|
||||
}
|
||||
},
|
||||
err => {
|
||||
|
||||
}
|
||||
);
|
||||
|
||||
const appIsStable$ = this.appRef.isStable.pipe(first(isStable => isStable === true));
|
||||
const everySixHours$ = interval(6 * 60 * 60 * 1000);
|
||||
const everySixHoursOnceAppIsStable$ = concat(appIsStable$, everySixHours$);
|
||||
everySixHoursOnceAppIsStable$.subscribe(() => this.updates.checkForUpdate());
|
||||
this.user.subscribe(
|
||||
user => {
|
||||
if (user) {
|
||||
this.loggedIn = true;
|
||||
} else {
|
||||
this.loggedIn = false;
|
||||
}
|
||||
}
|
||||
)
|
||||
const darkMode = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
this.handleDarkModeChanges(darkMode);
|
||||
darkMode.addEventListener('change', (e => this.handleDarkModeChanges(e)))
|
||||
}
|
||||
|
||||
this.updates.available.subscribe(
|
||||
event => {
|
||||
console.log('current version is', event.current);
|
||||
console.log('available version is', event.available);
|
||||
// TODO: Prompt user to click something to update
|
||||
this.updates.activateUpdate();
|
||||
},
|
||||
err => {
|
||||
getUsername(): String {
|
||||
return this.user.value.username;
|
||||
}
|
||||
|
||||
}
|
||||
);
|
||||
this.updates.activated.subscribe(
|
||||
event => {
|
||||
console.log('old version was', event.previous);
|
||||
console.log('new version is', event.current);
|
||||
},
|
||||
err => {
|
||||
goBack(): void {
|
||||
this.location.back();
|
||||
}
|
||||
|
||||
}
|
||||
);
|
||||
logout(): void {
|
||||
this.twigsService.logout().then(_ => {
|
||||
this.location.go('/');
|
||||
window.location.reload();
|
||||
});
|
||||
}
|
||||
|
||||
const appIsStable$ = this.appRef.isStable.pipe(first(isStable => isStable === true));
|
||||
const everySixHours$ = interval(6 * 60 * 60 * 1000);
|
||||
const everySixHoursOnceAppIsStable$ = concat(appIsStable$, everySixHours$);
|
||||
everySixHoursOnceAppIsStable$.subscribe(() => this.updates.checkForUpdate());
|
||||
this.user.subscribe(
|
||||
user => {
|
||||
if (user) {
|
||||
this.loggedIn = true;
|
||||
setActionable(actionable: Actionable): void {
|
||||
this.actionable = actionable;
|
||||
this.changeDetector.detectChanges();
|
||||
}
|
||||
|
||||
setBackEnabled(enabled: boolean): void {
|
||||
this.backEnabled = enabled;
|
||||
this.changeDetector.detectChanges();
|
||||
}
|
||||
|
||||
setTitle(title: string) {
|
||||
this.title = title;
|
||||
this.changeDetector.detectChanges();
|
||||
}
|
||||
|
||||
handleDarkModeChanges(darkMode: any) {
|
||||
const themeColor = this.document.getElementsByName('theme-color')[0] as HTMLMetaElement;
|
||||
let themeColorValue: string;
|
||||
if (darkMode.matches) {
|
||||
themeColorValue = '#333333';
|
||||
} else {
|
||||
this.loggedIn = false;
|
||||
themeColorValue = '#F1F1F1';
|
||||
}
|
||||
}
|
||||
)
|
||||
const darkMode = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
this.handleDarkModeChanges(darkMode);
|
||||
darkMode.addEventListener('change', (e => this.handleDarkModeChanges(e)))
|
||||
}
|
||||
|
||||
getUsername(): String {
|
||||
return this.user.value.username;
|
||||
}
|
||||
|
||||
goBack(): void {
|
||||
this.location.back();
|
||||
}
|
||||
|
||||
logout(): void {
|
||||
this.twigsService.logout().then(_ => {
|
||||
this.location.go('/');
|
||||
window.location.reload();
|
||||
});
|
||||
}
|
||||
|
||||
setActionable(actionable: Actionable): void {
|
||||
this.actionable = actionable;
|
||||
this.changeDetector.detectChanges();
|
||||
}
|
||||
|
||||
setBackEnabled(enabled: boolean): void {
|
||||
this.backEnabled = enabled;
|
||||
this.changeDetector.detectChanges();
|
||||
}
|
||||
|
||||
setTitle(title: string) {
|
||||
this.title = title;
|
||||
this.changeDetector.detectChanges();
|
||||
}
|
||||
|
||||
handleDarkModeChanges(darkMode: any) {
|
||||
const themeColor = this.document.getElementsByName('theme-color')[0] as HTMLMetaElement;
|
||||
let themeColorValue: string;
|
||||
if (darkMode.matches) {
|
||||
themeColorValue = '#333333';
|
||||
} else {
|
||||
themeColorValue = '#F1F1F1';
|
||||
themeColor.content = themeColorValue;
|
||||
}
|
||||
themeColor.content = themeColorValue;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue