Skip to content

Commit 3bfd633

Browse files
ryanslattenryanslatten
committed
initial commit
1 parent 514fc7f commit 3bfd633

15 files changed

+1903
-4
lines changed

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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
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 { LayerDeleteDialogComponent } from './dashboard/layer-delete-dialog/layer-delete-dialog.component';
15+
import { CreateLayerDialogComponent } from './create-layer/create-layer.component';
16+
import { LayersService } from './layers.service';
17+
import { AdminBreadcrumbModule } from '../admin-breadcrumb/admin-breadcrumb.module';
18+
19+
@NgModule({
20+
declarations: [
21+
LayerDashboardComponent,
22+
LayerDeleteDialogComponent,
23+
CreateLayerDialogComponent
24+
],
25+
imports: [
26+
CommonModule,
27+
FormsModule,
28+
ReactiveFormsModule,
29+
MatDialogModule,
30+
MatButtonModule,
31+
MatPaginatorModule,
32+
MatTableModule,
33+
MatIconModule,
34+
MatSelectModule,
35+
MatFormFieldModule,
36+
MatTooltipModule,
37+
CoreModule,
38+
AdminBreadcrumbModule
39+
],
40+
providers: [
41+
LayersService
42+
],
43+
exports: [
44+
LayerDashboardComponent
45+
]
46+
})
47+
export class AdminLayersModule { }

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

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

0 commit comments

Comments
 (0)