OpenSlides/client/src/app/site/site.component.ts

188 lines
5.7 KiB
TypeScript
Raw Normal View History

2018-08-24 13:05:03 +02:00
import { Component, OnInit, ViewChild } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { AuthService } from 'app/core/services/auth.service';
import { OperatorService } from 'app/core/services/operator.service';
2018-08-29 13:21:25 +02:00
import { TranslateService } from '@ngx-translate/core';
import { BaseComponent } from 'app/base.component';
import { pageTransition, navItemAnim } from 'app/shared/animations';
import { MatDialog, MatSidenav } from '@angular/material';
import { ViewportService } from '../core/services/viewport.service';
import { MainMenuService } from '../core/services/main-menu.service';
import { OpenSlidesStatusService } from 'app/core/services/openslides-status.service';
import { TimeTravelService } from 'app/core/services/time-travel.service';
@Component({
selector: 'os-site',
animations: [pageTransition, navItemAnim],
templateUrl: './site.component.html',
styleUrls: ['./site.component.scss']
})
export class SiteComponent extends BaseComponent implements OnInit {
/**
* HTML element of the side panel
*/
2018-09-18 18:27:14 +02:00
@ViewChild('sideNav')
public sideNav: MatSidenav;
/**
* Get the username from the operator (should be known already)
*/
public username: string;
/**
* is the user logged in, or the anonymous is active.
*/
public isLoggedIn: boolean;
2018-08-07 12:30:21 +02:00
/**
* Holds the coordinates where a swipe gesture was used
*/
private swipeCoord?: [number, number];
/**
* Holds the time when the user was swiping
*/
private swipeTime?: number;
/**
* Constructor
*
* @param authService
* @param route
* @param operator
* @param vp
* @param translate
* @param dialog
* @param mainMenuService
* @param OSStatus
* @param timeTravel
*/
2018-08-29 13:21:25 +02:00
public constructor(
2018-06-25 17:03:52 +02:00
private authService: AuthService,
2018-09-18 18:27:14 +02:00
private router: Router,
public operator: OperatorService,
public vp: ViewportService,
2018-08-07 12:30:21 +02:00
public translate: TranslateService,
public dialog: MatDialog,
public mainMenuService: MainMenuService,
public OSStatus: OpenSlidesStatusService,
public timeTravel: TimeTravelService
) {
super();
this.operator.getObservable().subscribe(user => {
if (user) {
2018-11-09 09:24:38 +01:00
this.username = user.short_name;
} else {
this.username = translate.instant('Guest');
}
this.isLoggedIn = !!user;
});
}
2018-06-25 17:03:52 +02:00
/**
* Initialize the site component
*/
public ngOnInit(): void {
this.vp.checkForChange();
// observe the mainMenuService to receive toggle-requests
this.mainMenuService.toggleMenuSubject.subscribe((value: void) => this.toggleSideNav());
2018-08-22 16:03:49 +02:00
// get a translation via code: use the translation service
2018-08-16 17:03:39 +02:00
// this.translate.get('Motions').subscribe((res: string) => {
2018-08-22 16:03:49 +02:00
// console.log('translation of motions in the target language: ' + res);
// });
this.router.events.subscribe(event => {
// Scroll to top if accessing a page, not via browser history stack
if (event instanceof NavigationEnd) {
const contentContainer = document.querySelector('.mat-sidenav-content');
contentContainer.scrollTo(0, 0);
}
});
2018-08-24 13:05:03 +02:00
}
/**
* Closes the sidenav in mobile view
*/
public toggleSideNav(): void {
if (this.vp.isMobile) {
this.sideNav.toggle();
}
}
/**
* Let the user change the language
* @param lang the desired language (en, de, cs, ...)
*/
2018-08-29 13:21:25 +02:00
public selectLang(selection: string): void {
2018-08-07 12:30:21 +02:00
this.translate.use(selection).subscribe();
}
2018-08-07 12:30:21 +02:00
/**
* Get the name of a Language by abbreviation.
*/
2018-08-29 13:21:25 +02:00
public getLangName(abbreviation: string): string {
2018-08-07 12:30:21 +02:00
if (abbreviation === 'en') {
return this.translate.instant('English');
} else if (abbreviation === 'de') {
return this.translate.instant('German');
} else if (abbreviation === 'cs') {
return this.translate.instant('Czech');
2018-08-07 12:30:21 +02:00
}
2018-06-25 17:03:52 +02:00
}
// TODO: Implement this
2018-09-18 18:27:14 +02:00
public editProfile(): void {
if (this.operator.user) {
this.router.navigate([`./users/${this.operator.user.id}`]);
}
}
/**
* Redirects to the change password component
*/
public changePassword(): void {
this.router.navigate([`./users/password`]);
}
/**
* Function to log out the current user
*/
public logout(): void {
this.authService.logout();
}
/**
* Handle swipes and gestures
*/
public swipe(e: TouchEvent, when: string): void {
const coord: [number, number] = [e.changedTouches[0].pageX, e.changedTouches[0].pageY];
const time = new Date().getTime();
if (when === 'start') {
this.swipeCoord = coord;
this.swipeTime = time;
} else if (when === 'end') {
const direction = [coord[0] - this.swipeCoord[0], coord[1] - this.swipeCoord[1]];
const duration = time - this.swipeTime;
// definition of a "swipe right" gesture to move in the navigation.
// Required mobile view
// works anywhere on the screen, but could be limited
// to the left side of the screen easily if required)
if (
duration < 1000 &&
Math.abs(direction[0]) > 30 && // swipe length to be detected
Math.abs(direction[0]) > Math.abs(direction[1] * 3) && // 30° should be "horizontal enough"
direction[0] > 0 // swipe left to right
) {
this.toggleSideNav();
}
}
}
}