Move Updater interface to OC-Admin-page. Addresses owncloud#40

Details: Move the interface from the separate template into the admin-template. Remove the link to the separate page. Remove the separate page and the route. Adjust the CSS to make the updater fit better into the admin-page. Remove some pixel-values and replace with relative values. Add a column to the backups table where the size of each backup is shown as first step of making clearer what "backups" means (see owncloud#39)
te-online · Dec 23, 2014 · 5a27bf5 · 5a27bf5
1 parent aaaae3c
commit 5a27bf5
Show file tree

Hide file tree

Showing 9 changed files with 119 additions and 146 deletions.
diff --git a/admin.php b/admin.php
@@ -13,5 +13,24 @@
 namespace OCA\Updater;
 
 \OCP\User::checkAdminUser();
+
+\OCP\Util::addScript(App::APP_ID, '3rdparty/angular');
+\OCP\Util::addScript(App::APP_ID, 'app');
+\OCP\Util::addScript(App::APP_ID, 'controllers');
+
+\OCP\Util::addStyle(App::APP_ID, 'updater');
+
+if (!@file_exists(App::getBackupBase())){
+	Helper::mkdir(App::getBackupBase());
+}
+
+$updater = new \OC\Updater();
+$data = $updater->check('http://apps.owncloud.com/updater.php');
+$isNewVersionAvailable = isset($data['version']) && $data['version'] != '' && $data['version'] !== Array();
+
 $tmpl = new \OCP\Template(App::APP_ID, 'admin');
+$lastCheck = \OC_Appconfig::getValue('core', 'lastupdatedat');
+$tmpl->assign('checkedAt', \OCP\Util::formatDate($lastCheck));
+$tmpl->assign('isNewVersionAvailable', $isNewVersionAvailable);
+$tmpl->assign('version', isset($data['versionstring']) ? $data['versionstring'] : '');
 return $tmpl->fetchPage();
diff --git a/ajax/backup/list.php b/ajax/backup/list.php
@@ -28,8 +28,16 @@
 	}
 	$result[] = array(
 		'title' => $item,
-		'date' => date ("F d Y H:i:s", filectime(App::getBackupBase() . '/' . $item))
+		'date' => date ("F d Y H:i:s", filectime(App::getBackupBase() . '/' . $item)),
+		'size' => human_filesize(filesize(App::getBackupBase() . '/' . $item))
 	);
 }
 
 \OCP\JSON::success(array('data' => $result));
+
+/* adapted from http://php.net/manual/de/function.filesize.php */
+function human_filesize($bytes, $decimals = 2) {
+  $sz = 'BKMGTP';
+  $factor = floor((strlen($bytes) - 1) / 3);
+  return sprintf("%.{$decimals}f", $bytes / pow(1024, $factor)) . @$sz[$factor];
+}
diff --git a/appinfo/routes.php b/appinfo/routes.php
@@ -2,8 +2,6 @@
 
 /** @var $this \OC\Route\Router */
 
-$this->create('updater_update', 'update.php')
-	->actionInclude('updater/update.php');
 $this->create('updater_admin', 'admin.php')
 	->actionInclude('updater/admin.php');
 $this->create('updater_ajax_backup', 'ajax/backup.php')

diff --git a/css/updater.css b/css/updater.css
@@ -1,40 +1,28 @@
 
-#upd-progress {
-	margin: 30px 0;
+.updater-progress {
+	margin: 2em 0;
 }
 
-#updater-content p {
-	margin: 10px 0;
+.updater-admin p {
+	margin: 0.5em 0;
 }
 
-#updater-content {
-	width: 640px;
-	margin: 20px 0 20px -180px;
-	padding: 5px 20px 10px 20px;
-	background: #fff;
-	-moz-border-radius: 3px;
-	-webkit-border-radius: 3px;
-	border-radius: 3px;
-	cursor: default;
-}
-
-#updater-content table {
+.updater-backups-table {
 	width: 100%;
-	margin: 20px 0;
+	margin: 0.8em 0;
 }
 
