diff --git a/package.json b/package.json index 2946844..e0e50f0 100644 --- a/package.json +++ b/package.json @@ -1,99 +1,101 @@ { - "name": "covalent-quickstart", - "version": "1.0.0-beta.1", - "private": true, - "description": "Quickstart App with @covalent packages", - "keywords": [ - "angular", - "components", - "reusable" - ], - "scripts": { - "e2e": "protractor", - "e2e-test": "protractor ./protractor.conf.js", - "lint": "tslint -c ./tslint.json \"./src/**/*.ts\" -e \"./src/**/typings.d.ts\" -e \"./src/environments/**\"", - "reinstall": "rm -rf node_modules tmp deploy dist && npm i", - "postinstall": "webdriver-manager update", - "start-api": "cd mock-api && covalent-data &", - "stop-api": "pkill covalent-data", - "webdriver-update": "bash ./node_modules/.bin/webdriver-manager update", - "test": "ng test --code-coverage --single-run", - "ghpages-deploy": "ng build --base-href /covalent-quickstart/ --aot -prod && bash scripts/ghpages-deploy" - }, - "engines": { - "node": ">4.4 < 7", - "npm": ">3" - }, - "repository": { - "type": "git", - "url": "https://github.com/teradata/covalent-quickstart.git" - }, - "license": "MIT", - "author": "Teradata UX", - "contributors": [ - "Kyle Ledbetter ", - "Richa Vyas ", - "Ed Morales ", - "Jason Weaver ", - "Jeremy Smartt ", - "Ilsun Park " - ], - "dependencies": { - "@angular/common": "2.4.5", - "@angular/compiler": "2.4.5", - "@angular/core": "2.4.5", - "@angular/forms": "2.4.5", - "@angular/http": "2.4.5", - "@angular/material": "2.0.0-beta.1", - "@angular/platform-browser": "2.4.5", - "@angular/platform-browser-dynamic": "2.4.5", - "@angular/platform-server": "2.4.5", - "@angular/router": "3.4.5", - "@covalent/core": "1.0.0-beta.1", - "@covalent/charts": "1.0.0-beta.1", - "@covalent/dynamic-forms": "1.0.0-beta.1", - "@covalent/highlight": "1.0.0-beta.1", - "@covalent/http": "1.0.0-beta.1", - "@covalent/markdown": "1.0.0-beta.1", - "@swimlane/ngx-charts": "^3.1.2", - "core-js": "^2.4.1", - "hammerjs": "^2.0.8", - "highlight.js": "9.9.0", - "rxjs": "^5.0.1", - "showdown": "1.6.0", - "zone.js": "^0.7.2", - "moment": "^2.17.1", - "d3": "^4.4.0", - "ag-grid": "7.2.x", - "ag-grid-ng2": "7.2.x" - }, - "devDependencies": { - "@angular/compiler-cli": "2.4.5", - "@types/hammerjs": "2.0.30", - "@types/jasmine": "2.2.31", - "@types/node": "6.0.34", - "@types/selenium-webdriver": "2.53.36", - "angular-cli": "1.0.0-beta.26", - "codelyzer": "2.0.0-beta.4", - "ember-cli-inject-live-reload": "1.4.0", - "jasmine-core": "2.4.1", - "jasmine-spec-reporter": "2.5.0", - "karma": "1.2.0", - "karma-chrome-launcher": "2.0.0", - "karma-cli": "1.0.1", - "karma-jasmine": "1.0.2", - "karma-remap-istanbul": "0.2.1", - "karma-firefox-launcher": "1.0.0", - "karma-phantomjs-launcher": "1.0.1", - "node-sass": "3.8.0", - "phantomjs-prebuilt": "2.1.7", - "protractor": "4.0.5", - "sass-loader": "^4.0.2", - "ts-node": "1.2.1", - "tslint": "^4.3.1", - "typescript": "2.1.5" - }, - "optionalDependencies": { - "@covalent/data": "0.4.0" - } -} \ No newline at end of file + "name": "covalent-quickstart", + "version": "1.0.0-beta.1", + "private": true, + "description": "Quickstart App with @covalent packages", + "keywords": [ + "angular", + "components", + "reusable" + ], + "scripts": { + "e2e": "protractor", + "e2e-test": "protractor ./protractor.conf.js", + "lint": "tslint -c ./tslint.json \"./src/**/*.ts\" -e \"./src/**/typings.d.ts\" -e \"./src/environments/**\"", + "reinstall": "rm -rf node_modules tmp deploy dist && npm i", + "postinstall": "webdriver-manager update", + "start-api": "cd mock-api && covalent-data &", + "stop-api": "pkill covalent-data", + "webdriver-update": "bash ./node_modules/.bin/webdriver-manager update", + "test": "ng test --code-coverage --single-run", + "ghpages-deploy": "ng build --base-href /covalent-quickstart/ --aot -prod && bash scripts/ghpages-deploy" + }, + "engines": { + "node": ">4.4 < 7", + "npm": ">3" + }, + "repository": { + "type": "git", + "url": "https://github.com/teradata/covalent-quickstart.git" + }, + "license": "MIT", + "author": "Teradata UX", + "contributors": [ + "Kyle Ledbetter ", + "Richa Vyas ", + "Ed Morales ", + "Jason Weaver ", + "Jeremy Smartt ", + "Ilsun Park " + ], + "dependencies": { + "@angular/common": "2.4.5", + "@angular/compiler": "2.4.5", + "@angular/core": "2.4.5", + "@angular/forms": "2.4.5", + "@angular/http": "2.4.5", + "@angular/material": "2.0.0-beta.1", + "@angular/platform-browser": "2.4.5", + "@angular/platform-browser-dynamic": "2.4.5", + "@angular/platform-server": "2.4.5", + "@angular/router": "3.4.5", + "@covalent/charts": "1.0.0-beta.1", + "@covalent/core": "1.0.0-beta.1", + "@covalent/dynamic-forms": "1.0.0-beta.1", + "@covalent/highlight": "1.0.0-beta.1", + "@covalent/http": "1.0.0-beta.1", + "@covalent/markdown": "1.0.0-beta.1", + "@swimlane/ngx-charts": "^3.1.2", + "@types/leaflet": "^1.0.54", + "ag-grid": "7.2.x", + "ag-grid-ng2": "7.2.x", + "core-js": "^2.4.1", + "d3": "^4.4.0", + "hammerjs": "^2.0.8", + "highlight.js": "9.9.0", + "leaflet": "^1.0.3", + "moment": "^2.17.1", + "rxjs": "^5.0.1", + "showdown": "1.6.0", + "zone.js": "^0.7.2" + }, + "devDependencies": { + "@angular/compiler-cli": "2.4.5", + "@types/hammerjs": "2.0.30", + "@types/jasmine": "2.2.31", + "@types/node": "6.0.34", + "@types/selenium-webdriver": "2.53.36", + "angular-cli": "1.0.0-beta.26", + "codelyzer": "2.0.0-beta.4", + "ember-cli-inject-live-reload": "1.4.0", + "jasmine-core": "2.4.1", + "jasmine-spec-reporter": "2.5.0", + "karma": "1.2.0", + "karma-chrome-launcher": "2.0.0", + "karma-cli": "1.0.1", + "karma-jasmine": "1.0.2", + "karma-remap-istanbul": "0.2.1", + "karma-firefox-launcher": "1.0.0", + "karma-phantomjs-launcher": "1.0.1", + "node-sass": "3.8.0", + "phantomjs-prebuilt": "2.1.7", + "protractor": "4.0.5", + "sass-loader": "^4.0.2", + "ts-node": "1.2.1", + "tslint": "^4.3.1", + "typescript": "2.1.5" + }, + "optionalDependencies": { + "@covalent/data": "0.4.0" + } +} diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2f1d0c3..e5dec2e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -15,8 +15,7 @@ import { TemplatesComponent } from './templates/templates.component'; import { appRoutes, appRoutingProviders } from './app.routes'; import { AgGridModule } from 'ag-grid-ng2/main'; import { ChartComponent } from '../components/chart/chart.component'; -import { CandTLeafletComponent } from 'angular2.leaflet.components'; -import { CandTLeafletService } from 'angular2.leaflet.components'; + import { RequestInterceptor } from '../config/interceptors/request.interceptor'; @@ -30,6 +29,8 @@ import { RoadToCategoryComponent } from './data/road-to-category/road-to-categor import { CrossSectionComponent } from './data/cross-section/cross-section.component'; import { EditorComponent } from '../helpers/editor.component'; import { RendererComponent } from '../helpers/renderer.component'; +import { MapEditorComponent } from '../helpers/map-editor.component'; +import { MapRendererComponent } from '../helpers/map-renderer.component'; import { FlowIntensityComponent } from './data/flow-intensity/flow-intensity.component'; import { RoadComponent } from './data/road/road.component'; import { RoadServiceComponent } from './data/road-service/road-service.component'; @@ -76,6 +77,8 @@ const httpInterceptorProviders: Type[] = [ RoadSurfaceComponent, EditorComponent, RendererComponent, + MapEditorComponent, + MapRendererComponent, RoadWidthComponent, RoadToCategoryComponent, FlowIntensityComponent, @@ -83,8 +86,7 @@ const httpInterceptorProviders: Type[] = [ CrossSectionComponent, RoadServiceComponent, SettlementAddressLinkComponent, - MapComponent, - CandTLeafletComponent + MapComponent ], // directives, components, and pipes owned by this NgModule imports: [ BrowserModule, @@ -93,6 +95,8 @@ const httpInterceptorProviders: Type[] = [ ServiceObjectComponent, EditorComponent, RendererComponent, + MapEditorComponent, + MapRendererComponent, RoadSurfaceComponent, RoadWidthComponent, RoadToCategoryComponent, @@ -139,8 +143,7 @@ const httpInterceptorProviders: Type[] = [ RoadServiceService, RoadServiceCreateService, SettlementAddressLinkService, - SettlementAddressLinkCreateService, - CandTLeafletService, + SettlementAddressLinkCreateService ], // additional providers needed for this module entryComponents: [ ], bootstrap: [ AppComponent ], diff --git a/src/app/data/bus-stop/bus-stop.component.ts b/src/app/data/bus-stop/bus-stop.component.ts index f57a194..79bd371 100644 --- a/src/app/data/bus-stop/bus-stop.component.ts +++ b/src/app/data/bus-stop/bus-stop.component.ts @@ -8,6 +8,8 @@ import { BusStopService } from '../../../services/bus-stop.service'; import { BusStop } from '../../../models/bus-stop'; import { EditorComponent } from '../../../helpers/editor.component'; import { RendererComponent } from '../../../helpers/renderer.component'; +import { MapEditorComponent } from '../../../helpers/map-editor.component'; +import { MapRendererComponent } from '../../../helpers/map-renderer.component'; import { BusStopCreateService } from '../../../services/bus-stop-create.service'; import { BooleanSelectListService } from '../../../services/boolean-select-list.service'; import { RegionSelectList } from '../../../models/region-select-list'; @@ -116,7 +118,6 @@ export class BusStopComponent extends StatementBase { labelCol: 'value', }, }, - , { headerName: 'Наявність елементів зупин. майдан', field: 'areaStopAvailability', @@ -175,6 +176,16 @@ export class BusStopComponent extends StatementBase { field: 'yearRepair', editable: true, }, + { + headerName: 'position', + field: 'position', + editable: true, + cellEditorFramework: MapEditorComponent, + cellRendererFramework: MapRendererComponent, + cellEditorParams: { + position: 'position' + }, + }, ]; } diff --git a/src/helpers/map-editor.component.ts b/src/helpers/map-editor.component.ts new file mode 100644 index 0000000..d2e2fe8 --- /dev/null +++ b/src/helpers/map-editor.component.ts @@ -0,0 +1,95 @@ +import { Component, ViewContainerRef, ViewChild, AfterViewInit } from '@angular/core'; + +import { AgEditorComponent } from 'ag-grid-ng2/main'; +import * as L from 'leaflet'; + +@Component({ + selector: 'editor-cell', + template: ` +
+
+
+ ` +}) +export class MapEditorComponent implements AgEditorComponent, AfterViewInit { + @ViewChild('container', {read: ViewContainerRef}) + public container; + public item: Object = null; + public data: Object[]; + private params: any; + public map: L.Map; + public icon: L.Icon; + public status: boolean = false; + ngAfterViewInit() { + + } + + agInit(params: any): void { + this.params = params; + this.icon = L.icon({ + iconUrl: '/assets/icons/marker-icon.png', + iconSize: [25, 41], // size of the icon + popupAnchor: [-3, -76], // point from which the popup should open relative to the iconAnchor + }); + this.map = L.map('mapId').setView([51.505, -0.09], 13); + L.tileLayer('https://a.tile.openstreetmap.org/{z}/{x}/{y}.png', { + maxZoom: 18, + }).addTo(this.map); + if(params.value != null){ + this.status = true; + let options = { + draggable:true, + icon: this.icon, + }; + let latLng = params.value.split(','); + let marker = L.marker(new L.LatLng(latLng[0],latLng[1]),options); + marker.on('dragend', this.onDraged.bind(this)); + this.map.addLayer(marker); + } + this.data = params.data || []; + this.map.on('click', this.onMapClick.bind(this)); + console.log(this); + } + + getValue(): any { + return this.item; + } + + isPopup(): boolean { + return true; + } + + setValue(item: Object): void { + this.item = item; + } + + onDraged(e){ + let marker = e.target; + let position = marker.getLatLng(); + marker.setLatLng(new L.LatLng(position.lat, position.lng),{draggable:true}); + this.item = position.lat +','+ position.lng; + } + onClick(item: Object) { + this.setValue(item); + this.params.api.stopEditing(); + } + + onKeyDown(event): boolean { + event.stopPropagation(); + return false; + } + + onMapClick(e) { + + if(!this.status){ + let options = { + draggable:true, + icon: this.icon, + }; + let marker = L.marker(e.latlng,options); + this.item = e.latlng.lat +','+ e.latlng.lng; + this.map.addLayer(marker); + marker.on('dragend', this.onDraged.bind(this)); + } + }; +} diff --git a/src/helpers/map-renderer.component.ts b/src/helpers/map-renderer.component.ts new file mode 100644 index 0000000..d99be5e --- /dev/null +++ b/src/helpers/map-renderer.component.ts @@ -0,0 +1,26 @@ +import { Component } from '@angular/core'; + +import { AgRendererComponent } from 'ag-grid-ng2/main'; + +import { RegionSelectList } from '../models/region-select-list'; + +@Component({ + selector: 'render-cell', + template: `{{this.label}}` +}) +export class MapRendererComponent implements AgRendererComponent { + private params: any; + private model: Object = null; + private label: string = null; + agInit(params: any): void { + this.params = params; + this.setValue(params); + } + refresh(params: any): void { + this.params = params; + this.setValue(params); + } + private setValue(params) { + this.label = params.value; + } +} diff --git a/src/models/bus-stop.ts b/src/models/bus-stop.ts index 33144cf..17597ef 100644 --- a/src/models/bus-stop.ts +++ b/src/models/bus-stop.ts @@ -13,4 +13,5 @@ export class BusStop { yearBuild: string; yearRepair: string; stateCommonId: number; + position: string; } diff --git a/src/styles.scss b/src/styles.scss index 1d8bc74..346d9f9 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -30,4 +30,13 @@ a[md-icon-button] { margin-top: -10px; } } +} + +.map-container{ + height: 400px; + width: 400px; +} +#mapId{ + height: 400px; + width: 400px; } \ No newline at end of file -- libgit2 0.21.4