diff --git a/config/webpack.common.js b/config/webpack.common.js
index 7c8a1df7..b68aef5b 100644
--- a/config/webpack.common.js
+++ b/config/webpack.common.js
@@ -228,7 +228,11 @@ module.exports = {
$: 'jquery',
jquery: 'jquery',
"Tether": 'tether',
- "window.Tether": "tether"
+ "window.Tether": "tether",
+ "GoogleMapsLoader": "google-maps",
+ "L": "leaflet",
+ "Chart": "chart.js",
+ "Chartist": "chartist",
})
],
diff --git a/package.json b/package.json
index a0cc235d..8ebdb035 100644
--- a/package.json
+++ b/package.json
@@ -54,13 +54,19 @@
"@angular2-material/radio": "2.0.0-alpha.2",
"@angular2-material/sidenav": "2.0.0-alpha.2",
"@angular2-material/toolbar": "2.0.0-alpha.2",
+ "amcharts3": "github:amcharts/amcharts3",
+ "ammap3": "github:amcharts/ammap3",
"angular2": "2.0.0-beta.15",
"bootstrap": "^4.0.0-alpha.2",
"bootstrap-loader": "^1.0.8",
+ "chartist": "^0.9.7",
"core-js": "^2.2.2",
"font-awesome": "^4.6.1",
"font-awesome-sass-loader": "^1.0.1",
+ "google-maps": "^3.2.1",
"jquery": "^2.2.3",
+ "leaflet-map": "^0.2.1",
+ "ng2-charts": "^1.0.3",
"normalize.css": "^4.1.1",
"rxjs": "5.0.0-beta.2",
"tether": "^1.2.4",
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 4477ef84..a7cb7668 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -2,9 +2,8 @@ import {Component, ViewEncapsulation} from 'angular2/core';
import {RouteConfig, Router} from 'angular2/router';
import {Subscription} from 'rxjs/Subscription';
-import {SidebarStateService} from './theme/sidebar/sidebarState.service';
-
import {Pages} from './pages';
+import {ThemeGlobal} from "./theme/theme.global";
// TODO: is it really the best place to globally require that dependency?
require("!style!css!sass!./theme/sass/_ionicons.scss");
@@ -16,7 +15,7 @@ require("!style!css!sass!./theme/sass/_ionicons.scss");
@Component({
selector: 'app',
pipes: [],
- providers: [SidebarStateService],
+ providers: [],
encapsulation: ViewEncapsulation.None,
styles: [require('normalize.css'), require('./app.scss')],
template: `
@@ -37,14 +36,16 @@ export class App {
isMenuCollapsed:boolean = false;
- private _sidebarStateSubscription:Subscription;
+ private _themeGlobalSubscription:Subscription;
- constructor(private _sidebarStateService:SidebarStateService) {
- this._sidebarStateSubscription = this._sidebarStateService.getStateStream().subscribe((isCollapsed) => this.isMenuCollapsed = isCollapsed);
+ constructor(private _themeGlobal:ThemeGlobal) {
+ this._themeGlobalSubscription = this._themeGlobal.getDataStream().subscribe((data) => {
+ this.isMenuCollapsed = data['menu.isCollapsed'] != null ? data['menu.isCollapsed'] : this.isMenuCollapsed;
+ });
}
ngOnDestroy() {
// prevent memory leak when component destroyed
- this._sidebarStateSubscription.unsubscribe();
+ this._themeGlobalSubscription.unsubscribe();
}
}
diff --git a/src/app/index.ts b/src/app/index.ts
index 9f3f7b13..b37a9e1b 100644
--- a/src/app/index.ts
+++ b/src/app/index.ts
@@ -1,7 +1,8 @@
// App
+import {ThemeGlobal} from "./theme/theme.global";
export * from './app.component';
// Application wide providers
export const APP_PROVIDERS = [
-
+ ThemeGlobal
];
diff --git a/src/app/pages/charts/charts.component.ts b/src/app/pages/charts/charts.component.ts
new file mode 100644
index 00000000..08c8f057
--- /dev/null
+++ b/src/app/pages/charts/charts.component.ts
@@ -0,0 +1,35 @@
+import {Component} from 'angular2/core';
+import {RouteConfig} from 'angular2/router';
+
+import {ChartJs} from "./components/chartJs";
+import {ChartistJs} from "./components/chartistJs/chartistJs.component";
+
+@Component({
+ selector: 'maps',
+ pipes: [],
+ providers: [],
+ styles: [],
+ template: ``
+})
+@RouteConfig([
+ {
+ name: 'ChartJs',
+ component: ChartJs,
+ path: '/chart-js',
+ useAsDefault: true,
+ },
+ {
+ name: 'ChartistJs',
+ component: ChartistJs,
+ path: '/chartist-js',
+ }
+])
+export class Charts {
+
+ constructor() {
+ }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/src/app/pages/charts/components/chartJs/chartJs.component.ts b/src/app/pages/charts/components/chartJs/chartJs.component.ts
new file mode 100644
index 00000000..280e8953
--- /dev/null
+++ b/src/app/pages/charts/components/chartJs/chartJs.component.ts
@@ -0,0 +1,71 @@
+import {Component, ViewEncapsulation} from 'angular2/core';
+import {BaCard} from '../../../../theme';
+
+import {ChartJsService} from "./chartJs.service";
+
+import {CHART_DIRECTIVES} from 'ng2-charts';
+import {chartColors} from "../../../../theme/theme.constants";
+
+@Component({
+ selector: 'chart-js',
+ pipes: [],
+ providers: [ChartJsService],
+ encapsulation: ViewEncapsulation.None,
+ styles: [require('./chartJs.scss')],
+ directives: [BaCard, CHART_DIRECTIVES],
+ template: require('./chartJs.html'),
+})
+export class ChartJs {
+
+ public labels = {
+ one: ["Sleeping", "Designing", "Coding", "Cycling"],
+ two: ["April", "May", "June", "Jule", "August", "September", "October", "November", "December"],
+ three: ["May", "June", "Jule", "August", "September", "October", "November"]
+ };
+ public data = {
+ one: [20, 40, 5, 35],
+ two: [[1, 9, 3, 4, 5, 6, 7, 8, 2].map((e) => {return Math.sin(e) * 25 + 25})],
+ three: [
+ [65, 59, 90, 81, 56, 55, 40],
+ [28, 48, 40, 19, 88, 27, 45]
+ ]
+ };
+ public series = ['Product A', 'Product B'];
+ public colours = chartColors;
+ public options = {
+ scaleShowLabelBackdrop : false,
+ segmentShowStroke : false,
+ // TODO: produce an error
+ // responsive: true,
+ scaleFontColor: "rgba(255,255,255,.7)",
+ scaleLineColor: "rgba(255,255,255,.7)",
+ pointLabelFontColor: "rgba(255,255,255,.7)"
+ };
+
+ constructor(private _chartJsService:ChartJsService) {
+ }
+
+ ngOnInit() {
+ // var self = this;
+ // setInterval(() => {
+ //
+ // var temp = [...this.data.two];
+ // temp[0].unshift(temp[0].pop());
+ // this.data.two = temp;
+ //
+ // }, 300);
+ }
+
+ chartType(type) {
+ return type;
+ }
+
+ changeData ($event) {
+ let shuffle = (o) => {
+ for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x){}
+ return o;
+ };
+
+ this.data = shuffle(this.data);
+ }
+}
diff --git a/src/app/pages/charts/components/chartJs/chartJs.html b/src/app/pages/charts/components/chartJs/chartJs.html
new file mode 100644
index 00000000..f5872bbf
--- /dev/null
+++ b/src/app/pages/charts/components/chartJs/chartJs.html
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Simple line chart
+
+ Line chart with area
+
+ Bi-polar line chart with area only
+
+
+
+
+
+
+ Simple bar chart
+
+ Multi-line labels bar chart
+
+ Stacked bar chart
+
+
+
+
Easily customizable.')
+ .openPopup();
+ }
+}
diff --git a/src/app/pages/maps/components/leafletMaps/leafletMaps.html b/src/app/pages/maps/components/leafletMaps/leafletMaps.html
new file mode 100644
index 00000000..116ed798
--- /dev/null
+++ b/src/app/pages/maps/components/leafletMaps/leafletMaps.html
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/app/pages/maps/components/leafletMaps/leafletMaps.scss b/src/app/pages/maps/components/leafletMaps/leafletMaps.scss
new file mode 100644
index 00000000..1c57a98f
--- /dev/null
+++ b/src/app/pages/maps/components/leafletMaps/leafletMaps.scss
@@ -0,0 +1,4 @@
+.leaflet-maps {
+ //TODO: hotfix
+ height: 320px;
+}
diff --git a/src/app/pages/maps/components/lineMaps/index.ts b/src/app/pages/maps/components/lineMaps/index.ts
new file mode 100644
index 00000000..1a7266b0
--- /dev/null
+++ b/src/app/pages/maps/components/lineMaps/index.ts
@@ -0,0 +1 @@
+export * from './lineMaps.component';
diff --git a/src/app/pages/maps/components/lineMaps/lineMaps.component.ts b/src/app/pages/maps/components/lineMaps/lineMaps.component.ts
new file mode 100644
index 00000000..0039f079
--- /dev/null
+++ b/src/app/pages/maps/components/lineMaps/lineMaps.component.ts
@@ -0,0 +1,55 @@
+import {Component, ViewEncapsulation} from 'angular2/core';
+import {BaCard} from '../../../../theme';
+
+import {layoutColors, layoutPaths} from "../../../../theme/theme.constants";
+import {LineMapsService} from "./lineMaps.service";
+
+require('ammap3');
+require('ammap3/ammap/maps/js/worldLow');
+
+@Component({
+ selector: 'line-maps',
+ pipes: [],
+ providers: [LineMapsService],
+ // otherwise maps won't work
+ encapsulation: ViewEncapsulation.None,
+ styles: [require('ammap3/ammap/ammap.css'), require('./lineMaps.scss')],
+ directives: [BaCard],
+ template: require('./lineMaps.html'),
+})
+export class LineMaps {
+
+ constructor(private _lineMapsService:LineMapsService) {
+ }
+
+ ngAfterViewInit() {
+
+ var map = AmCharts.makeChart('map-lines', {
+ type: 'map',
+ theme: this._lineMapsService.getTheme(),
+ dataProvider: this._lineMapsService.getDataProvider(),
+
+ areasSettings: {
+ unlistedAreasColor: layoutColors.info
+ },
+
+ imagesSettings: {
+ color: layoutColors.warningBg,
+ selectedColor: layoutColors.warning
+ },
+
+ linesSettings: {
+ color: layoutColors.warningBg,
+ alpha: 0.8
+ },
+
+ backgroundZoomsToTop: true,
+ linesAboveImages: true,
+
+ export: {
+ 'enabled': true
+ },
+ pathToImages: layoutPaths.images.amMap
+ });
+ }
+}
diff --git a/src/app/pages/maps/components/lineMaps/lineMaps.html b/src/app/pages/maps/components/lineMaps/lineMaps.html
new file mode 100644
index 00000000..7898fd35
--- /dev/null
+++ b/src/app/pages/maps/components/lineMaps/lineMaps.html
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/src/app/pages/maps/components/lineMaps/lineMaps.scss b/src/app/pages/maps/components/lineMaps/lineMaps.scss
new file mode 100644
index 00000000..2bb4ae3f
--- /dev/null
+++ b/src/app/pages/maps/components/lineMaps/lineMaps.scss
@@ -0,0 +1,4 @@
+.line-maps {
+ //TODO: hotfix
+ height: 320px;
+}
diff --git a/src/app/pages/maps/components/lineMaps/lineMaps.service.ts b/src/app/pages/maps/components/lineMaps/lineMaps.service.ts
new file mode 100644
index 00000000..2e0cd6fc
--- /dev/null
+++ b/src/app/pages/maps/components/lineMaps/lineMaps.service.ts
@@ -0,0 +1,444 @@
+import {Injectable} from 'angular2/core';
+import {layoutColors} from "../../../../theme/theme.constants";
+
+@Injectable()
+export class LineMapsService {
+
+ theme = {
+
+ themeName: "blur",
+
+ AmChart: {
+ color: layoutColors.defaultText,
+ backgroundColor: "#FFFFFF"
+ },
+
+ AmCoordinateChart: {
+ colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.warningLight, layoutColors.successDark, layoutColors.successLight, layoutColors.successBg]
+ },
+
+ AmStockChart: {
+ colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.warningLight, layoutColors.successDark, layoutColors.successLight, layoutColors.successBg]
+ },
+
+ AmSlicedChart: {
+ colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.warningLight, layoutColors.successDark, layoutColors.successLight, layoutColors.successBg],
+ labelTickColor: "#FFFFFF",
+ labelTickAlpha: 0.3
+ },
+
+ AmRectangularChart: {
+ zoomOutButtonColor: '#FFFFFF',
+ zoomOutButtonRollOverAlpha: 0.15,
+ zoomOutButtonImage: "lens.png"
+ },
+
+ AxisBase: {
+ axisColor: "#FFFFFF",
+ axisAlpha: 0.3,
+ gridAlpha: 0.1,
+ gridColor: "#FFFFFF"
+ },
+
+ ChartScrollbar: {
+ backgroundColor: "#FFFFFF",
+ backgroundAlpha: 0.12,
+ graphFillAlpha: 0.5,
+ graphLineAlpha: 0,
+ selectedBackgroundColor: "#FFFFFF",
+ selectedBackgroundAlpha: 0.4,
+ gridAlpha: 0.15
+ },
+
+ ChartCursor: {
+ cursorColor: layoutColors.primary,
+ color: "#FFFFFF",
+ cursorAlpha: 0.5
+ },
+
+ AmLegend: {
+ color: "#FFFFFF"
+ },
+
+ AmGraph: {
+ lineAlpha: 0.9
+ },
+ GaugeArrow: {
+ color: "#FFFFFF",
+ alpha: 0.8,
+ nailAlpha: 0,
+ innerRadius: "40%",
+ nailRadius: 15,
+ startWidth: 15,
+ borderAlpha: 0.8,
+ nailBorderAlpha: 0
+ },
+
+ GaugeAxis: {
+ tickColor: "#FFFFFF",
+ tickAlpha: 1,
+ tickLength: 15,
+ minorTickLength: 8,
+ axisThickness: 3,
+ axisColor: '#FFFFFF',
+ axisAlpha: 1,
+ bandAlpha: 0.8
+ },
+
+ TrendLine: {
+ lineColor: layoutColors.danger,
+ lineAlpha: 0.8
+ },
+
+ // ammap
+ AreasSettings: {
+ alpha: 0.8,
+ color: layoutColors.info,
+ colorSolid: layoutColors.primaryDark,
+ unlistedAreasAlpha: 0.4,
+ unlistedAreasColor: "#FFFFFF",
+ outlineColor: "#FFFFFF",
+ outlineAlpha: 0.5,
+ outlineThickness: 0.5,
+ rollOverColor: layoutColors.primary,
+ rollOverOutlineColor: "#FFFFFF",
+ selectedOutlineColor: "#FFFFFF",
+ selectedColor: "#f15135",
+ unlistedAreasOutlineColor: "#FFFFFF",
+ unlistedAreasOutlineAlpha: 0.5
+ },
+
+ LinesSettings: {
+ color: "#FFFFFF",
+ alpha: 0.8
+ },
+
+ ImagesSettings: {
+ alpha: 0.8,
+ labelColor: "#FFFFFF",
+ color: "#FFFFFF",
+ labelRollOverColor: layoutColors.primaryDark
+ },
+
+ ZoomControl: {
+ buttonFillAlpha: 0.8,
+ buttonIconColor: layoutColors.default,
+ buttonRollOverColor: layoutColors.danger,
+ buttonFillColor: layoutColors.primaryDark,
+ buttonBorderColor: layoutColors.primaryDark,
+ buttonBorderAlpha: 0,
+ buttonCornerRadius: 0,
+ gridColor: "#FFFFFF",
+ gridBackgroundColor: "#FFFFFF",
+ buttonIconAlpha: 0.6,
+ gridAlpha: 0.6,
+ buttonSize: 20
+ },
+
+ SmallMap: {
+ mapColor: "#000000",
+ rectangleColor: layoutColors.danger,
+ backgroundColor: "#FFFFFF",
+ backgroundAlpha: 0.7,
+ borderThickness: 1,
+ borderAlpha: 0.8
+ },
+
+ // the defaults below are set using CSS syntax, you can use any existing css property
+ // if you don't use Stock chart, you can delete lines below
+ PeriodSelector: {
+ color: "#FFFFFF"
+ },
+
+ PeriodButton: {
+ color: "#FFFFFF",
+ background: "transparent",
+ opacity: 0.7,
+ border: "1px solid rgba(0, 0, 0, .3)",
+ MozBorderRadius: "5px",
+ borderRadius: "5px",
+ margin: "1px",
+ outline: "none",
+ boxSizing: "border-box"
+ },
+
+ PeriodButtonSelected: {
+ color: "#FFFFFF",
+ backgroundColor: "#b9cdf5",
+ border: "1px solid rgba(0, 0, 0, .3)",
+ MozBorderRadius: "5px",
+ borderRadius: "5px",
+ margin: "1px",
+ outline: "none",
+ opacity: 1,
+ boxSizing: "border-box"
+ },
+
+ PeriodInputField: {
+ color: "#FFFFFF",
+ background: "transparent",
+ border: "1px solid rgba(0, 0, 0, .3)",
+ outline: "none"
+ },
+
+ DataSetSelector: {
+ color: "#FFFFFF",
+ selectedBackgroundColor: "#b9cdf5",
+ rollOverBackgroundColor: "#a8b0e4"
+ },
+
+ DataSetCompareList: {
+ color: "#FFFFFF",
+ lineHeight: "100%",
+ boxSizing: "initial",
+ webkitBoxSizing: "initial",
+ border: "1px solid rgba(0, 0, 0, .3)"
+ },
+
+ DataSetSelect: {
+ border: "1px solid rgba(0, 0, 0, .3)",
+ outline: "none"
+ }
+ };
+
+ getTheme() {
+ return this.theme;
+ }
+
+ getDataProvider() {
+
+ // svg path for target icon
+ let targetSVG = 'M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z';
+ // svg path for plane icon
+ let planeSVG = 'M19.671,8.11l-2.777,2.777l-3.837-0.861c0.362-0.505,0.916-1.683,0.464-2.135c-0.518-0.517-1.979,0.278-2.305,0.604l-0.913,0.913L7.614,8.804l-2.021,2.021l2.232,1.061l-0.082,0.082l1.701,1.701l0.688-0.687l3.164,1.504L9.571,18.21H6.413l-1.137,1.138l3.6,0.948l1.83,1.83l0.947,3.598l1.137-1.137V21.43l3.725-3.725l1.504,3.164l-0.687,0.687l1.702,1.701l0.081-0.081l1.062,2.231l2.02-2.02l-0.604-2.689l0.912-0.912c0.326-0.326,1.121-1.789,0.604-2.306c-0.452-0.452-1.63,0.101-2.135,0.464l-0.861-3.838l2.777-2.777c0.947-0.947,3.599-4.862,2.62-5.839C24.533,4.512,20.618,7.163,19.671,8.11z';
+
+ return {
+ map: 'worldLow',
+ linkToObject: 'london',
+ images: [ {
+ id: 'london',
+ svgPath: targetSVG,
+ title: 'London',
+ latitude: 51.5002,
+ longitude: -0.1262,
+ scale: 1.5,
+ zoomLevel: 2.74,
+ zoomLongitude: -20.1341,
+ zoomLatitude: 49.1712,
+
+ lines: [ {
+ latitudes: [ 51.5002, 50.4422 ],
+ longitudes: [ -0.1262, 30.5367 ]
+ }, {
+ latitudes: [ 51.5002, 46.9480 ],
+ longitudes: [ -0.1262, 7.4481 ]
+ }, {
+ latitudes: [ 51.5002, 59.3328 ],
+ longitudes: [ -0.1262, 18.0645 ]
+ }, {
+ latitudes: [ 51.5002, 40.4167 ],
+ longitudes: [ -0.1262, -3.7033 ]
+ }, {
+ latitudes: [ 51.5002, 46.0514 ],
+ longitudes: [ -0.1262, 14.5060 ]
+ }, {
+ latitudes: [ 51.5002, 48.2116 ],
+ longitudes: [ -0.1262, 17.1547 ]
+ }, {
+ latitudes: [ 51.5002, 44.8048 ],
+ longitudes: [ -0.1262, 20.4781 ]
+ }, {
+ latitudes: [ 51.5002, 55.7558 ],
+ longitudes: [ -0.1262, 37.6176 ]
+ }, {
+ latitudes: [ 51.5002, 38.7072 ],
+ longitudes: [ -0.1262, -9.1355 ]
+ }, {
+ latitudes: [ 51.5002, 54.6896 ],
+ longitudes: [ -0.1262, 25.2799 ]
+ }, {
+ latitudes: [ 51.5002, 64.1353 ],
+ longitudes: [ -0.1262, -21.8952 ]
+ }, {
+ latitudes: [ 51.5002, 40.4300 ],
+ longitudes: [ -0.1262, -74.0000 ]
+ } ],
+
+ images: [ {
+ label: 'Flights from London',
+ svgPath: planeSVG,
+ left: 100,
+ top: 45,
+ labelShiftY: 5,
+ labelShiftX: 5,
+ color: layoutColors.default,
+ labelColor: layoutColors.default,
+ labelRollOverColor: layoutColors.default,
+ labelFontSize: 20
+ }, {
+ label: 'show flights from Vilnius',
+ left: 106,
+ top: 70,
+ labelColor: layoutColors.default,
+ labelRollOverColor: layoutColors.default,
+ labelFontSize: 11,
+ linkToObject: 'vilnius'
+ } ]
+ },
+
+ {
+ id: 'vilnius',
+ svgPath: targetSVG,
+ title: 'Vilnius',
+ latitude: 54.6896,
+ longitude: 25.2799,
+ scale: 1.5,
+ zoomLevel: 4.92,
+ zoomLongitude: 15.4492,
+ zoomLatitude: 50.2631,
+
+ lines: [ {
+ latitudes: [ 54.6896, 50.8371 ],
+ longitudes: [ 25.2799, 4.3676 ]
+ }, {
+ latitudes: [ 54.6896, 59.9138 ],
+ longitudes: [ 25.2799, 10.7387 ]
+ }, {
+ latitudes: [ 54.6896, 40.4167 ],
+ longitudes: [ 25.2799, -3.7033 ]
+ }, {
+ latitudes: [ 54.6896, 50.0878 ],
+ longitudes: [ 25.2799, 14.4205 ]
+ }, {
+ latitudes: [ 54.6896, 48.2116 ],
+ longitudes: [ 25.2799, 17.1547 ]
+ }, {
+ latitudes: [ 54.6896, 44.8048 ],
+ longitudes: [ 25.2799, 20.4781 ]
+ }, {
+ latitudes: [ 54.6896, 55.7558 ],
+ longitudes: [ 25.2799, 37.6176 ]
+ }, {
+ latitudes: [ 54.6896, 37.9792 ],
+ longitudes: [ 25.2799, 23.7166 ]
+ }, {
+ latitudes: [ 54.6896, 54.6896 ],
+ longitudes: [ 25.2799, 25.2799 ]
+ }, {
+ latitudes: [ 54.6896, 51.5002 ],
+ longitudes: [ 25.2799, -0.1262 ]
+ }, {
+ latitudes: [ 54.6896, 53.3441 ],
+ longitudes: [ 25.2799, -6.2675 ]
+ } ],
+
+ images: [ {
+ label: 'Flights from Vilnius',
+ svgPath: planeSVG,
+ left: 100,
+ top: 45,
+ labelShiftY: 5,
+ labelShiftX: 5,
+ color: layoutColors.default,
+ labelColor: layoutColors.default,
+ labelRollOverColor: layoutColors.default,
+ labelFontSize: 20
+ }, {
+ label: 'show flights from London',
+ left: 106,
+ top: 70,
+ labelColor: layoutColors.default,
+ labelRollOverColor: layoutColors.default,
+ labelFontSize: 11,
+ linkToObject: 'london'
+ } ]
+ }, {
+ svgPath: targetSVG,
+ title: 'Brussels',
+ latitude: 50.8371,
+ longitude: 4.3676
+ }, {
+ svgPath: targetSVG,
+ title: 'Prague',
+ latitude: 50.0878,
+ longitude: 14.4205
+ }, {
+ svgPath: targetSVG,
+ title: 'Athens',
+ latitude: 37.9792,
+ longitude: 23.7166
+ }, {
+ svgPath: targetSVG,
+ title: 'Reykjavik',
+ latitude: 64.1353,
+ longitude: -21.8952
+ }, {
+ svgPath: targetSVG,
+ title: 'Dublin',
+ latitude: 53.3441,
+ longitude: -6.2675
+ }, {
+ svgPath: targetSVG,
+ title: 'Oslo',
+ latitude: 59.9138,
+ longitude: 10.7387
+ }, {
+ svgPath: targetSVG,
+ title: 'Lisbon',
+ latitude: 38.7072,
+ longitude: -9.1355
+ }, {
+ svgPath: targetSVG,
+ title: 'Moscow',
+ latitude: 55.7558,
+ longitude: 37.6176
+ }, {
+ svgPath: targetSVG,
+ title: 'Belgrade',
+ latitude: 44.8048,
+ longitude: 20.4781
+ }, {
+ svgPath: targetSVG,
+ title: 'Bratislava',
+ latitude: 48.2116,
+ longitude: 17.1547
+ }, {
+ svgPath: targetSVG,
+ title: 'Ljubljana',
+ latitude: 46.0514,
+ longitude: 14.5060
+ }, {
+ svgPath: targetSVG,
+ title: 'Madrid',
+ latitude: 40.4167,
+ longitude: -3.7033
+ }, {
+ svgPath: targetSVG,
+ title: 'Stockholm',
+ latitude: 59.3328,
+ longitude: 18.0645
+ }, {
+ svgPath: targetSVG,
+ title: 'Bern',
+ latitude: 46.9480,
+ longitude: 7.4481
+ }, {
+ svgPath: targetSVG,
+ title: 'Kiev',
+ latitude: 50.4422,
+ longitude: 30.5367
+ }, {
+ svgPath: targetSVG,
+ title: 'Paris',
+ latitude: 48.8567,
+ longitude: 2.3510
+ }, {
+ svgPath: targetSVG,
+ title: 'New York',
+ latitude: 40.43,
+ longitude: -74
+ }
+ ]
+ };
+ }
+}
diff --git a/src/app/pages/maps/index.ts b/src/app/pages/maps/index.ts
new file mode 100644
index 00000000..e96d8cca
--- /dev/null
+++ b/src/app/pages/maps/index.ts
@@ -0,0 +1 @@
+export * from './maps.component';
diff --git a/src/app/pages/maps/maps.component.ts b/src/app/pages/maps/maps.component.ts
new file mode 100644
index 00000000..d9845f53
--- /dev/null
+++ b/src/app/pages/maps/maps.component.ts
@@ -0,0 +1,47 @@
+import {Component, ViewEncapsulation} from 'angular2/core';
+import {RouteConfig} from 'angular2/router';
+
+import {GoogleMaps} from './components/googleMaps';
+import {LeafletMaps} from "./components/leafletMaps";
+import {BubbleMaps} from "./components/bubbleMaps";
+import {LineMaps} from "./components/lineMaps";
+
+@Component({
+ selector: 'maps',
+ pipes: [],
+ providers: [],
+ styles: [],
+ template: ``
+})
+@RouteConfig([
+ {
+ name: 'GoogleMaps',
+ component: GoogleMaps,
+ path: '/google-maps',
+ useAsDefault: true
+ },
+ {
+ name: 'LeafletMaps',
+ component: LeafletMaps,
+ path: '/leaflet-maps',
+ },
+ {
+ name: 'BubbleMaps',
+ component: BubbleMaps,
+ path: '/bubble-maps',
+ },
+ {
+ name: 'LineMaps',
+ component: LineMaps,
+ path: '/line-maps',
+ },
+])
+export class Maps {
+
+ constructor() {
+ }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts
index 86a840b8..f94a71ae 100644
--- a/src/app/pages/pages.component.ts
+++ b/src/app/pages/pages.component.ts
@@ -1,15 +1,17 @@
import {Component, ViewEncapsulation} from 'angular2/core';
import {RouteConfig, Router} from 'angular2/router';
+import {PageTop, ContentTop, Sidebar} from '../theme';
import {Dashboard} from './dashboard';
import {Ui} from './ui';
-import {PageTop, Sidebar} from '../theme';
+import {Maps} from './maps';
+import {Charts} from './charts';
@Component({
selector: 'pages',
encapsulation: ViewEncapsulation.None,
styles: [],
- directives: [PageTop, Sidebar],
+ directives: [PageTop, Sidebar, ContentTop],
template: `
@@ -32,6 +34,16 @@ import {PageTop, Sidebar} from '../theme';
component: Ui,
path: '/ui/...',
},
+ {
+ name: 'Maps',
+ component: Maps,
+ path: '/maps/...',
+ },
+ {
+ name: 'Charts',
+ component: Charts,
+ path: '/charts/...',
+ },
])
export class Pages {
diff --git a/src/app/pages/ui/components/typography/typography.component.ts b/src/app/pages/ui/components/typography/typography.component.ts
index 6c80005d..c4697816 100644
--- a/src/app/pages/ui/components/typography/typography.component.ts
+++ b/src/app/pages/ui/components/typography/typography.component.ts
@@ -5,7 +5,7 @@ import {Component, ViewEncapsulation} from 'angular2/core';
pipes: [],
providers: [],
styles: [],
- template: 'typography'
+ template: require('./typography.html'),
})
export class Typography {
diff --git a/src/app/pages/ui/components/typography/typography.html b/src/app/pages/ui/components/typography/typography.html
new file mode 100644
index 00000000..ce013625
--- /dev/null
+++ b/src/app/pages/ui/components/typography/typography.html
@@ -0,0 +1 @@
+hello
diff --git a/src/app/pages/ui/ui.component.ts b/src/app/pages/ui/ui.component.ts
index 8599b37a..1fd7185a 100644
--- a/src/app/pages/ui/ui.component.ts
+++ b/src/app/pages/ui/ui.component.ts
@@ -15,15 +15,7 @@ import {Typography} from './components/typography';
name: 'Typography',
component: Typography,
path: '/typography',
- useAsDefault: true,
- data: {
- title: 'Typography',
- selected: false,
- expanded: false,
- sidebarMeta: {
- order: 0,
- }
- }
+ useAsDefault: true
},
])
export class Ui {
diff --git a/src/app/theme/contentTop/contentTop.component.ts b/src/app/theme/contentTop/contentTop.component.ts
new file mode 100644
index 00000000..35aee169
--- /dev/null
+++ b/src/app/theme/contentTop/contentTop.component.ts
@@ -0,0 +1,25 @@
+import {Component, ViewEncapsulation} from 'angular2/core';
+
+import {ThemeGlobal} from "../theme.global";
+import {Subscription} from "rxjs/Subscription";
+
+@Component({
+ selector: 'content-top',
+ styles: [require('./contentTop.scss')],
+ template: require('./contentTop.html'),
+})
+export class ContentTop {
+ activePageTitle = '';
+ private _themeGlobalSubscription:Subscription;
+
+ constructor(private _themeGlobal:ThemeGlobal) {
+ this._themeGlobalSubscription = this._themeGlobal.getDataStream().subscribe((data) => {
+ this.activePageTitle = data['menu.activeLink'] != null ? data['menu.activeLink'].title : this.activePageTitle;
+ });
+ }
+
+ ngOnDestroy() {
+ // prevent memory leak when component destroyed
+ this._themeGlobalSubscription.unsubscribe();
+ }
+}
diff --git a/src/app/theme/contentTop/contentTop.html b/src/app/theme/contentTop/contentTop.html
new file mode 100644
index 00000000..446334e7
--- /dev/null
+++ b/src/app/theme/contentTop/contentTop.html
@@ -0,0 +1,9 @@
+
+
{{ activePageTitle }}
+
+
+ -
+ Home
+ - {{ activePageTitle }}
+
+