Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 15:40:11 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(maps): add the gmaps and the leaflet component pages

Browse source
This commit is contained in:
Alexander Zhukov 2017-05-06 20:02:26 +03:00
parent e5f3f211f9
commit 6d8d55c8cc
18 changed files with 180 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

10
.angular-cli.json
View file

@ -9,7 +9,12 @@
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
"favicon.ico",
{
"glob": "**/*",
"input": "../node_modules/leaflet/dist/images",
"output": "./assets/img/markers"
}
],
"index": "index.html",
"main": "main.ts",
@ -19,7 +24,8 @@
"testTsconfig": "tsconfig.spec.json",
"styles": [
"../node_modules/roboto-fontface/css/roboto/sass/roboto-fontface.scss",
"../node_modules/normalize.css/normalize.css"
"../node_modules/normalize.css/normalize.css",
"../node_modules/leaflet/dist/leaflet.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",

4
package.json
View file

@ -23,6 +23,7 @@
},
"private": true,
"dependencies": {
"@agm/core": "1.0.0-beta.0",
"@angular/animations": "4.1.0",
"@angular/common": "4.1.0",
"@angular/compiler": "4.1.0",
@ -33,6 +34,7 @@
"@angular/platform-browser-dynamic": "4.1.0",
"@angular/platform-server": "4.1.0",
"@angular/router": "4.1.0",
"@asymmetrik/angular2-leaflet": "2.1.4",
"@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.25",
"bootstrap": "4.0.0-alpha.6",
"ckeditor": "4.6.2",
@ -42,6 +44,7 @@
"immutable": "3.8.1",
"intl": "1.2.5",
"ionicons": "2.0.1",
"leaflet": "1.0.3",
"ng2-ckeditor": "1.1.6",
"normalize.css": "6.0.0",
"roboto-fontface": "0.7.0",
@ -55,6 +58,7 @@
"@angular/cli": "1.0.1",
"@angular/compiler-cli": "4.1.0",
"@types/jasmine": "2.5.38",
"@types/leaflet": "1.0.60",
"@types/node": "6.0.69",
"angular-cli-ghpages": "0.5.0",
"codelyzer": "2.0.1",

7
src/app/pages/forms/form-inputs/form-inputs.component.html
View file

@ -82,7 +82,6 @@
</div>
</div>
</nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card>
</div>
<div class="col-md-6">
@ -110,7 +109,6 @@
</fieldset>
</form>
</nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card>
<nga-card>
<nga-card-header>
@ -136,7 +134,6 @@
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
</nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card>
</div>
</div>
@ -216,7 +213,6 @@
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card>
</div>
<div class="col-md-6">
@ -253,7 +249,6 @@
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
</div>
</nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card>
<nga-card>
<nga-card-header>
@ -279,7 +274,6 @@
<span class="help-block">Rate: {{ rate2 }}</span>
</div>
</nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card>
<nga-card>
<nga-card-header>
@ -308,7 +302,6 @@
</select>
</div>
</nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card>
</div>
</div>

6
src/app/pages/forms/form-layouts/form-layouts.component.html
View file

@ -24,7 +24,6 @@
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card>
</div>
</div>
@ -86,7 +85,6 @@
</div>
</form>
</nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card>
<nga-card>
<nga-card-header>
@ -106,7 +104,6 @@
<button type="submit" class="btn btn-success">Send</button>
</form>
</nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card>
</div>
<div class="col-md-6">
@ -133,7 +130,6 @@
<button type="submit" class="btn btn-danger">Submit</button>
</form>
</nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card>
<nga-card>
<nga-card-header>
@ -170,7 +166,6 @@
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card>
</div>
</div>
@ -211,7 +206,6 @@
</div>
</form>
</nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card>
</div>
</div>

12
src/app/pages/maps/gmaps/gmaps.component.html Normal file
View file

@ -0,0 +1,12 @@
<div class="row">
<div class="col-md-12">
<nga-card size="xmedium">
<nga-card-header>Gmaps</nga-card-header>
<nga-card-body>
<agm-map [latitude]="lat" [longitude]="lng">
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>
</nga-card-body>
</nga-card>
</div>
</div>

15
src/app/pages/maps/gmaps/gmaps.component.scss Normal file
View file

@ -0,0 +1,15 @@
@import '~@nga/theme/overrides/bootstrap/styles/themes/nga.theme.default';
:host {
display: block;
nga-card {
nga-card-body {
/deep/ agm-map {
.agm-map-container-inner {
height: calc(#{$nga-card-height-xmedium} - 50px);
}
}
}
}
}

13
src/app/pages/maps/gmaps/gmaps.component.ts Normal file
View file

@ -0,0 +1,13 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-gmaps',
styleUrls: ['./gmaps.component.scss'],
templateUrl: './gmaps.component.html',
})
export class GmapsComponent {
lat: number = 51.678418;
lng: number = 7.809007;
}

