Commit 34977f7c authored by seyed.takyar's avatar seyed.takyar
Browse files

Creating Layer Editor and Legend service for manipulating Legends

Some changes in frontend
Adding an editlayer icon to each esri-layer on the map
parent a090aa87
Pipeline #143325 passed with stage
in 2 minutes and 5 seconds
import { TestBed } from '@angular/core/testing';
import { LegendServiceService } from './legend-service.service';
describe('LegendServiceService', () => {
let service: LegendServiceService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(LegendServiceService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});
import { TestBed } from '@angular/core/testing';
import { LayerServiceService } from './layer-service.service';
import { LegendService } from './legend.service';
describe('LayerServiceService', () => {
let service: LayerServiceService;
describe('LegendService', () => {
let service: LegendService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(LayerServiceService);
service = TestBed.inject(LegendService);
});
it('should be created', () => {
......
......@@ -3,7 +3,7 @@ import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class LegendServiceService {
export class LegendService {
constructor() { }
}
......@@ -107,6 +107,7 @@ import { VisualizationPanelComponent } from './components/visualization-panel/vi
import { EsriMapComponent } from './components/esri-map/esri-map.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { LayerManagerComponent } from './components/layer-manager/layer-manager.component';
import { LayerEditorComponent } from './components/layer-editor/layer-editor.component';
......@@ -129,7 +130,8 @@ import { LayerManagerComponent } from './components/layer-manager/layer-manager.
VisualizationPanelComponent,
EsriMapComponent,
DashboardComponent,
LayerManagerComponent
LayerManagerComponent,
LayerEditorComponent
],
......
......@@ -7,5 +7,7 @@
<app-layer-manager ></app-layer-manager>
<app-layer-editor ></app-layer-editor>
......@@ -17,6 +17,8 @@ import { PrimeNGConfig } from 'primeng/api';
import { Component, OnInit, ViewChild, ElementRef, Output, EventEmitter } from '@angular/core';
import { loadModules } from 'esri-loader';
import { LayerEditorComponent } from '../layer-editor/layer-editor.component';
......@@ -37,6 +39,7 @@ export class EsriMapComponent implements OnInit {
color1: string = "#1976D2";
color2: string = "#1976D2";
@ViewChild(LayerEditorComponent ) layerEditorComponent: LayerEditorComponent ;
value1: string;
map: __esri.Map;
......@@ -277,6 +280,11 @@ export class EsriMapComponent implements OnInit {
item.actionsSections = [
[
{
title: "Edit Layer",
className: "esri-icon-edit",
id: "edit-layer"
},
{
title: "Go to full extent",
className: "esri-icon-zoom-out-fixed",
......@@ -394,6 +402,9 @@ export class EsriMapComponent implements OnInit {
layerList.viewModel.moveListItem(event.item, null, null, layerToMoveIdx + 2);
}
}else if (id === "edit-layer") {
this.layerEditorComponent.showMaximizableDialog();
}
......
<p-dialog header="Layer Editor" [(visible)]="display" [modal]="true" [style]="{width: '50vw'}" style="background-color: black; min-width: 400px !important;" [maximizable]="true"
[draggable]="false" [resizable]="true" >
<div class="card" >
<p-tabView styleClass="tabview-custom" >
<p-tabPanel style="width: 400px; ">
<ng-template pTemplate="header" >
<i class=""></i>
<span>Edit Legend</span>
</ng-template>
<p-colorPicker [(ngModel)]="color1"></p-colorPicker>
<p-colorPicker [(ngModel)]="color2"></p-colorPicker>
<p-colorPicker [(ngModel)]="color3"></p-colorPicker>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</p-tabPanel>
</p-tabView>
</div>
<ng-template pTemplate="footer">
<p-button icon="pi pi-check" (click)="display=false; addLayer()" label="Ok" styleClass="p-button-text" ></p-button>
</ng-template>
</p-dialog>
.round-button {
height: 33px;
width: 33px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
background-color: #fff;
color: #6e6e6e;
border-color: 6e6e6e;
}
#rendererDiv {
padding-left: 7px !important;
}
#rendererDiv :hover {
background-color: rgb(134, 133, 136) !important;
}
.p-tabview .p-tabview-panels {
background: #ffffff !important;
padding: 1rem;
border: 0 none;
color: #d8d8d8 !important;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.p-tabview-nav {
background: #ffffff !important;
font-size: smaller;
padding: 0px;
}
.p-tabview .p-tabview-nav {
border-width: 1px !important;
border-color: white !important;
}
.p-tabview .p-tabview-nav .p-tabview-nav-link {
background: #ffffff !important;
border-color: #4d4d4d !important;
color: #ffffff !important;
padding: 1px !important;
}
.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
background: #ffffff !important;
border-color: #ffffff !important;
border-width: 1px !important;
color: #ffffff !important;
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: #ffffff !important;
border-color: #dddddd;
border-width: 1px !important;
color: #ffffff !important;
}
.p-tabview .p-tabview-nav .p-tabview-nav-link {
background: #ffffff !important;
border-color: #dddddd;
color: #ffffff;
border-width: 1px !important;
}
.p-button:enabled {
background: #ffffff;
color: rgb(97, 97, 97);
border-color: #fff;
}
.p-button:enabled:hover {
background: #e3e3e3;
color: #000;
}
.p-tabview-panels{
background: #e3e3e3 !important;
color: #000 !important;
}
// Tabview css
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
margin:0px;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
border-radius: 20px 20px 0px 0px;
color: black;
}
.tab .subtab {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 1px 16px;
transition: 0.3s;
font-size: 17px;
border-radius: 0px 20px 0px 0px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: rgb(54 59 64);
color: white;
}
/* Style the tab content */
.tabcontent {
display: none;
border: 1px solid #ccc;
border-top: none;
height: 100%;
}
/* Style the tab content */
.subtabcontent {
display: none;
border: 1px solid #ccc;
border-top: none;
height: 100%;
}
.tabDefault {
display: block;
}
\ No newline at end of file
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { LayerEditorComponent } from './layer-editor.component';
describe('LayerEditorComponent', () => {
let component: LayerEditorComponent;
let fixture: ComponentFixture<LayerEditorComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ LayerEditorComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(LayerEditorComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit,SystemJsNgModuleLoader, ViewEncapsulation } from '@angular/core';
import { EsriMapComponent } from '../esri-map/esri-map.component';
@Component({
selector: 'app-layer-editor',
templateUrl: './layer-editor.component.html',
styleUrls: ['./layer-editor.component.scss'],
encapsulation:ViewEncapsulation.Emulated
})
export class LayerEditorComponent implements OnInit {
layerTypes : any = [];
selectedLayerType: string;
color1: string;
color2: string = "#1976D2";
color3: string;
constructor( private esriMapComponent: EsriMapComponent ) {
this.layerTypes = [
{name: 'Imagery Layer', code: 'IMG'},
{name: 'WMS Layer', code: 'WMS'}
]
}
ngOnInit() {
}
display: boolean;
displayPosition: boolean;
position: string;
public esriLayerServiceURL: String;
showMaximizableDialog() {
this.display = true;
}
showPositionDialog(position: string) {
this.position = position;
this.displayPosition = true;
}
public updateLayer(){
alert("Are you sure you want to add this layer? : "+ this.esriLayerServiceURL);
this.esriMapComponent.updateLayer(this.esriLayerServiceURL)
}
public addLayer(){
alert("Are you sure you want to add this layer? : "+ this.esriLayerServiceURL);
this.esriMapComponent.addLayer(this.esriLayerServiceURL)
}
}
<button id="rendererDiv" class="pi pi-plus round-button" pButton (click)="showMaximizableDialog()"></button>
<p-dialog header="Layer Editor" [(visible)]="displayMaximizable" [modal]="true" [style]="{width: '50vw'}" style="background-color: black; min-width: 400px !important;" [maximizable]="true"
<p-dialog header="Add Layer" [(visible)]="displayMaximizable" [modal]="true" [style]="{width: '50vw'}" style="background-color: black; min-width: 400px !important;" [maximizable]="true"
[draggable]="false" [resizable]="true" >
......@@ -31,18 +31,7 @@
</p-tabPanel>
<p-tabPanel header="Header II">
<ng-template pTemplate="header">
<i class=""></i>
<span>Edit Layer</span>
</ng-template>
<p>
fiugerfugergferougferugferuf
rofuirheofheroiher
roigfroegferogberugbf
fkerfrehper
</p>
</p-tabPanel>
</p-tabView>
</div>
......
......@@ -124,7 +124,6 @@
transition: 0.3s;
font-size: 17px;
border-radius: 0px 20px 0px 0px;
}
/* Change background color of buttons on hover */
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment