public/js/chat-message-reports.js

   1 'use strict';
   2
   3 const $ = require('jquery');
   4 const _ = require('lodash');
   5 const Backbone = require('backbone');
   6 const Marionette = require('backbone.marionette');
   7 require('./views/behaviors/isomorphic');
   8 const debug = require('debug-proxy')('app:chat-messsage-reports');
   9 const generatePermalink = require('gitter-web-shared/chat/generate-permalink');
  10
  11 const context = require('gitter-web-client-context');
  12
  13 function getAccountAgeString(user) {
  14   if (user) {
  15     const createdDate = new Date(user.accountCreatedDate);
  16
  17     return `
  18       ${Math.floor(
  19         (Date.now() - createdDate.getTime()) / (1000 * 60 * 60 * 24)
  20       )} days, ${createdDate.getFullYear()}-${createdDate.getMonth()}-${createdDate.getDay()}
  21     `;
  22   }
  23
  24   return '';
  25 }
  26
  27 const ReportView = Marionette.ItemView.extend({
  28   tagName: 'tr',
  29
  30   template: data => {
  31     return `
  32       <td class="admin-chat-report-table-cell admin-chat-report-table-reporter-cell model-id-${_.escape(
  33         data.reporterUser && data.reporterUser.id
  34       )}">
  35         <div class="admin-chat-report-table-reporter-cell-username">
  36           ${_.escape(data.reporterUser ? data.reporterUser.username : 'Unknown')}
  37         </div>
  38         <div class="admin-chat-report-table-reporter-cell-id">
  39           ${_.escape(data.reporterUserId)}
  40         </div>
  41         <div title="Account age">
  42           ${_.escape(getAccountAgeString(data.reporterUser))}
  43         </div>
  44       </td>
  45       <td class="admin-chat-report-table-cell admin-chat-report-table-message-author-cell model-id-${_.escape(
  46         data.messageUser && data.messageUser.id
  47       )}">
  48         <div class="admin-chat-report-table-message-author-cell-username">
  49           ${_.escape(data.messageUser ? data.messageUser.username : 'Unknown')}
  50         </div>
  51         <div class="admin-chat-report-table-message-author-cell-id">
  52           ${_.escape(data.messageUserId)}
  53         </div>
  54         <div title="Account age">
  55           ${_.escape(getAccountAgeString(data.messageUser))}
  56         </div>
  57       </td>
  58
  59       <td class="admin-chat-report-table-cell admin-chat-report-item-message-text">
  60         <div>
  61           Weight: <strong>${_.escape(data.weight)}</strong>&nbsp;&nbsp;&nbsp;--&nbsp;${_.escape(
  62       data.sent
  63     )}
  64         </div>
  65         <div class="admin-chat-report-table-message-cell-id">
  66           ${_.escape(data.messageId)}
  67         </div>
  68         <div>
  69           ${_.escape(data.messageText)}
  70         </div>
  71       </td>
  72
  73       <td class="admin-chat-report-table-cell admin-chat-report-table-room-cell">
  74       <div class="admin-chat-report-table-room-cell-uri">
  75           ${_.escape(data.message && data.message.toTroupe && data.message.toTroupe.uri)}
  76           <a class="admin-chat-report-table-room-cell-link" href="${_.escape(
  77             data.message &&
  78               data.message.toTroupe &&
  79               generatePermalink(data.message.toTroupe.uri, data.message.id)
  80           )}" target="_blank">
  81             <svg viewbox="0 128 768 768" xmlns="http://www.w3.org/2000/svg">
  82               <path d="M640 768H128V257.90599999999995L256 256V128H0v768h768V576H640V768zM384 128l128 128L320 448l128 128 192-192 128 128V128H384z"/>
  83             </svg>
  84           </a>
  85         </div>
  86         <div class="admin-chat-report-table-room-cell-id">
  87           ${_.escape(data.message && data.message.toTroupe && data.message.toTroupe.id)}
  88         </div>
  89       </td>
  90     `;
  91   }
  92 });
  93
  94 const ReportCollectionView = Marionette.CompositeView.extend({
  95   childView: ReportView,
  96   childViewContainer: '.js-report-list',
  97
  98   childViewOptions: function(item) {
  99     return item;
 100   },
 101
 102   template: function() {
 103     return `
 104       <table>
 105         <thead>
 106           <tr>
 107             <td class="admin-chat-report-table-header-cell admin-chat-report-table-reporter-cell">
 108               Reporter
 109             </td>
 110             <td class="admin-chat-report-table-header-cell admin-chat-report-table-message-author-cell">
 111               Message Author
 112             </td>
 113             <td class="admin-chat-report-table-header-cell">
 114               Message text
 115             </td>
 116             <td class="admin-chat-report-table-header-cell">
 117               Room
 118             </td>
 119           </tr>
 120         </thead>
 121         <tbody class="js-report-list"></tbody>
 122       </table>
 123     `;
 124   }
 125 });
 126
 127 const DashboardView = Marionette.LayoutView.extend({
 128   behaviors: {
 129     Isomorphic: {
 130       reportTable: { el: '.js-report-table', init: 'initReportCollectionView' }
 131     }
 132   },
 133
 134   initReportCollectionView: function(optionsForRegion) {
 135     return new ReportCollectionView(
 136       optionsForRegion({
 137         collection: new Backbone.Collection(this.model.get('reports'))
 138       })
 139     );
 140   },
 141
 142   template: function(data) {
 143     const reports = data.reports;
 144     const lastReport = reports && reports[reports.length - 1];
 145
 146     let paginationLink = '';
 147     if (lastReport) {
 148       paginationLink = `
 149         <hr />
 150         <a href="?beforeId=${lastReport.id}">
 151           Next page
 152         </a>
 153       `;
 154     }
 155
 156     return `
 157       <div class="dashboard">
 158         <div class="js-report-table"></div>
 159
 160         ${paginationLink}
 161         <br />
 162         <br />
 163         <br />
 164         <br />
 165       </div>
 166     `;
 167   }
 168 });
 169
 170 const snapshot = context.getSnapshot('adminChatMessageReportDashboard');
 171
 172 debug('snapshot', snapshot);
 173
 174 new DashboardView({
 175   el: $('.js-chat-message-report-dashboard-root'),
 176   model: new Backbone.Model(snapshot)
 177 }).render();