Re-implement existing website template (from PHP). Add all assets.

Website/wwwroot/js/directives/contextMenu.js

@@ -0,0 +1,58 @@
+angular.module("robware").directive('contextMenu', function() {
+	return {
+		restrict: 'E',
+		templateUrl: '/scripts/directives/templates/contextMenu.html',
+		scope: {
+			actions: '=',
+			isChild: '=?'
+		},
+		link: function(scope, element) {
+			scope.isFunction = angular.isFunction;
+			scope.show=false;
+			scope.selectedElement=null;
+			scope.subMenuShowKey="";
+
+			scope.changeSubMenuShowKey=function(name){
+				scope.subMenuShowKey=name;
+			};
+
+			function show(x, y, target){
+				scope.changeSubMenuShowKey("");
+				scope.menuX=x+"px";
+				scope.menuY=y+"px";
+				scope.selectedElement=target;
+				scope.show=true;
+			};
+
+			function hide(){
+				scope.show=false;
+			}
+
+			scope.performAction=function(func){
+				if (!angular.isFunction(func))
+					return;
+				func($(scope.selectedElement).scope());
+				hide();
+			};
+
+			$(document).on("click", function(e){
+				hide();
+				scope.$apply();
+			});
+
+			var parent=element.parent()[0];
+
+			if (scope.isChild){
+				show(parent.clientWidth,parent.clientTop);
+			}else
+				$(parent).css("position","relative");
+				element.parent().on("contextmenu", function(e){
+					var offset=$(element).offset();
+					show(e.pageX-offset.left, e.pageY-offset.top, e.target);
+					scope.$apply();
+					e.preventDefault();
+				});
+		}
+	};
+});
+

Website/wwwroot/js/directives/dragDrop.js

@@ -0,0 +1,38 @@
+angular.module("robware").directive('dragDrop', function() {
+	return {
+		restrict: 'A',
+		scope: {
+			dragDrop:'='
+		},
+		link: function(scope, element) {
+			function handleEvent(e){
+				e.preventDefault();
+				e.stopPropagation();
+			}
+
+			element.on('dragover', function(e) {
+				handleEvent(e);
+			});
+			element.on('dragenter', function(e) {
+				handleEvent(e);
+				$(element).addClass("dragOver");
+			});
+			element.on('dragleave', function(e) {
+				handleEvent(e);
+				$(element).removeClass("dragOver");
+			});
+			element.on('drop', function(e){
+				handleEvent(e);
+				$(element).removeClass("dragOver");
+
+				if (e.originalEvent.dataTransfer){
+					if (e.originalEvent.dataTransfer.files.length > 0) {
+						scope.dragDrop(e.originalEvent.dataTransfer.files);
+						scope.$apply();
+					}
+				}
+			});
+		}
+	};
+});
+

Website/wwwroot/js/directives/equalHeightWidth.js

@@ -0,0 +1,14 @@
+angular.module("robware").directive("equalWidth", function() {
+	return {
+		restrict: 'A',
+		link: function(scope, element) {
+			scope.getHeight = function() {
+				return $(element).height();
+			};
+			scope.$watch(scope.getHeight, function(height) {
+				$(element).width(height);
+			});
+		}
+	}
+});
+

Website/wwwroot/js/directives/googleChart.js

