| 1 |
<div class="wrap" ng-controller="wpStatelessProcessing" ng-init="init()"> |
| 2 |
|
| 3 |
<?php if (ud_get_stateless_media('sm.mode') === 'stateless') : ?> |
| 4 |
<p><strong><?php _e('Currently, WP-Stateless cannot sync media files in Stateless mode. If you need to upload all your local media files to GCS, try syncing in Ephemeral mode instead and then switch back to Stateless.', ud_get_stateless_media()->domain); ?></strong></p> |
| 5 |
</div> |
| 6 |
<?php return; |
| 7 |
endif; ?> |
| 8 |
|
| 9 |
<noscript> |
| 10 |
<p><em><?php _e('You must enable Javascript in order to use this feature!', ud_get_stateless_media()->domain); ?></em></p> |
| 11 |
</noscript> |
| 12 |
|
| 13 |
<div ng-show="errors.length" class="stateless-admin-notice admin-error"> |
| 14 |
<strong><?php _e('Errors encountered. Try reloading the page.', ud_get_stateless_media()->domain); ?></strong> |
| 15 |
<ul> |
| 16 |
<li ng-repeat="error in errors">{{error}}</li> |
| 17 |
</ul> |
| 18 |
</div> |
| 19 |
|
| 20 |
<div ng-show="processes.isLoading"><?php _e('Loading available processes...', ud_get_stateless_media()->domain); ?></div> |
| 21 |
|
| 22 |
<div class="metabox-holder" ng-show="processes.classes.length"> |
| 23 |
<p class="processing-hint"><strong><?php _e('Hint', ud_get_stateless_media()->domain) ?>:</strong> <?php _e('You can close this page once processing is started.', ud_get_stateless_media()->domain) ?></p> |
| 24 |
<div class="postbox-container"> |
| 25 |
|
| 26 |
<div class="postbox" ng-repeat="process in processes.classes"> |
| 27 |
<div class="postbox-header"> |
| 28 |
<h2 class="hndle"> |
| 29 |
<div class="title-holder" ng-bind-html="process.name"> |
| 30 |
</div> |
| 31 |
<span> |
| 32 |
<span title="<?php _e('Processing in progress...', ud_get_stateless_media()->domain) ?>" ng-show="process.is_running" class="loading dashicons dashicons-update"></span> |
| 33 |
<a ng-show="process.helper" href="javascript:;" data-position='{"edge":"left","align":"center"}' data-title="{{process.helper.title}}" data-text="{{process.helper.content}}" class="pointer dashicons dashicons-info"></a> |
| 34 |
</span> |
| 35 |
</h2> |
| 36 |
</div> |
| 37 |
<div class="inside"> |
| 38 |
<ul> |
| 39 |
<li><strong><?php _e('Total Items', ud_get_stateless_media()->domain) ?>:</strong> <span>{{process.total_items}}</span></li> |
| 40 |
</ul> |
| 41 |
<div class="options" ng-show="process.allow_limit"> |
| 42 |
<label><?php _e('Enable Limit', ud_get_stateless_media()->domain) ?> <input type="checkbox" ng-model="process.limit_enabled" ng-disabled="process.is_running" ng-change="process.limit = 0" /></label> |
| 43 |
<label ng-style="{visibility: process.limit_enabled || process.limit > 0 ? 'visible' : 'hidden'}"> |
| 44 |
<input ng-disabled="!process.limit_enabled || process.is_running" type="number" ng-model="process.limit" style="width:80px" /> |
| 45 |
</label> |
| 46 |
</div> |
| 47 |
<div class="options" ng-show="process.allow_sorting"> |
| 48 |
<label> |
| 49 |
<?php _e('Start from', ud_get_stateless_media()->domain) ?> |
| 50 |
<select ng-model="process.order" ng-disabled="process.is_running"> |
| 51 |
<option value="desc"><?php _e('newest', ud_get_stateless_media()->domain) ?></option> |
| 52 |
<option value="asc"><?php _e('oldest', ud_get_stateless_media()->domain) ?></option> |
| 53 |
</select> |
| 54 |
</label> |
| 55 |
</div> |
| 56 |
<div class="progress" ng-show="process.is_running"> |
| 57 |
<div class="bar-wrapper"> |
| 58 |
<div class="legend"> |
| 59 |
<strong class="total"><?php _e('Total', ud_get_stateless_media()->domain) ?>: {{process.getProgressTotal()}}</strong> |
| 60 |
<strong class="queued"><?php _e('Queued', ud_get_stateless_media()->domain) ?>: {{process.getQueuedTotal()}}</strong> |
| 61 |
<strong class="processed"><?php _e('Processed', ud_get_stateless_media()->domain) ?>: {{process.processed_items}}</strong> |
| 62 |
</div> |
| 63 |
<div class="bar total" ng-style="{'background-color': process.getProgressTotal() == process.getProcessedTotal() ? '#02ae7a' : false}"> |
| 64 |
<div class="bar queued" ng-style="{width: percentage(process.getQueuedTotal(), process.getProgressTotal()),'background-color': process.getProgressTotal() == process.getProcessedTotal() ? '#02ae7a' : false}"> |
| 65 |
<div class="bar processed" ng-style="{width: percentage(process.getProcessedTotal(), process.getQueuedTotal()), 'background-color': process.getProgressTotal() == process.getProcessedTotal() ? '#02ae7a' : false}"> </div> |
| 66 |
</div> |
| 67 |
</div> |
| 68 |
</div> |
| 69 |
</div> |
| 70 |
<div class="progress-notice" ng-show="process.notice.length && process.is_running"> |
| 71 |
<p ng-repeat="notice in process.notice" ng-bind-html="notice"></p> |
| 72 |
</div> |
| 73 |
<div class="actions"> |
| 74 |
<button type="button" class="button button-primary" ng-class="{disabled: !process.canRun()}" ng-click="!process.canRun() || process.run()"><?php _e('Run', ud_get_stateless_media()->domain) ?></button> |
| 75 |
<button type="button" class="button button-secondary" ng-class="{disabled: !process.canStop()}" ng-click="!process.canStop() || process.stop()"><?php _e('Stop', ud_get_stateless_media()->domain) ?></button> |
| 76 |
</div> |
| 77 |
</div> |
| 78 |
</div> |
| 79 |
</div> |
| 80 |
</div> |
| 81 |
|
| 82 |
</div> |
