Skip to content

Commit f5ac5c1

Browse files
kbrownomniKatherine Brown
kbrownomni
and
Katherine Brown
authored
Arc event material updates (#229)
* updated the event layout * added layers to mock, display layers in events on one line seperated by commas * added open in new and edit icons, adjusted scss --------- Co-authored-by: Katherine Brown <katherinebrown@Katherines-MBP.attlocal.net>
1 parent af4a7c9 commit f5ac5c1

File tree

3 files changed

+120
-127
lines changed

3 files changed

+120
-127
lines changed

‎plugins/arcgis/web-app/projects/main/src/lib/arc-event/arc-event.component.html

Lines changed: 43 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,50 @@
1-
<div class="arc-event">
2-
<mat-card appearance="outlined">
3-
<mat-card-header>
4-
<mat-card-title>
5-
Events
6-
</mat-card-title>
1+
<div>
2+
<mat-card appearance="outlined">
3+
<mat-card-title>Events</mat-card-title>
74
<mat-card-subtitle>Change the ArcGIS layers each MAGE event sends its observations to.</mat-card-subtitle>
8-
</mat-card-header>
95
<mat-card-content>
10-
<section class="arc-event-sync">
11-
<div class="arcEvents" *ngIf="!model.events.length">
12-
<div class="arcEvent">
13-
There are no events synchronizing to ArcGIS layers.
14-
</div>
15-
</div>
16-
<div class="arcEvents" *ngFor="let event of model.events">
17-
<ng-container>
18-
<div class="arcEvent">
19-
<div class="arcEvent__value">
20-
<a href="/#/admin/events/{{event.id}}" target="_blank">{{event.name}}</a>
21-
</div>
22-
<div class="arcEvent__edit">
23-
<button class="edit-button" mat-icon-button (click)="onEditEvent(event)"><mat-icon class="edit-icon" [inline]="true">edit</mat-icon></button>
24-
</div>
25-
</div>
26-
<div class="featureLayers" *ngIf="!event.layers.length">
27-
<div class="featureLayer_value">
28-
This event is not synchronizing to any ArcGIS layers.
29-
</div>
6+
<section class="arc-event-sync">
7+
<div *ngIf="!model.events.length">
8+
There are no events synchronizing to ArcGIS layers.
9+
<mat-divider></mat-divider>
3010
</div>
31-
<div class="featureLayers" *ngFor="let featureLayer of event.layers">
32-
<div class="featureLayer__value">
33-
{{layerDisplay(featureLayer)}}
34-
</div>
35-
</div>
36-
</ng-container>
37-
</div>
38-
</section>
39-
</mat-card-content>
40-
</mat-card>
4111

42-
<ng-template #editEventDialog let-data>
12+
<mat-list>
13+
<ng-container *ngFor="let event of model.events; let last = last">
14+
<mat-list-item class="arcEvent">
15+
<div class="arcEvent__info">
16+
<div>
17+
{{ event.name }}
18+
</div>
19+
<div *ngIf="event.layers.length; else noLayers">
20+
<div>
21+
<ng-container *ngFor="let featureLayer of event.layers; let i = index">
22+
{{ layerDisplay(featureLayer) }}<span *ngIf="i < event.layers.length - 1">, </span>
23+
</ng-container>
24+
</div>
25+
</div>
26+
27+
<ng-template #noLayers>
28+
<div>This event is not synchronizing to any ArcGIS layers.</div>
29+
</ng-template>
30+
</div>
31+
<div class="arcEvent__icons">
32+
<a mat-icon-button color="primary" href="/#/admin/events/{{event.id}}" target="_blank">
33+
<mat-icon>open_in_new</mat-icon>
34+
</a>
35+
<button mat-icon-button color="primary" (click)="onEditEvent(event)">
36+
<mat-icon>edit</mat-icon>
37+
</button>
38+
</div>
39+
</mat-list-item>
40+
<mat-divider *ngIf="!last"></mat-divider>
41+
</ng-container>
42+
</mat-list>
43+
</section>
44+
</mat-card-content>
45+
</mat-card>
46+
47+
<ng-template #editEventDialog let-data>
4348
<h2 matDialogTitle>ArcGIS layers that MAGE event named {{currentEditingEvent.name}} is synchronizing</h2>
4449
<mat-dialog-content>
4550
<div class="arc-layers" *ngFor="let arcLayer of layers">

‎plugins/arcgis/web-app/projects/main/src/lib/arc-event/arc-event.component.scss

Lines changed: 5 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,8 @@
1-
.arc-layer-form {
2-
display: flex;
3-
flex-direction: column;
4-
min-width: 950px;
1+
.arcEvent__info {
2+
flex-grow: 1;
53
}
64

7-
section {
8-
>* {
9-
margin-inline-start: 1em;
10-
}
11-
12-
header {
13-
margin-inline-start: 0;
14-
15-
h1,
16-
h2,
17-
h3,
18-
h4,
19-
h5,
20-
h6 {
21-
margin-block-end: 0;
22-
}
23-
24-
.subheading {
25-
margin-block-start: 0;
26-
opacity: 0.5;
27-
}
28-
29-
margin-block-end: 2em;
30-
}
31-
32-
margin-block-start: 2em;
33-
margin-block-end: 2em;
34-
}
35-
36-
.arcEvent {
37-
margin-block-start: 1em;
38-
display: grid;
39-
grid-template-columns: 4fr 1fr;
40-
max-width: max-content;
41-
margin-bottom: 20px;
42-
}
43-
44-
.arcEvent__value {
45-
grid-column-start: 1;
46-
}
47-
48-
.arcEvent__edit {
49-
grid-column-start: 2;
50-
text-align: end;
51-
}
52-
53-
.featureLayers {
54-
display: grid;
55-
opacity: 0.5;
56-
font-size: 0.9em;
57-
}
58-
59-
.edit-icon {
60-
vertical-align: middle;
61-
}
62-
63-
.edit-button {
64-
opacity: 0.5;
65-
font-size: inherit;
66-
height: inherit;
67-
line-height: inherit;
68-
width: inherit;
5+
.mat-divider {
6+
margin-top: 12px;
7+
margin-bottom: 12px;
698
}

‎plugins/arcgis/web-app/projects/showcase/src/app/arc.service.mock.ts

Lines changed: 72 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,64 @@ import { ArcServiceInterface, FeatureLayer } from "../../../main/src/lib/arc.ser
44
import { ArcGISPluginConfig, defaultArcGISPluginConfig } from '../../../main/src/lib/ArcGISPluginConfig';
55
import { MageEvent } from "../../../main/src/lib/arc.service";
66

7-
export const mockArcGISEventResult = Object.freeze<MageEvent>({
7+
export const mockArcGISEventResult1 = Object.freeze<MageEvent>({
88
id: 0,
9-
name: 'test event result name',
9+
name: 'test event result name 1',
1010
forms: [{
1111
id: 1,
12-
name: 'test form result name',
12+
name: 'test form result name 1',
1313
fields: [{
14-
title: 'test field'
14+
title: 'test field 1'
1515
}]
1616
}]
17-
})
17+
});
18+
19+
export const mockArcGISEventResult2 = Object.freeze<MageEvent>({
20+
id: 1,
21+
name: 'test event result name 2',
22+
forms: [{
23+
id: 2,
24+
name: 'test form result name 2',
25+
fields: [{
26+
title: 'test field 2'
27+
}]
28+
}]
29+
});
30+
31+
export const mockArcGISEventResult3 = Object.freeze<MageEvent>({
32+
id: 2,
33+
name: 'test event result name 3',
34+
forms: [{
35+
id: 3,
36+
name: 'test form result name 3',
37+
fields: [{
38+
title: 'test field 3'
39+
}]
40+
}]
41+
});
1842

1943
@Injectable({
2044
providedIn: 'root'
2145
})
46+
2247
export class MockArcService implements ArcServiceInterface {
2348
fetchFeatureServiceLayers(featureServiceUrl: string): Observable<FeatureLayer[]> {
24-
throw new Error("Method not implemented.");
49+
return of([
50+
{
51+
id: 1,
52+
name: 'Layer 1',
53+
geometryType: 'esriGeometryPoint',
54+
events: ['test event result name 1', 'test event result name 2']
55+
},
56+
{
57+
id: 2,
58+
name: 'Layer 2',
59+
geometryType: 'esriGeometryPolygon',
60+
events: ['test event result name 2']
61+
}
62+
]);
2563
}
64+
2665
fetchArcConfig(): Observable<ArcGISPluginConfig> {
2766
return of({
2867
enabled: true,
@@ -31,7 +70,21 @@ export class MockArcService implements ArcServiceInterface {
3170
startupIntervalSeconds: 1,
3271
updateIntervalSeconds: 1,
3372
batchSize: 100,
34-
featureServices: [],
73+
featureServices: [
74+
{
75+
url: 'https://mock.service.com/FeatureServer/0',
76+
layers: [
77+
{
78+
layer: 'Layer 1',
79+
events: ['test event result name 1', 'test event result name 2']
80+
},
81+
{
82+
layer: 'Layer 2',
83+
events: ['test event result name 2']
84+
}
85+
]
86+
}
87+
],
3588
attachmentModifiedTolerance: 5000,
3689
textFieldLength: 100,
3790
textAreaFieldLength: 256,
@@ -72,35 +125,31 @@ export class MockArcService implements ArcServiceInterface {
72125
fetchArcLayers(featureUrl: string) {
73126
return of({
74127
layers: [
75-
{
76-
id: 0,
77-
name: 'mage_sync',
78-
geometryType: 'esriGeometryPoint'
79-
},
80-
]
81-
}
82-
)
128+
{
129+
id: 0,
130+
name: 'mage_sync',
131+
geometryType: 'esriGeometryPoint'
132+
},
133+
]
134+
}
135+
)
83136
}
84137

85138
fetchEvents() {
86-
return of([mockArcGISEventResult])
139+
return of([mockArcGISEventResult1, mockArcGISEventResult2, mockArcGISEventResult3]);
87140
}
88141

89142
fetchPopulatedEvents() {
90-
return of([mockArcGISEventResult])
143+
return of([mockArcGISEventResult1, mockArcGISEventResult2, mockArcGISEventResult3]);
91144
}
92145

93146
putArcConfig(config: ArcGISPluginConfig) {}
94147

95148
removeUserTrack(userTrackId: string): Observable<ArcGISPluginConfig> {
96-
return of(
97-
defaultArcGISPluginConfig
98-
)
149+
return of(defaultArcGISPluginConfig);
99150
}
100151

101152
removeOperation(operationId: string): Observable<ArcGISPluginConfig> {
102-
return of(
103-
defaultArcGISPluginConfig
104-
)
153+
return of(defaultArcGISPluginConfig);
105154
}
106155
}

0 commit comments

Comments
 (0)