логика сохранения и восстановления состоянии

src/public/fotos.dat

-{"B-KazwCAcxM":{"1":["a1654273551-3.jpg","a1654273551-2.jpg"],"2":["a1654273551-5.jpg","a1654273551-1.jpg"]},"B24WGzEo8v_":"","B9RwSi4oPAh":{"1":["a1654273593-5.jpg","a1654273593-6.jpg"],"2":["a1654273593-2.jpg","a1654273593-1.jpg"],"3":["a1654273593-4.jp
+{"B-KazwCAcxM":{"1":["a1654550658-1.jpg","a1654550658-2.jpg"],"2":["a1654550658-5.jpg","a1654550658-3.jpg"]},"BtbMz-iFHDk":"","B24WGzEo8v_":{"1":["a1654549054-2.jpg","a1654549054-3.jpg"]},"BzGTAELIyX_":{
\ No newline at end of file

src/public/js/script-main.js

@@ -13,6 +13,8 @@ $(document).ready(function(){
         $saveButton = $('.btn.btn-primary.save-folders'),
         colorsActive = $foldersContentWrap.data('colors'),
         pairsCount = $foldersContentWrap.data('pairs_count'),
+        storageName = 'im_fotos',
+        dataStorage = null,
         currentNumToSelect = {},    // Номер пары для очередного выбора
         hasSelectedFoto = {},       // Выбрали одну картинку (есть подсвеченное фото)
         archiveData = {};           // Данные о фото, находящихся в архиве
@@ -41,18 +43,20 @@ $(document).ready(function(){
         $folder.addClass('active');
     }
     
-    function MarkFolderViewed($folderName, type)
+    function MarkNewFolderViewed($folderName, type)
     {
         if (type == 'new') {
-            $folderName.addClass('viewed');
-            $saveButton.removeClass('disabled');
+            if (!$folderName.hasClass('viewed')) {
+                $folderName.addClass('viewed');
+                $saveButton.removeClass('disabled');
+                SaveLsState();
+            }
         }
     }
     
     function MarkArchFolderViewed(folderName, $this)
     {
         if ($this.parents('.b-preview_inner').hasClass('arch')) {
-            //console.log('AAA MarkArchFolderViewed ', folderName);
             $('.b-list_folders-item[data-folder="' + folderName + '"]').addClass('viewed');
             $saveButton.removeClass('disabled');
         }
@@ -124,18 +128,46 @@ $(document).ready(function(){
     
     function SetPairedFotos(folderName, folderType)
     {
+        console.log('AAA SetPairedFotos ', folderName, dataStorage);
+
+        var sourceData = null;
+
+        if (folderType == 'new') {
+            
+            if (dataStorage[folderName]) sourceData = dataStorage[folderName];
+            
+            if (sourceData) {
+                var pairs = Object.keys(dataStorage[folderName]);
+                if (pairs.length > 0)
+                {
+                    var $folderContentWrap = $('.b-folder-content[data-folder="' + folderName + '"]', $foldersNewContentWrap);
+                    pairs.forEach(function(pair){
+                        $('.b-foto_inner[data-foto="' + sourceData[pair][0] + '"] ', $folderContentWrap).trigger( "click", {data: 'emul'});
+                        $('.b-foto_inner[data-foto="' + sourceData[pair][1] + '"] ', $folderContentWrap).trigger( "click", {data: 'emul'});
+                    });
+                }
+            }
+        }
+        
+        
         if (folderType == 'arch') {
-            if (archiveData[folderName]) {
-                var pairs = Object.keys(archiveData[folderName]);
+            
+            if (archiveData[folderName]) sourceData = archiveData[folderName];
+            if (dataStorage[folderName]) sourceData = dataStorage[folderName];
+            
+            if (sourceData) {
+                var pairs = Object.keys(sourceData);
                 if (pairs.length > 0)
                 {
                     var $folderContentWrap = $('.b-folder-content[data-folder="' + folderName + '"]', $foldersArchContentWrap);
                     pairs.forEach(function(pair){
-                        $('.b-foto_inner[data-foto="' + archiveData[folderName][pair][0] + '"] ', $folderContentWrap).trigger( "click", {data: 'emul'});
-                        $('.b-foto_inner[data-foto="' + archiveData[folderName][pair][1] + '"] ', $folderContentWrap).trigger( "click", {data: 'emul'});
+                        $('.b-foto_inner[data-foto="' + sourceData[pair][0] + '"] ', $folderContentWrap).trigger( "click", {data: 'emul'});
+                        $('.b-foto_inner[data-foto="' + sourceData[pair][1] + '"] ', $folderContentWrap).trigger( "click", {data: 'emul'});
                     });
                 }
             }
+            
+            
         }
     }
     
@@ -277,11 +309,11 @@ $(document).ready(function(){
         if ($pairs.length>0) {
             $pairs.removeClass('last-pair');
             $pairs.last().addClass('last-pair');
-            //$doubles.last().addClass('last-pair');
-            $doubles.first().addClass('first-pair');
+            //$doubles.last().addClass('last-pair');    // 1й способ
+            $doubles.first().addClass('first-pair');    // 2й способ
         } else {
-            //$doubles.last().removeClass('last-pair');
-            $doubles.first().removeClass('first-pair');
+            //$doubles.last().removeClass('last-pair'); // 1й способ
+            $doubles.first().removeClass('first-pair'); // 2й способ
         }
     }
     
@@ -297,6 +329,75 @@ $(document).ready(function(){
         $foldersArchContentWrap.addClass('active');
     }
     
+    function SaveLsState()
+    {
+        var data = GetFoldersDataState();
+        console.log('AAA SaveLsState ', data);
+        localStorage.setItem(storageName, JSON.stringify(data));
+    }
+    
+    function SetStateFromLs(folder)
+    {
+        var data = localStorage.getItem(storageName);
+        if (data) {
+            dataStorage = JSON.parse(data);
+            console.log('AAA SetStateFromLs ', dataStorage);
+            
+            if (folder == 'new' || folder == 'arch') {
+                Object.keys(dataStorage).forEach(function(item){
+                    console.log('AAA  ', item);
+                    $('.b-list_folders-item[data-folder="' + item + '"]', $listFolders).addClass('viewed');
+                    if (dataStorage[item]) {
+                        $('.b-list_folders-item[data-folder="' + item + '"] b', $listFolders).text(Object.keys(dataStorage[item]).length);
+                    }
+                    
+                    
+                });
+            } else {
+                
+            }
+            
+        }
+        
+    }
+    
+    function GetFoldersDataState()
+    {
+        // Формируем данные о картинках-парах:
+        var data = {};
+        if (dataStorage) {
+            data = dataStorage;
+        }
+        
+        $('.b-list_folders-item').each(function(){
+            var $this = $(this);
+            
+            if ($this.hasClass('viewed')) {
+                var
+                    dataPaired = {},
+                    folderName = $this.data('folder'),
+                    folderContent = $('.b-folder-content[data-folder="' + folderName +  '"]'),
+                    $pairedFoto = $('.b-foto_inner.paired', folderContent);
+                    
+                data[folderName] = null;
+                if ($pairedFoto.length>0) {
+                    $pairedFoto.each(function(){
+                        var
+                            $this = $(this),
+                            pairNum = $this.data('num');
+                        
+                        if (!dataPaired[pairNum]) {
+                            dataPaired[pairNum] = [];
+                        }
+                        dataPaired[pairNum].push($this.data('foto'));
+                    });
+                    data[folderName] = dataPaired;
+                }
+            }
+        });
+        return data;
+    }
+    
     // Обработка нажатия клавиш:
     $body.keyup(function(e) {
         
@@ -345,6 +446,7 @@ $(document).ready(function(){
         var
             $this = $(this),
             num,
+            isStateToSave = false,
             $currentFolderWrap = $this.parents('.b-folder-content'),
             folderName = $currentFolderWrap.data('folder'),
             $pairedFoto;
@@ -374,6 +476,8 @@ $(document).ready(function(){
                 currentNumToSelect[folderName] = getCurrenNumToSelect($currentFolderWrap);
                 hasSelectedFoto[folderName] = false;
                 $currentFolderWrap.removeClass('has-selected');
+                
+                isStateToSave = true;
             }
             
             $('.b-foto_number', $this).text(num);
@@ -408,8 +512,8 @@ $(document).ready(function(){
             if ($this.hasClass('paired')) {
                 //console.log('AAA расформировываем пару');
                 DestroyPair($currentFolderWrap, $pairedFotos);
-                
                 MarkArchFolderViewed(folderName, $this);
+                isStateToSave = true;
             }
             
             $('.b-foto_number', $pairedFotos).text('');
@@ -424,6 +528,11 @@ $(document).ready(function(){
         }
         
         SetCountPairedInFolderItemList(folderName);
+        
+        if (isStateToSave && !isEmul) {
+            SaveLsState();
+        }
+        
     });        
     
     // Клик на папку для загрузки фотографий:
@@ -461,7 +570,7 @@ $(document).ready(function(){
                     RenderFilesList(folderName, folderType, data);
                     SetPairedFotos(folderName, folderType);
                     MarkFolderSelected($this, folderType);
-                    MarkFolderViewed($this, folderType);
+                    MarkNewFolderViewed($this, folderType);
                 },
                 error: function(rew, status, err) {
                     console.log(status, err);
@@ -503,8 +612,9 @@ $(document).ready(function(){
                 success: function(data) {
                     console.log('AAA success', data);
                     StopLoading();
-                    RenderFoldersList(type, data['folders']);
                     archiveData = data['archive'];
+                    RenderFoldersList(type, data['folders']);
+                    SetStateFromLs(type);
                 },
                 error: function(rew, status, err) {
                     console.log(status, err);                    
@@ -519,7 +629,7 @@ $(document).ready(function(){
     // Клик на "Сохранить" для объявления:
     $saveButton.on('click', function(){
         
-        //if (!confirm('Применить действия над изображениями?')) return false;
+        if (!confirm('Применить действия над изображениями?')) return false;
         
         // Формируем данные о картинках-парах:
         var data = {};
@@ -547,10 +657,7 @@ $(document).ready(function(){
                     });
                     data[folderName] = dataPaired;
                 }
-                
-                
             }
-            
         });
         
         var
@@ -558,8 +665,8 @@ $(document).ready(function(){
             action = $form.attr('action'),
             method = $form.attr('method');
        
-        //console.log('AAA data = ', data);
-        //return false;
+        console.log('AAA data = ', data);
+        return false;
         
         $.ajax(action, {
             type: method,
@@ -569,6 +676,7 @@ $(document).ready(function(){
                     console.log('AAA success', data);
                     if(data.result === true) {
                         //document.location.href = data.redirect;
+                        localStorage.removeItem(storageName);
                         document.location.reload();
                     }
                     if(data.result === false && data.msg) {
@@ -588,6 +696,6 @@ $(document).ready(function(){
     
     // Отображаем содержимое первой папки new при загрузке страницы:
     ShowFoldersNew();
-    //$('.b-list_folders-item').first().click();
+    SetStateFromLs('new');
 
 });
\ No newline at end of file