11
src/app/pages/maps/leaflet/leaflet.component.html Normal file
View file

@ -0,0 +1,11 @@
<div class="row">
<div class="col-md-12">
<nga-card size="xmedium">
<nga-card-header>Leaflet</nga-card-header>
<nga-card-body>
<div leaflet [leafletOptions]="options">
</div>
</nga-card-body>
</nga-card>
</div>
</div>

13
src/app/pages/maps/leaflet/leaflet.component.scss Normal file
View file

@ -0,0 +1,13 @@
@import '~@nga/theme/overrides/bootstrap/styles/themes/nga.theme.default';
:host {
display: block;
nga-card {
nga-card-body {
.leaflet-container {
height: calc(#{$nga-card-height-xmedium} - 50px);
}
}
}
}

19
src/app/pages/maps/leaflet/leaflet.component.ts Normal file
View file

@ -0,0 +1,19 @@
import { Component } from '@angular/core';
import * as L from 'leaflet';
@Component({
selector: 'ngx-leaflet',
styleUrls: ['./leaflet.component.scss'],
templateUrl: './leaflet.component.html',
})
export class LeafletComponent {
options = {
layers: [
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' })
],
zoom: 5,
center: L.latLng({ lat: 38.991709, lng: -76.886109 }),
};
}

30
src/app/pages/maps/maps-routing.module.ts Normal file
View file

@ -0,0 +1,30 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MapsComponent } from './maps.component';
import { GmapsComponent } from './gmaps/gmaps.component';
import { LeafletComponent } from './leaflet/leaflet.component';
const routes: Routes = [{
path: '',
component: MapsComponent,
children: [{
path: 'gmaps',
component: GmapsComponent,
}, {
path: 'leaflet',
component: LeafletComponent,
}],
}];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class MapsRoutingModule { }
export const routedComponents = [
MapsComponent,
GmapsComponent,
LeafletComponent,
];

4
src/app/pages/maps/maps.component.ts
View file