-#updater-content table th {
-	padding: 5px 10px;
+.updater-backups-table th {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
 	filter: alpha(opacity=50);
 	opacity: .5;
 }
 
-#updater-content table td {
-	padding: 10px;
+.updater-backups-table td {
+	padding: 10px 0;
 }
 
-#updater-content .icon-delete {
+.updater-backups-table .icon-delete {
 	cursor: pointer;
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
 	filter: alpha(opacity=50);
@@ -46,14 +34,25 @@
 	display: inline-block;
 	position: relative;
 	margin: 0;
-	padding: 0 20px;
-	text-align: center;
+	padding: 0 2.3em 0 1.2em;
+	text-align: left;
 	line-height: 30px;
 	height: 30px;
-	min-width: 150px;
 	background-position: right;
 }
 
+.updater-warning-p {
+	padding-left: 0.5em;
+}
+
+.updater-space-bottom {
+	padding-bottom: 1em;
+}
+
+.track-progress li:first-child {
+	padding-left: 0;
+}
+
 .track-progress li.current {
 	font-weight: bold;
 }

diff --git a/js/app.js b/js/app.js
@@ -2,7 +2,7 @@
 angular.module('updater', []).
 	config(['$routeProvider', function($routeProvider) {
 		$routeProvider.
-		when('/index', {   controller: backupCtrl}).
-		when('/update', {templateUrl: 'templates/partials/update.html', controller: updateCtrl}).
-		otherwise({redirectTo: '/index'});
+		when('/index', { controller: backupCtrl } ).
+		when('/update', { templateUrl: 'templates/partials/update.html', controller: updateCtrl } ).
+		otherwise( { redirectTo: '/index' } );
 	}]);
diff --git a/js/controllers.js b/js/controllers.js
@@ -1,4 +1,5 @@
 /* global oc_requesttoken */
