From 0f65f2dfa76c6b2e2a45ae3ded4547e50b1d6fc6 Mon Sep 17 00:00:00 2001
From: marsooooo <marso.tison@gmail.com>
Date: Mon, 17 Jun 2024 20:04:13 +0200
Subject: [PATCH] Interface Update

---
 admin/themes/default/js/batchManagerUnit.js   | 75 +++++++++++++++----
 .../default/template/batch_manager_unit.tpl   | 38 +++++++---
 2 files changed, 86 insertions(+), 27 deletions(-)

diff --git a/admin/themes/default/js/batchManagerUnit.js b/admin/themes/default/js/batchManagerUnit.js
index 0b639bf03..2228e2cc9 100644
--- a/admin/themes/default/js/batchManagerUnit.js
+++ b/admin/themes/default/js/batchManagerUnit.js
@@ -59,6 +59,18 @@ $(document).ready(function () {
 }
 
   //Succes badge
+  function updateSuccesGlobalBadge() {
+    var visibleLocalSuccesCount = $(".local-succes-badge").filter(function() {
+        return $(this).css('display') === 'block';
+    }).length;
+
+    if (visibleLocalSuccesCount > 0) {
+        showSuccesGlobalBadge()
+    } else {
+        hideSuccesGlobalBadge()
+    }
+}
+
   function showSuccesLocalBadge(pictureId) {
     var badge = $("#picture-" + pictureId + " .local-succes-badge");
     badge.css({
@@ -77,20 +89,46 @@ function hideSuccesLocalBadge(pictureId) {
     $("#picture-" + pictureId + " .local-succes-badge").css('display', 'none');
 }
 
-function showLocalSaveIcon (pictureId) {
-  $("#picture-" + pictureId + " .local-save-icon").css('display', 'block');
-  $("#picture-" + pictureId + " .action-save-picture").css({
-    'pointer-events': 'none',
-    'opacity': '0.5'
-});
+function showSuccesGlobalBadge() {
+    var badge = $(".global-succes-badge");
+    badge.css({
+        'display': 'block',
+        'opacity': 1
+    });
+
+    setTimeout(() => {
+        badge.fadeOut(1000, function() {
+            badge.css('display', 'none');
+        });
+    }, 3000);
 }
 
-function hideLocalSaveIcon(pictureId) {
-  $("#picture-" + pictureId + " .local-save-icon").css('display', 'none');
-  $("#picture-" + pictureId + " .action-save-picture").css({
-    'pointer-events': 'auto',
-    'opacity': '1'
-});
+function hideSuccesGlobalBadge() {
+    $("global-succes-badge").css('display', 'none');
+}
+
+function disableLocalButton(pictureId) {
+    $("#picture-" + pictureId + " .action-save-picture").addClass("disabled");
+
+    $("#picture-" + pictureId + " .action-save-picture i").removeClass("icon-floppy").addClass("icon-spin6 animate-spin");
+}
+
+function enableLocalButton(pictureId) {
+    $("#picture-" + pictureId + " .action-save-picture").removeClass("disabled");
+
+    $("#picture-" + pictureId + " .action-save-picture i").removeClass("icon-spin6 animate-spin").addClass("icon-floppy");
+}
+
+function disableGlobalButton() {
+    $(".action-save-global").addClass("disabled");
+
+    $(".action-save-global i").removeClass("icon-floppy").addClass("icon-spin6 animate-spin");
+}
+
+function enableGlobalButton() {
+    $(".action-save-global").removeClass("disabled");
+
+    $(".action-save-global i").removeClass("icon-spin6 animate-spin").addClass("icon-floppy");
 }
 
 
@@ -177,6 +215,8 @@ function hideLocalSaveIcon(pictureId) {
 
   function saveChanges(pictureId) {
       if ($("#picture-" + pictureId + " .local-unsaved-badge").css('display') === 'block') {
+          disableGlobalButton();
+          disableLocalButton(pictureId)
           console.log("Saving changes for " + pictureId);
 
           // Retrieve Infos
@@ -200,7 +240,7 @@ function hideLocalSaveIcon(pictureId) {
               tags.push(tagId);
           });
           var tagsStr = tags.join(',');
-          showLocalSaveIcon(pictureId);
+
           $.ajax({
               url: 'ws.php?format=json',
               method: 'POST',
@@ -220,15 +260,20 @@ function hideLocalSaveIcon(pictureId) {
               },
               success: function(response) {
                   console.log(response);
-                  hideLocalSaveIcon(pictureId);
+                  enableLocalButton(pictureId);
+                  enableGlobalButton();
                   hideUnsavedLocalBadge(pictureId);
                   showSuccesLocalBadge(pictureId);
                   updateUnsavedGlobalBadge();
+                  updateSuccesGlobalBadge();
               },
               error: function(xhr, status, error) {
-                  hideLocalSaveIcon(pictureId);
+                  enableLocalButton(pictureId);
+                  enableGlobalButton();
                   hideUnsavedLocalBadge(pictureId);
                   showErrorLocalBadge(pictureId);
+                  updateUnsavedGlobalBadge();
+                  updateSuccesGlobalBadge();
                   console.error('Error:', error);
               }
           });
diff --git a/admin/themes/default/template/batch_manager_unit.tpl b/admin/themes/default/template/batch_manager_unit.tpl
index 80f7db091..5ae890073 100644
--- a/admin/themes/default/template/batch_manager_unit.tpl
+++ b/admin/themes/default/template/batch_manager_unit.tpl
@@ -329,7 +329,7 @@ var sliders = {
   {/footer_script}
 
 {debug}
-<div class="deleted-element" data-image_id="{$element.ID}" style="display: none;"><i class="icon-ok">&#xe819;</i><p>Image {$element.ID} was succesfully deleted</p></div>
+<div class="deleted-element" data-image_id="{$element.ID}" style="display: none;"><i class="icon-ok">&#xe819;</i><p>Image #{$element.ID} '{$element.FILE}' was succesfully deleted</p></div>
 <fieldset class="elementEdit" id="picture-{$element.ID}" data-image_id="{$element.ID}">
   <div class="media-box">
     <img src="{$element.TN_SRC}" alt="imagename" class="media-box-embed" style="{if $element.FORMAT}width:100%; max-height:100%;{else}max-width:100%; height:100%;{/if}">
@@ -451,11 +451,12 @@ var sliders = {
       <textarea cols="50" rows="4" name="description" class="description-box" id="description-{$element.id}">{$element.DESCRIPTION}</textarea>
     </div>
     <div class="validation-container">
+    <div class="save-button-container">
     <div class="buttonLike action-save-picture"><i class="icon-floppy"></i>{'Submit'|@translate}</div>
-    <i class="local-save-icon icon-spin6 animate-spin" style="display: none;">&#xe81d;</i>
-    <div class="local-unsaved-badge badge-container" style="display: none;"><p class="badge-unsaved"><i class="icon-attention">&#xe829;</i>Changes pending</p></div>
-    <div class="local-succes-badge badge-container" style="display: none;"><p class="badge-succes"><i class="icon-ok">&#xe819;</i>Changes saved</p></div>
-    <div class="local-error-badge badge-container" style="display: none;"><p class="badge-error"><i class="icon-cancel">&#xe822;</i>Error during save</p></div>
+    </div>
+    <div class="local-unsaved-badge badge-container" style="display: none;"><div class="badge-unsaved"><i class="icon-attention">&#xe829;</i>Changes pending</div></div>
+    <div class="local-succes-badge badge-container" style="display: none;"><div class="badge-succes"><i class="icon-ok">&#xe819;</i>Changes saved</div></div>
+    <div class="local-error-badge badge-container" style="display: none;"><div class="badge-error"><i class="icon-cancel">&#xe822;</i>Error during save</div></div>
     </div>
   </div>
 </fieldset>
@@ -486,21 +487,20 @@ var sliders = {
 <div class="bottom-save-bar">
   <input type="hidden" name="pwg_token" value="{$PWG_TOKEN}">
   <div class="badge-container global-unsaved-badge" style="display: none;">
-    <p class="badge-unsaved"><i class="icon-attention">&#xe829;</i>
+    <div class="badge-unsaved"><i class="icon-attention">&#xe829;</i>
         <span id="unsaved-count"></span> image(s) contains unsaved changes
-    </p>
+    </div>
   </div>
   <div class="badge-container global-succes-badge" style="display: none;">
-    <p class="badge-succes"><i class="icon-attention">&#xe829;</i>
+    <div class="badge-succes"><i class="icon-attention">&#xe829;</i>
       Changes saved
-    </p>
+    </div>
   </div>
   <div class="badge-container global-error-badge" style="display: none;">
-    <p class="badge-error"><i class="icon-attention">&#xe829;</i>
+    <div class="badge-error"><i class="icon-attention">&#xe829;</i>
       Error during save
-    </p>
+    </div>
   </div>
-  <i class="global-save-icon icon-spin6 animate-spin" style="display: none;">&#xe81d;</i>
   <div class="buttonLike action-save-global"><i class="icon-floppy"></i>Save all photos</div>  
 </div>
 
@@ -826,4 +826,18 @@ var sliders = {
   gap: 10px;
 }
 
+.save-button-container{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 90px;
+  height: 45px;
+}
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+
 </style>