wbrawner/twigs-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update to Angular 17

Browse source
This commit is contained in:
William Brawner 2024-03-03 10:42:05 -07:00
parent d0150def51
commit 0442b6b3d6
4 changed files with 3509 additions and 3586 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
angular.json
View file

@ -82,21 +82,21 @@
"serve": { "serve": {
"builder": "@angular-devkit/build-angular:dev-server", "builder": "@angular-devkit/build-angular:dev-server",
"options": { "options": {
"browserTarget": "twigs:build" "buildTarget": "twigs:build"
}, },
"configurations": { "configurations": {
"production": { "production": {
"browserTarget": "twigs:build:production" "buildTarget": "twigs:build:production"
}, },
"codeserver": { "codeserver": {
"browserTarget": "twigs:build:codeserver" "buildTarget": "twigs:build:codeserver"
} }
} }
}, },
"extract-i18n": { "extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n", "builder": "@angular-devkit/build-angular:extract-i18n",
"options": { "options": {
"browserTarget": "twigs:build" "buildTarget": "twigs:build"
} }
}, },
"test": { "test": {

6832
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

30
package.json
View file

@ -15,29 +15,29 @@
}, },
"private": true, "private": true,
"dependencies": { "dependencies": {
"@angular/animations": "^16.2.12", "@angular/animations": "^17.2.3",
"@angular/cdk": "^15.2.9", "@angular/cdk": "^15.2.9",
"@angular/common": "^16.2.12", "@angular/common": "^17.2.3",
"@angular/compiler": "^16.2.12", "@angular/compiler": "^17.2.3",
"@angular/core": "^16.2.12", "@angular/core": "^17.2.3",
"@angular/forms": "^16.2.12", "@angular/forms": "^17.2.3",
"@angular/material": "^15.2.9", "@angular/material": "^15.2.9",
"@angular/platform-browser": "^16.2.12", "@angular/platform-browser": "^17.2.3",
"@angular/platform-browser-dynamic": "^16.2.12", "@angular/platform-browser-dynamic": "^17.2.3",
"@angular/router": "^16.2.12", "@angular/router": "^17.2.3",
"@angular/service-worker": "^16.2.12", "@angular/service-worker": "^17.2.3",
"chart.js": "^3.7.0", "chart.js": "^3.7.0",
"core-js": "^3.20.3", "core-js": "^3.20.3",
"ng2-charts": "^3.0.8", "ng2-charts": "^3.0.8",
"rxjs": "^7.5.2", "rxjs": "^7.5.2",
"tslib": "^2.3.1", "tslib": "^2.3.1",
"zone.js": "~0.13.3" "zone.js": "~0.14.4"
}, },
"devDependencies": { "devDependencies": {
"@angular-devkit/build-angular": "^16.2.12", "@angular-devkit/build-angular": "^17.2.2",
"@angular/cli": "^16.2.12", "@angular/cli": "^17.2.2",
"@angular/compiler-cli": "^16.2.12", "@angular/compiler-cli": "^17.2.3",
"@angular/language-service": "^16.2.12", "@angular/language-service": "^17.2.3",
"@types/jasmine": "~3.10.3", "@types/jasmine": "~3.10.3",
"@types/jasminewd2": "^2.0.10", "@types/jasminewd2": "^2.0.10",
"@types/node": "^17.0.10", "@types/node": "^17.0.10",
@ -53,6 +53,6 @@
"protractor": "^7.0.0", "protractor": "^7.0.0",
"ts-node": "~10.4.0", "ts-node": "~10.4.0",
"tslint": "^6.1.3", "tslint": "^6.1.3",
"typescript": "4.9.5" "typescript": "5.3.3"
} }
} }

225
src/app/app.component.ts
View file

