Skip to content

Commit

Permalink
updated the event layout
Browse files Browse the repository at this point in the history
  • Loading branch information
Katherine Brown authored and Katherine Brown committed Nov 7, 2024
1 parent af4a7c9 commit 0c606ad
Show file tree
Hide file tree
Showing 3 changed files with 72 additions and 105 deletions.
70 changes: 36 additions & 34 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,47 @@
<div class="arc-event">
<mat-card appearance="outlined">
<mat-card-header>
<mat-card-title>
Events
</mat-card-title>
<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>
</div>
<div class="featureLayers" *ngFor="let featureLayer of event.layers">
<div class="featureLayer__value">
{{layerDisplay(featureLayer)}}
</div>
<section class="arc-event-sync">
<div *ngIf="!model.events.length">
There are no events synchronizing to ArcGIS layers.
<mat-divider></mat-divider>
</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">
<a href="/#/admin/events/{{event.id}}" target="_blank">{{event.name}}</a>

<div *ngIf="!event.layers.length" class="featureLayer_value">
<div>This event is not synchronizing to any ArcGIS layers.</div>
<br/>
<mat-divider *ngIf="!last"></mat-divider>
</div>
</div>
<div class="arcEvent__edit">
<button mat-button color="primary" (click)="onEditEvent(event)">Edit</button>
</div>
</mat-list-item>

<mat-list *ngIf="event.layers.length">
<mat-list-item *ngFor="let featureLayer of event.layers">
<div>{{ layerDisplay(featureLayer) }}</div>
<mat-divider></mat-divider>
</mat-list-item>
</mat-list>

</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: 6 additions & 65 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,10 @@
.arc-layer-form {
display: flex;
flex-direction: column;
min-width: 950px;
}

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;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 16px;
}

.edit-button {
opacity: 0.5;
font-size: inherit;
height: inherit;
line-height: inherit;
width: inherit;
.arcEvent__info {
flex-grow: 1;
}
36 changes: 30 additions & 6 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,14 +4,38 @@ 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'
}]
}]
})
Expand Down Expand Up @@ -83,11 +107,11 @@ export class MockArcService implements ArcServiceInterface {
}

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

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

putArcConfig(config: ArcGISPluginConfig) {}
Expand Down

0 comments on commit 0c606ad

Please sign in to comment.