Currently I have a AngularJS Webapp that works exactly like I want it to. There is a plus sign button/link i've create. I want the user to be able to click on that button/link and be brought to another similar page. It will have the exact layout and almost the exact same controller, just pulling different data. I believe I have the routes set up correctly, but when I click on the button/link it doesn't do anything or take me anywhere.
Can someone help me figure out if my routing is just incorrect or if it is something else?
My index file and My drill file are in the same directory
Index.html
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="app.css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/domo.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="rcr_sched" ng-controller="main">
<div id="mydiv">
<table>
<tr>
<th id="printc"><button id="print" class="fa fa-print fa-2x" onclick="print('#mydiv')"></button></th>
<th ng-repeat="prop in columns">{{prop.date}}</th>
</tr>
<tr ng-repeat="r in data">
<td id="linkc">
<a href="#/drill">
<i class="fa fa-plus-square" aria-hidden="true"></i>
</a>
</td>
<td align="center" ng-repeat="prop2 in columns" class="{{getColor(r.TeamRank, r.Team, prop2.title)}}" style="{{isPTO(prop2.title, 'PTO' + prop2.title, r['PTO' + prop2.title])}}">
{{r[prop2.title]}}
</td>
</tr>
</table>
</div>
</body>
</html>
drill.html
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="app.css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/domo.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-controller="drill">
<div id="mydiv">
<table>
<tr>
<th id="printc"><button id="print" class="fa fa-print fa-2x" onclick="print('#mydiv')"></button></th>
<th ng-repeat="prop in columns">{{prop.date}}</th>
</tr>
<tr ng-repeat="r in data">
<td id="linkc">
<a href="/">
<i class="fa fa-plus-square" aria-hidden="true"></i>
</a>
</td>
<td align="center" ng-repeat="prop2 in columns" class="{{getColor(r.TeamRank, r.Team, prop2.title)}}" style="{{isPTO(prop2.title, 'PTO' + prop2.title, r['PTO' + prop2.title])}}">
{{r[prop2.title]}}
</td>
</tr>
</table>
</div>
</body>
</html>
app.js
var app = angular.module('rcr_sched',['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/',{
templateUrl: 'index.html',
controller: 'main'
})
.when('/drill',{
templateUrl: 'drill.html',
controller: 'drill'
})
// .otherwise({redirectTo: '/'});
}
]);
//Range Error: Maximum call stack size exceeded
app.controller('main', function ($scope) {
$scope.data = [];
$scope.columns = [];
$scope.currentDate = new Date();
$scope.calculateDate = function() {
var x = new Date();
return {
'MonThisWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() - (x.getDay() - 1)), title:'MonThisWk'},
'TueThisWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() - (x.getDay() - 2)),title:'TueThisWk'},
'WedThisWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() - (x.getDay() - 3)),title:'WedThisWk'},
'ThuThisWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() - (x.getDay() - 4)),title:'ThuThisWk'},
'FriThisWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() - (x.getDay() - 5)),title:'FriThisWk'},
'MonNextWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 7 - (x.getDay() - 1)),title:'MonNextWk'},
'TueNextWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 7 - (x.getDay() - 2)),title:'TueNextWk'},
'WedNextWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 7 - (x.getDay() - 3)),title:'WedNextWk'},
'ThuNextWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 7 - (x.getDay() - 4)),title:'ThuNextWk'},
'FriNextWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 7 - (x.getDay() - 5)),title:'FriNextWk'},
'Mon2Wks': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 14 - (x.getDay() - 1)),title:'Mon2Wks'},
'Tue2Wks': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 14 - (x.getDay() - 2)),title:'Tue2Wks'},
'Wed2Wks': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 14 - (x.getDay() - 3)),title:'Wed2Wks'},
'Thu2Wks': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 14 - (x.getDay() - 4)),title:'Thu2Wks'},
'Fri2Wks': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 14 - (x.getDay() - 5)), title:'Fri2Wks'}
}
}
$scope.isPTO = function(rowTitle, ptoTitle, value) {
if (rowTitle == (ptoTitle.replace('PTO', '')) && value) {
return 'background-color: #32CD32;';
}
return '';
}
function print(elem){
Popup($('<div/>').append($(elem).clone()).html());
}
function Popup(data)
{
var mywindow = window.open('', 'my div', 'height=400,width=600');
mywindow.document.write('<html><head><title>my div</title>');
mywindow.document.write('<link rel="stylesheet" href="http://www.dynamicdrive.com/ddincludes/mainstyle.css" type="text/css" />');
mywindow.document.write('</head><body>');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.print();
// mywindow.close();
return true;
}
$scope.dateOptions = $scope.calculateDate();
$scope.getColor = function(teamRank, team, prop) {
let today = new Date();
if (prop == 'Team' || prop == 'TeamMember')
{
if (team == 'Unassigned')
{
return "grayClass";
}
else if (team == 'Gold One')
{
return "goldClass";
}
else if (team == 'Red One' || team == 'Red Two')
{
return "redClass";
}
else if (team == 'Blue One' || team == 'Blue Two') {
return "blueClass"
}
else if (team == 'Green One')
{
return "greenClass";
}
else
{
return "grayClass";
}
}
if(prop == 'MonThisWk' || prop == 'Mon2Wks')
{
if(today.getDay() == 1)
{
return "highlightClass";
}
}
if(prop == 'TueThisWk' || prop == 'Tue2Wks')
{
if(today.getDay() == 2)
{
return "highlightClass";
}
}
if(prop == 'WedThisWk' || prop == 'Wed2Wks')
{
if(today.getDay() == 3)
{
return "highlightClass";
}
}
if(prop == 'ThuThisWk' || prop == 'Thu2Wks')
{
if(today.getDay() == 4)
{
return "highlightClass";
}
}
if(prop == 'FriThisWk' || prop == 'Fri2Wks')
{
if(today.getDay() == 5)
{
return "highlightClass";
}
}
}
domo.get('data/v1/master?fields=Team,TeamMember,TotalJobs,NDD,Past,MonThisWk,TueThisWk,WedThisWk,ThuThisWk,FriThisWk,MonNextWk,TueNextWk,WedNextWk,ThuNextWk,FriNextWk,Mon2Wks,Tue2Wks,Wed2Wks,Thu2Wks,Fri2Wks,FutureDates,PTOMonThisWk,PTOTueThisWk,PTOWedThisWk,PTOThuThisWk,PTOFriThisWk,PTOMon2Wks,PTOTue2Wks,PTOWed2Wks,PTOThu2Wks,PTOFri2Wks,PTOMonNextWk,PTOTueNextWk,PTOWedNextWk,PTOThuNextWk,PTOFriNextWk&groupby=TeamRank,Team,TeamMember&orderby=TeamRank')
.then(function(data){
$scope.data = data;
for (prop in data[0]) {
if ($scope.dateOptions[prop]) {
var newDate = $scope.dateOptions[prop];
var formattedProp = {date: (newDate.date.getMonth() + 1).toString() + '/' + newDate.date.getDate().toString(), title: newDate.title};
}
else {
var formattedProp = {date: prop, title: prop};
}
$scope.columns.push(formattedProp);
}
$scope.$apply();
})
});
app.controller('drill', function ($scope) {
$scope.data = [];
$scope.columns = [];
$scope.currentDate = new Date();
$scope.calculateDate = function() {
var x = new Date();
return {
'MonThisWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() - (x.getDay() - 1)), title:'MonThisWk'},
'TueThisWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() - (x.getDay() - 2)),title:'TueThisWk'},
'WedThisWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() - (x.getDay() - 3)),title:'WedThisWk'},
'ThuThisWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() - (x.getDay() - 4)),title:'ThuThisWk'},
'FriThisWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() - (x.getDay() - 5)),title:'FriThisWk'},
'MonNextWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 7 - (x.getDay() - 1)),title:'MonNextWk'},
'TueNextWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 7 - (x.getDay() - 2)),title:'TueNextWk'},
'WedNextWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 7 - (x.getDay() - 3)),title:'WedNextWk'},
'ThuNextWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 7 - (x.getDay() - 4)),title:'ThuNextWk'},
'FriNextWk': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 7 - (x.getDay() - 5)),title:'FriNextWk'},
'Mon2Wks': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 14 - (x.getDay() - 1)),title:'Mon2Wks'},
'Tue2Wks': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 14 - (x.getDay() - 2)),title:'Tue2Wks'},
'Wed2Wks': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 14 - (x.getDay() - 3)),title:'Wed2Wks'},
'Thu2Wks': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 14 - (x.getDay() - 4)),title:'Thu2Wks'},
'Fri2Wks': {date: new Date(x.getFullYear(), x.getMonth(), x.getDate() + 14 - (x.getDay() - 5)), title:'Fri2Wks'}
}
}
$scope.isPTO = function(rowTitle, ptoTitle, value) {
if (rowTitle == (ptoTitle.replace('PTO', '')) && value) {
return 'background-color: #32CD32;';
}
return '';
}
function print(elem){
Popup($('<div/>').append($(elem).clone()).html());
}
function Popup(data)
{
var mywindow = window.open('', 'my div', 'height=400,width=600');
mywindow.document.write('<html><head><title>my div</title>');
mywindow.document.write('<link rel="stylesheet" href="http://www.dynamicdrive.com/ddincludes/mainstyle.css" type="text/css" />');
mywindow.document.write('</head><body>');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.print();
// mywindow.close();
return true;
}
$scope.dateOptions = $scope.calculateDate();
$scope.getColor = function(teamRank, team, prop) {
let today = new Date();
if (prop == 'Team' || prop == 'TeamMember')
{
if (team == 'Unassigned')
{
return "grayClass";
}
else if (team == 'Gold One')
{
return "goldClass";
}
else if (team == 'Red One' || team == 'Red Two')
{
return "redClass";
}
else if (team == 'Blue One' || team == 'Blue Two') {
return "blueClass"
}
else if (team == 'Green One')
{
return "greenClass";
}
else
{
return "grayClass";
}
}
if(prop == 'MonThisWk' || prop == 'Mon2Wks')
{
if(today.getDay() == 1)
{
return "highlightClass";
}
}
if(prop == 'TueThisWk' || prop == 'Tue2Wks')
{
if(today.getDay() == 2)
{
return "highlightClass";
}
}
if(prop == 'WedThisWk' || prop == 'Wed2Wks')
{
if(today.getDay() == 3)
{
return "highlightClass";
}
}
if(prop == 'ThuThisWk' || prop == 'Thu2Wks')
{
if(today.getDay() == 4)
{
return "highlightClass";
}
}
if(prop == 'FriThisWk' || prop == 'Fri2Wks')
{
if(today.getDay() == 5)
{
return "highlightClass";
}
}
}
domo.get('data/v1/master?fields=Team,TeamMember,JobNumber,CM,Status,SLDD,MonThisWk,TueThisWk,WedThisWk,ThuThisWk,FriThisWk,MonNextWk,TueNextWk,WedNextWk,ThuNextWk,FriNextWk,Mon2Wks,Tue2Wks,Wed2Wks,Thu2Wks,Fri2Wks,FutureDates,PTOMonThisWk,PTOTueThisWk,PTOWedThisWk,PTOThuThisWk,PTOFriThisWk,PTOMon2Wks,PTOTue2Wks,PTOWed2Wks,PTOThu2Wks,PTOFri2Wks,PTOMonNextWk,PTOTueNextWk,PTOWedNextWk,PTOThuNextWk,PTOFriNextWk&groupby=TeamRank,Team,TeamMember&orderby=TeamRank')
.then(function(data){
$scope.data = data;
for (prop in data[0]) {
if ($scope.dateOptions[prop]) {
var newDate = $scope.dateOptions[prop];
var formattedProp = {date: (newDate.date.getMonth() + 1).toString() + '/' + newDate.date.getDate().toString(), title: newDate.title};
}
else {
var formattedProp = {date: prop, title: prop};
}
$scope.columns.push(formattedProp);
}
$scope.$apply();
})
});
