public/tvox/answer.html

   1 <!DOCTYPE html>
   2
   3 <head>
   4   <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
   5   <link rel="stylesheet" href="css/angular-material.min.css">
   6   <link rel="stylesheet" href="css/style.css">
   7 </head>
   8
   9 <body ng-app="AnswerApp">
  10   <div ng-controller="AnswerController" layout="row" layout-fill>
  11     <div ng-if="error_message!=''">{{error_message}}</div>
  12     <div ng-if="error_message==''" layout="column" layout-fill>
  13       <div flex="1">
  14         <div layout="row" layout-align="space-between center">
  15
  16           <img width=100 layout-align="center" layout="row" src="{{logo}}">
  17           <div layout-align="end">
  18             Client informations:
  19             <div>
  20               <table class="legenda">
  21                 <tr>
  22                   <td><strong>First name:</strong></td>
  23                   <td>{{contactData.firstName}}</td>
  24                 </tr>
  25                 <tr>
  26                   <td><strong>Last name:</strong></td>
  27                   <td>{{contactData.lastName}}</td>
  28                 </tr>
  29                 <tr>
  30                   <td><strong>Email:</strong></td>
  31                   <td>{{contactData.email}}</td>
  32                 </tr>
  33                 <tr>
  34                   <td><strong>IP Address:</strong></td>
  35                   <td>{{interactionData.customerIp}}</td>
  36                 </tr>
  37                 <tr>
  38                   <td><strong>Website:</strong></td>
  39                   <td>{{interactionData.referer}}</td>
  40                 </tr>
  41                 <tr>
  42                   <td><strong>Browser:</strong></td>
  43                   <td>{{interactionData.browserName}}</td>
  44                 </tr>
  45               </table>
  46             </div>
  47           </div>
  48         </div>
  49         <br>
  50       </div>
  51       <md-content flex="grow" style="overflow-y:auto;padding:10px" ng-if="!interactionClosed">
  52         <div ng-repeat="message in messages.rows" class="message">
  53           <div ng-if="message.direction=='in'" layout="row" layout-align="start">
  54             <div style="display:inline-block">
  55               <span class="message-data-name">{{contactName}}</span>
  56               <span class="message-data-time">{{ message.createdAt |  date: 'medium'}}</span>
  57               <div class="user-message" ng-bind-html="message.body">
  58               </div>
  59             </div>
  60           </div>
  61           <div ng-if="message.direction=='out'" layout="row" layout-align="end">
  62             <div style="display:inline-block">
  63               <span class="message-data-time">{{ message.createdAt  | date: 'medium' }}</span>
  64               <div class="agent-message" ng-bind-html="message.body">
  65               </div>
  66             </div>
  67           </div>
  68         </div>
  69       </md-content>
  70       <div layout="row" flex="1" layout-align="start center" ng-if="!interactionClosed" class="block-footer">
  71         <md-input-container style="width:100%" class="md-block">
  72           <label>Post your message</label>
  73           <textarea ng-model="text.content" rows="2" ng-keypress="keyPress($event)" md-select-on-focus></textarea>
  74         </md-input-container>
  75         <md-button ng-click="send()" class="md-raised md-primary">Send</md-button>
  76         <md-button aria-label="attachment" flow-btn flow-name="ngFlow.flow" flow-files-submitted="upload()" flow-init="ngFlowOptions" class="md-raised md-primary" flow-file-added="fileAdded($file)" flow-file-success="fileSuccess($file, $message)">Attach</md-button>
  77       </div>
  78       <div ng-if="interactionClosed">
  79         <md-input-container class="md-block">
  80           <label>Disposition</label>
  81           <md-select name="disposition" ng-model="dispo.firstLevelDisposition" ng-change="onDispositionChange('first')" required>
  82             <md-option ng-value="null" ng-if="!dispo.mandatoryDisposition">NONE</md-option>
  83             <md-option ng-value="disposition" ng-repeat="disposition in dispositions | filter: { level: 'first' } : true">
  84               {{ disposition.name }}</md-option>
  85           </md-select>
  86           <div ng-messages="dispositionForm.disposition.$error" ng-show="dispositionForm.disposition.$touched" role="alert">
  87             <div ng-message="required">
  88               <span>Disposition field is required</span>
  89             </div>
  90           </div>
  91         </md-input-container>
  92         <div ng-if="dispo.firstLevelDisposition && dispo.anySecondLevelDisposition" layout="row" layout-align="start center">
  93           <md-input-container class="md-block" flex>
  94             <label>Second Level Disposition</label>
  95             <md-select name="secondLevelDisposition" ng-model="dispo.secondLevelDisposition" ng-change="onDispositionChange('second')">
  96               <md-option ng-value="disposition" ng-repeat="disposition in dispositions | filter: { level: 'second', ParentId: dispo.firstLevelDisposition.id } : true">
  97                 {{ disposition.name }}</md-option>
  98             </md-select>
  99           </md-input-container>
 100           <md-button ng-if="dispo.secondLevelDisposition" ng-click="clearDispositionSelection('second')" class="md-icon-button">
 101             <md-icon md-font-icon="icon-cancel" aria-label="Clear second level disposition selection">
 102             </md-icon>
 103           </md-button>
 104         </div>
 105         <div ng-if="dispo.secondLevelDisposition && dispo.anyThirdLevelDisposition" layout="row" layout-align="start center">
 106           <md-input-container class="md-block" flex>
 107             <label>Third Level Disposition</label>
 108             <md-select name="thirdLevelDisposition" ng-model="dispo.thirdLevelDisposition">
 109               <md-option ng-value="disposition" ng-repeat="disposition in dispositions | filter: { level: 'third', ParentId: dispo.secondLevelDisposition.id } : true" ng-disabled="disposition.canSelect === false">{{ disposition.name }}</md-option>
 110             </md-select>
 111           </md-input-container>
 112           <md-button ng-if="dispo.thirdLevelDisposition" ng-click="clearDispositionSelection('third')" class="md-icon-button">
 113             <md-icon md-font-icon="icon-cancel" aria-label="Clear third level disposition selection">
 114             </md-icon>
 115           </md-button>
 116         </div>
 117
 118         <md-input-container class="md-block">
 119           <label>Note</label>
 120           <textarea ng-model="dispo.note" md-maxlength="255" max-rows="5" autofocus></textarea>
 121           <div layout="row" layout-align="center center"></div>
 122           <md-button class="md-raised md-primary" ng-click="saveDisposition()">Save disposition</md-button>
 123       </div>
 124       </md-input-container>
 125     </div>
 126   </div>
 127   </div>
 128 </body>
 129
 130 </html>
 131 <script src="js/angular.min.js"></script>
 132 <script src="js/angular-animate.min.js"></script>
 133 <script src="js/angular-aria.min.js"></script>
 134 <script src="js/angular-messages.min.js"></script>
 135 <script src="js/angular-material.min.js"></script>
 136 <script src="js/angular-sanitize.min.js"></script>
 137 <script src="js/angular-cookies.min.js"></script>
 138 <script src="js/ng-flow-standalone.min.js"></script>
 139 <script type="text/javascript" src="/socket.io/socket.io.js"></script>
 140 <script src="js/angular-resource.js"></script>
 141 <script src="js/index.socket.js"></script>
 142 <script src="js/lodash.min.js"></script>
 143 <script src="js/tvox_integration.min.js"></script>
 144 <script type="text/javascript" src="answer.controller.js"></script>