Skip to content

Commit

Permalink
Merge pull request #154 from computas/standalone-components
Browse files Browse the repository at this point in the history
Standalone components
  • Loading branch information
eTallang authored Jun 25, 2024
2 parents f2c7283 + 8fa66d5 commit 71d3008
Show file tree
Hide file tree
Showing 29 changed files with 459 additions and 448 deletions.
51 changes: 31 additions & 20 deletions angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,40 @@
"version": 1,
"cli": {
"packageManager": "bun",
"schematicCollections": [
"@angular-eslint/schematics"
]
"schematicCollections": ["@angular-eslint/schematics"]
},
"newProjectRoot": "projects",
"projects": {
"tekniskmuseum": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
"style": "scss",
"skipTests": true,
"standalone": true
},
"@schematics/angular:class": {
"skipTests": true
},
"@schematics/angular:directive": {
"skipTests": true,
"standalone": true
},
"@schematics/angular:guard": {
"skipTests": true
},
"@schematics/angular:interceptor": {
"skipTests": true
},
"@schematics/angular:pipe": {
"skipTests": true,
"standalone": true
},
"@schematics/angular:resolver": {
"skipTests": true
},
"@schematics/angular:service": {
"skipTests": true
}
},
"root": "",
Expand All @@ -29,20 +52,11 @@
},
"index": "src/index.html",
"browser": "src/main.ts",
"polyfills": [
"zone.js"
],
"polyfills": ["zone.js"],
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets",
"src/manifest.webmanifest"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
],
"assets": ["src/favicon.ico", "src/assets", "src/manifest.webmanifest"],
"styles": ["./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "src/styles.scss"],
"scripts": []
},
"configurations": {
Expand Down Expand Up @@ -116,10 +130,7 @@
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": [
"src/**/*.ts",
"src/**/*.html"
]
"lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
}
}
}
Expand Down
7 changes: 4 additions & 3 deletions src/app/admin/admin.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,10 @@ import { LoginService } from './login.service';
import { MatSnackBar } from '@angular/material/snack-bar';

