Motion >> Repos - motion-next.git/blob

   1 <div
   2   id="screenRecordings"
   3   class="page-layout simple left-sidenav inner-sidenav motion-list"
   4 >
   5   <!-- HEADER -->
   6   <div
   7     class="header md-accent-bg"
   8     layout="row"
   9     layout-align="space-between center"
  10   >
  11     <!-- APP TITLE -->
  12     <div layout="row" layout-align="start center">
  13       <div class="logo" layout="row" layout-align="start center">
  14         <span class="logo-icon">
  15           <md-icon md-font-icon="icon-video" class="s24"></md-icon>
  16         </span>
  17         <span class="logo-text" translate="VIDEO.SCREENRECORDINGS"
  18           >ScreenRecordings</span
  19         >
  20       </div>
  21     </div>
  22     <!-- / APP TITLE -->
  23
  24     <div layout="row">
  25       <!-- SEARCH -->
  26       <div
  27         class="search-input-wrapper"
  28         layout="row"
  29         layout-align="start center"
  30       >
  31         <label for="search">
  32           <md-icon md-font-icon="icon-magnify"></md-icon>
  33         </label>
  34         <md-input-container md-no-float class="m-0">
  35           <input
  36             id="search"
  37             placeholder="Search for anyone"
  38             type="text"
  39             ng-model="vm.query.filter"
  40             ng-model-options="{ debounce: 1000 }"
  41             translate
  42             translate-attr-placeholder="VIDEO.SEARCH_FOR_ANYONE"
  43           />
  44         </md-input-container>
  45       </div>
  46       <!-- / SEARCH -->
  47       <ms-quick-filter
  48         filters="vm.quickFilters"
  49         query="vm.query"
  50         search="vm.getScreenRecordings()"
  51       ></ms-quick-filter>
  52     </div>
  53   </div>
  54   <!-- / HEADER -->
  55
  56   <!-- SELECTED BAR -->
  57   <div
  58     ng-show="vm.selectedScreenRecordings.length > 0"
  59     class="selected-bar header animate-slide-down md-accent-bg"
  60     layout="row"
  61     layout-align="start center"
  62   >
  63     <div
  64       class="close-button-wrapper"
  65       ng-click="vm.selectedScreenRecordings =[]"
  66     >
  67       <md-button layout="row" layout-align="start center">
  68         <md-icon md-font-icon="icon-arrow-left" class="mr-8"></md-icon>
  69         <span translate="VIDEO.BACK">Back</span>
  70       </md-button>
  71     </div>
  72
  73     <div flex layout="row" layout-align="space-between center">
  74       <div>
  75         <span class="selected-screenRecordings-count">
  76           <span>{{vm.selectedScreenRecordings.length}}</span>
  77           <span translate="VIDEO.SELECTED">selected</span>
  78         </span>
  79
  80         <md-menu class="select-menu" ng-if="!vm.currentThread">
  81           <md-button
  82             class="md-icon-button"
  83             ng-click="$mdMenu.open($event)"
  84             aria-label="multi select toggle"
  85             translate
  86             translate-attr-aria-label="VIDEO.MULTI_SELECT_TOGGLE"
  87           >
  88             <md-icon md-font-icon="icon-menu-down"></md-icon>
  89           </md-button>
  90           <md-menu-content width="3">
  91             <md-menu-item>
  92               <md-button
  93                 ng-click="vm.selectAllScreenRecordings()"
  94                 translate="VIDEO.SELECT_ALL"
  95               >
  96                 Select all
  97               </md-button>
  98             </md-menu-item>
  99             <md-menu-item>
 100               <md-button
 101                 ng-click="vm.deselectScreenRecordings()"
 102                 translate="VIDEO.SELECT_NONE"
 103               >
 104                 Select none
 105               </md-button>
 106             </md-menu-item>
 107           </md-menu-content>
 108         </md-menu>
 109       </div>
 110
 111       <div class="multi-select-actions">
 112         <button
 113           class="md-icon-button"
 114           ng-csv="vm.exportSelectedScreenRecordings"
 115           csv-label="true"
 116           filename="screenRecordings.csv"
 117         >
 118           <md-icon md-font-icon="icon-file-excel"></md-icon>
 119         </button>
 120         <md-button
 121           class="md-icon-button"
 122           ng-if="vm.crudPermissions.canDelete"
 123           ng-click="vm.deleteSelectedScreenRecordings($event)"
 124           aria-label="delete selected"
 125           translate
 126           translate-attr-label="VIDEO.DELETE_SELECTED"
 127         >
 128           <md-icon md-font-icon="icon-delete"></md-icon>
 129         </md-button>
 130       </div>
 131     </div>
 132   </div>
 133   <!-- / SELECTED BAR -->
 134
 135   <!-- CONTENT -->
 136   <div class="content" md-background-bg layout="row" layout-align="start start">
 137     <!-- MAIN -->
 138     <div class="main scrollable" ms-scroll>
 139       <!-- SCREENRECORDING TABLE -->
 140       <md-card>
 141         <md-table-container>
 142           <table
 143             md-table
 144             md-row-select
 145             multiple
 146             ng-model="vm.selectedScreenRecordings"
 147             md-progress="vm.promise"
 148           >
 149             <thead
 150               md-head
 151               md-order="vm.query.sort"
 152               md-on-reorder="vm.getScreenRecordings"
 153             >
 154               <tr md-row>
 155                 <th
 156                   md-column
 157                   ng-if="vm.table == 'users' || vm.table == 'agents'"
 158                   width="20px"
 159                 ></th>
 160                 <th md-column md-order-by="id">{{ 'VIDEO.ID' | translate }}</th>
 161                 <th md-column md-order-by="rating">
 162                   {{ 'VIDEO.RATING' | translate }}
 163                 </th>
 164                 <th md-column md-order-by="UserId">
 165                   {{ 'VIDEO.AGENT' | translate }}
 166                 </th>
 167                 <th md-column md-order-by="duration">
 168                   {{ 'VIDEO.DURATION' | translate }}
 169                 </th>
 170                 <th md-column md-order-by="startedAt">
 171                   {{ 'VIDEO.RECORDSTARTTIME' | translate }}
 172                 </th>
 173                 <th md-column md-order-by="closedAt">
 174                   {{ 'VIDEO.RECORDENDTIME' | translate }}
 175                 </th>
 176                 <th md-column width="10px"></th>
 177               </tr>
 178             </thead>
 179             <tbody md-body>
 180               <tr md-row ng-hide="vm.screenRecordings.rows.length">
 181                 <td md-cell colspan="7">
 182                   <div layout="row" layout-align="center center">
 183                     <span translate="VIDEO.NO_AVAILABLE_INFO"
 184                       >No Available Info</span
 185                     >
 186                   </div>
 187                 </td>
 188               </tr>
 189               <tr
 190                 md-row
 191                 md-select="screenRecording"
 192                 md-select-id="id"
 193                 ng-repeat="screenRecording in vm.screenRecordings.rows"
 194               >
 195                 <td md-cell ng-if="screenRecording.userpic">
 196                   <img
 197                     class="avatar"
 198                     alt="{{screenRecording.name}}"
 199                     ng-src="api/users/{{screenRecording.id}}/avatar"
 200                   />
 201                 </td>
 202                 <td
 203                   md-cell
 204                   ng-if="!screenRecording.userpic && (vm.table == 'users' || vm.table == 'agents')"
 205                 >
 206                   <img
 207                     class="avatar"
 208                     alt="{{screenRecording.name}}"
 209                     ng-src="assets/images/avatars/profile.png"
 210                   />
 211                 </td>
 212                 <td
 213                   ng-click="vm.createOrEditscreenRecording($event, screenRecording)"
 214                   md-cell
 215                   class="id"
 216                 >
 217                   {{screenRecording.id}}
 218                 </td>
 219                 <td
 220                   ng-click="vm.createOrEditscreenRecording($event, screenRecording)"
 221                   md-cell
 222                   class="rating"
 223                 >
 224                   <md-icon
 225                     md-font-icon="icon-star"
 226                     style="color: red"
 227                     ng-show="screenRecording.rating"
 228                     ng-repeat="rating in [1,2,3,4,5] | limitTo:screenRecording.rating"
 229                   ></md-icon
 230                   ><span
 231                     ng-hide="screenRecording.rating"
 232                     translate="VIDEO.NO_RATING"
 233                     >No rating</span
 234                   >
 235                 </td>
 236                 <td
 237                   ng-click="vm.createOrEditscreenRecording($event, screenRecording)"
 238                   md-cell
 239                   class="UserId"
 240                 >
 241                   {{ (vm.users | filter : {'id':screenRecording.UserId} :
 242                   true)[0].fullname }}
 243                 </td>
 244                 <td md-cell>
 245                   <span
 246                     ng-bind="vm.convertDuration(screenRecording.duration)"
 247                   ></span>
 248                 </td>
 249                 <td
 250                   ng-click="vm.createOrEditscreenRecording($event, screenRecording)"
 251                   md-cell
 252                   class="startedAt"
 253                 >
 254                   {{screenRecording.startedAt | date:'medium' }}
 255                 </td>
 256                 <td
 257                   ng-click="vm.createOrEditscreenRecording($event, screenRecording)"
 258                   md-cell
 259                   class="closedAt"
 260                 >
 261                   {{screenRecording.closedAt | date:'medium' }}
 262                 </td>
 263
 264                 <td md-cell class="actions">
 265                   <md-menu>
 266                     <md-button
 267                       class="md-icon-button"
 268                       aria-label="More"
 269                       translate
 270                       translate-attr-aria-label="VIDEO.MORE"
 271                       ng-click="$mdMenu.open($event)"
 272                     >
 273                       <md-icon md-font-icon="icon-dots-vertical"></md-icon>
 274                     </md-button>
 275
 276                     <md-menu-content width="3">
 277                       <!-- SUBACTIONS -->
 278
 279                       <!-- ACTIONS -->
 280
 281                       <md-menu-item>
 282                         <md-button
 283                           ng-click="vm.playrecording(screenRecording, $event  , 'value'  , 'play_screenrecording'  , 'video' )"
 284                           translate="VIDEO.PLAY_SCREENRECORDING"
 285                         >
 286                           play screenRecording
 287                         </md-button>
 288                       </md-menu-item>
 289
 290                       <!-- SUBACTIONS -->
 291
 292                       <!-- ACTIONS -->
 293
 294                       <md-menu-item>
 295                         <md-button
 296                           ng-click="vm.downloadfile2(screenRecording, $event  , 'screen/recordings'   )"
 297                           translate="VIDEO.DOWNLOAD_SCREENRECORDING"
 298                         >
 299                           Download screenRecording
 300                         </md-button>
 301                       </md-menu-item>
 302
 303                       <!-- SUBACTIONS -->
 304
 305                       <!-- ACTIONS -->
 306
 307                       <md-menu-item ng-if="vm.crudPermissions.canDelete">
 308                         <md-button
 309                           ng-click="vm.deleteconfirm(screenRecording, $event    )"
 310                           translate="VIDEO.DELETE_SCREENRECORDING"
 311                         >
 312                           Delete screenRecording
 313                         </md-button>
 314                       </md-menu-item>
 315                     </md-menu-content>
 316                   </md-menu>
 317                 </td>
 318               </tr>
 319             </tbody>
 320           </table>
 321         </md-table-container>
 322
 323         <md-table-pagination
 324           md-label="{page: '{{'VIDEO.PAGE' | translate}}:', rowsPerPage: '{{'VIDEO.ROWSPERPAGE' | translate}}:', of: '{{'VIDEO.OF' | translate}}'}"
 325           md-limit="vm.query.limit"
 326           md-limit-options="[10, 15, 20, 50, 100, 250]"
 327           md-page="vm.query.page"
 328           md-total="{{vm.screenRecordings.count}}"
 329           md-on-paginate="vm.getScreenRecordings"
 330           md-page-select
 331         ></md-table-pagination>
 332       </md-card>
 333       <!-- / SCREENRECORDING TABLE -->
 334       <!-- NO RESULTS -->
 335
 336       <!-- / NO RESULTS -->
 337     </div>
 338     <!-- / MAIN -->
 339   </div>
 340   <!-- / CONTENT -->
 341
 342   <!-- NO ADD BUTTON BUTTON -->
 343 </div>