File: /home/slfopp7cb1df/public_html/Call/master/public/callcenter/workplace.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Twilio Omni Channel Contact Center - Call Agent Interface</title>
<link rel="stylesheet" href="/styles/default.css" type="text/css" />
<link rel="stylesheet" href="/styles/bootstrap.min.css" type="text/css" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet" />
</head>
<body ng-app="callcenterApplication" ng-controller="WorkflowController" data-ng-init="init()">
<div ng-show="UI.warning.browser" class="panel panel-default ui-warning" ng-cloak>{{UI.warning.browser}}</div>
<div ng-show="UI.warning.worker" class="panel panel-default ui-warning" ng-cloak>{{UI.warning.worker}}</div>
<div ng-show="UI.warning.phone" class="panel panel-default ui-warning" ng-cloak>{{UI.warning.phone}}</div>
<div class="container" style="width:860px">
<section class="workflow-controller" ng-cloak>
<div class="panel panel-default">
<div class="panel-body">
<div style="overflow:auto">
<div class="logout">
<span ng-click="logout()">logout</span>
</div>
<div class="on-queue-toggle" style="float:right">
<input ng-change="toggleIsOnQueue()" ng-model="UI.isOnQueue" type="checkbox" id="is-on-queue" /><label for="is-on-queue">toggle</label>
<span> Online</span>
</div>
</div>
<h3 class="name" class="page-header">{{worker.friendlyName}}'s Call Agent Interface</h3>
<div>
<span style="font-size:1em" ng-class="{'label-success': worker.activityName == 'Available', 'label-danger': worker.activityName == 'Unavailable', 'label-default': worker.activityName == 'Offline' }"
class="label">{{worker.activityName}}</span>
</div>
<div class="reservations">
<!-- reservation is waiting for acceptance -->
<div ng-controller="WorkflowReservationController" ng-cloak class="panel panel-default agent-reservation" ng-show="reservation != null">
<div class="panel-heading">
<h3 class="panel-title">Reservation</h3>
</div>
<div class="panel-body">
<table>
<tr>
<td>
<div class="title">{{reservation.task.attributes.title}} from {{reservation.task.attributes.name}}</div>
<div class="timer" ng-class='{"invisible": !counter}'>created {{ counter | TaskWaitingTime }} ago</div>
</td>
<td class="accept-panel">
<button ng-click="accept(reservation)">Accept</button>
</td>
</tr>
</table>
</div>
</div>
<!-- reservation is waiting for acceptance -->
<!-- agent is waiting for new reservation -->
<div class="panel panel-default agent-waiting" ng-show="reservation == null && task == null && isOnQueue == true">
<div class="panel-heading">
<h4 class="panel-title">Waiting for new task ...</h4>
</div>
</div>
<!-- agent is waiting for new reservation -->
<!-- agent is working on a task -->
<div class="panel panel-default agent-task" ng-show="task != null">
<div class="panel-heading">
<button ng-show="task != null" class="btn btn-primary complete-task" ng-click="complete()">Complete Task</button>
</div>
<div class="panel-body">
<div class="description">{{task.attributes.title}} from
<span ng-show="!task.attributes.nameIsPhoneNumber">{{task.attributes.name}}</span>
<a href="#" ng-click="callPhoneNumber(task.attributes.name)" ng-show="task.attributes.nameIsPhoneNumber">{{task.attributes.name}}</a>
</div>
{{task.attributes.text}}
</div>
<section class="agent-video-canvas" ng-controller="VideoController" ng-cloak>
<div>
<div id="remote-media"></div>
<div style="text-align: center" ng-show="UI.state == 'WAITING_FOR_CUSTOMER'" class="load-indicator">
<i class="fa fa-refresh fa-spin"></i>
</div>
<div ng-show="UI.state == 'CONVERSATION_ACTIVE'">connected...</div>
<div ng-show="UI.state == 'CLOSED'" class="panel-title state-closed-panel">Customer left the conversation</div>
</div>
</section>
<!-- video -->
<!-- chat -->
<section ng-show="session.channelSid" class="chat-controller" ng-controller="ChatController" ng-cloak>
<div class="load-indicator" ng-show="session.isLoading">
<i class="fa fa-refresh fa-spin"></i>
</div>
<div ng-show="session.isInitialized">
<div class="chat-canvas" scroll-glue>
<ul class="message-list">
<li ng-class="{'me': message.author == session.identity}" class="message" ng-repeat="message in messages">
<div>
<div class="body">
<div class="needle"></div>
<p dynamic="message.body">{{message.body}}</p>
</div>
<div class="footer">
<div class="author">{{message.author}}</div>
<div class="time">
<i class="fa fa-clock-o" aria-hidden="true"></i> {{message.timestamp | time}}</div>
</div>
</div>
</li>
</ul>
<div id="bottom"></div>
</div>
<div class="typing-notification">
<span>{{typingNotification}}</span>
</div>
<form class="chat-message-form form-horizontal" name="chatMessageForm">
<div class="form-group">
<div class="col-xs-8">
<input ng-model="message" ng-model-options="{ debounce: 250 }" ng-required="true" autocomplete="off" ng-focus="focused()"
name="text" type="text" class="form-control" placeholder="say something">
</div>
<div class="col-xs-4">
<button ng-disabled="chatMessageForm.$invalid || chatMessageForm.$pristine" class="btn btn-primary" ng-click="send()">Send</button>
</div>
</div>
</form>
</div>
</section>
<!-- chat -->
</div>
<!-- agent is working on a task -->
</div>
<section ng-controller="PhoneController" class="phone-controller" ng-cloak>
<section class="phone">
<input style="font-size:2em; padding-left:10px;" ng-show="UI.state == 'idle'" ng-model="phoneNumber" type="text" name="phoneNumber"
placeholder="+.." />
<div class="phone-number" style="font-size:2em; padding-left:10px" ng-if="UI.state == 'busy'">{{phoneNumber}}</div>
<div class="keypad">
<div ng-click="addDigit('1')" class="digit">1</div>
<div ng-click="addDigit('2')" class="digit">2</div>
<div ng-click="addDigit('3')" class="digit">3</div>
<div ng-click="addDigit('4')" class="digit">4</div>
<div ng-click="addDigit('5')" class="digit">5</div>
<div ng-click="addDigit('6')" class="digit">6</div>
<div ng-click="addDigit('7')" class="digit">7</div>
<div ng-click="addDigit('8')" class="digit">8</div>
<div ng-click="addDigit('9')" class="digit">9</div>
<div ng-click="addDigit('*')" class="digit">*</div>
<div ng-click="addDigit('0')" class="digit">0</div>
<div ng-click="addDigit('#')" class="digit">#</div>
</div>
<div ng-if="UI.state == 'busy'" class="call-control">
<button ng-show="!UI.mute" ng-click="toggleMute()" aria-label="mute" style="background-image:url(/images/icon-mute-off.svg)"></button>
<button ng-show="UI.mute" ng-click="toggleMute()" aria-label="unmute" style="background-image:url(/images/icon-mute.svg)"></button>
<button ng-show="!UI.hold" ng-click="toggleHold()" aria-label="hold" style="background-image:url(/images/icon-hold-off.svg)"></button>
<button ng-show="UI.hold" ng-click="toggleHold()" aria-label="unhold" style="background-image:url(/images/icon-hold.svg)"></button>
<button ng-show="!UI.transfer" ng-click="toggleTransferPanel()" aria-label="tansfer" style="background-image:url(/images/icon-transfer-off.svg)"></button>
<button ng-show="UI.transfer" ng-click="toggleTransferPanel()" aria-label="cancel-transfer" style="background-image:url(/images/icon-transfer.svg)"></button>
</div>
<div class="transfer-control" ng-if="UI.transfer" class="transfer">
<div class="load-indicator" ng-show="transfer.isLoading">
<i class="fa fa-refresh fa-spin"></i>
</div>
<div class="worker-list-empty" ng-if="transfer.workers.length == 0 && !transfer.isLoading">
No agent available
</div>
<select class="worker-list" ng-if="transfer.workers.length > 0 && !transfer.isLoading" ng-model="transfer.to">
<option ng-repeat="worker in transfer.workers track by worker.sid" value="{{worker.sid}}">{{worker.friendlyName}}</option>
</select>
<button ng-class="{'button-transfer-disabled': !transfer.to}" ng-disabled="!transfer.to" class="button-transfer" ng-click="transfer()">TRANSFER CALL</button>
</div>
<button class="button-call" ng-if="UI.state == 'idle'" ng-click="call(phoneNumber)">CALL</button>
<button class="button-hangup" ng-if="UI.state == 'busy'" ng-click="hangUp()">HANGUP</button>
<span class="status">Status: {{debug}}</span>
<span ng-if="error != null" class="status">Error: {{error}}</span>
</section>
<div class="devices-panel">
<div class="buttons">
<div class="button-toggle-device-panel" ng-click="toggleAudioDevicePanel()" aria-label="devices"></div>
</div>
<div class="audio-device-list" ng-if="UI.devices">
<a id="get-devices" title="Allow browser to use audio devices" ng-if="showAudioPrompt()" ng-click="unknownDevices(); toggleAudioDevicePanel();">Seeing unknown devices?</a>
<div>Input</div>
<select ng-change="selectInputDevice(devices.input.selected)" class="form-control input-devices-list" ng-model="devices.input.selected">
<option ng-repeat="device in devices.available.input track by device.id" value="{{device.id}}">{{device.label}}</option>
</select>
<div style="margin-top:10px">Output</div>
<select ng-change="selectOutputDevice(devices.output.selected)" class="form-control output-devices-list" ng-model="devices.output.selected">
<option ng-repeat="device in devices.available.output track by device.id" value="{{device.id}}">{{device.label}}</option>
</select>
</div>
</div>
</section>
</div>
</div>
</section>
</div>
<script src="//media.twiliocdn.com/sdk/js/client/v1.7/twilio.min.js"></script>
<script src="//media.twiliocdn.com/taskrouter/js/v1.19/taskrouter.min.js"></script>
<script src="//media.twiliocdn.com/sdk/js/common/v0.1/twilio-common.min.js"></script>
<script src="//media.twiliocdn.com/sdk/js/chat/v3.0/twilio-chat.min.js"></script>
<script src="//media.twiliocdn.com/sdk/js/video/v1/twilio-video.min.js"></script>
<script src="/scripts/angular.min.js"></script>
<script src="/scripts/angular-messages.min.js"></script>
<script src="/scripts/angular-scrollglue.js"></script>
<script src="/scripts/moment.min.js"></script>
<script src="WorkflowController.js"></script>
<script src="WorkflowReservationController.js"></script>
<script src="PhoneController.js"></script>
<script src="ChatController.js"></script>
<script src="VideoController.js"></script>
<script src="/scripts/directives/TaskWaitingTimeFilter.js"></script>
</body>
</html>