Skip to content

Commit 5c4650d

Browse files
acmeacme
acme
authored and
acme
committed
Improved table row and map marker click handling
1 parent 03cdc79 commit 5c4650d

25 files changed

Lines changed: 805 additions & 228 deletions

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular9",
3-
"version": "1.2.0",
3+
"version": "1.2.1",
44
"scripts": {
55
"ng": "ng",
66
"start": "ng serve",

‎src/app/main/locations/full-view/full-view.component.html‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,32 +17,32 @@
1717
UNITS
1818
</a>
1919
</div>
20-
<div [ngClass]="{'disabled': unitHistoryDisabled()}">
20+
<div [ngClass]="{'disabled': unitHistoryDisabled}">
2121
<a href="#" class="top-button" mat-button
22-
[disabled]="unitHistoryDisabled()"
23-
[routerLink]="[{outlets:{primary: ['unit-history'], map: ['units-map']}}]"
22+
[disabled]="unitHistoryDisabled"
23+
[routerLink]="[{outlets:{primary: ['unit-history', deviceId], map: ['units-map']}}]"
2424
[routerLinkActive]="['active-locations']">
2525
UNIT
2626
</a>
2727
</div>
28-
<div [ngClass]="{'disabled': unitInfoDisabled()}">
28+
<div [ngClass]="{'disabled': unitInfoDisabled}">
2929
<a href="#" class="top-button" mat-button
30-
[disabled]="unitInfoDisabled()"
31-
[routerLink]="[{outlets:{primary: ['unit-details'], map: ['units-map']}}]"
30+
[disabled]="unitInfoDisabled"
31+
[routerLink]="[{outlets:{primary: ['unit-details', documentId], map: ['units-map']}}]"
3232
[routerLinkActive]="['active-locations']">
3333
DETAILS
3434
</a>
3535
</div>
3636
<hr class="separator">
37-
<div [ngClass]="{'disabled': placesDisabled()}">
37+
<div [ngClass]="{'disabled': placesDisabled}">
3838
<a href="#" class="top-button" mat-button
39-
[disabled]="placesDisabled()"
39+
[disabled]="placesDisabled"
4040
[routerLink]="[{outlets:{primary: ['places'], map: ['places-map']}}]"
4141
[routerLinkActive]="['active-locations']">
4242
LANDMARKS
4343
</a>
4444
</div>
45-
<div [ngClass]="{'disabled': placeDisabled()}">
45+
<div [ngClass]="{'disabled': placeDisabled}">
4646
<a href="#" mat-button
4747
[disabled]="placeDisabled()"
4848
[routerLink]="[{outlets:{primary: ['place'], map: ['place-map']}}]"

‎src/app/main/locations/full-view/full-view.component.ts‎

Lines changed: 59 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,77 @@
1-
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
2-
import { UnitService } from '../unit.service';
1+
2+
// Copyright (c) 2020 Lars Hellgren (lars@exelor.com).
3+
// All rights reserved.
4+
//
5+
// This code is licensed under the MIT License.
6+
//
7+
// Permission is hereby granted, free of charge, to any person obtaining a copy
8+
// of this software and associated documentation files(the "Software"), to deal
9+
// in the Software without restriction, including without limitation the rights
10+
// to use, copy, modify, merge, publish, distribute, sublicense, and / or sell
11+
// copies of the Software, and to permit persons to whom the Software is
12+
// furnished to do so, subject to the following conditions :
13+
//
14+
// The above copyright notice and this permission notice shall be included in
15+
// all copies or substantial portions of the Software.
16+
//
17+
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18+
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19+
// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
20+
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21+
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22+
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
23+
// THE SOFTWARE.
24+
25+
import { Component, OnDestroy, OnInit } from '@angular/core';
26+
import { DeviceEvent, UnitService } from '../unit.service';
327
import { PlaceService } from '../places/place.service';
28+
import { Subscription } from 'rxjs/Subscription';
429

530
@Component({
631
selector: 'app-full-view',
732
templateUrl: './full-view.component.html',
833
styleUrls: ['./full-view.component.css']
934
})
10-
export class FullViewComponent implements OnInit {
35+
export class FullViewComponent implements OnInit, OnDestroy {
36+
deviceId: string;
37+
documentId: string;
1138

12-
constructor(private unitService: UnitService,
13-
private placeService: PlaceService) { }
14-
15-
ngOnInit() {
16-
}
39+
unitHistoryDisabled = true;
40+
unitInfoDisabled = true;
41+
placesDisabled = false;
1742

18-
get unitId() {
19-
return this.unitService.currentDeviceEvent ? `/${this.unitService.currentDeviceEvent.deviceId}` : '';
20-
}
43+
private deviceSelectSubscription: Subscription;
44+
private enableDetailsSubscription: Subscription;
2145

22-
get docId() {
23-
return this.unitService.currentDeviceEvent ? `/${this.unitService.currentDeviceEvent.documentId}` : '';
46+
constructor(private unitService: UnitService,
47+
private placeService: PlaceService) {
2448
}
2549

26-
unitHistoryDisabled() {
27-
return !!!this.unitService.currentDeviceEvent;
28-
}
50+
ngOnInit() {
51+
this.deviceSelectSubscription = this.unitService.itemSelect$.subscribe((deviceEvent: DeviceEvent) => {
52+
this.unitHistoryDisabled = !!!deviceEvent;
53+
if (!!deviceEvent) {
54+
this.deviceId = deviceEvent.deviceId;
55+
}
56+
});
2957

30-
unitInfoDisabled() {
31-
return !!!this.unitService.currentDeviceEvent;
58+
this.enableDetailsSubscription = this.unitService.hasDetails$.subscribe(documentId => {
59+
if (!!documentId) {
60+
this.documentId = documentId;
61+
this.unitInfoDisabled = false;
62+
} else {
63+
this.unitInfoDisabled = true;
64+
}
65+
});
3266
}
3367

34-
placesDisabled() {
35-
return false;
68+
ngOnDestroy() {
69+
if (this.deviceSelectSubscription) {
70+
this.deviceSelectSubscription.unsubscribe();
71+
}
72+
if (this.enableDetailsSubscription) {
73+
this.enableDetailsSubscription.unsubscribe();
74+
}
3675
}
3776

3877
placeDisabled() {

‎src/app/main/locations/locations.component.ts‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,27 @@
1+
// Copyright (c) 2020 Lars Hellgren (lars@exelor.com).
2+
// All rights reserved.
3+
//
4+
// This code is licensed under the MIT License.
5+
//
6+
// Permission is hereby granted, free of charge, to any person obtaining a copy
7+
// of this software and associated documentation files(the "Software"), to deal
8+
// in the Software without restriction, including without limitation the rights
9+
// to use, copy, modify, merge, publish, distribute, sublicense, and / or sell
10+
// copies of the Software, and to permit persons to whom the Software is
11+
// furnished to do so, subject to the following conditions :
12+
//
13+
// The above copyright notice and this permission notice shall be included in
14+
// all copies or substantial portions of the Software.
15+
//
16+
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17+
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18+
// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
19+
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20+
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21+
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
22+
// THE SOFTWARE.
23+
124
import { Component, OnDestroy, OnInit } from '@angular/core';
2-
import { UnitsMapService } from './units-map/units-map.service';
325
import { ActivatedRoute, Router } from '@angular/router';
426
import { Subscription } from 'rxjs';
527
import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
@@ -8,14 +30,14 @@ import { UnitService } from './unit.service';
830

931
// const sm = '600px';
1032
const md = '960px';
33+
1134
// const lg = '1280px';
1235

1336
@Component({
1437
selector: 'app-locations',
1538
template: '<router-outlet></router-outlet>',
1639
providers: [
17-
UnitService,
18-
UnitsMapService
40+
UnitService
1941
]
2042
})
2143

‎src/app/main/locations/locations.module.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,26 @@
1+
// Copyright (c) 2020 Lars Hellgren (lars@exelor.com).
2+
// All rights reserved.
3+
//
4+
// This code is licensed under the MIT License.
5+
//
6+
// Permission is hereby granted, free of charge, to any person obtaining a copy
7+
// of this software and associated documentation files(the "Software"), to deal
8+
// in the Software without restriction, including without limitation the rights
9+
// to use, copy, modify, merge, publish, distribute, sublicense, and / or sell
10+
// copies of the Software, and to permit persons to whom the Software is
11+
// furnished to do so, subject to the following conditions :
12+
//
13+
// The above copyright notice and this permission notice shall be included in
14+
// all copies or substantial portions of the Software.
15+
//
16+
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17+
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18+
// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
19+
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20+
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21+
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
22+
// THE SOFTWARE.
23+
124
import { NgModule } from '@angular/core';
225
import { CommonModule } from '@angular/common';
326
import { LocationsComponent } from './locations.component';

‎src/app/main/locations/places/place/place-map/place-map.component.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,26 @@
1+
// Copyright (c) 2020 Lars Hellgren (lars@exelor.com).
2+
// All rights reserved.
3+
//
4+
// This code is licensed under the MIT License.
5+
//
6+
// Permission is hereby granted, free of charge, to any person obtaining a copy
7+
// of this software and associated documentation files(the "Software"), to deal
8+
// in the Software without restriction, including without limitation the rights
9+
// to use, copy, modify, merge, publish, distribute, sublicense, and / or sell
10+
// copies of the Software, and to permit persons to whom the Software is
11+
// furnished to do so, subject to the following conditions :
12+
//
13+
// The above copyright notice and this permission notice shall be included in
14+
// all copies or substantial portions of the Software.
15+
//
16+
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17+
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18+
// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
19+
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20+
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21+
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
22+
// THE SOFTWARE.
23+
124
import { Component, OnDestroy, OnInit } from '@angular/core';
225
import { Subscription } from 'rxjs';
326
import { google } from '@agm/core/services/google-maps-types';

‎src/app/main/locations/places/place/place.component.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,26 @@
1+
// Copyright (c) 2020 Lars Hellgren (lars@exelor.com).
2+
// All rights reserved.
3+
//
4+
// This code is licensed under the MIT License.
5+
//
6+
// Permission is hereby granted, free of charge, to any person obtaining a copy
7+
// of this software and associated documentation files(the "Software"), to deal
8+
// in the Software without restriction, including without limitation the rights
9+
// to use, copy, modify, merge, publish, distribute, sublicense, and / or sell
10+
// copies of the Software, and to permit persons to whom the Software is
11+
// furnished to do so, subject to the following conditions :
12+
//
13+
// The above copyright notice and this permission notice shall be included in
14+
// all copies or substantial portions of the Software.
15+
//
16+
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17+
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18+
// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
19+
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20+
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21+
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
22+
// THE SOFTWARE.
23+
124
import { Component, OnDestroy, OnInit } from '@angular/core';
225
import { ActivatedRoute, Params, Router } from '@angular/router';
326
import { Subscription } from 'rxjs';

‎src/app/main/locations/small-view/small-view.component.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,26 +13,26 @@
1313
UNITS
1414
</a>
1515
</div>
16-
<div [ngClass]="{'disabled': unitHistoryDisabled()}">
16+
<div [ngClass]="{'disabled': unitHistoryDisabled}">
1717
<a href="#" class="top-button" mat-button
18-
[disabled]="unitHistoryDisabled()"
19-
[routerLink]="[{outlets:{primary: ['unit-history'], map: ['units-map']}}]"
18+
[disabled]="unitHistoryDisabled"
19+
[routerLink]="[{outlets:{primary: ['unit-history', deviceId], map: ['units-map']}}]"
2020
[routerLinkActive]="['unit-history']">
2121
UNIT
2222
</a>
2323
</div>
24-
<div [ngClass]="{'disabled': unitInfoDisabled()}">
24+
<div [ngClass]="{'disabled': unitInfoDisabled}">
2525
<a href="#" class="top-button" mat-button
26-
[disabled]="unitInfoDisabled()"
27-
[routerLink]="[{outlets:{primary: ['unit-details'], map: ['units-map']}}]"
26+
[disabled]="unitInfoDisabled"
27+
[routerLink]="[{outlets:{primary: ['unit-details', documentId], map: ['units-map']}}]"
2828
[routerLinkActive]="['unit-history']">
2929
DETAILS
3030
</a>
3131
</div>
3232
<div class="separator">|</div>
33-
<div [ngClass]="{'disabled': placesDisabled()}">
33+
<div [ngClass]="{'disabled': placeDisabled()}">
3434
<a href="#" class="top-button" mat-button
35-
[disabled]="placesDisabled()"
35+
[disabled]="placeDisabled()"
3636
[routerLink]="[{outlets:{primary: ['places'], map: ['places-map']}}]"
3737
[routerLinkActive]="['active-locations']">
3838
LANDMARKS

0 commit comments

Comments
 (0)