@ -3,9 +3,7 @@ import { Component } from '@angular/core';
@Component({
selector: 'ngx-maps',
template: `
<p>
maps works!
</p>
<router-outlet></router-outlet>
`,
})
export class MapsComponent {

21
src/app/pages/maps/maps.module.ts Normal file
View file

@ -0,0 +1,21 @@
import { NgModule } from '@angular/core';
import { AgmCoreModule } from '@agm/core';
import { LeafletModule } from '@asymmetrik/angular2-leaflet';
import { SharedModule } from '../../shared.module';
import { MapsRoutingModule, routedComponents } from './maps-routing.module';
@NgModule({
imports: [
SharedModule,
AgmCoreModule.forRoot(),
LeafletModule.forRoot(),
MapsRoutingModule,
],
exports: [],
declarations: [
...routedComponents,
],
})
export class MapsModule { }

14
src/app/pages/pages-menu.ts
View file

@ -14,7 +14,7 @@ export const menuItems: List<NgaMenuItem> = List([{
title: 'UI Features',
icon: 'ion ion-ios-keypad-outline',
link: '/pages/ui-features',
children: List([{
children: List<NgaMenuItem>([{
title: 'Buttons',
link: '/pages/ui-features/buttons',
}, {
@ -34,7 +34,13 @@ export const menuItems: List<NgaMenuItem> = List([{
}, {
title: 'Maps',
icon: 'ion ion-ios-location-outline',
link: '/pages/maps',
children: List<NgaMenuItem>([{
title: 'Gmaps',
link: '/pages/maps/gmaps',
}, {
title: 'Leaflet',
link: '/pages/maps/leaflet',
}]),
}, {
title: 'Charts',
icon: 'ion ion-arrow-graph-up-right',
@ -42,7 +48,7 @@ export const menuItems: List<NgaMenuItem> = List([{
}, {
title: 'Editors',
icon: 'ion ion-edit',
children: List([{
children: List<NgaMenuItem>([{
title: 'TinyMCE',
link: '/pages/editors/tinymce',
}, {
@ -52,7 +58,7 @@ export const menuItems: List<NgaMenuItem> = List([{
}, {
title: 'Forms',
icon: 'ion-compose',
children: List([{
children: List<NgaMenuItem>([{
title: 'Form Inputs',
link: '/pages/forms/inputs',
}, {

3
src/app/pages/pages-routing.module.ts
View file

@ -4,7 +4,6 @@ import { NgModule } from '@angular/core';
import { PagesComponent } from './pages.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ComponentsComponent } from './components/components.component';
import { MapsComponent } from './maps/maps.component';
import { ChartsComponent } from './charts/charts.component';
const routes: Routes = [{
@ -21,7 +20,7 @@ const routes: Routes = [{
component: ComponentsComponent,
}, {
path: 'maps',
component: MapsComponent,
loadChildren: './maps/maps.module#MapsModule',
}, {
path: 'charts',
component: ChartsComponent,

2
src/app/pages/pages.module.ts
View file

@ -8,14 +8,12 @@ import { PagesComponent } from './pages.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { PagesRoutingModule } from './pages-routing.module';
import { ThemeModule } from '../@theme/theme.module';
import { MapsComponent } from './maps/maps.component';
import { ComponentsComponent } from './components/components.component';
import { ChartsComponent } from './charts/charts.component';
const PAGES_COMPONENTS = [
PagesComponent,
DashboardComponent,
MapsComponent,
ComponentsComponent,
ChartsComponent,
];

1
src/app/pages/ui-features/grid/grid.component.html
View file

@ -246,7 +246,6 @@
</table>
</div>
</nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card>
</div>
</div>

22
yarn.lock
View file

@ -2,6 +2,10 @@
# yarn lockfile v1
"@agm/core@1.0.0-beta.0":
version "1.0.0-beta.0"
resolved "https://registry.yarnpkg.com/@agm/core/-/core-1.0.0-beta.0.tgz#5ca53f0efa321e1e24c7ba3a6be72f96bccf82a4"
"@angular/animations@4.1.0":
version "4.1.0"
resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-4.1.0.tgz#97b642aee01b5406e03ec65e499342ba91e2dd38"
@ -123,6 +127,10 @@
dependencies:
tsickle "^0.21.0"
"@asymmetrik/angular2-leaflet@2.1.4":
version "2.1.4"
resolved "https://registry.yarnpkg.com/@asymmetrik/angular2-leaflet/-/angular2-leaflet-2.1.4.tgz#3d55155f77008753bce40f0af53aa2a7ec23916b"
"@ng-bootstrap/ng-bootstrap@1.0.0-alpha.25":
version "1.0.0-alpha.25"
resolved "https://registry.yarnpkg.com/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-1.0.0-alpha.25.tgz#68cc2afa17fb5bdd2d775b7f82cffa86ef21b0ed"
@ -140,10 +148,20 @@
magic-string "^0.19.0"
source-map "^0.5.6"
"@types/geojson@*":
version "1.0.2"
resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-1.0.2.tgz#b02d10ab028e2928ac592a051aaa4981a1941d03"
"@types/jasmine@2.5.38":
version "2.5.38"
resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.5.38.tgz#a4379124c4921d4e21de54ec74669c9e9b356717"
"@types/leaflet@1.0.60":
version "1.0.60"
resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.0.60.tgz#48b9ca197a78fa5e1bb3aeac614f286c08951834"
dependencies:
"@types/geojson" "*"
"@types/node@6.0.69", "@types/node@^6.0.46":
version "6.0.69"
resolved "https://registry.yarnpkg.com/@types/node/-/node-6.0.69.tgz#82d955985fcad2b95a72fcf5f8ea630d772535a7"
@ -3106,6 +3124,10 @@ ldjson-stream@^1.2.1:
split2 "^0.2.1"
through2 "^0.6.1"
leaflet@1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.0.3.tgz#1f401b98b45c8192134c6c8d69686253805007c8"
less-loader@^4.0.2:
version "4.0.3"
resolved "https://registry.yarnpkg.com/less-loader/-/less-loader-4.0.3.tgz#d1e6462ca2f090c11248455e14b8dda4616d0521"