@@ -0,0 +1,122 @@
+/* global google, angular */
+
+angular.module("robware").directive('googleChart', function() {
+	return {
+		restrict: 'E',
+		templateUrl: '/scripts/directives/templates/googleChart.html',
+		scope: {
+			data: '=',
+			headings: '=?',
+			ignore: '=?',
+			height: '='
+		},
+		link: function(scope, element, attributes) {
+			var chartLoaded = false;
+
+			if (!scope.headings)
+				scope.headings = [];
+
+			if (!scope.ignore)
+				scope.ignore = [];
+
+			var chartData, chart;
+			var chartOptions = {
+				title: attributes.title,
+				height: scope.height || 400,
+				curveType: attributes.curveType,
+				legend: {
+					position: attributes.legendPosition || 'right'
+				},
+				vAxis: {
+					title: attributes.vAxisTitle
+				},
+				backgroundColor: attributes.background || 'transparent'
+			};
+			
+			function formatToolTip(input, args) {
+				return input.replace(/{(.+?)(:.*?)?}/g, function(match, index, format) {
+					if (format)
+						format = format.slice(1);
+					if (args[index]===undefined)
+						return match;
+					if (isNumber(args[index]))
+						return args[index].toString(format, true);
+					return args[index].toString(format);
+				});
+			}
+			
+			function shouldIgnore(value){
+				return scope.ignore.indexOf(value)>-1;
+			}
+
+			function setupChart() {
+				if (!chartLoaded)
+					return;
+
+				var firstRow = scope.data[0];
+				var fields = {};
+				for (var propertyName in firstRow) {
+					if (shouldIgnore(propertyName))
+						continue;
+					
+					var datum = firstRow[propertyName];
+					var type = typeof (datum);
+					if (type === "object")
+						type = datum.constructor.name;
+					fields[propertyName] = {
+						title: scope.headings[propertyName] || propertyName,
+						type: type.toLowerCase()
+					};
+				}
+
+				chartData = new google.visualization.DataTable();
+				angular.forEach(fields, function(value) {
+					chartData.addColumn(value.type, value.title);
+					if (attributes['toolTip' + value.title.upperCaseFirst()])
+						chartData.addColumn({type: 'string', role: 'tooltip'});
+				});
+
+				angular.forEach(scope.data, function(value) {
+					var row = [];
+					angular.forEach(value, function(value2, index) {
+						if (shouldIgnore(index))
+							return;
+					
+						row.push(value2);
+						var attrIndex = 'toolTip' + index.upperCaseFirst();
+						if (attributes[attrIndex])
+							row.push(formatToolTip(attributes[attrIndex], value));
+					});
+					chartData.addRow(row);
+				});
+
+				chart = new google.visualization.LineChart(element[0]);
+				drawChart();
+			}
+
+			function drawChart() {
+				chart.draw(chartData, chartOptions);
+			}
+
+			$.getScript("https://www.google.com/jsapi", function() {
+				//google.load('visualization', '1.1', {packages: ['line'], callback:function(){
+				google.load('visualization', '1', {
+					packages: ['corechart'],
+					callback: function() {
+						chartLoaded = true;
+						setupChart();
+					}
+				});
+			});
+
+			scope.$watch("data", function(v) {
+				setupChart();
+			});
+
+			angular.element(window).bind('resize', function() {
+				drawChart();
+			});
+		}
+	};
+});
+

Website/wwwroot/js/directives/scopeInit.js

@@ -0,0 +1,11 @@
+angular.module("robware").directive("scopeInit", function(){
+	return {
+        restrict : 'E',
+		link:function(scope, element, attributes){
+			var content=element[0].innerHTML.trim();
+			scope[attributes.value]=JSON.parse(content);
+			element.remove();
+		}
+	}
+});
+

Website/wwwroot/js/directives/templates/contextMenu.html

@@ -0,0 +1,6 @@
+<div class="contextMenu" ng-if="show" ng-style="{left:menuX,top:menuY}">
+	<div ng-repeat="(name, func) in actions track by name" class="menuItem" ng-click="performAction(func)" ng-mouseover="changeSubMenuShowKey(name)">
+		{{name}}<span class="arrow" ng-if="!isFunction(func)"> &#8250;</span>
+		<context-menu ng-if="!isFunction(func)" actions="func" is-child="true" ng-show="subMenuShowKey==name"></context-menu>
+	</div>
+</div>

Website/wwwroot/js/directives/templates/googleChart.html

@@ -0,0 +1 @@
+<div class="mapsContainer">Loading chart...</div>