Work on submitting event

.gitignore

@@ -10,6 +10,7 @@
 
 # IDEs and editors
 /.idea
+/.vscode
 .project
 .classpath
 .c9/

src/app/app.component.html

@@ -13,7 +13,7 @@
 <!-- Modals -->
 <ng-template #loadingModal let-modal>
 	<div class="modal-body d-flex">
-		<div class="fa fa-refresh fa-spin fa-5x"></div>
+		<div><span class="fa fa-refresh fa-spin fa-5x"></span></div>
 		<div class="ml-4">Looking for last year's event&hellip;</div>
 	</div>
 	<div class="modal-footer">
@@ -26,6 +26,18 @@
 		<div class="ml-4">Login required. Redirecting&hellip;</div>
 	</div>
 </ng-template>
+<ng-template #submittingModal let-modal>
+	<div class="modal-body d-flex">
+		<div><span class="fa fa-refresh fa-spin fa-5x"></span></div>
+		<div class="ml-4">Submitting your event. Do not press your browser's back button or leave this page.</div>
+	</div>
+</ng-template>
+<ng-template #submitSuccessModal let-modal>
+	<div class="modal-body d-flex">
+		<div class="fa fa-check-circle-o fa-5x text-success"></div>
+		<div class="ml-4">Success</div>
+	</div>
+</ng-template>
 <!-- Main content -->
 <main role="main" class="container">
 	<!-- Welcome -->

src/app/app.component.ts