+
 function updateCtrl($scope, $http) {
 	$scope.step = 0;
 	$scope.backup = '';
@@ -10,17 +11,17 @@ function updateCtrl($scope, $http) {
 		if (data && data.message) {
 			message = data.message;
 		}
-		$('<div></div>').append($('<p></p>').append(message)).addClass('warning').appendTo($('#upd-progress'));
+		$('<div></div>').append($('<p></p>').addClass('updater-warning-p').append(message)).addClass('warning').appendTo($('.updater-progress'));
 	};
 
 	$scope.crash = function () {
 		var message = t('updater', '<strong>Server error.</strong> Please check web server log file for details');
-		$('<div></div>').append($('<p></p>').append(message)).addClass('warning').appendTo($('#upd-progress'));
+		$('<div></div>').append($('<p></p>').addClass('updater-warning-p').append(message)).addClass('warning').appendTo($('.updater-progress'));
 	};
 
 	$scope.update = function () {
 		if ($scope.step === 0) {
-			$('#upd-progress').empty().show();
+			$('.updater-progress').empty().show();
 			$('#upd-step-title').show();
 			$('.track-progress li').first().addClass('current');
 			$('.updater-spinner').hide();
@@ -49,7 +50,7 @@ function updateCtrl($scope, $http) {
 			$('.updater-spinner:eq(1)').fadeIn();
 			$('.track-progress li.current').next().addClass('current');
 			$('.track-progress li.done').removeClass('current');
-			$('<p></p>').append(t('updater', 'Here is your backup:') + ' ' + $scope.backup).appendTo($('#upd-progress'));
+			$('<p></p>').append(t('updater', 'Here is your backup:') + ' ' + $scope.backup).appendTo($('.updater-progress'));
 
 			$http.post(
 				OC.filePath('updater', 'ajax', 'download.php'), {
@@ -93,8 +94,8 @@ function updateCtrl($scope, $http) {
 						if (OC.webroot !== '') {
 							href = OC.webroot;
 						}
-						$('<p></p>').append(t('updater', 'All done. Click to the link below to start database upgrade.')).appendTo($('#upd-progress'));
-						$('<p></p>').addClass('bold').append($('<a href="' + href + '">' + title + '</a>').addClass('button')).appendTo($('#upd-progress'));
+						$('<p></p>').addClass('updater-space-bottom').append(t('updater', '<strong>All done.</strong> Click to the link below to start database upgrade.')).appendTo($('.updater-progress'));
+						$('<p></p>').addClass('bold').append($('<a href="' + href + '">' + title + '</a>').addClass('button')).appendTo($('.updater-progress'));
 					} else {
 						$scope.fail(data);
 					}

diff --git a/templates/admin.php b/templates/admin.php
@@ -11,8 +11,61 @@
  */
 
 ?>
-
-<div class="section">
-	<h2><?php p($l->t('Updater')) ?></h2>
-	<a class="button" target="_blank" href="<?php p(\OCP\Util::linkTo('updater', 'update.php')) ?>"><?php p($l->t('Open Update Center')) ?></a>
+<?php $isNewVersionAvailable = $_['isNewVersionAvailable']?>
+<div ng-app="updater" ng-init="navigation='backup'" class="updater-admin">
+	<div class="section" ng-controller="updateCtrl">
+		<h2><?php p($l->t('Updates')) ?></h2>
+		<p id="update-info" ng-show="<?php p($isNewVersionAvailable) ?>">
+			<?php print_unescaped($l->t('<strong>A new version is available: %s</strong>', array($_['version']))) ?>
+		</p>
+		<p ng-show="<?php p(!$isNewVersionAvailable) ?>">
+			<?php print_unescaped($l->t('<strong>Up to date.</strong> <em>Checked on %s</em>', array($_['checkedAt']))) ?>
+		</p>
+		<div id="upd-step-title" style="display:none;">
+			<ul class="track-progress" data-steps="3">
+				<li class="icon-breadcrumb">
+					<?php p($l->t('1. Check & Backup')) ?>
+					<span class="updater-spinner icon-loading-small"></span>
+				</li>
+				<li class="icon-breadcrumb">
+					<?php p($l->t('2. Download & Extract')) ?>
+					<span class="updater-spinner icon-loading-small"></span>
+				</li>
+				<li>
+					<?php p($l->t('3. Replace')) ?>
+					<span class="updater-spinner icon-loading-small"></span>
+				</li>
+			</ul>
+		</div>
+		<div class="updater-progress" style="display:none;"><div></div></div>
+		<button ng-click="update()" ng-show="<?php p($isNewVersionAvailable) ?>" id="updater-start">
+			<?php p($l->t('Update')) ?>
+		</button>
+	</div>
+	<div class="section" ng-controller="backupCtrl">
+		<h2><?php p($l->t('Update-Backups')) ?></h2>
+		<p>
+			<?php p($l->t('Backup directory')) ?>:
+			<?php p(\OCA\Updater\App::getBackupBase()); ?>
+		</p>
+		<p ng-show="!entries.length"><?php p($l->t('No backups found')) ?></p>
+		<table ng-hide="!entries.length" class="updater-backups-table">
+			<thead>
+				<tr>
+					<th>&nbsp;</th>
+					<th><?php p($l->t('Backup')) ?></th>
+					<th><?php p($l->t('Done on')) ?></th>
+					<th><?php p($l->t('Size')) ?></th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr ng-repeat="entry in entries">
+					<td title="<?php p($l->t('Delete')) ?>" class="item icon-delete" ng-click="doDelete(entry.title)"></td>
+					<td title="<?php p($l->t('Download')) ?>" class="item" ng-click="doDownload(entry.title)">{{entry.title}}</td>
+					<td title="<?php p($l->t('Download')) ?>" class="item" ng-click="doDownload(entry.title)">{{entry.date}}</td>
+					<td title="<?php p($l->t('Download')) ?>" class="item" ng-click="doDownload(entry.title)">{{entry.size}}</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
 </div>
diff --git a/templates/update.php b/templates/update.php
diff --git a/update.php b/update.php