-
Notifications
You must be signed in to change notification settings - Fork 44
/
pages.component.ts
124 lines (117 loc) · 3.35 KB
/
pages.component.ts
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
import { Component, OnInit } from '@angular/core';
import { NbMenuItem, NbSidebarService } from '@nebular/theme';
import { HumanizeDuration } from 'humanize-duration-ts';
import { ResponsiveSizeInfoRx } from 'ngx-responsive';
import { langService } from '../utils/format-duration';
import { ConnectionService } from './connection.service';
import { CurrentUserService } from './current-user.service';
import { MENU_ITEMS } from './pages-menu';
@Component({
selector: 'app-rng-pages',
template: `
<nb-layout [withScroll]="false" [responsive-window]="'pages'">
<nb-layout-header fixed>
<nb-actions>
<nb-action
style="padding: 0 0.5rem;"
icon="menu-outline"
(click)="toggleNav()"
*hideItBootstrap="['lg', 'xl']"
></nb-action>
<nb-action style="padding: 0 0.5rem;">
<img src="./assets/favicon.svg" style="height: 3rem;" />
</nb-action>
<nb-action style="padding: 0 0.5rem;"> <h3>RcloneNg</h3> </nb-action>
</nb-actions>
<button
nbButton
*showItSizes="{ min: 370 }"
size="tiny"
class="star"
onClick="window.open('https://github.com/ElonH/RcloneNg','_blank')"
>
<nb-icon icon="github"></nb-icon> Star
</button>
</nb-layout-header>
<nb-sidebar class="main-sidebar" tag="nav" [fixed]="mainSideBarFixed" state="collapsed">
<nb-menu [items]="menu"> </nb-menu>
</nb-sidebar>
<nb-layout-column class="colored-column-basic basic-contant" style="padding: 0;">
<router-outlet></router-outlet>
</nb-layout-column>
</nb-layout>
`,
styles: [
`
.main-sidebar {
z-index: 1039;
}
:host .star {
margin-left: auto;
text-transform: none;
}
`,
],
})
export class PagesComponent implements OnInit {
constructor(
private sidebarService: NbSidebarService,
private currUserService: CurrentUserService,
private rstService: ConnectionService,
private resp: ResponsiveSizeInfoRx
) {
resp.connect();
}
menu = MENU_ITEMS;
mainSideBarFixed = true;
currUser = '';
toggleNav() {
this.sidebarService.toggle(false, 'nav');
}
ngOnInit(): void {
this.resp.getResponsiveSize.subscribe(data => {
this.mainSideBarFixed = data === 'xs' || data === 'sm' || data === 'md';
if (!this.mainSideBarFixed) this.sidebarService.expand('nav');
else this.sidebarService.collapse('nav');
});
this.currUserService.currentUserFlow$.getSupersetOutput().subscribe(node => {
if (node[1].length !== 0) return;
const userGroup = this.menu[0];
this.currUser = node[0].name;
userGroup.title = this.currUser;
userGroup.children = node[0].users
.filter(x => x.name !== node[0].name) // disable show current user in child item
.map(
(x): NbMenuItem => {
return {
title: x.name,
icon: 'person',
link: 'user/login',
queryParams: {
name: x.name,
},
};
}
);
userGroup.children.push({
title: 'Manage',
icon: 'grid-outline',
link: 'user',
});
});
this.rstService.rst$.getOutput().subscribe(x => {
if (x[1].length !== 0) {
this.menu[0].title = this.currUser + ' ∞';
return;
}
const ForamtDuration = new HumanizeDuration(langService);
ForamtDuration.setOptions({
language: 'shortEn',
round: true,
units: ['m', 's', 'ms'],
largest: 2,
});
this.menu[0].title = `${this.currUser} ${ForamtDuration.humanize(x[0]['response-time'])}`;
});
}
}