implementing folder sorting caching

frontend/app/gallery/cache.gallery.service.ts

@@ -6,6 +6,7 @@ import {AutoCompleteItem, SearchTypes} from '../../../common/entities/AutoComple
 import {SearchResultDTO} from '../../../common/entities/SearchResultDTO';
 import {MediaDTO} from '../../../common/entities/MediaDTO';
 import {DataStructureVersion} from '../../../common/DataStructureVersion';
+import {SortingMethods} from '../../../common/entities/SortingMethods';
 
 interface CacheItem<T> {
   timestamp: number;
@@ -15,12 +16,13 @@ interface CacheItem<T> {
 @Injectable()
 export class GalleryCacheService {
 
-  private static CONTENT_PREFIX = 'content:';
+  private static readonly CONTENT_PREFIX = 'content:';
-  private static AUTO_COMPLETE_PREFIX = 'autocomplete:';
+  private static readonly AUTO_COMPLETE_PREFIX = 'autocomplete:';
-  private static INSTANT_SEARCH_PREFIX = 'instant_search:';
+  private static readonly INSTANT_SEARCH_PREFIX = 'instant_search:';
-  private static SEARCH_PREFIX = 'search:';
+  private static readonly SEARCH_PREFIX = 'search:';
-  private static SEARCH_TYPE_PREFIX = ':type:';
+  private static readonly SORTING_PREFIX = 'sorting:';
-  private static VERSION = 'version';
+  private static readonly SEARCH_TYPE_PREFIX = ':type:';
+  private static readonly VERSION = 'version';
 
   constructor() {
     const version = parseInt(localStorage.getItem(GalleryCacheService.VERSION), 10) || 0;
@@ -40,6 +42,36 @@ export class GalleryCacheService {
   }
 
 
+  public getSorting(dir: DirectoryDTO): SortingMethods {
+    const key = GalleryCacheService.SORTING_PREFIX + dir.path + '/' + dir.name;
+    const tmp = localStorage.getItem(key);
+    if (tmp != null) {
+      return parseInt(tmp, 10);
+    }
+    return null;
+  }
+
+  public removeSorting(dir: DirectoryDTO) {
+    try {
+      const key = GalleryCacheService.SORTING_PREFIX + dir.path + '/' + dir.name;
+      localStorage.removeItem(key);
+    } catch (e) {
+      this.reset();
+      console.error(e);
+    }
+  }
+
+  public setSorting(dir: DirectoryDTO, sorting: SortingMethods): SortingMethods {
+    try {
+      const key = GalleryCacheService.SORTING_PREFIX + dir.path + '/' + dir.name;
+      localStorage.setItem(key, sorting.toString());
+    } catch (e) {
+      this.reset();
+      console.error(e);
+    }
+    return null;
+  }
+
   public getAutoComplete(text: string): AutoCompleteItem[] {
     const key = GalleryCacheService.AUTO_COMPLETE_PREFIX + text;
     const tmp = localStorage.getItem(key);

frontend/app/gallery/gallery.service.ts

@@ -44,6 +44,26 @@ export class GalleryService {
 
   setSorting(sorting: SortingMethods): void {
     this.sorting.next(sorting);
+    if (this.content.value.directory) {
+      if (sorting !== Config.Client.Other.defaultPhotoSortingMethod) {
+        this.galleryCacheService.setSorting(this.content.value.directory, sorting);
+      } else {
+        this.galleryCacheService.removeSorting(this.content.value.directory);
+      }
+    }
+  }
+
+
+  setContent(content: ContentWrapper): void {
+    this.content.next(content);
+    if (content.directory) {
+      const sort = this.galleryCacheService.getSorting(content.directory);
+      if (sort !== null) {
+        this.sorting.next(sort);
+      } else {
+        this.sorting.next(Config.Client.Other.defaultPhotoSortingMethod);
+      }
+    }
   }
 
 
@@ -54,7 +74,7 @@ export class GalleryService {
     content.searchResult = null;
 
 
-    this.content.next(content);
+    this.setContent(content);
     this.lastRequest.directory = directoryName;
 
     const params: { [key: string]: any } = {};
@@ -87,7 +107,7 @@ export class GalleryService {
       DirectoryDTO.addReferences(<DirectoryDTO>cw.directory);
 
       this.lastDirectory = <DirectoryDTO>cw.directory;
-      this.content.next(cw);
+      this.setContent(cw);
     } catch (e) {
       console.error(e);
       this.navigationService.toGallery().catch(console.error);
@@ -105,7 +125,7 @@ export class GalleryService {
     this.ongoingSearch = {text: text, type: type};
 
 
-    this.content.next(new ContentWrapper());
+    this.setContent(new ContentWrapper());
     const cw = new ContentWrapper();
     cw.searchResult = this.galleryCacheService.getSearch(text, type);
     if (cw.searchResult == null) {
@@ -124,13 +144,13 @@ export class GalleryService {
       }
       this.galleryCacheService.setSearch(text, type, cw.searchResult);
     }
-    this.content.next(cw);
+    this.setContent(cw);
   }
 
   public async instantSearch(text: string, type?: SearchTypes): Promise<ContentWrapper> {
     if (text === null || text === '' || text.trim() === '.') {
       const content = new ContentWrapper(this.lastDirectory);
-      this.content.next(content);
+      this.setContent(content);
       if (this.searchId != null) {
         clearTimeout(this.searchId);
       }
@@ -168,7 +188,7 @@ export class GalleryService {
         this.galleryCacheService.setInstantSearch(text, cw.searchResult);
       }
     }
-    this.content.next(cw);
+    this.setContent(cw);
 
     // if instant search do not have a result, do not do a search
     if (cw.searchResult.media.length === 0 && cw.searchResult.directories.length === 0) {

frontend/app/gallery/map/map.gallery.component.css

@@ -1,4 +1,5 @@
 .yaga-map{
+  z-index: 0;
   width: 100%;
   height: 100%;
 }

frontend/app/gallery/navigator/navigator.gallery.component.html

@@ -28,7 +28,9 @@
     <div class="divider" *ngIf="ItemCount > 0 && config.Client.Other.NavBar.showItemCount">&nbsp;</div>
     <div class="btn-group" dropdown placement="bottom right">
       <button id="button-alignment" dropdownToggle type="button"
-              class="btn btn-default dropdown-toggle" aria-controls="dropdown-alignment"
+              class="btn btn-default dropdown-toggle"
+              [ngClass]="{'btn-secondary':galleryService.sorting.value !== DefaultSorting}"
+              aria-controls="dropdown-alignment"
               [innerHTML]="galleryService.sorting.value| iconizeSorting">
       </button>
       <ul id="dropdown-alignment" *dropdownMenu class="dropdown-menu dropdown-menu-right"

frontend/app/gallery/navigator/navigator.gallery.component.ts

@@ -22,10 +22,11 @@ export class GalleryNavigatorComponent implements OnChanges {
   @Input() directory: DirectoryDTO;
   @Input() searchResult: SearchResultDTO;
 
-  routes: Array<NavigatorPath> = [];
+  routes: NavigatorPath[] = [];
   SortingMethods = SortingMethods;
   sortingMethodsType: { key: number; value: string }[] = [];
   config = Config;
+  DefaultSorting = Config.Client.Other.defaultPhotoSortingMethod;
 
   readonly SearchTypes = SearchTypes;
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pigallery2",
-  "version": "1.5.5",
+  "version": "1.5.6",
   "description": "This is a photo gallery optimised for running low resource servers (especially on raspberry pi)",
   "author": "Patrik J. Braun",
   "homepage": "https://github.com/bpatrik/PiGallery2",