script.html

<div class="container alert-info center-vertical">
	<div class="panel">
		<div class="panel-body">

			<div class="col-sm-4">
				<div class="example-box-wrapper ">
					<div class="row text-center">
						<p class="lead">Dispositions:</p>
						<div class="col-sm-6 text-success">
							Ready
						</div>
						<div class="col-sm-6 text-Danger">
							Not Ready
						</div>

						<div class="col-sm-6" style="margin-bottom:10px;">
							<button id="SETDISPHANG:BRAND:btwcalls" name="SETDISPHANG:BRAND:btwcalls" type="submit" class="btn btn-block btn-success">Brand
								Call</button>
						</div>
						<div class="col-sm-6" style="margin-bottom:10px;">
							<button id="SETDISPHANG:BRAND:btwcalls" name="SETDISPHANG:BRAND:btwcalls" type="submit" class="btn btn-block btn-danger">Brand
								Call</button>
						</div>

						<div class="col-sm-6" style="margin-bottom:10px;">
							<button id="SETDISPHANG:CC:btwcalls" name="SETDISPHANG:CC:btwcalls" type="submit" class="btn btn-block btn-success">Calling
								Customer</button>
						</div>
						<div class="col-sm-6" style="margin-bottom:10px;">
							<button id="SETDISPHANG:CC:btwcalls" name="SETDISPHANG:CC:btwcalls" type="submit" class="btn btn-block btn-danger">Calling
								Customer</button>
						</div>

						<div class="col-sm-6" style="margin-bottom:10px;">

							<button id="SETDISPHANG:DNC:btwcalls" name="SETDISPHANG:DNC:btwcalls" type="submit" class="btn btn-block btn-success">Do
								Not Call</button>
						</div>
						<div class="col-sm-6" style="margin-bottom:10px;">
							<button id="SETDISPHANG:DNC:btwcalls" name="SETDISPHANG:DNC:btwcalls" type="submit" class="btn btn-block btn-danger">Do
								Not Call</button>
						</div>

						<div class="col-sm-6" style="margin-bottom:10px;">

							<button id="SETDISPHANG:DRVR:btwcalls" name="SETDISPHANG:DRVR:btwcalls" type="submit" class="btn btn-block btn-success">Driver
							</button>
						</div>
						<div class="col-sm-6" style="margin-bottom:10px;">
							<button id="SETDISPHANG:DRVR:btwcalls" name="SETDISPHANG:DRVR:btwcalls" type="submit" class="btn btn-block btn-danger">Driver
							</button>
						</div>

						<div class="col-sm-6" style="margin-bottom:10px;">

							<button id="SETDISPHANG:STAT:btwcalls" name="SETDISPHANG:STAT:btwcalls" type="submit" class="btn btn-block btn-success">Job
								Status</button>
						</div>
						<div class="col-sm-6" style="margin-bottom:10px;">
							<button id="SETDISPHANG:STAT:btwcalls" name="SETDISPHANG:STAT:btwcalls" type="submit" class="btn btn-block btn-danger">Job
								Status</button>
						</div>

						<div class="col-sm-6" style="margin-bottom:10px;">

							<button id="SETDISPHANG:QUOTE:btwcalls" name="SETDISPHANG:QUOTE:btwcalls" type="submit" class="btn btn-block btn-success">Quote
							</button>
						</div>
						<div class="col-sm-6" style="margin-bottom:10px;">
							<button id="SETDISPHANG:QUOTE:btwcalls" name="SETDISPHANG:QUOTE:btwcalls" type="submit" class="btn btn-block btn-danger">Quote
							</button>
						</div>

						<div class="col-sm-6" style="margin-bottom:10px;">

							<button id="SETDISPHANG:ORDR:btwcalls" name="SETDISPHANG:ORDR:btwcalls" type="submit" class="btn btn-block btn-success">Order
								Placed</button>
						</div>
						<div class="col-sm-6" style="margin-bottom:10px;">
							<button id="SETDISPHANG:ORDR:btwcalls" name="SETDISPHANG:ORDR:btwcalls" type="submit" class="btn btn-block btn-danger">Order
								Placed</button>
						</div>

						<div class="col-sm-6" style="margin-bottom:10px;">

							<button id="SETDISPHANG:OTbr:btwcalls" name="SETDISPHANG:OTbr:btwcalls" type="submit" class="btn btn-block btn-success">Other
							</button>
						</div>
						<div class="col-sm-6" style="margin-bottom:10px;">
							<button id="SETDISPHANG:OTbr:btwcalls" name="SETDISPHANG:OTbr:btwcalls" type="submit" class="btn btn-block btn-danger">Other
							</button>
						</div>

						<div class="col-sm-6" style="margin-bottom:10px;">

							<button id="SETDISPHANG:TR:btwcalls" name="SETDISPHANG:TR:btwcalls" type="submit" class="btn btn-block btn-success">Transfer
							</button>
						</div>
						<div class="col-sm-6" style="margin-bottom:10px;">
							<button id="SETDISPHANG:TR:btwcalls" name="SETDISPHANG:TR:btwcalls" type="submit" class="btn btn-block btn-danger">Transfer
							</button>
						</div>


					</div>
				</div>

			</div>
			<div class="col-sm-8">
				<div class="example-box-wrapper center">
					<div class="form-group row">
						<div class="text-center">
							<p class="lead">Call Qualifier</p>
						</div>
						<label for="lead_custom6" class="col-sm-4 control-label text-right">Order Number:</label>
						<div class="col-sm-8">
						<!-- need to move to calls table -->
							<input type="text" class="form-control" name="custom6" id="custom6" placeholder="Order Number" value="{{ parser.CallLead.custom6 }}">
						</div>
						<div class="text-center">
							<p class="lead">Agent Status</p>
						</div>
						<table class="table">
							<thead>
								<tr>
									<th>Name</th>
									<th>Status</th>
								</tr>
							</thead>
							<tbody id="agent-status-table-fill">

							</tbody>
						</table>
					</div>

				</div>
				<div class="example-box-wrapper">
				</div>
			</div>
		</div>
	</div>
	<script>
		$(function () {
			function requestCall() {
				var request = new XMLHttpRequest();
				request.open('GET', '/api/public/agentperformanceactive', true);
				request.setRequestHeader('Authorization',
					'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJ0ZW5hbnRpZCI6IjI1IiwidXNlcmlkIjoyLCJ1c2VydHlwZSI6IjEiLCJzY29wZSI6WyJyZWFkIiwid3JpdGUiLCJkZWxldGUiXSwiZXhwaXJlIjoxNTQwNDk4MTQ2LCJpYXQiOjE1NDA0OTQ1NDZ9.lyW76UIg_PRBSvyaKfyuwrvlk9fwTkIJp6JwYBQGoC40SEOzIeoHtOTX-HBlMfSP9BucEp1nnnLgB3ILIynpJQ'
				)
				request.setRequestHeader('Content-Type', 'application/json');
				request.onload = function () {
					if (request.status >= 200 && request.status < 400) {
						// Success!
						var resp = request.responseText;
						console.log('Script has success trying to attain agent status', resp);
						renderResponseData(resp);
						setTimeout(requestCall, 3000);
					} else {
						// We reached our target server, but it returned an error
						console.log('Script has error trying to attain agent status', request.responseText);

					}
				};

				request.onerror = function () {
					// There was a connection error of some sort
					console.log('Script has error trying to attain agent status', error);
				};

				request.send();
			}
			requestCall();


			var body = $("#agent-status-table-fill");

			function renderResponseData(data) {
				body.html("");
				var _data, _html = "";
				try {
					_data = JSON.parse(data);
				} catch (err) {
					console.error('Cannot parse response JSON', data);
					return;
				}
				var len = _data.length - 1;
				_data.forEach(function (e, i, a) {
					if (e.status == 'NOTREADY') {
						_html += "<tr class='danger'>";
					} else if (e.status == 'READY') {
						_html += "<tr class='success'>";
					} else if (e.status == 'TALKING') {
						_html += "<tr class='info'>";
					} else if (e.status == 'LOGOFF') {
						_html += "<tr class='active'>";
					} else {
						_html += "<tr class='warning'>";
					}


					_html += "<td>";
					_html += e.agent.name;
					_html += "</td>";

					_html += "<td>";
					_html += e.status;
					_html += "</td>";

					_html += "</tr>";
					if (i == len) {
						body.html(_html);
					}
				});

			}

		});
	</script>
</div>