@Component({
selector: 'app-admin',
templateUrl: './admin.component.html',
styleUrls: ['./admin.component.scss'],
selector: 'app-admin',
templateUrl: './admin.component.html',
styleUrls: ['./admin.component.scss'],
standalone: true,
})
export class AdminComponent {
constructor(private router: Router, private loginService: LoginService, private _snackBar: MatSnackBar) {}
Expand Down
24 changes: 11 additions & 13 deletions src/app/admin/auth-guard.ts
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { inject } from '@angular/core';
import { CanActivateFn, Router } from '@angular/router';
import { LoginService } from './login.service';
import { CanActivate } from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {
constructor(private loginService: LoginService, private router: Router) {}
canActivate() {
if (!this.loginService.isLoggedIn()) {
this.router.navigate(['admin']);
return false;
}
return true;
export const authGuard: CanActivateFn = () => {
const loginService = inject(LoginService);
const router = inject(Router);

if (!loginService.isLoggedIn()) {
router.navigate(['admin']);
return false;
}
}
return true;
};
15 changes: 11 additions & 4 deletions src/app/admin/dialog-template/dialog-template.component.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MAT_DIALOG_DATA, MatDialogContent, MatDialogTitle } from '@angular/material/dialog';
import { CdkScrollable } from '@angular/cdk/scrolling';

export interface DialogData {
iterationName: string;
Expand All @@ -8,9 +9,15 @@ export interface DialogData {
}

@Component({
selector: 'app-dialog-template',
templateUrl: './dialog-template.component.html',
styleUrls: ['./dialog-template.component.scss'],
selector: 'app-dialog-template',
templateUrl: './dialog-template.component.html',
styleUrls: ['./dialog-template.component.scss'],
standalone: true,
imports: [
CdkScrollable,
MatDialogContent,
MatDialogTitle,
],
})
export class DialogTemplateComponent {
constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {}
Expand Down
7 changes: 4 additions & 3 deletions src/app/admin/info-dialog/info-dialog.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,10 @@ export interface DialogData {
}

@Component({
selector: 'app-info-dialog',
templateUrl: './info-dialog.component.html',
styleUrls: ['./info-dialog.component.scss'],
selector: 'app-info-dialog',
templateUrl: './info-dialog.component.html',
styleUrls: ['./info-dialog.component.scss'],
standalone: true,
})
export class InfoDialogComponent {
constructor(public dialog: MatDialog) {}
Expand Down
9 changes: 6 additions & 3 deletions src/app/admin/info/info.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,14 @@ import { LoginService } from '../login.service';
import { MatSnackBar } from '@angular/material/snack-bar';
import { InfoDialogComponent } from './../info-dialog/info-dialog.component';
import { PairingService } from '../../game/game-multiplayer/services/pairing.service';
import { MatButton } from '@angular/material/button';

@Component({
selector: 'app-info',
templateUrl: './info.component.html',
styleUrls: ['./info.component.scss'],
selector: 'app-info',
templateUrl: './info.component.html',
styleUrls: ['./info.component.scss'],
standalone: true,
imports: [MatButton],
})
export class InfoComponent {
datasetString = 'Nullstill treningssett til originalen';
Expand Down
130 changes: 66 additions & 64 deletions src/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -1,64 +1,66 @@
import { Component, HostListener, OnInit } from '@angular/core';
import { Subject } from 'rxjs';
import { Router } from '@angular/router';
import { MatDialog } from '@angular/material/dialog';
import { RouterOutlet } from '@angular/router';

import { IdleTimeoutComponent } from './idle-timeout/idle-timeout.component';
import { routeTransitionAnimations } from './route-transition-animations';
import { environment } from '../environments/environment';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
animations: [routeTransitionAnimations],
})
export class AppComponent implements OnInit {
title = 'Teknisk Museum';

userActivity = 0;
userInactive = new Subject<any>();

isDialogOpen = false;
inactivityTime = environment.inactivityTime;

constructor(private router: Router, public dialog: MatDialog) {}

ngOnInit(): void {
this.setDialogTimeout();
this.userInactive.subscribe(() => {
if (this.router.url !== '/' && this.router.url !== '/admin') {
this.openDialog();
}
});
}

openDialog() {
if (!this.isDialogOpen) {
this.dialog
.open(IdleTimeoutComponent)
.afterClosed()
.subscribe(() => {
this.isDialogOpen = false;
});
this.isDialogOpen = true;
}
}

setDialogTimeout() {
this.userActivity = window.setTimeout(() => this.userInactive.next(undefined), this.inactivityTime);
}

prepareRoute(outlet: RouterOutlet) {
const animationState = 'animationState';
return outlet && outlet.activatedRouteData && outlet.activatedRouteData[animationState];
}

@HostListener('window:mousemove')
@HostListener('document:touchmove')
refreshUserState() {
clearTimeout(this.userActivity);
this.setDialogTimeout();
}
}
import { Component, HostListener, OnInit } from '@angular/core';
import { Subject } from 'rxjs';
import { Router } from '@angular/router';
import { MatDialog } from '@angular/material/dialog';
import { RouterOutlet } from '@angular/router';

import { IdleTimeoutComponent } from './idle-timeout/idle-timeout.component';
import { routeTransitionAnimations } from './route-transition-animations';
import { environment } from '../environments/environment';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
animations: [routeTransitionAnimations],
standalone: true,
imports: [RouterOutlet],
})
export class AppComponent implements OnInit {
title = 'Teknisk Museum';

userActivity = 0;
userInactive = new Subject<any>();

isDialogOpen = false;
inactivityTime = environment.inactivityTime;

constructor(private router: Router, public dialog: MatDialog) {}

ngOnInit(): void {
this.setDialogTimeout();
this.userInactive.subscribe(() => {
if (this.router.url !== '/' && this.router.url !== '/admin') {
this.openDialog();
}
});
}

openDialog() {
if (!this.isDialogOpen) {
this.dialog
.open(IdleTimeoutComponent)
.afterClosed()
.subscribe(() => {
this.isDialogOpen = false;
});
this.isDialogOpen = true;
}
}

setDialogTimeout() {
this.userActivity = window.setTimeout(() => this.userInactive.next(undefined), this.inactivityTime);
}

prepareRoute(outlet: RouterOutlet) {
const animationState = 'animationState';
return outlet && outlet.activatedRouteData && outlet.activatedRouteData[animationState];
}

@HostListener('window:mousemove')
@HostListener('document:touchmove')
refreshUserState() {
clearTimeout(this.userActivity);
this.setDialogTimeout();
}
}
52 changes: 0 additions & 52 deletions src/app/app.module.ts

This file was deleted.

16 changes: 13 additions & 3 deletions src/app/game/game-draw/game-draw.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,21 @@ import { DrawingService } from './services/drawing.service';
import { MultiplayerService, GAMELEVEL } from '../game-multiplayer/services/multiplayer.service';
import { Result } from '../../shared/models/interfaces';
import { SoundService } from './services/sound.service';
import { NgIf, UpperCasePipe } from '@angular/common';
import { MatIconButton } from '@angular/material/button';
import { MatIcon } from '@angular/material/icon';

@Component({
selector: 'app-drawing',
templateUrl: './game-draw.component.html',
styleUrls: ['./game-draw.component.scss'],
selector: 'app-drawing',
templateUrl: './game-draw.component.html',
styleUrls: ['./game-draw.component.scss'],
standalone: true,
imports: [
MatIcon,
MatIconButton,
NgIf,
UpperCasePipe,
],
})
export class GameDrawComponent implements OnInit, OnDestroy {
canvas = viewChild.required<ElementRef<HTMLCanvasElement>>('canvas');
Expand Down
Loading

0 comments on commit 71d3008

Please sign in to comment.