Add navbar with scrollspy to services page

Also update dependencies, remove 'edit contact info' button from client page

angular.json

@@ -25,7 +25,12 @@
             "styles": [
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [
+              "node_modules/jquery/dist/jquery.js",
+              "node_modules/popper.js/dist/umd/popper.js",
+              "node_modules/bootstrap/js/dist/util.js",
+              "node_modules/bootstrap/js/dist/scrollspy.js"
+            ]
           },
           "configurations": {
             "production": {

package.json

@@ -21,17 +21,19 @@
     "@angular/platform-browser-dynamic": "^6.1.10",
     "@angular/router": "^6.1.10",
     "@ng-bootstrap/ng-bootstrap": "^3.3.1",
-    "bootstrap": "^4.1.3",
-    "core-js": "^2.6.0",
+    "bootstrap": "^4.2.1",
+    "core-js": "^2.6.1",
+    "jquery": "^3.3.1",
+    "popper.js": "^1.14.6",
     "rxjs": "~6.2.0",
     "zone.js": "~0.8.26"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.8.8",
+    "@angular-devkit/build-angular": "^0.11.4",
     "@angular/cli": "^6.2.8",
     "@angular/compiler-cli": "^6.1.10",
     "@angular/language-service": "^6.1.10",
-    "@types/jasmine": "^2.8.12",
+    "@types/jasmine": "^2.8.14",
     "@types/jasminewd2": "^2.0.6",
     "@types/node": "~8.9.4",
     "angular-ide": "^0.9.55",
@@ -43,7 +45,7 @@
     "karma-coverage-istanbul-reporter": "~2.0.1",
     "karma-jasmine": "~1.1.2",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "~5.4.0",
+    "protractor": "^5.4.2",
     "ts-node": "~7.0.0",
     "tslint": "~5.11.0",
     "typescript": "~2.9.2"

src/app/app.component.html

@@ -58,7 +58,6 @@ <h5 class="card-title">{{ userContactInfo.name }}</h5>
 						<span *ngIf="userContactInfo.phone">{{ userContactInfo.phone }}<br></span>
 						<span *ngIf="userContactInfo.address">{{ userContactInfo.address }}</span>
 					</p>
-					<button class="btn btn-primary">Edit Contact Info</button>
 				</div>
 			</div>
 			<div *ngIf="!userContactInfo" class="fa fa-refresh fa-spin fa-4x w-100 text-center"></div>
@@ -145,7 +144,14 @@ <h1>Organization</h1>
 	<!-- Services -->
 	<div class="row" *ngIf="activeStep === 'Services'">
 		<div class="col-lg-9 col-lg-push-3">
-			<app-service *ngFor="let service of event.services" [service]="service"></app-service>
+			<nav id="services-navbar" class="sticky-top mb-3 navbar navbar-dark bg-dark">
+				<ul class="nav nav-pills">
+					<li *ngFor="let service of event.services" class="nav-item">
+						<a class="nav-link" [href]="'#' + service.title.toLowerCase()">{{ service.title }}</a>
+					</li>
+				</ul>
+			</nav>
+			<app-service *ngFor="let service of event.services" [id]="service.title.toLowerCase()" [service]="service"></app-service>
 		</div>
 		<div class="col-lg-3">
 			<div class="sticky-top">

src/app/app.component.scss

@@ -0,0 +1,21 @@
+@import "../variables.scss";
+
+app-wizard-progress-step {
+	color: $lnl-yellow;
+}
+
+.nav-pills .nav-link {
+	color: $lnl-yellow;
+}
+
+.nav-pills .nav-link.active {
+	color: black;
+	background-color: $lnl-yellow;
+}
+
+app-service:before {
+	content: "";
+	display: block;
+	height: 4rem;
+	margin-top: -4rem;
+}

src/app/app.component.ts

@@ -11,7 +11,7 @@ import { AutopopulateSuccessModalComponent } from './autopopulate-success-modal/
 @Component({
 	selector: 'app-root',
 	templateUrl: './app.component.html',
-	styleUrls: ['./app.component.css']
+	styleUrls: ['./app.component.scss'],
 })
 export class AppComponent implements OnInit {
 	STEPS = ['Client', 'Event Details', 'Services', 'Review'];

src/app/models.ts

@@ -209,8 +209,10 @@ export class Event {
 			for (const serviceOptionJson of serviceJson['options']) {
 				service.serviceOptions.push(new ServiceOption(serviceOptionJson));
 			}
-			for (const addonJson of serviceJson['addons']) {
-				service.addons.push(new Addon(addonJson));
+			if ('addons' in serviceJson) {
+				for (const addonJson of serviceJson['addons']) {
+					service.addons.push(new Addon(addonJson));
+				}
 			}
 			this.services.push(service);
 		}

src/app/wizard-progress-step/wizard-progress-step.component.css → src/app/wizard-progress-step/wizard-progress-step.component.scss

@@ -1,11 +1,13 @@
+@import "../../variables.scss";
+
 :host {padding: 0; position: relative;}
 .step-title {font-size: 16px; margin-bottom: 5px;}
 :host.complete .step-title {cursor: pointer;}
-.step-dot {position: absolute; width: 30px; height: 30px; display: block; background: #ffe303; top: 45px; left: 50%; margin-top: -15px; margin-left: -15px; border-radius: 50%;}
+.step-dot {position: absolute; width: 30px; height: 30px; display: block; background: $lnl-yellow; top: 45px; left: 50%; margin-top: -15px; margin-left: -15px; border-radius: 50%;}
 :host.complete .step-dot {cursor: pointer;} 
-.step-dot:after {content: ' '; width: 14px; height: 14px; background: #fff6ad; border-radius: 50px; position: absolute; top: 8px; left: 8px; } 
+.step-dot:after {content: ' '; width: 14px; height: 14px; background: $lnl-yellow-accent; border-radius: 50px; position: absolute; top: 8px; left: 8px; }
 .progress {position: relative; border-radius: 0px; height: 8px; box-shadow: none; margin: 20px 0;}
-.progress > .progress-bar {width:0px; box-shadow: none; background: #ffe303;}
+.progress > .progress-bar {width:0px; box-shadow: none; background: $lnl-yellow;}
 :host.complete > .progress > .progress-bar {width:100%;}
 :host.active > .progress > .progress-bar {width:50%;}
 :host:first-child.active > .progress > .progress-bar {width:0%;}

src/app/wizard-progress-step/wizard-progress-step.component.ts

@@ -3,7 +3,7 @@ import { Component, EventEmitter, HostBinding, Input, OnInit, Output } from '@an
 @Component({
 	selector: 'app-wizard-progress-step',
 	templateUrl: './wizard-progress-step.component.html',
-	styleUrls: ['./wizard-progress-step.component.css']
+	styleUrls: ['./wizard-progress-step.component.scss']
 })
 export class WizardProgressStepComponent implements OnInit {
 	@Input() title: string;

src/assets/services.json

@@ -215,5 +215,22 @@
 				"price": 10
 			}
 		]
+	},
+	{
+		"title": "Other",
+		"options": [
+			{
+				"title": "Power Distribution",
+				"isBoolean": true,
+				"choices": [
+					{
+						"title": "Power Distribution",
+						"price": 40,
+						"description": "Power your pizza warmers or something."
+					}
+				],
+				"defaultChoice": "No"
+			}
+		]
 	}
 ]

src/index.html

@@ -33,7 +33,7 @@
 		}
 	</style>
 </head>
-<body>
+<body data-spy="scroll" data-target="#services-navbar" data-offset="100">
 	<app-root>
 		<div id="preload-wrapper">
 			<div>

src/styles.scss

@@ -1,7 +1,7 @@
 @import "variables.scss";
 
 $dark: #222;
-$navbar-dark-color: #ffe303;
+$navbar-dark-color: $lnl-yellow;
 
 $spacers: (
 	navbarcollapsed: 4rem,
@@ -14,7 +14,7 @@ $spacers: (
  * Selectable cards
  *********************/
 
-.selectable-card:not(.selected) {
+ .selectable-card:not(.selected) {
 	cursor: pointer;
 }
 

src/variables.scss

@@ -1,2 +1,4 @@
+$lnl-yellow: #ffe303;
+$lnl-yellow-accent: #fff6ad;
 $primary: #007bff;
-$secondary: #6c757d;
+$secondary: #6c757d;