Skip to content

Commit

Permalink
Manage route properties #35 - done.
Browse files Browse the repository at this point in the history
Different colors to different routes #24 -done.
Pop up a confirmation message when the user deletes a layer #14 - delete now requires two steps which is enough.
Added n3-line chart.
  • Loading branch information
HarelM committed Aug 8, 2015
1 parent 3f1291f commit 79a641f
Show file tree
Hide file tree
Showing 24 changed files with 3,694 additions and 101 deletions.
12 changes: 11 additions & 1 deletion IsraelHikingMapSite.csproj
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,8 @@
<Content Include="scripts\angular.min.js" />
<Content Include="scripts\bootstrap.js" />
<Content Include="scripts\bootstrap.min.js" />
<Content Include="scripts\d3\d3.js" />
<Content Include="scripts\d3\d3.min.js" />
<Content Include="scripts\FileAPI.flash.swf" />
<Content Include="scripts\FileAPI.js" />
<Content Include="scripts\FileAPI.min.js" />
Expand All @@ -86,6 +88,8 @@
<Content Include="scripts\leaflet-google.js" />
<Content Include="scripts\leaflet-locate.js" />
<Content Include="scripts\leaflet-locate.min.js" />
<Content Include="scripts\line-chart.js" />
<Content Include="scripts\line-chart.min.js" />
<Content Include="scripts\lodash.js" />
<Content Include="scripts\lodash.min.js" />
<Content Include="scripts\ng-file-upload-all.js" />
Expand All @@ -101,8 +105,9 @@
<Content Include="views\layers.html" />
<Content Include="views\drawing.html" />
<Content Include="views\editOSM.html" />
<Content Include="views\templates\routeStatisticsTooltip.tpl.html" />
<Content Include="views\templates\legendModal.tpl.html" />
<Content Include="views\templates\addRouteModal.tpl.html" />
<Content Include="views\templates\routePropertiesModal.tpl.html" />
<Content Include="views\templates\addLayerModal.tpl.html" />
<Content Include="views\templates\fileTooltip.tpl.html" />
<Content Include="views\infoHelp.html" />
Expand All @@ -115,6 +120,7 @@
<Content Include="scripts\leaflet-locate.min.js.map" />
<Content Include="scripts\angular.min.js.map" />
<Content Include="scripts\angular-strap.min.js.map" />
<Content Include="scripts\d3\LICENSE" />
<None Include="scripts\jquery-2.1.4.intellisense.js" />
<Content Include="scripts\tokml.js.map" />
<None Include="web.Debug.config">
Expand All @@ -128,6 +134,8 @@
<TypeScriptCompile Include="app.ts" />
<TypeScriptCompile Include="common\EventHelper.ts" />
<TypeScriptCompile Include="controllers\LayersController.ts" />
<TypeScriptCompile Include="controllers\RoutePropertiesContoller.ts" />
<TypeScriptCompile Include="controllers\RouteStatisticsController.ts" />
<TypeScriptCompile Include="scripts\typings\angular-local-storage\angular-local-storage.d.ts" />
<TypeScriptCompile Include="scripts\typings\angularjs\angular-animate.d.ts" />
<TypeScriptCompile Include="scripts\typings\angularjs\angular-cookies.d.ts" />
Expand All @@ -136,6 +144,8 @@
<TypeScriptCompile Include="scripts\typings\angularjs\angular-route.d.ts" />
<TypeScriptCompile Include="scripts\typings\angularjs\angular-sanitize.d.ts" />
<TypeScriptCompile Include="scripts\typings\angularjs\angular.d.ts" />
<TypeScriptCompile Include="scripts\typings\d3\d3.d.ts" />
<TypeScriptCompile Include="scripts\typings\d3\plugins\d3.superformula.d.ts" />
<TypeScriptCompile Include="scripts\typings\jquery\jquery.d.ts" />
<TypeScriptCompile Include="scripts\typings\leaflet\leaflet.d.ts" />
<TypeScriptCompile Include="scripts\typings\lodash\lodash.d.ts" />
Expand Down
4 changes: 3 additions & 1 deletion app.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
module IsraelHiking {
// HM TODO: finish route propertires UI, add BL.
// HM TODO: ctrl+o - open, ctrl+s - save.
// HM TODO: support twl? - will be solved hopefull with iis backend.

export var app = angular.module("IsraelHiking", ["ngFileUpload", "mgcrea.ngStrap", "LocalStorageModule"]);
export var app = angular.module("IsraelHiking", ["ngFileUpload", "mgcrea.ngStrap", "LocalStorageModule", "n3-line-chart"]);

L.Icon.Default.imagePath = "content/images/";

Expand Down
54 changes: 30 additions & 24 deletions common/Constants.ts
Original file line number Diff line number Diff line change
@@ -1,33 +1,39 @@
module IsraelHiking.Common {
export class Constants {
// Services
static rootScope = "$rootScope";
static scope = "$scope";
static tooltip = "$tooltip";
static location = "$location";
static http = "$http";
static q = "$q";
static compile = "$compile";
static injector = "$injector";
static parserFactory = "parserFactory";
static routerFactory = "routerFactory";
static drawingFactory = "drawingFactory";
static controlCreatorService = "controlCreatorService";
static hashService = "hashService";
static mapService = "mapService";
static layersService = "layersService";
static localStorageService = "localStorageService";
static snappingService = "snappingService";
public static rootScope = "$rootScope";
public static scope = "$scope";
public static tooltip = "$tooltip";
public static location = "$location";
public static http = "$http";
public static q = "$q";
public static compile = "$compile";
public static injector = "$injector";
public static parserFactory = "parserFactory";
public static routerFactory = "routerFactory";
public static drawingFactory = "drawingFactory";
public static controlCreatorService = "controlCreatorService";
public static hashService = "hashService";
public static mapService = "mapService";
public static layersService = "layersService";
public static localStorageService = "localStorageService";
public static snappingService = "snappingService";

// Controllers
static mainMapController = "mainMapController";
static fileController = "fileController";
static drawingController = "drawingController";
static editOSMController = "editOSMController";
static infoHelpController = "infoHelpController";
static markerPopupController = "markerPopupController";
public static mainMapController = "mainMapController";
public static fileController = "fileController";
public static drawingController = "drawingController";
public static editOSMController = "editOSMController";
public static infoHelpController = "infoHelpController";
public static markerPopupController = "markerPopupController";

public static MARKERS = "markers";

public static COLORS = ["blue", "red", "green", "pink",
"purple", "brown", "yellow", "orange",
"turquoise", "black", "grey", "white"];


static MARKERS = "markers";
}

}
2 changes: 1 addition & 1 deletion controllers/BaseMapController.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
}