@ -9,133 +9,126 @@ import { Router, ActivationEnd, ActivatedRoute } from '@angular/router';
import { Actionable, isActionable } from './shared/actionable'; import { Actionable, isActionable } from './shared/actionable';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
templateUrl: './app.component.html', templateUrl: './app.component.html',
styleUrls: ['./app.component.css'] styleUrls: ['./app.component.css']
}) })
export class AppComponent implements OnInit { export class AppComponent implements OnInit {
public title = 'Twigs'; public title = 'Twigs';
public backEnabled = false; public backEnabled = false;
public user = new BehaviorSubject<User>(null); public user = new BehaviorSubject<User>(null);
public online = window.navigator.onLine; public online = window.navigator.onLine;
public currentVersion = ''; public currentVersion = '';
public actionable: Actionable; public actionable: Actionable;
public loggedIn = false; public loggedIn = false;
constructor( constructor(
@Inject(TWIGS_SERVICE) private twigsService: TwigsService, @Inject(TWIGS_SERVICE) private twigsService: TwigsService,
private location: Location, private location: Location,
private router: Router, private router: Router,
private appRef: ApplicationRef, private appRef: ApplicationRef,
private updates: SwUpdate, private updates: SwUpdate,
private changeDetector: ChangeDetectorRef, private changeDetector: ChangeDetectorRef,
private storage: Storage, private storage: Storage,
@Inject(DOCUMENT) private document: Document @Inject(DOCUMENT) private document: Document
) { } ) { }
ngOnInit(): void { ngOnInit(): void {
const unauthenticatedRoutes = [ const unauthenticatedRoutes = [
'', '',
'/', '/',
'/login', '/login',
'/register' '/register'
] ]
let auth = this.storage.getItem('Authorization'); let auth = this.storage.getItem('Authorization');
let userId = this.storage.getItem('userId'); let userId = this.storage.getItem('userId');
let savedUser = JSON.parse(this.storage.getItem('user')) as User; let savedUser = JSON.parse(this.storage.getItem('user')) as User;
if (auth && auth.length == 255 && userId) { if (auth && auth.length == 255 && userId) {
if (savedUser) { if (savedUser) {
this.user.next(savedUser); this.user.next(savedUser);
} }
this.twigsService.getProfile(userId).then(fetchedUser => { this.twigsService.getProfile(userId).then(fetchedUser => {
this.storage.setItem('user', JSON.stringify(fetchedUser)); this.storage.setItem('user', JSON.stringify(fetchedUser));
this.user.next(fetchedUser); this.user.next(fetchedUser);
if (unauthenticatedRoutes.indexOf(this.location.path()) != -1) { if (unauthenticatedRoutes.indexOf(this.location.path()) != -1) {
//TODO: Save last opened budget and redirect to there instead of the main list //TODO: Save last opened budget and redirect to there instead of the main list
this.router.navigateByUrl("/budgets"); 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.updates.versionUpdates.subscribe(
this.router.navigateByUrl(`/login?redirect=${this.location.path()}`); 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( getUsername(): String {
event => { return this.user.value.username;
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 => {
} goBack(): void {
); this.location.back();
this.updates.activated.subscribe( }
event => {
console.log('old version was', event.previous);
console.log('new version is', event.current);
},
err => {
} logout(): void {
); this.twigsService.logout().then(_ => {
this.location.go('/');
window.location.reload();
});
}
const appIsStable$ = this.appRef.isStable.pipe(first(isStable => isStable === true)); setActionable(actionable: Actionable): void {
const everySixHours$ = interval(6 * 60 * 60 * 1000); this.actionable = actionable;
const everySixHoursOnceAppIsStable$ = concat(appIsStable$, everySixHours$); this.changeDetector.detectChanges();
everySixHoursOnceAppIsStable$.subscribe(() => this.updates.checkForUpdate()); }
this.user.subscribe(
user => { setBackEnabled(enabled: boolean): void {
if (user) { this.backEnabled = enabled;
this.loggedIn = true; 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 { } else {
this.loggedIn = false; themeColorValue = '#F1F1F1';
} }
} themeColor.content = themeColorValue;
)
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;
}
} }