This repository has been archived by the owner on Feb 6, 2024. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 179
/
app-root.tsx
110 lines (88 loc) · 4.27 KB
/
app-root.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
import {Build, Component, h} from '@stencil/core';
import {Subscription} from 'rxjs';
import {TimerService} from './services/timer/timer.service';
import {AccelerometerService} from './services/accelerometer/accelerometer.service';
import {ThemeService} from './services/theme/theme.service';
@Component({
tag: 'app-root',
styleUrl: 'app-root.scss'
})
export class AppRoot {
private timerService: TimerService;
private accelerometerService: AccelerometerService;
private themeSubscription: Subscription;
private themeService: ThemeService;
private domBodyClassList: DOMTokenList = document.body.classList;
constructor() {
this.timerService = TimerService.getInstance();
this.accelerometerService = AccelerometerService.getInstance();
this.themeService = ThemeService.getInstance();
}
async componentWillLoad() {
this.themeSubscription = this.themeService.watch().subscribe((dark: boolean) => {
this.updateDarkModePreferences(dark);
});
await this.themeService.initDarkModePreference();
}
async componentDidLoad() {
await this.timerService.restart();
if (Build.isBrowser) {
await this.accelerometerService.init();
}
}
componentDidUnload() {
this.timerService.destroy();
if (this.themeSubscription) {
this.themeSubscription.unsubscribe();
}
}
private updateDarkModePreferences(dark: boolean) {
dark ?
this.domBodyClassList.add('dark') :
this.domBodyClassList.remove('dark');
}
render() {
return (
<ion-app>
<ion-router useHash={false}>
<ion-route url="/" component="app-remote"></ion-route>
<ion-route url="/remote" component="app-remote"></ion-route>
<ion-route url="/remote/:room" component="app-remote"></ion-route>
<ion-route url="/timer" component="app-timer"></ion-route>
<ion-route url="/settings" component="app-settings"></ion-route>
<ion-route url="/about" component="app-about"></ion-route>
</ion-router>
<ion-menu side="start" type="overlay" swipeGesture={false} content-id="menu-content">
<ion-header>
<ion-toolbar>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-menu-toggle autoHide={false}>
<ion-list class="ion-margin-top">
<ion-item detail={false} href="/" routerDirection="forward">
<ion-label class="ion-padding-start ion-padding-end ion-text-uppercase"><ion-icon name="phone-portrait"></ion-icon> Remote</ion-label>
</ion-item>
<ion-item detail={false} href="/timer" routerDirection="forward">
<ion-label class="ion-padding-start ion-padding-end ion-text-uppercase"><ion-icon name="stopwatch"></ion-icon> Timer</ion-label>
</ion-item>
<ion-item detail={false} href="/settings" routerDirection="forward">
<ion-label class="ion-padding-start ion-padding-end ion-text-uppercase"><ion-icon name="settings"></ion-icon> Settings</ion-label>
</ion-item>
<ion-item detail={false}>
<ion-label class="ion-padding-start ion-padding-end ion-text-uppercase">
<a href="https://deckdeckgo.com" target="_blank" class="deckdeckgo">
<app-logo></app-logo>
<span>DeckDeckGo</span>
</a>
</ion-label>
</ion-item>
</ion-list>
</ion-menu-toggle>
</ion-content>
</ion-menu>
<ion-nav id="menu-content"/>
</ion-app>
);
}
}