Store fretboard configuration in local storage

Author: Salma Alam-Naylor

apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.html

@@ -32,11 +32,15 @@
   </button>
   <button class="fretboard__toggleButton fretboard__toggleButton--middle-right"
           [class.fretboard__toggleButton--active]="orientation === orientations.left"
-          (click)="setOrientation(orientations.left)">Left handed
+          (click)="setOrientation(orientations.left)">
+    <span class="toggle__shortLabel">LH</span>
+    <span class="toggle__longLabel">Left handed</span>
   </button>
   <button class="fretboard__toggleButton fretboard__toggleButton--right"
           [class.fretboard__toggleButton--active]="orientation === orientations.right"
-          (click)="setOrientation(orientations.right)">Right handed
+          (click)="setOrientation(orientations.right)">
+    <span class="toggle__shortLabel">RH</span>
+    <span class="toggle__longLabel">Right handed</span>
   </button>
 </div>
 

apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.scss

@@ -451,6 +451,26 @@
   height: pxToRem(44);
 }
 
+.toggle__shortLabel {
+  display: inline;
+  font-weight: inherit;
+  padding-left: pxToRem($grid_unit * 1.5);
+  padding-right: pxToRem($grid_unit * 1.5);
+
+  @media screen and (min-width: $screen-med) {
+    display: none;
+  }
+}
+
+.toggle__longLabel {
+  display: none;
+  font-weight: inherit;
+
+  @media screen and (min-width: $screen-med) {
+    display: inline;
+  }
+}
+
 .fretboard__toggleButton--active {
   background-color: var(--black);
   color: var(--offwhite);

apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.spec.ts

@@ -8,7 +8,9 @@ import { By } from '@angular/platform-browser';
 describe('FretboardComponent', () => {
   const selectors = {
     twelveButton: By.css('.fretboard__toggleButton--left'),
-    twentyFourButton: By.css('.fretboard__toggleButton--middle-left')
+    twentyFourButton: By.css('.fretboard__toggleButton--middle-left'),
+    rightButton: By.css('.fretboard__toggleButton--right'),
+    leftButton: By.css('.fretboard__toggleButton--middle-right')
   };
 
   const classNames = {
@@ -68,4 +70,26 @@ describe('FretboardComponent', () => {
       expect(twelveButton.classes[classNames.toggleFretButtonSelected]).toBeTruthy();
     });
   });
+
+  describe('setOrientation()', () => {
+    let leftButton: DebugElement;
+    let rightButton: DebugElement;
+
+    beforeEach(() => {
+      leftButton = fixture.debugElement.query(selectors.leftButton);
+      rightButton = fixture.debugElement.query(selectors.rightButton);
+    });
+
+    it('changes the fret mode to left orientation when the button is clicked', () => {
+      leftButton.nativeElement.click();
+      fixture.detectChanges();
+      expect(leftButton.classes[classNames.toggleFretButtonSelected]).toBeTruthy();
+    });
+
+    it('changes the fret mode to right orientation when the button is clicked', () => {
+      rightButton.nativeElement.click();
+      fixture.detectChanges();
+      expect(rightButton.classes[classNames.toggleFretButtonSelected]).toBeTruthy();
+    });
+  })
 });

apps/fretonator-web/src/app/common/fretonator/fretboard/fretboard.component.ts

@@ -11,6 +11,8 @@ import {
 } from '@angular/core';
 import { FretMap, Mode } from '../../../util/types';
 import { NotePlaybackService } from '../../playback/note-playback.service';
+import { GlobalService } from '../../../global.service';
+import { AbstractDataService } from '../../abstract-data/abstract-data.service';
 
 export enum FretMode {
   twelve = 'twelve',
@@ -24,29 +26,60 @@ export enum Orientation {
 
 const FretReturner = {
   'twelve': [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
-  'twentyFour': [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],
+  'twentyFour': [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]
 };
 
+const StorageKeys = {
+  fretMode: 'fretonator_fretMode',
+  orientation: 'fretonator_orientation'
+}
+
 @Component({
   selector: 'app-fretboard',
   templateUrl: './fretboard.component.html',
   styleUrls: ['./fretboard.component.scss']
 })
-export class FretboardComponent implements OnChanges, AfterViewInit {
+export class FretboardComponent implements OnChanges, OnInit {
   @ViewChild('fretboardContainer') fretboardContainer: ElementRef<HTMLElement>;
-  @Output() loadExpandedChange = new EventEmitter<Boolean>()
+  @Output() loadExpandedChange = new EventEmitter<Boolean>();
   @Input() fretMap: FretMap;
   @Input() mode: Mode;
   @Input() stringNamesAreCaseSensitive = false;
   @Input() loadExpanded = false;
-  orientation = Orientation.left; //CHANGE BACK
-  fretMode = FretMode.twelve;
-  frets = FretReturner[this.fretMode] ;
+  orientation;
+  fretMode;
+  frets;
 
-  constructor(public playbackService: NotePlaybackService) {
+  constructor(public playbackService: NotePlaybackService,
+              private localStorage: AbstractDataService) {
   }
 
-  ngAfterViewInit() {
+  ngOnInit() {
+    const _fretMode = this.localStorage.getItem(StorageKeys.fretMode);
+    switch (_fretMode) {
+      case 'twelve':
+        this.fretMode = FretMode.twelve;
+        break;
+      case 'twentyFour':
+        this.fretMode = FretMode.twentyFour;
+        break;
+      default:
+        this.fretMode = FretMode.twelve;
+    }
+
+    const _orientation = this.localStorage.getItem(StorageKeys.orientation);
+    switch (_orientation) {
+      case 'right':
+        this.orientation = Orientation.right;
+        break;
+      case 'left':
+        this.orientation = Orientation.left;
+        break;
+      default:
+        this.orientation = Orientation.right;
+    }
+
+    this.configureFretboard();
   }
 
 
@@ -71,12 +104,14 @@ export class FretboardComponent implements OnChanges, AfterViewInit {
 
   setOrientation(orientation: Orientation) {
     this.orientation = orientation;
+    this.localStorage.setItem(StorageKeys.orientation, this.orientation);
 
     this.configureFretboard();
   }
 
   setFretMode(fretMode: FretMode) {
     this.fretMode = fretMode;
+    this.localStorage.setItem(StorageKeys.fretMode, this.fretMode);
     this.configureFretboard();
   }
 }

apps/fretonator-web/src/app/pages/home/home-index/__snapshots__/home-index.component.spec.ts.snap

@@ -364,12 +364,30 @@ exports[`HomeIndexComponent should create 1`] = `
               <button
                 class="fretboard__toggleButton fretboard__toggleButton--middle-right"
               >
-                Left handed 
+                <span
+                  class="toggle__shortLabel"
+                >
+                  LH
+                </span>
+                <span
+                  class="toggle__longLabel"
+                >
+                  Left handed
+                </span>
               </button>
               <button
                 class="fretboard__toggleButton fretboard__toggleButton--right fretboard__toggleButton--active"
               >
-                Right handed 
+                <span
+                  class="toggle__shortLabel"
+                >
+                  RH
+                </span>
+                <span
+                  class="toggle__longLabel"
+                >
+                  Right handed
+                </span>
               </button>
             </div>
             <div