Skip to content

Commit f4c6ba8

Browse files
ryanslattenryanslatten
authored
Layer Dashboard upgrade to Angular 14 (#353)
* initial commit * fix create layer * add layer type * fix geopackage validation * pr comments
1 parent ed2c020 commit f4c6ba8

12 files changed

+1806
-4
lines changed

‎web-app/admin/src/app/admin/admin-layers/admin-layers.module.ts‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { NgModule } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
4+
import { MatDialogModule } from '@angular/material/dialog';
5+
import { MatButtonModule } from '@angular/material/button';
6+
import { MatPaginatorModule } from '@angular/material/paginator';
7+
import { MatTableModule } from '@angular/material/table';
8+
import { MatIconModule } from '@angular/material/icon';
9+
import { MatSelectModule } from '@angular/material/select';
10+
import { MatFormFieldModule } from '@angular/material/form-field';
11+
import { MatTooltipModule } from '@angular/material/tooltip';
12+
import { CoreModule } from '../../core/core.module';
13+
import { LayerDashboardComponent } from './dashboard/layer-dashboard.component';
14+
import { CreateLayerDialogComponent } from './create-layer/create-layer.component';
15+
import { LayersService } from './layers.service';
16+
import { AdminBreadcrumbModule } from '../admin-breadcrumb/admin-breadcrumb.module';
17+
18+
@NgModule({
19+
declarations: [
20+
LayerDashboardComponent,
21+
CreateLayerDialogComponent
22+
],
23+
imports: [
24+
CommonModule,
25+
FormsModule,
26+
ReactiveFormsModule,
27+
MatDialogModule,
28+
MatButtonModule,
29+
MatPaginatorModule,
30+
MatTableModule,
31+
MatIconModule,
32+
MatSelectModule,
33+
MatFormFieldModule,
34+
MatTooltipModule,
35+
CoreModule,
36+
AdminBreadcrumbModule
37+
],
38+
providers: [
39+
LayersService
40+
],
41+
exports: [
42+
LayerDashboardComponent
43+
]
44+
})
45+
export class AdminLayersModule { }

‎web-app/admin/src/app/admin/admin-layers/create-layer/create-layer.component.html‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
<div class="dialog-modal">
2+
<div class="dialog-header">
3+
<h2 class="dialog-title">Create a New Layer</h2>
4+
</div>
5+
6+
<div class="dialog-content">
7+
<div *ngIf="errorMessage" class="error-popover">
8+
<i class="fa fa-exclamation-triangle"></i>
9+
<span>{{ errorMessage }}</span>
10+
</div>
11+
12+
<form [formGroup]="layerForm" class="layer-form">
13+
<div class="form-field">
14+
<label class="field-label">Layer Name</label>
15+
<input type="text" class="form-input" formControlName="name" placeholder="Enter layer name" />
16+
<div class="field-error">
17+
<span class="error-text visible" *ngIf="
18+
layerForm.get('name').hasError('required') &&
19+
(layerForm.get('name').touched || layerForm.get('name').dirty)
20+
">
21+
Name is required
22+
</span>
23+
<span class="error-text visible" *ngIf="
24+
layerForm.get('name').hasError('duplicateName') &&
25+
(layerForm.get('name').touched || layerForm.get('name').dirty)
26+
">
27+
A layer with this name already exists
28+
</span>
29+
</div>
30+
</div>
31+
32+
<div class="form-field">
33+
<label class="field-label">Layer Type</label>
34+
<select class="form-input" formControlName="type" (change)="onTypeChange()">
35+
<option value="" disabled>Select a layer type</option>
36+
<option value="Imagery">Imagery</option>
37+
<option value="Feature">Feature</option>
38+
<option value="GeoPackage">GeoPackage</option>
39+
</select>
40+
<div class="type-description">
41+
<span *ngIf="layerForm.get('type').value === 'Imagery'" class="description-text">
42+
<i class="fa fa-info-circle"></i>
43+
WMS, XYZ or TMS Layers
44+
</span>
45+
<span *ngIf="layerForm.get('type').value === 'Feature'" class="description-text">
46+
<i class="fa fa-info-circle"></i>
47+
Static layers (KML/KMZ)
48+
</span>
49+
<span *ngIf="layerForm.get('type').value === 'GeoPackage'" class="description-text">
50+
<i class="fa fa-info-circle"></i>
51+
Downloadable GeoPackage layers
52+
</span>
53+
</div>
54+
<div class="field-error">
55+
<span class="error-text" [class.visible]="
56+
layerForm.get('type').invalid &&
57+
(layerForm.get('type').touched || layerForm.get('type').dirty)
58+
">
59+
Type is required
60+
</span>
61+
</div>
62+
</div>
63+
64+
<div *ngIf="layerForm.get('type').value === 'Imagery'" class="conditional-fields">
65+
<div class="form-field">
66+
<label class="field-label">Layer URL</label>
67+
<input type="text" class="form-input" formControlName="url"
68+
placeholder="http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
69+
<div class="field-error">
70+
<span class="error-text" [class.visible]="
71+
layerForm.get('url').invalid &&
72+
(layerForm.get('url').touched || layerForm.get('url').dirty)
73+
">
74+
URL is required for Imagery layers
75+
</span>
76+
</div>
77+
</div>
78+
79+
<div class="form-field">
80+
<label class="field-label">Format</label>
81+
<div class="radio-group">
82+
<label class="radio-label">
83+
<input type="radio" formControlName="format" value="XYZ" />
84+
<span>XYZ</span>
85+
</label>
86+
<label class="radio-label">
87+
<input type="radio" formControlName="format" value="TMS" />
88+
<span>TMS</span>
89+
</label>
90+
<label class="radio-label">
91+
<input type="radio" formControlName="format" value="WMS" />
92+
<span>WMS</span>
93+
</label>
94+
</div>
95+
</div>
96+
97+
<div class="form-field">
98+
<label class="checkbox-label">
99+
<input type="checkbox" formControlName="base" />
100+
<span>Base Layer</span>
101+
</label>
102+
</div>
103+
</div>
104+
105+
<div *ngIf="layerForm.get('type').value === 'GeoPackage'" class="conditional-fields">
106+
<div class="form-field">
107+
<label class="field-label">Choose GeoPackage File</label>
108+
<div class="file-upload-container">
109+
<input type="file" id="geopackage-file" class="file-input" accept=".gpkg"
110+
(change)="onGeoPackageFileSelected($event)" />
111+
<label for="geopackage-file" class="file-label">
112+
<i class="fa fa-upload"></i>
113+
<span *ngIf="!geopackageFileName">Select GeoPackage file...</span>
114+
<span *ngIf="geopackageFileName" class="file-name">{{ geopackageFileName }}</span>
115+
</label>
116+
</div>
117+
<div class="field-hint">
118+
<i class="fa fa-info-circle"></i>
119+
Select a .gpkg file to upload
120+
</div>
121+
</div>
122+
</div>
123+
124+
<div class="form-field">
125+
<label class="field-label">Description</label>
126+
<textarea class="form-input" formControlName="description" rows="3"
127+
placeholder="Enter layer description (optional)"></textarea>
128+
</div>
129+
</form>
130+
</div>
131+
132+
<div class="dialog-actions">
133+
<button class="action-button" (click)="cancel()">Cancel</button>
134+
<button class="action-button btn-primary" (click)="save()" [disabled]="canSave">
135+
<i class="fa fa-save"></i>
136+
Create Layer
137+
</button>
138+
</div>
139+
</div>

0 commit comments

Comments
 (0)