server/views/downloadInteraction.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <style>
   5       body {
   6         padding: 0 10px;
   7         font-family: Arial Unicode MS, Arial, Helvetica;
   8       }
   9
  10       table {
  11         table-layout: fixed;
  12         width: 100%;
  13       }
  14
  15       .text-block {
  16         padding: 5px;
  17       }
  18
  19       .text-field {
  20         color: rgba(0, 0, 0, 0.7);
  21         margin: 0;
  22         padding: 0;
  23         font-size: 8px;
  24       }
  25
  26       .text-content {
  27         margin: 0;
  28         padding: 0;
  29         font-size: 8px;
  30         font-weight: 700;
  31       }
  32
  33       .message-container {
  34         word-break: break-all;
  35       }
  36
  37       .message-container p {
  38         padding: 0 4px;
  39         margin: 2px 0;
  40         font-size: 9px;
  41       }
  42
  43       .header {
  44         text-align: center;
  45       }
  46
  47       .footer {
  48         right: 0;
  49         text-align: center;
  50         margin: 0 10px;
  51       }
  52
  53       .footer div {
  54         display: inline-block;
  55       }
  56
  57       .footer span {
  58         font-size: 8px;
  59       }
  60
  61       .center {
  62         margin: 0 auto;
  63       }
  64
  65       .left {
  66         float: left;
  67       }
  68
  69       .right {
  70         float: right;
  71       }
  72
  73       .message-info {
  74         font-size: 8px;
  75         font-style: italic;
  76         display: block;
  77       }
  78
  79       .separator {
  80         border-top: 1px solid rgba(0, 0, 0, 0.3);
  81       }
  82     </style>
  83   </head>
  84   <body>
  85     <div>
  86       <table>
  87         <tbody>
  88           <tr>
  89             <td>
  90               <div class="text-block">
  91                 <p class="text-field"><% if (interaction.channel.toLowerCase() === 'chat') { -%>Website<% } else { %>Account<% } -%></p>
  92                 <p class="text-content bold"><%- interaction.account %></p>
  93               </div>
  94             </td>
  95             <td>
  96               <div class="text-block">
  97                 <p class="text-field">Agent</p>
  98                 <p class="text-content bold"><%- interaction.agent %></p>
  99               </div>
 100             </td>
 101             <td>
 102               <div class="text-block">
 103                 <p class="text-field">Created</p>
 104                 <p class="text-content bold"><%- interaction.createdAt %></p>
 105               </div>
 106             </td>
 107           </tr>
 108           <tr>
 109             <% if (interaction.channel.toLowerCase() === 'chat') { -%>
 110             <td>
 111               <div class="text-block">
 112                 <p class="text-field">Browser</p>
 113                 <p class="text-content bold"><%- interaction.chatInfo.browser %></p>
 114               </div>
 115             </td>
 116             <td>
 117               <div class="text-block">
 118                 <p class="text-field">Operating System</p>
 119                 <p class="text-content bold"><%- interaction.chatInfo.os %></p>
 120               </div>
 121             </td>
 122             <% } else { -%>
 123             <td>
 124               <div class="text-block">
 125                 <p class="text-field">Disposition</p>
 126                 <p class="text-content bold"><%- interaction.disposition %></p>
 127               </div>
 128             </td>
 129             <% } -%>
 130             <% if (interaction.channel.toLowerCase() === 'openchannel') { -%>
 131             <td>
 132               <div class="text-block">
 133                 <p class="text-field">Visibility</p>
 134                 <p class="text-content bold"><%- interaction.visibility %></p>
 135               </div>
 136             </td>
 137             <% } -%>
 138             <td>
 139               <div class="text-block">
 140                 <p class="text-field">Closed</p>
 141                 <p class="text-content bold"><%- interaction.closedAt %></p>
 142               </div>
 143             </td>
 144           </tr>
 145           <% if (interaction.channel.toLowerCase() === 'chat') { -%>
 146           <tr>
 147             <td colspan="3">
 148               <div class="text-block">
 149                 <p class="text-field">Referer</p>
 150                 <p class="text-content bold"><%- interaction.chatInfo.referer %></p>
 151               </div>
 152             </td>
 153           </tr>
 154           <tr>
 155             <td>
 156               <div class="text-block">
 157                 <p class="text-field">Originating TCP Port</p>
 158                 <p class="text-content bold"><%- interaction.chatInfo.customerPort %></p>
 159               </div>
 160             </td>
 161             <td colspan="3">
 162               <div class="text-block">
 163                 <p class="text-field">Originating IP Address</p>
 164                 <p class="text-content bold"><%- interaction.chatInfo.customerIp %></p>
 165               </div>
 166             </td>
 167           </tr>
 168           <% } -%>
 169         </tbody>
 170       </table>
 171     </div>
 172     <hr class="separator" />
 173     <div class="message-container">
 174       <% interaction.messages.forEach(function(message) { -%>
 175       <p>
 176         <span class="message-info">[<%- message.direction %>] <%- message.date %> | <%- message.sender %> <% if(interaction.channel.toLowerCase() === 'chat' && message.read) { -%><i>&#10003;</i><% }-%></span>
 177         <% if (interaction.channel.toLowerCase() === 'openchannel' && message.attachment) { -%>[ATTACHMENT] <% } -%><%- message.body %>
 178       </p>
 179       <% }); -%>
 180
 181     </div>
 182   </body>
 183 </html>