export class BaseMapControllerWithToolTip extends BaseMapController {
$tooltip;
private $tooltip;

constructor(mapService: Services.MapService, $tooltip) {
super(mapService);
Expand Down
26 changes: 24 additions & 2 deletions controllers/DrawingController.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,25 @@
getRoutingType(): string;
isUndoDisbaled(): boolean;
showRouting(): boolean;
openStatistics(e: Event): void;
isStatisticsOpen(): boolean;
}

export class DrawingController extends BaseMapController {


export class DrawingController extends BaseMapControllerWithToolTip {
private layersService: Services.LayersService;
private selectedDrawing: Services.Drawing.IDrawing;
private routeStatisticsTooltip;

constructor($scope: IDrawingScope,
$tooltip,
mapService: Services.MapService,
layersService: Services.LayersService) {
super(mapService);
super(mapService, $tooltip);
this.layersService = layersService;
this.selectedDrawing = this.layersService.getSelectedDrawing();
this.routeStatisticsTooltip = null;

this.layersService.eventHelper.addListener((args: Common.IDataChangedEventArgs) => {
this.selectedDrawing = this.layersService.getSelectedDrawing();
Expand Down Expand Up @@ -70,6 +77,21 @@
return this.selectedDrawing.name != Common.Constants.MARKERS;
}

$scope.openStatistics = (e: Event) => {
if (this.routeStatisticsTooltip == null) {
var newScope = <IRouteStatisticsScope>$scope.$new();
var controller = new RouteStatisticsController(newScope, this.layersService); // updates the new scope

this.routeStatisticsTooltip = this.createToolTip(e.target, "views/templates/routeStatisticsTooltip.tpl.html", "Route Statistics", newScope);
this.routeStatisticsTooltip.$promise.then(this.routeStatisticsTooltip.show);
}
this.suppressEvents(e);
}

$scope.isStatisticsOpen = () => {
return this.routeStatisticsTooltip != null && this.routeStatisticsTooltip.$isShown;
}

document.onkeydown = (e: KeyboardEvent) => {
if (e.keyCode == 90 && e.ctrlKey) { // ctrl+Z
this.selectedDrawing.undo();
Expand Down
2 changes: 1 addition & 1 deletion controllers/FileController.ts
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@
segmentData.routePoint = segmentData.latlngs[segmentData.latlngs.length - 1];
manipulatedRouteData.segments.push(segmentData);
}
this.layersService.addRoute(manipulatedRouteData.name, manipulatedRouteData);
this.layersService.addRoute(manipulatedRouteData.name, manipulatedRouteData, null);
}
}
}
Expand Down
3 changes: 1 addition & 2 deletions controllers/InfoHelpController.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@
$tooltip,
$modal) {
super(mapService, $tooltip);
this.$tooltip = $tooltip;
this.legendModal = $modal({
title: "Legend",
templateUrl: "views/templates/legendModal.tpl.html",
Expand All @@ -36,7 +35,7 @@

$scope.openHelp = (e: Event) => {
if (this.helpTooltip == null) {
this.helpTooltip = this.createToolTip(e.target, "views/templates/helpTooltip.tpl.html", "help", $scope);
this.helpTooltip = this.createToolTip(e.target, "views/templates/helpTooltip.tpl.html", "Help", $scope);
this.helpTooltip.$promise.then(this.helpTooltip.show);
}
if (this.infoTooltip) {
Expand Down
31 changes: 13 additions & 18 deletions controllers/LayersController.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,6 @@
addLayer(name: string, address: string, minZoom: number, maxZoom: number, e: Event): void;
}

export interface IAddRouteModalScope extends angular.IScope {
addRoute(name, e: Event): void;
}

export interface ILayersScope extends angular.IScope {
baseLayers: Services.IBaseLayer[];
overlays: Services.IOvelay[];
Expand All @@ -21,7 +17,7 @@
addRoute(e: Event): void;
removeBaseLayer(baseLayer: Services.IBaseLayer, e: Event): void;
removeOverlay(overlay: Services.IOvelay, e: Event): void;
removeRoute(routeName: string, e: Event): void;
editRoute(routeName: string, e: Event): void;
selectBaseLayer(baseLayer: Services.IBaseLayer, e: Event): void;
toggleVisibility(overlay: Services.IOvelay, e: Event): void;
selectDrawing(name: string, e: Event): void;
Expand All @@ -43,7 +39,6 @@
$scope.hovering = false;
var addBaseLayerModal = this.createBaseLayerModal($scope, $modal, layersService);
var addOverlayModal = this.createOverlayModal($scope, $modal, layersService);
var addRouteModal = this.createRouteModal($scope, $modal, layersService);

$scope.addBaseLayer = (e: Event) => {
addBaseLayerModal.show();
Expand All @@ -56,7 +51,8 @@
}

$scope.addRoute = (e: Event) => {
addRouteModal.show();
var modal = this.createRouteModal($scope, $modal, layersService);
modal.$promise.then(modal.show);
this.suppressEvents(e);
}

Expand All @@ -69,8 +65,9 @@
layersService.removeOverlay(overlay);
this.suppressEvents(e);
}
$scope.removeRoute = (routeName: string, e: Event) => {
layersService.removeRoute(routeName);
$scope.editRoute = (routeName: string, e: Event) => {
var modal = this.createRouteModal($scope, $modal, layersService, routeName);
modal.$promise.then(modal.show);
this.suppressEvents(e);
}

Expand Down Expand Up @@ -120,17 +117,15 @@
return this.createAddLayerModal($modal, "Add Overlay", addOvelayScope);
}

private createRouteModal = ($scope: ILayersScope, $modal, layersService: Services.LayersService): any => {
var addRouteScope = <IAddRouteModalScope>$scope.$new();
addRouteScope.addRoute = (name: string, e: Event) => {
layersService.addRoute(name);
this.suppressEvents(e);
}
private createRouteModal = ($scope: ILayersScope, $modal, layersService: Services.LayersService, name?: string): any => {
var routePropertiesScope = <IRoutePropertiesScope>$scope.$new();
var routePropertiesController = new RoutePropertiesController(routePropertiesScope, layersService, name);

return $modal({
title: "Add Route",
templateUrl: "views/templates/addRouteModal.tpl.html",
title: "Route Properties",
templateUrl: "views/templates/routePropertiesModal.tpl.html",
show: false,
scope: addRouteScope,
scope: routePropertiesScope,
});
}

Expand Down
46 changes: 46 additions & 0 deletions controllers/RoutePropertiesContoller.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
module IsraelHiking.Controllers {
export interface IRoutePropertiesScope extends angular.IScope {
name: string;
originalName: string;
weight: number;
color: string;
latlngz: number;
colors: string[];
isVisible: boolean;
setColor(color: string);
toggleVisibility(e: Event): void;
saveRoute(name: string, weight: number, isVisible: boolean, e: Event);
deleteRoute(e: Event): void;
}

export class RoutePropertiesController {

constructor($scope: IRoutePropertiesScope,
layersService: Services.LayersService,
name?: string) {
$scope.originalName = name || layersService.createRouteName();
$scope.name = $scope.originalName;
var options = layersService.getRouteViewOptions(name);
$scope.weight = options.pathOptions.weight;
$scope.color = options.pathOptions.color;
$scope.isVisible = options.isVisible;

$scope.colors = Common.Constants.COLORS;

$scope.setColor = (color: string) => {
$scope.color = color;
}
$scope.toggleVisibility = () => {
$scope.isVisible = !$scope.isVisible;
}
$scope.saveRoute = (name: string, weight: number, isVisible:boolean, e: Event) => {
layersService.addOrUpdateRouteOptions($scope.originalName, name,
<L.PathOptions> { color: $scope.color, weight: weight },
isVisible);
}
$scope.deleteRoute = (e: Event) => {
layersService.removeRoute($scope.originalName);
}
}
}
}
35 changes: 35 additions & 0 deletions controllers/RouteStatisticsController.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
module IsraelHiking.Controllers {
export interface IRouteStatisticsScope extends angular.IScope {
length: number;
chartData: { x: string; y: number }[];
chartOptions: any;
}

export class RouteStatisticsController {
constructor($scope: IRouteStatisticsScope, layersService: Services.LayersService) {
$scope.length = 4;
$scope.chartData = [{ x: "1", y: 1 }, { x: "2", y: 2 }, { x: "3", y: 1.5 }, { x: "4", y: 1.3 }];
$scope.chartOptions = {
axes: {
x: { key: 'x', ticksFormat: '.2f', type: 'linear', ticks: 4 },
y: { type: 'linear', ticks: 5 },
},
margin: {
left: 25,
right: 5,
top: 5,
bottom: 25
},
series: [{ y: 'y', color: 'steelblue', thickness: '2px', type: 'area', striped: true, label: 'Route' }, ],
lineMode: 'linear',
tension: 0.7,
tooltip: { mode: 'scrubber', formatter: function (x, y, series) { return "(" + x + "," + y + ")"; } },
drawLegend: false,
drawDots: true,
hideOverflow: false,
columnsHGap: 5
}
}
}

}

0 comments on commit 79a641f

Please sign in to comment.