Added all the other files.

app-build-config.json

@@ -0,0 +1 @@
+{"version":"standard"}

app.js

@@ -66,17 +66,32 @@ define(function (require) {
 
 			//load the parked calls on document ready, and repeat every 15 seconds
 			$(document).ready(function (e) {
-				loadParkingGarage();
-				setInterval(loadParkingGarage, 30000);
+				loadParkingLot();
+				setInterval(loadParkingLot, 30000);
 			});
 
 			//Refresh parked calls button binding event:
 			$template.find("#refresh").on("click", function (e) {
-				loadParkingGarage();
+				loadParkingLot();
+			});
+
+			//Help Button/Dialog
+			$template.find("#help-button").on("click", function (e) {
+				var helptemplate = $(app.getTemplate({
+					name: 'dialog-help'
+				}));
+
+				monster.ui.dialog(helptemplate, {
+					title: app.i18n.active().parkinglot.help.title,
+					width: '600px',
+					onClose: function() {
+				    	//doStuff();
+					}
+				});
 			});
 
 			//function to load the parked calls onto the page and set dependent bindings
-			function loadParkingGarage() {
+			function loadParkingLot() {
 				self.getParkedCalls(function (listOfParkedCalls) {
 					var $results = $(
 						self.getTemplate({
@@ -107,53 +122,33 @@ define(function (require) {
 						self.callTheParker(ringbackId);
 					});
 					///////////////////////////////
-				});
-			} //end function loadParkingGarage();
-		}, //bindEvents
-
-		getParkedCalls: function (callback) {
-			var self = this;
-			self.callApi({
-				resource: "parkedCalls.list",
-				data: {
-					accountId: self.accountId,
-				},
-				success: function (data) {
-					var parker_name, parker_number;
-					$.each(data.data.slots, function (index, slot) {
-						slot.parking_slot = index;
-						self.callApi({
+				
+					$template.find(".parked-call").on("mouseover", function (e) { //load more details about parker when hover
+							var clickedItem = $(this);
+						if ($(clickedItem).find('.call-parker').html() == '') { //check if the parker info is empty
+							self.callApi({
 							// Get info on the parker device:
 							resource: "device.get",
 							data: {
 								accountId: self.accountId,
-								deviceId: slot.ringback_id,
+								deviceId: $(this).find('.call-parker').attr('id')
 							},
 							success: function (deviceData) {
-								//console.log("Success getting device: "+JSON.stringify(deviceData.data));
 								self.callApi({
 									// Get info on the user the parker device belongs to:
 									resource: "user.get",
 									data: {
 										accountId: self.accountId,
-										userId: deviceData.data.owner_id,
+										userId: deviceData.data.owner_id
 									},
 									success: function (userData) {
-										slot.parker_name = userData.data.caller_id.internal.name;
-										slot.parker_number = userData.data.caller_id.internal.number;
-										slot.complete = true;
-										console.log(
-											"parker_name first: " + slot.parker_name
-										);
-										//console.log("UserInfo for "+slot.parking_slot+": "+JSON.stringify(userData.data));
-										console.log(
-											"first: " + JSON.stringify(data.data)
-										);
+										var parker_name = userData.data.caller_id.internal.name;
+										var parker_number = userData.data.caller_id.internal.number;
+										$(clickedItem).find('.call-parker').html(parker_name+' '+parker_number);
+										$(clickedItem).find('.call-parker_hidden').css('display', 'inline');
 									},
 									error: function (parsedError) {
-										monster.ui.alert(
-											"FAILED to get user info for parking slot #" + slot.parking_slot + ": " + parsedError
-										);
+										monster.ui.alert("FAILED to get user info for parking slot #" + slot.parking_slot + ": " + parsedError);
 									},
 								}); //end get info on user
 							},
@@ -163,8 +158,25 @@ define(function (require) {
 								);
 							},
 						}); //end get info on parker device
+						} //if clickedItem parker info is empty
+					}); //end parked-call mouseover binding
+
+				}); //end self.getParkedCalls
+			} //end function loadParkingLot();
+		}, //bindEvents
+
+		getParkedCalls: function (callback) {
+			var self = this;
+			self.callApi({
+				resource: "parkedCalls.list",
+				data: {
+					accountId: self.accountId,
+				},
+				success: function (data) {
+					$.each(data.data.slots, function (index, slot) {
+						slot.parking_slot = index;
 					}); //end $.each
-					console.log("later: " + JSON.stringify(data.data));
+					//console.log(JSON.stringify(data.data));
 					callback(data.data);
 				},
 				error: function (parsedError) {

i18n/en-US.json

@@ -0,0 +1,14 @@
+{
+	"parkinglot": {
+		"welcome": "Parking Lot",
+		"description": "See and Retrieve Parked Calls",
+		"refreshButton": "Refresh",
+		"parker": "Parker:",
+		"noParkedCalls": "No Parked Calls",
+		"help": {
+			"title": "Parking Lot - Help",
+			"helptext": "Retrieve a call by clicking the red panel, the slot number, or the caller name/number. Call the person who parked the call by clicking their name or number. The parking lot will auto-refresh every 30 seconds."
+		}
+	}
+
+}

metadata/app.json

@@ -0,0 +1,23 @@
+{
+	"name": "parkinglot",
+	"i18n": {
+		"en-US": {
+			"label": "Parking Lot",
+			"description": "View and retrieve parked calls."
+		}
+	},
+	"tags": [
+		"developer"
+	],
+	"icon": "Parkinglot_app.png",
+	"api_url": "",
+	"author": "RuhNet",
+	"version": "1.0",
+	"license": "-",
+	"price": 0,
+	"urls": {
+		"documentation": "{documentation_url}",
+		"howto": "{howto_video_url}"
+	},
+	"pvt_type": "app"
+}

style/app.css

@@ -0,0 +1,124 @@
+div.results-wrapper {
+	/* width: 100%; */
+	display:flex;
+	flex-wrap: wrap;
+	flex-direction: row;
+}
+
+#help-button {
+	cursor: pointer;
+}
+
+div.parked-call {
+	position: relative;
+  	width: 300px; 
+  	/*height: 60px; */
+  	border: 2px solid #BFBFBF;
+  	background-color: white;
+  	box-shadow: 3px 3px 2px #aaaaaa;
+  	border-radius: 8px;
+  	border: 1px solid grey;
+  	margin: 10px;
+}  
+
+div.parked-call_callinfo {
+	margin-left: auto;
+  	padding: 10px 10px 10px 19px;
+	/* position: absolute; */
+	pointer-events: none;
+}
+
+span.parked-call_caller {
+	font-size: medium;
+	font-weight: bold;
+	color: purple;
+	/* border: 1px solid purple; */
+}
+
+div.parked-call_sidepanel {
+	cursor: pointer;
+	position: absolute;	
+	margin-right: auto;
+	width: 12px;
+	height: 100%;
+	background-color: red;
+	border-top-left-radius: 8px;
+	border-bottom-left-radius: 8px;
+	border-right: 1px solid black;
+	/* pointer-events: auto; */
+	z-index: 0;
+}
+
+div.parked-call_indicator {
+	cursor: pointer;
+	position: absolute;	
+	margin-top: 10px;
+	margin-left: 2px;
+	margin-right: auto;
+	width: 8px;
+	height: 20%;
+	background-color: royalblue;
+	border-radius: 2px;
+	z-index: 0;
+}
+
+div.parked-call_slot {
+	cursor: pointer;
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	padding: 3px;
+	padding-left: 5px;
+	padding-right: 5px;
+	background-color: red;
+	color: white;
+	border-top: 1px solid black;
+	border-left: 1px solid black;
+	border-top-left-radius: 8px;
+	border-bottom-right-radius: 8px;
+	font-size: large;
+	z-index: 0;
+	animation: blinker 4s linear infinite;
+}
+
+.pickup {
+	font-weight: bold;
+	cursor: pointer;
+	pointer-events: auto;
+	z-index: 0;
+}
+
+.call-parker {
+	font-weight: bold;
+	cursor: pointer;
+	pointer-events: auto;
+	z-index: 0;
+}
+
+.call-parker_hidden {
+	display: none;
+}
+
+.parked-call:nth-child(odd) .parked-call_sidepanel {
+	animation: blinker 5s linear infinite;
+}
+
+.parked-call:nth-child(even) .parked-call_sidepanel {
+	animation: blinker 4s linear infinite;
+}
+
+.parked-call:nth-child(3n) .parked-call_sidepanel {
+	animation: blinker 4.5s linear infinite;
+}
+
+
+@keyframes blinker {
+    50% {
+	    opacity: 20%;
+	}
+}
+
+
+
+
+

views/dialog-help.html

@@ -0,0 +1,11 @@
+<div id="help_wrapper">
+	<div class="hero-unit well">
+		<h4>{{ i18n.parkinglot.description }}</h4>
+	<p class="helptext">{{ i18n.parkinglot.help.helptext }}</p>
+	</div>
+</div>
+
+
+
+
+

views/layout.html

@@ -0,0 +1,13 @@
+<div id="parkinglot_wrapper">
+	<div class="hero-unit well">
+		<h2>{{ replaceVar i18n.parkinglot.welcome monster.ui.user.username }}</h2>
+		<p>{{ i18n.parkinglot.description }} &nbsp; <i id="help-button" class="fa fa-question-circle" /></p>
+	<button id="refresh" class="btn btn-primary">{{ i18n.parkinglot.refreshButton }}</button>
+	</div>
+    <div class="results"></div>
+</div>
+
+
+
+
+

views/results.html

@@ -0,0 +1,13 @@
+ <div class="results-wrapper">
+    {{#each parkedCalls}}
+	<div id="{{this.presence_user}}" class="parked-call"><div class="parked-call_sidepanel pickup"></div><div class="parked-call_indicator pickup"></div>
+		<div class="parked-call_callinfo">
+			<i class="fa fa-volume-control-phone pickup"></i> &nbsp; <span class="parked-call_caller pickup">{{this.cid_name}} {{this.cid_number}}</span><br /><div>&nbsp;&nbsp;<span class="call-parker_hidden"><span class="call-parker_label">{{@root.i18n.parkinglot.parker}} </span><span id="{{this.ringback_id}}" class="call-parker"></span></span></div>
+			<div class="parked-call_slot pickup">{{this.parking_slot}}</div>
+		</div>
+	</div>
+    {{else}}
+      <!-- In a loop, you need to use '@root' to come back to the global scope and use the i18n variable -->
+      <div>{{ @root.i18n.parkinglot.noParkedCalls }}</div>
+    {{/each}}
+</div>