@@ -21,6 +21,8 @@ export class AppComponent implements OnInit {
 
 	@ViewChild('loadingModal') loadingModal: ElementRef;
 	@ViewChild('loginRequiredModal') loginRequiredModal: ElementRef;
+	@ViewChild('submittingModal') submittingModal: ElementRef;
+	@ViewChild('submitSuccessModal') submitSuccessModal: ElementRef;
 
 	@ViewChild('orgSearch') orgSearchInput: ElementRef;
 	orgSearchVisible = true;
@@ -79,7 +81,15 @@ export class AppComponent implements OnInit {
 	}
 
 	displayLoadingModal() {
-		this.modalService.open(this.loadingModal, { size: 'sm', centered: true });
+		return this.modalService.open(this.loadingModal, { size: 'sm', centered: true });
+	}
+
+	displaySubmittingModal() {
+		return this.modalService.open(this.submittingModal, { size: 'sm', centered: true, backdrop: 'static', keyboard: false });
+	}
+
+	displaySubmitSuccessModal() {
+		return this.modalService.open(this.submitSuccessModal, { size: 'sm', centered: true, backdrop: 'static', keyboard: false });
 	}
 
 	displayOrgSearch() {
@@ -136,7 +146,7 @@ export class AppComponent implements OnInit {
 
 	loadBaseData() {
 		const appComponent = this;
-		this.http.get('http://localhost:8000/db/workorderwizard-json').subscribe(function(response) {
+		this.http.get('http://localhost:8000/db/workorderwizard-load').subscribe(function(response) {
 			appComponent.userContactInfo = response['user'];
 			const orgs = [];
 			for (const org of response['orgs']) {
@@ -181,27 +191,41 @@ export class AppComponent implements OnInit {
 		if (this.event.setupCompleteDatetime()) {
 			data['setup_complete'] = this.event.setupCompleteDatetime().toISOString();
 		}
-		data['services'] = {};
+		data['services'] = [];
+		data['extras'] = [];
 		for (const service of this.event.services) {
-			data['services'][service.title] = {};
 			for (const serviceOption of service.serviceOptions) {
-				if (serviceOption.selectedChoice) {
-					if (serviceOption.isBoolean) {
-						data['services'][service.title][serviceOption.title] = true;
-					} else {
-						data['services'][service.title][serviceOption.title] = serviceOption.selectedChoice.title;
-					}
+				// selected choice will only be added to the JSON if its value is truthy
+				if (serviceOption.selectedChoice && serviceOption.selectedChoice.value) {
+					data['services'].push({id: serviceOption.selectedChoice.value, detail: serviceOption.detail});
 				}
 			}
 			for (const addon of service.addons) {
-				data['services'][service.title][addon.title] = addon.quantity;
+				data['extras'].push({id: addon.title, quantity: addon.quantity});
 			}
 		}
-		this.http.post('http://localhost:8000/db/workorderwizard-json', data,
+		let modal = this.displaySubmittingModal();
+		const appComponent = this;
+		this.http.post('http://localhost:8000/db/workorderwizard-submit', data,
 				{headers: new HttpHeaders({'Content-Type': 'application/json'})}).subscribe(function(response) {
-			console.log(response);
+			modal.close();
+			appComponent.displaySubmitSuccessModal();
+			setTimeout(function() {
+				window.location.href = 'http://localhost:8000' + response['event_url'];
+			}, 2000);
 		}, function(error) {
-			console.log(error);
+			modal.close();
+			modal = appComponent.modalService.open(ErrorModalComponent);
+			if (error.status === 0) {
+				const msg = 'Failed to submit your event. Check your internet connection and try again.';
+				modal.componentInstance.message = msg;
+			} else {
+				const msg = 'Failed to submit your event. Please wait a moment and then try again.';
+				modal.componentInstance.message = msg;
+			}
+			setTimeout(function() {
+				modal.close();
+			}, 3000);
 		});
 	}
 }

src/app/error-modal/error-modal.component.ts

@@ -6,7 +6,6 @@ import { Component, Input, OnInit } from '@angular/core';
   styleUrls: ['./error-modal.component.css']
 })
 export class ErrorModalComponent implements OnInit {
-	@Input() error: string;
 
   constructor() { }
 

src/app/models.ts

@@ -43,6 +43,7 @@ export class ServiceOptionChoice {
 export class ServiceOption {
 	title: string;
 	description: string;
+	shortname: string;
 	isBoolean: boolean;
 	choices: ServiceOptionChoice[];
 	selectedChoice: ServiceOptionChoice;

src/assets/services.json

@@ -7,22 +7,24 @@
 				"choices": [
 					{
 						"title": "Small",
+						"value": "I1",
 						"price": 0,
 						"detailPrompt": "Please describe your microphone and laptop/phone input requirements.",
 						"description": "For playing music, and up to 2 microphones for announcements or speakers."
 					},
 					{
 						"title": "Medium",
+						"value": "I2",
 						"price": 50,
 						"detailPrompt": "Please describe your microphone and other input requirements, including any instruments/vocalists that need to be mic'ed, any DIs required, laptop input, etc.",
 						"description": "Up to 8 inputs, intended for smaller scale events that have live performances, a capella shows, etc."
 					},
 					{
 						"title": "Large",
+						"value": "I3",
 						"price": 75,
 						"detailPrompt": "Please describe your microphone and other input requirements, including any instruments/vocalists that need to be mic'ed, any DIs required, etc. If your event is a stage show with multiple acts, you will be asked for a set list via email and you only need to provide a general description here.",
-						"description": "Intended for events such as large concerts, bands, stage shows, etc.",
-						"imageUrl": "https://www.szbecen.com/wp-content/uploads/2017/11/blog2-2.jpg"
+						"description": "Intended for events such as large concerts, bands, stage shows, etc."
 					}
 				]
 			},
@@ -32,16 +34,19 @@
 				"choices": [
 					{
 						"title": "House System",
+						"value": "O1",
 						"price": 0,
 						"description": "We will use the speakers that are permanently installed in the venue."
 					},
 					{
 						"title": "Small",
+						"value": "O2",
 						"price": 50,
 						"description": "Small speakers"
 					},
 					{
 						"title": "Large",
+						"value": "O3",
 						"price": 1000000,
 						"description": "Big speakers"
 					}
@@ -53,6 +58,7 @@
 				"choices": [
 					{
 						"title": "Subwoofers",
+						"value": "SB",
 						"price": 50,
 						"description": "Lots of wub"
 					}
@@ -65,6 +71,7 @@
 				"choices": [
 					{
 						"title": "Monitors",
+						"value": "MN",
 						"price": 50,
 						"detailPrompt": "Please describe your monitor requirements.",
 						"description": "Your band can hear themselves"
@@ -102,8 +109,7 @@
 						"title": "Advanced",
 						"price": 75,
 						"detailPrompt": "Please describe your needs.",
-						"description": "Anything more than Basic.",
-						"imageUrl": "https://www.szbecen.com/wp-content/uploads/2017/11/blog2-2.jpg"
+						"description": "Anything more than Basic."
 					}
 				],
 				"defaultChoice": "None"
@@ -139,8 +145,7 @@
 					{
 						"title": "Uplighting",
 						"price": 50,
-						"description": "Prettify the room.",
-						"imageUrl": "https://www.szbecen.com/wp-content/uploads/2017/11/blog2-2.jpg"
+						"description": "Prettify the room."
 					}
 				],
 				"defaultChoice": "No"
@@ -152,8 +157,7 @@
 				"choices": [
 					{
 						"title": "Haze",
-						"price": 20,
-						"imageUrl": "https://www.szbecen.com/wp-content/uploads/2017/11/blog2-2.jpg"
+						"price": 20
 					}
 				],
 				"defaultChoice": "No"
@@ -184,8 +188,7 @@
 				"choices": [
 					{
 						"title": "Truss-mounted projector",
-						"price": 20,
-						"imageUrl": "https://www.szbecen.com/wp-content/uploads/2017/11/blog2-2.jpg"
+						"price": 20
 					}
 				],
 				"defaultChoice": "No"