226 lines
11 KiB
HTML
226 lines
11 KiB
HTML
<div class="header">
|
|
<div class="title">
|
|
<div class="submenu">
|
|
<a ng-click="openDialog()" os-perms="mediafiles.can_upload" class="btn btn-primary btn-sm">
|
|
<i class="fa fa-plus fa-lg"></i>
|
|
<translate>New</translate>
|
|
</a>
|
|
</div>
|
|
<h1 translate>Files</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="meta" os-perms="core.can_manage_projector">
|
|
<div class="title" ng-click="isMeta = !isMeta">
|
|
<div class="name">
|
|
<i class="fa fa-play-circle"></i>
|
|
<translate>Presentation control elements</translate>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fa fa-lg" ng-class="isMeta ? 'fa-angle-down' : 'fa-angle-up'"></i>
|
|
</div>
|
|
</div>
|
|
<div class="detail" uib-collapse="isMeta">
|
|
<!-- mediafile pdf controls -->
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div ng-repeat="presentedMediafile in presentedMediafiles">
|
|
<h3>{{ getTitle(presentedMediafile) }}</h3>
|
|
<nav ng-show="getType(presentedMediafile) === 'pdf'" ng-class="getNavStyle(scroll)" class="form-inline">
|
|
<div class="btn-group">
|
|
<button class="btn btn-default" ng-click="mediafileGoToPage(presentedMediafile.page - 1)"
|
|
ng-class="{ 'disabled': (presentedMediafile.page - 1) < 1 }"
|
|
title="{{ 'Previous page' | translate }}">
|
|
<i class="fa fa-backward"></i>
|
|
</button>
|
|
<button class="btn btn-default" ng-click="mediafileGoToPage(presentedMediafile.page + 1)"
|
|
ng-class="{ 'disabled': (presentedMediafile.page + 1) > presentedMediafile.numPages }"
|
|
title="{{ 'Next page' | translate }}">
|
|
<i class="fa fa-forward"></i>
|
|
</button>
|
|
</div>
|
|
<div class="input-group">
|
|
<span class="input-group-addon" translate>Page</span>
|
|
<input type="number" min=1 ng-model="presentedMediafile.page" class="form-control" style="width: 80px"
|
|
ng-change="mediafileGoToPage(presentedMediafile.page)">
|
|
<span class="input-group-addon"><translate>of</translate> {{presentedMediafile.numPages}}</span>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button class="btn btn-default" ng-click="mediafileRotate()" title="{{ 'Rotate clockwise' | translate }}">
|
|
<i class="fa fa-repeat"></i>
|
|
</button>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button class="btn btn-default" ng-click="mediafileZoomOut()" title="{{ 'Zoom out' | translate }}">
|
|
<i class="fa fa-search-minus"></i>
|
|
</button>
|
|
<button class="btn" ng-click="mediafileFit()" title="{{ 'Reset zoom' | translate }}"
|
|
ng-class="presentedMediafile.scale=='page-fit' ? 'btn-primary' : 'btn-default'">
|
|
100%
|
|
</button>
|
|
<button class="btn btn-default" ng-click="mediafileZoomIn()" title="{{ 'Zoom in' | translate }}">
|
|
<i class="fa fa-search-plus"></i>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
<nav ng-show="getType(presentedMediafile) === 'image'" ng-class="getNavStyle(scroll)" class="form-inline">
|
|
<div class="btn-group">
|
|
<button class="btn btn-default" ng-click="mediafileToggleFullscreen()" title="{{ 'Toggle fullscreen' | translate }}"
|
|
ng-class="presentedMediafile.fullscreen ? 'btn-primary' : 'btn-default'">
|
|
<i class="fa fa-arrows-alt"></i>
|
|
</button>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button class="btn btn-default" ng-click="mediafileRotate()" title="{{ 'Rotate clockwise' | translate }}">
|
|
<i class="fa fa-repeat"></i>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
<nav ng-show="getType(presentedMediafile) === 'video'" ng-class="getNavStyle(scroll)" class="form-inline">
|
|
<div class="btn-group">
|
|
<button class="btn btn-default" ng-click="mediafileToggleFullscreen()" title="{{ 'Toggle fullscreen' | translate }}"
|
|
ng-class="presentedMediafile.fullscreen ? 'btn-primary' : 'btn-default'">
|
|
<i class="fa fa-arrows-alt"></i>
|
|
</button>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button class="btn btn-default" ng-click="setPlaying(false)" title="{{ 'Stop' | translate }}"
|
|
ng-class="presentedMediafile.playing ? 'btn-default' : 'btn-primary'">
|
|
<i class="fa fa-stop"></i>
|
|
</button>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button class="btn btn-default" ng-click="setPlaying(true)" title="{{ 'Play' | translate }}"
|
|
ng-class="presentedMediafile.playing ? 'btn-primary' : 'btn-default'">
|
|
<i class="fa fa-play"></i>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
<div ng-show="!presentedMediafiles.length" class="spacer">
|
|
<i translate>No media file projected.</i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="details">
|
|
<div class="row form-group">
|
|
<div class="col-sm-6">
|
|
<form class="form-inline">
|
|
<!-- delete mode -->
|
|
<button os-perms="mediafiles.can_manage" class="btn"
|
|
ng-class="$parent.isDeleteMode ? 'btn-primary' : 'btn-default'"
|
|
ng-click="$parent.isDeleteMode = !$parent.isDeleteMode; uncheckAll()">
|
|
<i class="fa fa-check-square-o"></i>
|
|
<translate>Select ...</translate>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="form-inline text-right">
|
|
<div class="form-group">
|
|
<div class="input-group">
|
|
<div class="input-group-addon"><i class="fa fa-search"></i></div>
|
|
<input type="text" ng-model="filter.search" class="form-control"
|
|
placeholder="{{ 'Search' | translate}}">
|
|
</div>
|
|
</div>
|
|
<button class="btn btn-default" ng-click="isFilterOpen = !isFilterOpen"
|
|
ng-class="isFilterOpen ? 'btn-primary' : 'btn-default'">
|
|
<i class="fa fa-filter"></i>
|
|
<translate>Filter ...</translate>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div uib-collapse="!isFilterOpen" class="row">
|
|
<div class="col-sm-6 text-right"></div>
|
|
<div class="col-sm-6 text-right">
|
|
<!-- pdf filter -->
|
|
<input type="checkbox" ng-model="filter.showPDFs" ng-true-value="'application/pdf'" ng-false-value=''>
|
|
<translate> Show PDF files only</translate>
|
|
</div>
|
|
</div>
|
|
<div uib-collapse="!isDeleteMode" class="row spacer">
|
|
<div class="col-sm-12 text-left">
|
|
<!-- delete button -->
|
|
<a ng-show="isDeleteMode"
|
|
os-perms="mediafiles.can_manage" ng-click="deleteMultiple()"
|
|
class="btn btn-primary">
|
|
<i class="fa fa-trash fa-lg"></i>
|
|
<translate>Delete selected mediafiles</translate>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="spacer-top-lg italic">
|
|
{{ mediafilesFiltered.length }} /
|
|
{{ mediafiles.length }} {{ "files" | translate }}<span ng-if="(mediafiles|filter:{selected:true}).length > 0">,
|
|
{{(mediafiles|filter:{selected:true}).length}} {{ "selected" | translate }}</span>
|
|
</div>
|
|
<table class="table table-striped table-bordered table-hover">
|
|
<thead>
|
|
<tr>
|
|
<!-- projector column -->
|
|
<th ng-show="!isDeleteMode" os-perms="core.can_manage_projector" class="minimum">
|
|
<!-- delete selection column -->
|
|
<th ng-show="isDeleteMode" os-perms="mediafiles.can_manage" class="minimum deleteColumn">
|
|
<input type="checkbox" ng-model="$parent.selectedAll" ng-change="checkAll()">
|
|
<!-- title -->
|
|
<th ng-click="toggleSort('title_or_filename')" class="sortable">
|
|
<translate>Title</translate>
|
|
<i class="pull-right fa" ng-show="sortColumn === 'title_or_filename' && header.sortable != false"
|
|
ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
|
|
</i>
|
|
<!-- upload time -->
|
|
<th ng-click="toggleSort('timestamp')" class="sortable optional">
|
|
<translate>Upload time</translate>
|
|
<i class="pull-right fa" ng-show="sortColumn === 'timestamp' && header.sortable != false"
|
|
ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
|
|
</i>
|
|
<!-- uploaded by -->
|
|
<th ng-click="toggleSort('uploader')" class="sortable">
|
|
<translate>Uploaded by</translate>
|
|
<i class="pull-right fa" ng-show="sortColumn === 'uploader' && header.sortable != false"
|
|
ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
|
|
</i>
|
|
</tr>
|
|
<tbody>
|
|
<tr ng-repeat="mediafile in mediafilesFiltered = (mediafiles | privateFilter | osFilter: filter.search : getFilterString |
|
|
filter: {filetype: filter.showPDFs} | orderBy: sortColumn:reverse )"
|
|
class="animate-item"
|
|
ng-class="{ 'activeline': mediafile.isProjected(), 'selected': mediafile.selected }">
|
|
<!-- projector column -->
|
|
<td ng-show="!isDeleteMode"
|
|
os-perms="core.can_manage_projector">
|
|
<a class="btn btn-default btn-sm"
|
|
ng-if="mediafile.is_presentable"
|
|
ng-class="{ 'btn-primary': mediafile.isProjected() }"
|
|
ng-click="showMediafile(mediafile)"
|
|
title="{{ 'Project mediafile' | translate }}">
|
|
<i class="fa fa-video-camera"></i>
|
|
</a>
|
|
<!-- delete selection column -->
|
|
<td ng-show="isDeleteMode" os-perms="mediafiles.can_manage" class="deleteColumn">
|
|
<input type="checkbox" ng-model="mediafile.selected">
|
|
<!-- mediafile data colums -->
|
|
<td ng-mouseover="mediafile.hover=true" ng-mouseleave="mediafile.hover=false">
|
|
<strong><a ng-href="{{ mediafile.mediafileUrl }}" target="_blank">{{ mediafile.title_or_filename }}</a></strong>
|
|
<br><small><i class="fa fa-file"></i> {{ mediafile.filetype }}</small>
|
|
<br><small><i class="fa fa-database"></i> {{ mediafile.filesize }}</small>
|
|
<span ng-if="mediafile.private"><br><small><i class="fa fa-lock"></i> <translate>Private</translate></small></span>
|
|
<div os-perms="mediafiles.can_manage" class="hoverActions" ng-class="{'hiddenDiv': !mediafile.hover}">
|
|
<a href="" ng-click="openDialog(mediafile)" translate>Edit</a> |
|
|
<a href="" class="text-danger"
|
|
ng-bootbox-confirm="{{ 'Are you sure you want to delete this file?' | translate }}<br>
|
|
<b>{{ mediafile.title }} [{{ mediafile.mediafile.name }}]</b>"
|
|
ng-bootbox-confirm-action="delete(mediafile)" translate>Delete</a>
|
|
</div>
|
|
<td class="optional">{{ mediafile.timestamp | date:'yyyy-MM-dd HH:mm:ss' }}
|
|
<td>{{ mediafile.uploader.get_full_name() }}
|
|
</tbody>
|
|
</table>
|
|
</div>
|