chg: [updateProgress] Usage of GPU for animation, deleted sleeps and

improved task

app/Model/AppModel.php

@@ -1215,11 +1215,9 @@ class AppModel extends Model
                 ) ENGINE=InnoDB DEFAULT CHARSET=utf8;";
                 $sqlArray[] = "ALTER TABLE `roles` ADD `perm_decaying` tinyint(1) NOT NULL DEFAULT 0;";
                 $sqlArray[] = "UPDATE `roles` SET `perm_decaying`=1 WHERE `perm_sighting`=1;";
-                $sqlArray[] = "SELECT SLEEP(5);";
                 break;
             case 38:
                 $sqlArray[] = "ALTER TABLE servers ADD  priority int(11) NOT NULL DEFAULT 0;";
-                $sqlArray[] = "SELECT SLEEP(5);";
                 $indexArray[] = array('servers', 'priority');
                 break;
             case 39:
@@ -1234,11 +1232,9 @@ class AppModel extends Model
                     INDEX `user_id` (`user_id`),
                     INDEX `timestamp` (`timestamp`)
                 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;";
-                $sqlArray[] = "SELECT SLEEP(5);";
                 break;
             case 40:
                 $sqlArray[] = "ALTER TABLE `user_settings` ADD `timestamp` int(11) NOT NULL;";
-                $sqlArray[] = "SELECT SLEEP(5);";
                 $indexArray[] = array('user_settings', 'timestamp');
                 break;
             case 'fixNonEmptySharingGroupID':
@@ -1302,7 +1298,6 @@ class AppModel extends Model
             foreach ($sqlArray as $i => $sql) {
                 try {
                     $this->__setUpdateProgress($i, false);
-                    sleep(3);
                     $this->query($sql);
                     $this->Log->create();
                     $this->Log->save(array(
@@ -1682,7 +1677,6 @@ class AppModel extends Model
 
                 $update_done = 0;
                 foreach ($updates as $update => $temp) {
-                    sleep(3);
                     if ($verbose) {
                         echo str_pad('Executing ' . $update, 30, '.');
                     }

app/View/Servers/update_progress.ctp

@@ -19,7 +19,7 @@ if (isset($updateProgress['preTestSuccess']) && $updateProgress['preTestSuccess'
 <?php endif; ?>
     <div style="width: 50%;margin: 0 auto;">
         <?php if (count($updateProgress['commands']) > 0): ?>
-            <h2><?php echo(sprintf(__('Database Update progress for update %s'), h($updateProgress['db_version'])));?></h2>
+            <h2><?php echo(sprintf(__('Database Update progress for update %s'), h($updateProgress['toward_db_version'])));?></h2>
             <div class="" style="max-width: 1000px;">
 
                 <div>
@@ -35,7 +35,7 @@ if (isset($updateProgress['preTestSuccess']) && $updateProgress['preTestSuccess'
                     <div id="pb-fail" class="bar" style="width: <?php echo h($percentageFail);?>%; background-color: #ee5f5b;"></div>
                 </div>
 
-                <table class="table table-bordered table-stripped updateProgressTable">
+                <table class="table table-bordered table-stripped updateProgressTable" data-towarddbversion="<?php echo h($updateProgress['toward_db_version']); ?>">
                     <thead>
                         <tr>
                             <th></th>
@@ -137,7 +137,7 @@ if (isset($updateProgress['preTestSuccess']) && $updateProgress['preTestSuccess'
 
                                     <div id="single-update-progress-<?php echo $i;?>" class="single-update-progress hidden">
                                         <div class="small-pb-in-td">
-                                            <div id="single-update-pb-<?php echo $i;?>" style="height: 100%; background: #149bdf; transition: width 0.6s ease;"></div>
+                                            <div id="single-update-pb-<?php echo $i;?>" class="single-update-pb"></div>
                                         </div>
 
                                         <div id="small-state-text-<?php echo $i;?>" class="small-state-text-in-td badge" class="badge">Filling schema table</div>
@@ -170,7 +170,6 @@ if (!$ajaxHtml) {
 <script>
     var updateProgress = <?php echo json_encode($updateProgress); ?>;
     var urlGetProgress = "<?php echo $baseurl; ?>/servers/updateProgress";
-    var current_db_version = "<?php echo h($updateProgress['db_version']); ?>";
     var checkboxLabel = "<?php echo __('Follow updates'); ?>";
     // pooler = new TaskScheduler(update_state, { container: 'followUpdateSwitchContainer', checkboxLabel: checkboxLabel});
     // pooler.start();

app/webroot/css/taskScheduler.css

@@ -32,6 +32,7 @@
     border-radius: 18px;
     margin-bottom: 0px;
 
+    transform: rotateZ(360deg);
     background-image: linear-gradient(90deg, #2196F3, #1db6ff, #2196F3);
     background-position: 0% 50%;
     background-repeat: no-repeat;
@@ -54,6 +55,8 @@
     width: 12px;
     top: 1px;
     left: 1px;
+
+    transform: rotateZ(360deg);
     background: linear-gradient(#daeff9, #daeff9);
     background-position: 0% 100%;
     background-repeat: no-repeat;

app/webroot/css/update_progress.css

@@ -64,6 +64,13 @@ table.updateProgressTable .small-state-text-in-td {
 
 }
 
+.single-update-pb {
+    height: 100%;
+    background: #149bdf;
+    transition: width 0.6s ease;
+    transform: rotateZ(360deg);
+}
+
 .back-and-forth-animation {
     position: relative;
     animation: backandforthAnim 2.0s infinite;

app/webroot/js/taskScheduler.js

@@ -26,6 +26,8 @@
         this.task = task;
         this.interval;
         this.taskRunning = false;
+        this.taskScheduled = false;
+        this.cancelRequested = false;
         this.backup_parameters = false;
         this.checkbox = false;
         this.init();
@@ -59,15 +61,21 @@
         start: function(arrayParameters) {
             var that = this;
             if (!this.taskRunning) {
-                that._start(arrayParameters);
                 this.taskRunning = true;
+                that._start(arrayParameters);
+                this.taskScheduled = true;
                 this.interval = setInterval(function() {
+                    this.taskScheduled = false;
                     that._start(arrayParameters);
                 }, this.config.interval);
             }
         },
 
         _start: function(arrayParameters) {
+            if (this.cancelRequested) {
+                this.cancelRequested = false;
+                return;
+            }
             this.animate();
             if (arrayParameters !== undefined) {
                 this.backup_parameters = arrayParameters;
@@ -85,6 +93,12 @@
             }
         },
 
+        cancel: function() {
+            if (this.taskScheduled) {
+                this.cancelRequested = true;
+            }
+        },
+
         restartTask: function() {
             this.stop();
             if (this.backup_parameters !== false) {

app/webroot/js/update_progress.js

@@ -30,19 +30,24 @@ $(document).ready(function() {
 
 function update_state(hard_reload) {
     if (hard_reload) {
+        pooler.cancel();
+        pooler.stop();
         $.ajax({
             url: urlGetProgress+'/1',
             dataType: 'html',
             success: function( html, textStatus, jQxhr ) {
                 $('div.servers.form').html(html);
+                pooler.start();
                 pooler.unthrottle();
                 pooler.createSwitch();
             }
         });
     } else {
         $.getJSON(urlGetProgress, function(data) {
-            if (data['db_version'] != current_db_version) {
+            var toward_db_version = parseInt($('table.updateProgressTable').data('towarddbversion'));
+            if (parseInt(data['toward_db_version']) != toward_db_version) {
                 update_state(true);
+                return;
             }
             var total = parseInt(data['total']);
             var current = parseInt(data['current']);