Skip to content

Commit

Permalink
Arc event material updates (#229)
Browse files Browse the repository at this point in the history 
* 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 <[email protected]>
  • Loading branch information
@kbrownomni
kbrownomni and Katherine Brown authored Nov 14, 2024
1 parent af4a7c9 commit f5ac5c1
Show file tree
Hide file tree
Showing 3 changed files with 120 additions and 127 deletions.
81 changes: 43 additions & 38 deletions plugins/arcgis/web-app/projects/main/src/lib/arc-event/arc-event.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,50 @@
<div class="arc-event">
<mat-card appearance="outlined">
<mat-card-header>
<mat-card-title>
Events
</mat-card-title>
<div>
<mat-card appearance="outlined">
<mat-card-title>Events</mat-card-title>
<mat-card-subtitle>Change the ArcGIS layers each MAGE event sends its observations to.</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<section class="arc-event-sync">
<div class="arcEvents" *ngIf="!model.events.length">
<div class="arcEvent">
There are no events synchronizing to ArcGIS layers.
</div>
</div>
<div class="arcEvents" *ngFor="let event of model.events">
<ng-container>
<div class="arcEvent">
<div class="arcEvent__value">
<a href="/#/admin/events/{{event.id}}" target="_blank">{{event.name}}</a>
</div>
<div class="arcEvent__edit">
<button class="edit-button" mat-icon-button (click)="onEditEvent(event)"><mat-icon class="edit-icon" [inline]="true">edit</mat-icon></button>
</div>
</div>
<div class="featureLayers" *ngIf="!event.layers.length">
<div class="featureLayer_value">
This event is not synchronizing to any ArcGIS layers.
</div>
<section class="arc-event-sync">
<div *ngIf="!model.events.length">
There are no events synchronizing to ArcGIS layers.
<mat-divider></mat-divider>
</div>
<div class="featureLayers" *ngFor="let featureLayer of event.layers">
<div class="featureLayer__value">
{{layerDisplay(featureLayer)}}
</div>
</div>
</ng-container>
</div>
</section>
</mat-card-content>
</mat-card>

<ng-template #editEventDialog let-data>
<mat-list>
<ng-container *ngFor="let event of model.events; let last = last">
<mat-list-item class="arcEvent">
<div class="arcEvent__info">
<div>
{{ event.name }}
</div>
<div *ngIf="event.layers.length; else noLayers">
<div>
<ng-container *ngFor="let featureLayer of event.layers; let i = index">
{{ layerDisplay(featureLayer) }}<span *ngIf="i < event.layers.length - 1">, </span>
</ng-container>
</div>
</div>

<ng-template #noLayers>
<div>This event is not synchronizing to any ArcGIS layers.</div>
</ng-template>
</div>
<div class="arcEvent__icons">
<a mat-icon-button color="primary" href="/#/admin/events/{{event.id}}" target="_blank">
<mat-icon>open_in_new</mat-icon>
</a>
<button mat-icon-button color="primary" (click)="onEditEvent(event)">
<mat-icon>edit</mat-icon>
</button>
</div>
</mat-list-item>
<mat-divider *ngIf="!last"></mat-divider>
</ng-container>
</mat-list>
</section>
</mat-card-content>
</mat-card>

<ng-template #editEventDialog let-data>
<h2 matDialogTitle>ArcGIS layers that MAGE event named {{currentEditingEvent.name}} is synchronizing</h2>
<mat-dialog-content>
<div class="arc-layers" *ngFor="let arcLayer of layers">
Expand Down
71 changes: 5 additions & 66 deletions plugins/arcgis/web-app/projects/main/src/lib/arc-event/arc-event.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,69 +1,8 @@
.arc-layer-form {
display: flex;
flex-direction: column;
min-width: 950px;
.arcEvent__info {
flex-grow: 1;
}

section {
>* {
margin-inline-start: 1em;
}

header {
margin-inline-start: 0;

h1,
h2,
h3,
h4,
h5,
h6 {
margin-block-end: 0;
}

.subheading {
margin-block-start: 0;
opacity: 0.5;
}

margin-block-end: 2em;
}

margin-block-start: 2em;
margin-block-end: 2em;
}

.arcEvent {
margin-block-start: 1em;
display: grid;
grid-template-columns: 4fr 1fr;
max-width: max-content;
margin-bottom: 20px;
}

.arcEvent__value {
grid-column-start: 1;
}

.arcEvent__edit {
grid-column-start: 2;
text-align: end;
}

.featureLayers {
display: grid;
opacity: 0.5;
font-size: 0.9em;
}

.edit-icon {
vertical-align: middle;
}

.edit-button {
opacity: 0.5;
font-size: inherit;
height: inherit;
line-height: inherit;
width: inherit;
.mat-divider {
margin-top: 12px;
margin-bottom: 12px;
}
95 changes: 72 additions & 23 deletions plugins/arcgis/web-app/projects/showcase/src/app/arc.service.mock.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,64 @@ import { ArcServiceInterface, FeatureLayer } from "../../../main/src/lib/arc.ser
import { ArcGISPluginConfig, defaultArcGISPluginConfig } from '../../../main/src/lib/ArcGISPluginConfig';
import { MageEvent } from "../../../main/src/lib/arc.service";

export const mockArcGISEventResult = Object.freeze<MageEvent>({
export const mockArcGISEventResult1 = Object.freeze<MageEvent>({
id: 0,
name: 'test event result name',
name: 'test event result name 1',
forms: [{
id: 1,
name: 'test form result name',
name: 'test form result name 1',
fields: [{
title: 'test field'
title: 'test field 1'
}]
}]
})
});

export const mockArcGISEventResult2 = Object.freeze<MageEvent>({
id: 1,
name: 'test event result name 2',
forms: [{
id: 2,
name: 'test form result name 2',
fields: [{
title: 'test field 2'
}]
}]
});

export const mockArcGISEventResult3 = Object.freeze<MageEvent>({
id: 2,
name: 'test event result name 3',
forms: [{
id: 3,
name: 'test form result name 3',
fields: [{
title: 'test field 3'
}]
}]
});

@Injectable({
providedIn: 'root'
})

export class MockArcService implements ArcServiceInterface {
fetchFeatureServiceLayers(featureServiceUrl: string): Observable<FeatureLayer[]> {
throw new Error("Method not implemented.");
return of([
{
id: 1,
name: 'Layer 1',
geometryType: 'esriGeometryPoint',
events: ['test event result name 1', 'test event result name 2']
},
{
id: 2,
name: 'Layer 2',
geometryType: 'esriGeometryPolygon',
events: ['test event result name 2']
}
]);
}

fetchArcConfig(): Observable<ArcGISPluginConfig> {
return of({
enabled: true,
Expand All @@ -31,7 +70,21 @@ export class MockArcService implements ArcServiceInterface {
startupIntervalSeconds: 1,
updateIntervalSeconds: 1,
batchSize: 100,
featureServices: [],
featureServices: [
{
url: 'https://mock.service.com/FeatureServer/0',
layers: [
{
layer: 'Layer 1',
events: ['test event result name 1', 'test event result name 2']
},
{
layer: 'Layer 2',
events: ['test event result name 2']
}
]
}
],
attachmentModifiedTolerance: 5000,
textFieldLength: 100,
textAreaFieldLength: 256,
Expand Down Expand Up @@ -72,35 +125,31 @@ export class MockArcService implements ArcServiceInterface {
fetchArcLayers(featureUrl: string) {
return of({
layers: [
{
id: 0,
name: 'mage_sync',
geometryType: 'esriGeometryPoint'
},
]
}
)
{
id: 0,
name: 'mage_sync',
geometryType: 'esriGeometryPoint'
},
]
}
)
}

fetchEvents() {
return of([mockArcGISEventResult])
return of([mockArcGISEventResult1, mockArcGISEventResult2, mockArcGISEventResult3]);
}

fetchPopulatedEvents() {
return of([mockArcGISEventResult])
return of([mockArcGISEventResult1, mockArcGISEventResult2, mockArcGISEventResult3]);
}

putArcConfig(config: ArcGISPluginConfig) {}

removeUserTrack(userTrackId: string): Observable<ArcGISPluginConfig> {
return of(
defaultArcGISPluginConfig
)
return of(defaultArcGISPluginConfig);
}

removeOperation(operationId: string): Observable<ArcGISPluginConfig> {
return of(
defaultArcGISPluginConfig
)
return of(defaultArcGISPluginConfig);
}
}

0 comments on commit f5ac5c1

Please sign in to comment.