3 |
4 |
7 |
60 |
4 | 
5 | TeamMapper
6 |
7 |
8 |
12 |
13 |
14 | check
15 |
16 | {{
17 | 'PAGES.ABOUT.INTRODUCTION.APPLICATION_PROPERTIES.0' | translate
18 | }}
19 |
20 |
21 |
22 | check
23 |
24 | {{
25 | 'PAGES.ABOUT.INTRODUCTION.APPLICATION_PROPERTIES.1' | translate
26 | }}
27 |
28 |
29 |
30 | check
31 |
32 | {{
33 | 'PAGES.ABOUT.INTRODUCTION.APPLICATION_PROPERTIES.2' | translate
34 | }}
35 |
36 |
37 |
38 | check
39 |
40 | {{
41 | 'PAGES.ABOUT.INTRODUCTION.APPLICATION_PROPERTIES.3' | translate
42 | }}
43 |
44 |
45 |
46 | check
47 |
48 | {{
49 | 'PAGES.ABOUT.INTRODUCTION.APPLICATION_PROPERTIES.4' | translate
50 | }}
51 |
52 |
53 |
54 |
55 |
56 |
59 | 9 | {{ 'PAGES.ABOUT.INTRODUCTION.APPLICATION_DESCRIPTION' | translate }} 10 |
11 |12 |
61 | 
62 |
63 |
62 |
2 |
6 |
64 |
65 |
67 |
--------------------------------------------------------------------------------
/teammapper-frontend/src/app/modules/about/pages/about/about.component.scss:
--------------------------------------------------------------------------------
1 | @use '@angular/material' as mat;
2 | @use 'src/theme.scss';
3 |
4 | div.about {
5 | height: 100%;
6 |
7 | section {
8 | position: relative;
9 | }
10 |
11 | section:nth-child(odd) {
12 | background-color: white;
13 | }
14 |
15 | section:nth-child(even) {
16 | background-color: #fafafa;
17 | }
18 |
19 | section.about-section {
20 | > div {
21 | padding: 20px 15px 40px 15px;
22 |
23 | h1 {
24 | color: mat.m2-get-color-from-palette(theme.$app-primary);
25 | }
26 |
27 | div.cards {
28 | display: flex;
29 | flex-wrap: wrap;
30 | align-items: center;
31 |
32 | mat-card {
33 | flex: 1;
34 | min-width: 200px;
35 | margin: 10px;
36 |
37 | fa-icon {
38 | color: #565656;
39 | }
40 |
41 | ::ng-deep mat-card-header > div {
42 | margin-left: 0 !important;
43 | }
44 | }
45 | }
46 |
47 | mat-list {
48 | margin-top: -10px;
49 |
50 | mat-list-item {
51 | height: 40px;
52 |
53 | a {
54 | color: mat.m2-get-color-from-palette(theme.$app-primary);
55 | text-decoration: none;
56 | padding-left: 10px;
57 | }
58 | }
59 | }
60 | }
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/teammapper-frontend/src/app/modules/about/pages/about/about.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import {
3 | faBrain,
4 | faChartLine,
5 | faCheck,
6 | faCogs,
7 | faHeart,
8 | faRocket,
9 | } from '@fortawesome/free-solid-svg-icons';
10 |
11 | @Component({
12 | selector: 'teammapper-about',
13 | templateUrl: './about.component.html',
14 | styleUrls: ['./about.component.scss'],
15 | standalone: false,
16 | })
17 | export class AboutComponent {
18 | public faBrain = faBrain;
19 | public faRocket = faRocket;
20 | public faHeart = faHeart;
21 | public faChartLine = faChartLine;
22 | public faCogs = faCogs;
23 | public faCheck = faCheck;
24 | }
25 |
--------------------------------------------------------------------------------
/teammapper-frontend/src/app/modules/application/application-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { RouterModule, Routes } from '@angular/router';
3 | import { ApplicationComponent } from './pages/application/application.component';
4 | import { SettingsComponent } from './pages/settings/settings.component';
5 | import { ShortcutsComponent } from './pages/shortcuts/shortcuts.component';
6 |
7 | const routes: Routes = [
8 | {
9 | path: '',
10 | component: ApplicationComponent,
11 | },
12 | {
13 | path: 'settings',
14 | component: SettingsComponent,
15 | },
16 | {
17 | path: 'shortcuts',
18 | component: ShortcutsComponent,
19 | },
20 | ];
21 |
22 | @NgModule({
23 | imports: [RouterModule.forChild(routes)],
24 | exports: [RouterModule],
25 | })
26 | export class ApplicationRoutingModule {}
27 |
--------------------------------------------------------------------------------
/teammapper-frontend/src/app/modules/application/application.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { ApplicationRoutingModule } from './application-routing.module';
3 | import { SharedModule } from '../../shared/shared.module';
4 | import { MatTabsModule } from '@angular/material/tabs';
5 | import { ColorPanelsComponent } from './components/color-panels/color-panels.component';
6 | import { SliderPanelsComponent } from './components/slider-panels/slider-panels.component';
7 | import { FloatingButtonsComponent } from './components/floating-buttons/floating-buttons.component';
8 | import { MapComponent } from './components/map/map.component';
9 | import { ApplicationComponent } from './pages/application/application.component';
10 | import { SettingsComponent } from './pages/settings/settings.component';
11 | import { ShortcutsComponent } from './pages/shortcuts/shortcuts.component';
12 | import { ToolbarComponent } from './components/toolbar/toolbar.component';
13 | import { ClientColorPanelsComponent } from './components/client-color-panels/client-color-panels.component';
14 | import { ColorPickerModule } from 'ngx-color-picker';
15 | import { DialogAboutComponent } from './components/dialog-about/dialog-about.component';
16 | import { DialogShareComponent } from './components/dialog-share/dialog-share.component';
17 | import { DialogConnectionInfoComponent } from './components/dialog-connection-info/dialog-connection-info.component';
18 | import { DialogPictogramsComponent } from './components/dialog-pictograms/dialog-pictograms.component';
19 | import { MatMenuModule } from '@angular/material/menu';
20 | import { MatDialogModule } from '@angular/material/dialog';
21 | import { MatGridListModule } from '@angular/material/grid-list';
22 |
23 | @NgModule({
24 | imports: [
25 | SharedModule,
26 | MatMenuModule,
27 | MatTabsModule,
28 | ApplicationRoutingModule,
29 | ColorPickerModule,
30 | MatDialogModule,
31 | MatGridListModule,
32 | ],
33 | declarations: [
34 | ApplicationComponent,
35 | SettingsComponent,
36 | ShortcutsComponent,
37 | ClientColorPanelsComponent,
38 | ColorPanelsComponent,
39 | FloatingButtonsComponent,
40 | MapComponent,
41 | SliderPanelsComponent,
42 | ToolbarComponent,
43 | DialogConnectionInfoComponent,
44 | DialogShareComponent,
45 | DialogPictogramsComponent,
46 | DialogAboutComponent,
47 | ],
48 | })
49 | export class ApplicationModule {}
50 |
--------------------------------------------------------------------------------
/teammapper-frontend/src/app/modules/application/components/client-color-panels/client-color-panels.component.html:
--------------------------------------------------------------------------------
1 |
7 |
8 |
11 |
63 |
8 |
11 | {{ 'PAGES.ABOUT.SECTIONS.0.SUBTITLE' | translate }}
12 |
13 |
14 |
15 |
16 | {{ 'PAGES.ABOUT.SECTIONS.0.CARDS.0.TITLE' | translate }}
17 |
18 |
19 | 
23 |
24 |
28 |
29 |
30 |
31 |
32 | {{ 'PAGES.ABOUT.SECTIONS.0.CARDS.1.TITLE' | translate }}
33 |
34 |
35 | 
39 |
40 |
44 |
45 |
46 |
47 |
48 | {{ 'PAGES.ABOUT.SECTIONS.0.CARDS.2.TITLE' | translate }}
49 |
50 |
51 | 
55 |
56 |
60 |
61 |
62 |
23 | 25 | {{ 'PAGES.ABOUT.SECTIONS.0.CARDS.0.CONTENT' | translate }} 26 |
27 |
39 | 41 | {{ 'PAGES.ABOUT.SECTIONS.0.CARDS.1.CONTENT' | translate }} 42 |
43 |
55 | 57 | {{ 'PAGES.ABOUT.SECTIONS.0.CARDS.2.CONTENT' | translate }} 58 |
59 |
2 |
3 |
4 |
12 |
--------------------------------------------------------------------------------
/teammapper-frontend/src/app/modules/application/components/client-color-panels/client-color-panels.component.scss:
--------------------------------------------------------------------------------
1 | div.client-colors-panel {
2 | div.panel {
3 | z-index: 3;
4 | position: absolute;
5 | bottom: 5px;
6 | left: 15px;
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/teammapper-frontend/src/app/modules/application/components/client-color-panels/client-color-panels.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ElementRef, ViewChild } from '@angular/core';
2 | import { MapSyncService } from 'src/app/core/services/map-sync/map-sync.service';
3 | import { Observable } from 'rxjs';
4 |
5 | @Component({
6 | selector: 'teammapper-client-colors-panel',
7 | templateUrl: './client-color-panels.component.html',
8 | styleUrls: ['./client-color-panels.component.scss'],
9 | standalone: false,
10 | })
11 | export class ClientColorPanelsComponent {
12 | @ViewChild('background') public background: ElementRef;
13 |
14 | public clientColors: Observable
5 |
6 | account_circle
9 |
10 |
11 |
2 |
3 |
4 |
63 |
--------------------------------------------------------------------------------
/teammapper-frontend/src/app/modules/application/components/color-panels/color-panels.component.scss:
--------------------------------------------------------------------------------
1 | div.colors-panel {
2 | div.background {
3 | z-index: 2;
4 | position: absolute;
5 | visibility: hidden;
6 | top: 0;
7 | left: 0;
8 | height: 100%;
9 | width: 100%;
10 | }
11 |
12 | div.panel {
13 | z-index: 3;
14 | position: absolute;
15 | right: 20px;
16 | top: 44%;
17 |
18 | input {
19 | touch-action: manipulation;
20 | cursor: pointer;
21 | box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.3),
22 | 0 2px 2px 0 rgba(0, 0, 0, 0.18), 0 1px 5px 0 rgba(0, 0, 0, 0.16);
23 | display: block;
24 | margin-bottom: 8px;
25 | font-size: 0;
26 | padding: 16px;
27 | border: 0;
28 | border-radius: 30px;
29 | user-select: none;
30 |
31 | &:disabled {
32 | cursor: default;
33 | }
34 | }
35 |
36 | input:focus {
37 | outline: none;
38 | }
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/teammapper-frontend/src/app/modules/application/components/color-panels/color-panels.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
2 | import { ExportNodeProperties } from '@mmp/map/types';
3 | import { MmpService } from '../../../../core/services/mmp/mmp.service';
4 |
5 | @Component({
6 | selector: 'teammapper-colors-panel',
7 | templateUrl: './color-panels.component.html',
8 | styleUrls: ['./color-panels.component.scss'],
9 | standalone: false,
10 | })
11 | export class ColorPanelsComponent implements OnInit {
12 | @Input() public node: ExportNodeProperties;
13 | @Input() public editDisabled: boolean;
14 |
15 | @ViewChild('background') public background: ElementRef;
16 |
17 | public options: any;
18 |
19 | constructor(public mmpService: MmpService) {}
20 |
21 | ngOnInit() {
22 | this.options = {
23 | width: '250px',
24 | presetColors: [
25 | '#666666',
26 | '#f5f5f5',
27 | '#f44336',
28 | '#E91E63',
29 | '#9C27B0',
30 | '#673AB7',
31 | '#3F51B5',
32 | '#2196F3',
33 | '#03A9F4',
34 | '#00BCD4',
35 | '#009688',
36 | '#4CAF50',
37 | '#8BC34A',
38 | '#CDDC39',
39 | '#FFEB3B',
40 | '#FFC107',
41 | '#FF9800',
42 | '#FF5722',
43 | '#795548',
44 | '#9E9E9E',
45 | '#607D8B',
46 | ],
47 | };
48 | }
49 |
50 | public colorPickerChange(property, value) {
51 | this.mmpService.updateNode(property, value, true);
52 | }
53 |
54 | public colorPickerToggleChange(opening, property, value) {
55 | this.background.nativeElement.style.visibility = opening
56 | ? 'visible'
57 | : 'hidden';
58 |
59 | if (!opening) {
60 | this.mmpService.updateNode(property, value);
61 | }
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/teammapper-frontend/src/app/modules/application/components/dialog-about/dialog-about.component.html:
--------------------------------------------------------------------------------
1 |
5 |
26 |
43 |
61 |
62 | {{ applicationName }} {{ version }}
2 |
4 |
5 | {{ 'PAGES.ABOUT.INTRODUCTION.APPLICATION_DESCRIPTION' | translate }}
6 |
7 |
5 | {{ 'PAGES.ABOUT.INTRODUCTION.APPLICATION_DESCRIPTION' | translate }}
6 | 8 |
9 | {{
10 | 'MODALS.INFO.DELETE_AFTER_DAYS'
11 | | translate : { deleteAfterDays: map.deleteAfterDays }
12 | }}
13 |
14 | {{ 'MODALS.INFO.DELETED_AT' | translate }} 15 | {{ map.deletedAt | date : 'YYYY-MM-dd' }}
16 | 17 |
18 | 22 | {{ applicationName }} 23 |
26 | 14 | {{ 'MODALS.INFO.DELETED_AT' | translate }} 15 | {{ map.deletedAt | date : 'YYYY-MM-dd' }}
16 | 17 |
18 | 22 | {{ applicationName }} 23 |
32 |
35 |
36 | {{ 'MODALS.CONNECTION_INFO.TITLE' | translate }}
2 |{{ 'MODALS.PICTOGRAMS.TITLE' | translate }}
2 |13 |
{{ 'MODALS.PICTOGRAMS.EMPTY' | translate }}
16 | @for (picto of pictos; track picto) {
17 | 46 |
49 |
{{ 'MODALS.SHARE.TITLE' | translate }}
2 |
4 |
8 | {{
12 | 'MODALS.SHARE.LINK_TYPE_VIEW' | translate
13 | }}
14 |
15 |
16 |
17 | {{ 'MODALS.SHARE.CONTENT' | translate }}
18 |
24 |
27 |
28 |
29 |
9 | {{ 'MODALS.SHARE.LINK_TYPE_EDIT' | translate }}
10 |
11 | 16 |
37 |
40 |
41 |
44 |
47 |
2 |
20 |
--------------------------------------------------------------------------------
/teammapper-frontend/src/app/modules/application/pages/application/application.component.scss:
--------------------------------------------------------------------------------
1 | div.teammapper-application {
2 | height: 100%;
3 | display: flex;
4 | flex-direction: column;
5 |
6 | teammapper-map {
7 | flex: 1;
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/teammapper-frontend/src/app/modules/application/pages/settings/settings.component.scss:
--------------------------------------------------------------------------------
1 | div.settings {
2 | mat-toolbar {
3 | background-color: transparent;
4 |
5 | div.container {
6 | width: 100%;
7 | text-align: center;
8 | position: relative;
9 |
10 | button.close-button {
11 | position: absolute;
12 | top: -5px;
13 | right: -5px;
14 | }
15 | }
16 | }
17 |
18 | div.content {
19 | mat-card {
20 | margin-bottom: 20px;
21 |
22 | hr {
23 | margin-top: 0;
24 | margin-bottom: 20px;
25 | border: 0;
26 | height: 1px;
27 | background-color: lightgray;
28 | }
29 | }
30 |
31 | mat-card:last-child {
32 | margin-bottom: 0;
33 | }
34 |
35 | div.general-options {
36 | mat-card.general-options-main {
37 | padding-bottom: 15px;
38 | }
39 | }
40 |
41 | div.map-options {
42 | mat-card.map-options-map {
43 | mat-slide-toggle {
44 | display: block;
45 | margin-bottom: 20px;
46 | }
47 |
48 | mat-slide-toggle:last-child {
49 | margin-bottom: 0;
50 | }
51 | }
52 |
53 | mat-card.map-options-nodes {
54 | padding-bottom: 15px;
55 |
56 | mat-form-field {
57 | margin-right: 20px;
58 | }
59 | }
60 | }
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/teammapper-frontend/src/app/modules/application/pages/settings/settings.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { Settings } from '../../../../shared/models/settings.model';
3 | import { SettingsService } from '../../../../core/services/settings/settings.service';
4 | import { MmpService } from '../../../../core/services/mmp/mmp.service';
5 | import { TranslateService } from '@ngx-translate/core';
6 | import { Location } from '@angular/common';
7 | import { Router } from '@angular/router';
8 | import { Observable } from 'rxjs';
9 | import { MapSyncService } from 'src/app/core/services/map-sync/map-sync.service';
10 | import {
11 | CachedAdminMapEntry,
12 | CachedMapOptions,
13 | } from 'src/app/shared/models/cached-map.model';
14 |
15 | @Component({
16 | selector: 'teammapper-settings',
17 | templateUrl: './settings.component.html',
18 | styleUrls: ['./settings.component.scss'],
19 | standalone: false,
20 | })
21 | export class SettingsComponent implements OnInit {
22 | public readonly languages: string[];
23 | public settings: Settings;
24 | public mapOptions: CachedMapOptions;
25 | public editMode: Observable
2 |
3 |
14 |
15 |
42 |
--------------------------------------------------------------------------------
/teammapper-frontend/src/app/modules/application/pages/shortcuts/shortcuts.component.scss:
--------------------------------------------------------------------------------
1 | div.shortcuts {
2 | mat-toolbar {
3 | background-color: transparent;
4 |
5 | div.container {
6 | width: 100%;
7 | text-align: center;
8 | position: relative;
9 |
10 | button.close-button {
11 | position: absolute;
12 | top: -5px;
13 | right: -5px;
14 | }
15 | }
16 | }
17 |
18 | div.content {
19 | display: flex;
20 | justify-content: space-around;
21 | flex-wrap: wrap;
22 | padding-bottom: 10px;
23 |
24 | mat-list-item {
25 | color: #555555;
26 | }
27 |
28 | .key {
29 | padding: 6px 12px;
30 | background: gainsboro;
31 | border-radius: 3px;
32 | font-size: 15px;
33 | }
34 |
35 | .description {
36 | padding-left: 10px;
37 | }
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/teammapper-frontend/src/app/modules/application/pages/shortcuts/shortcuts.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { ShortcutsService } from '../../../../core/services/shortcuts/shortcuts.service';
3 | import { Hotkey } from 'angular2-hotkeys';
4 | import { Location } from '@angular/common';
5 |
6 | interface Shortcut {
7 | keys: string[];
8 | // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
9 | description: string | Function;
10 | }
11 |
12 | @Component({
13 | selector: 'teammapper-shortcuts',
14 | templateUrl: './shortcuts.component.html',
15 | styleUrls: ['./shortcuts.component.scss'],
16 | standalone: false,
17 | })
18 | export class ShortcutsComponent implements OnInit {
19 | public shortcuts: Shortcut[];
20 |
21 | constructor(
22 | private shortcutsService: ShortcutsService,
23 | private location: Location
24 | ) {}
25 |
26 | public ngOnInit() {
27 | const hotKeys: Hotkey[] = this.shortcutsService.getHotKeys();
28 | this.shortcuts = hotKeys.map((hotKey: Hotkey) => {
29 | const keys = hotKey.combo[0];
30 |
31 | return {
32 | keys: keys === '+' ? [keys] : keys.split('+'),
33 | description: hotKey.description,
34 | };
35 | });
36 | }
37 |
38 | public back() {
39 | this.location.back();
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/teammapper-frontend/src/app/root-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { RouterModule, Routes } from '@angular/router';
3 | import { ToastGuard } from './guards/toast.guard';
4 |
5 | const routes: Routes = [
6 | {
7 | path: '',
8 | loadChildren: () =>
9 | import('./modules/about/about.module').then(m => m.AboutModule),
10 | canActivate: [ToastGuard],
11 | },
12 | {
13 | path: 'map',
14 | loadChildren: () =>
15 | import('./modules/application/application.module').then(
16 | m => m.ApplicationModule
17 | ),
18 | canActivate: [ToastGuard],
19 | },
20 | {
21 | path: 'map/:id',
22 | loadChildren: () =>
23 | import('./modules/application/application.module').then(
24 | m => m.ApplicationModule
25 | ),
26 | canActivate: [ToastGuard],
27 | },
28 | {
29 | path: 'app',
30 | loadChildren: () =>
31 | import('./modules/application/application.module').then(
32 | m => m.ApplicationModule
33 | ),
34 | },
35 | {
36 | path: '**',
37 | redirectTo: '',
38 | },
39 | ];
40 |
41 | @NgModule({
42 | imports: [
43 | RouterModule.forRoot(routes, {
44 | onSameUrlNavigation: 'reload',
45 | scrollPositionRestoration: 'enabled',
46 | }),
47 | ],
48 | exports: [RouterModule],
49 | })
50 | export class RootRoutingModule {}
51 |
--------------------------------------------------------------------------------
/teammapper-frontend/src/app/root.component.html:
--------------------------------------------------------------------------------
1 |
4 |
13 | {{ 'PAGES.SHORTCUTS.TITLE' | translate }}
5 | 12 |
16 |
17 |
19 |
20 | {{ key }} +
22 |
23 |
24 | {{ shortcut.description | translate }}
25 |
26 |
27 |
28 |
29 |
31 |
32 | {{ key }} +
34 |
35 |
36 | {{ shortcut.description | translate }}
37 |
38 |
39 |
40 |
41 |