Menu visualization

src/app/app.module.ts

@@ -92,6 +92,7 @@ import { RouterPreloader } from '@angular/router';
 import { ExportComponent } from './components/export/export.component';
 import { DialogGridOptionsComponent } from './components/dialog-grid-options/dialog-grid-options.component';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { VisualisationComponent } from './components/visualisation/visualisation.component';
 
 
 @NgModule({
@@ -164,7 +165,8 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
     ImportUserComponent,
     LoadingComponent,
     ExportComponent,
-    DialogGridOptionsComponent
+    DialogGridOptionsComponent,
+    VisualisationComponent
   ],
   imports: [
     BrowserModule,

src/app/components/account-menu/account-menu.component.html

@@ -41,6 +41,10 @@
           <app-palettes></app-palettes>
         </ng-container>
 
+        <ng-container *ngIf="isSelectedSection('visualisation')">
+          <app-visualisation></app-visualisation>
+        </ng-container>
+
         <ng-container *ngIf="isSelectedSection('share')">
           <app-import></app-import>
         </ng-container>
@@ -101,4 +105,4 @@
     </div>
 
   </div>
-</div>
+</div>

src/app/components/account-menu/account-menu.component.spec.ts

@@ -36,6 +36,7 @@ describe('AccountMenuComponent', () => {
     ['Application',
       ['ApplicationTheme',
         'paletteManagement',
+        'visualisation',
         'interactions',
         'language',
         'share',
@@ -87,13 +88,14 @@ describe('AccountMenuComponent', () => {
     const compiled = fixture.debugElement.nativeElement;
     component.selectedNewMenu = component.newMenu[0][0];
     fixture.detectChanges();
-    expect(compiled.querySelectorAll('.title').length).toEqual(6);
+    expect(compiled.querySelectorAll('.title').length).toEqual(7);
     expect(compiled.querySelectorAll('.title')[0].textContent).toContain(component.multilinguismService.translate(component.newMenu[0][1][0]));
     expect(compiled.querySelectorAll('.title')[1].textContent).toContain(component.multilinguismService.translate(component.newMenu[0][1][1]));
     expect(compiled.querySelectorAll('.title')[2].textContent).toContain(component.multilinguismService.translate(component.newMenu[0][1][2]));
     expect(compiled.querySelectorAll('.title')[3].textContent).toContain(component.multilinguismService.translate(component.newMenu[0][1][3]));
     expect(compiled.querySelectorAll('.title')[4].textContent).toContain(component.multilinguismService.translate(component.newMenu[0][1][4]));
     expect(compiled.querySelectorAll('.title')[5].textContent).toContain(component.multilinguismService.translate(component.newMenu[0][1][5]));
+    expect(compiled.querySelectorAll('.title')[6].textContent).toContain(component.multilinguismService.translate(component.newMenu[0][1][6]));
   });
 
   it('should display app-grid-format-management when GridFormat section of Grid is selected', () => {

src/app/components/account-menu/account-menu.component.ts

@@ -15,6 +15,7 @@ export class AccountMenuComponent implements OnInit {
       ['ApplicationTheme',
         // ['Gestion des icones'],
         'paletteManagement',
+        'visualisation',
         'interactions',
         'language',
         'share',
@@ -135,7 +136,7 @@ export class AccountMenuComponent implements OnInit {
   /**
    * Checks if menu in parameter is currently selected
    * @param section checked menu
-   * @returns true if checked menu is current menu, false elsewise 
+   * @returns true if checked menu is current menu, false elsewise
    */
   isSelectedMenu(menu) {
     return menu[0] === this.selectedNewMenu;
@@ -144,7 +145,7 @@ export class AccountMenuComponent implements OnInit {
   /**
    * Checks if section in parameter is currently selected
    * @param section checked section
-   * @returns true if checked section is current section, false elsewise 
+   * @returns true if checked section is current section, false elsewise
    */
   isSelectedSection(section) {
     return section === this.selectedSection;

src/app/components/visualisation/visualisation.component.css

@@ -0,0 +1,7 @@
+.visualisationMargin {
+  margin: 20px;
+}
+
+.visualisationMargin label {
+  margin-right: 1%;
+}

src/app/components/visualisation/visualisation.component.html

@@ -0,0 +1,11 @@
+<div class="width-100">
+  <div class="visualisationMargin">
+    <label>{{this.multilinguism.translate("visualisationPath")}}:</label>
+
+    <input id="radioPath" name="typeFormat" type="radio" value="Path" [(ngModel)]="pathDisplay" (click)="getView('Path')">
+    <label class="radio" for="radioPath">{{this.multilinguism.translate("path")}}</label>
+
+    <input id="radioTitlePage" name="typeFormat" type="radio" value="TitlePage" [(ngModel)]="pathDisplay" (click)="getView('TitlePage')">
+    <label class="radio" for="radioTitlePage">{{this.multilinguism.translate("titlePage")}}</label>
+  </div>
+</div>

src/app/components/visualisation/visualisation.component.spec.ts

@@ -0,0 +1,29 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Ng2ImgMaxModule } from 'ng2-img-max';
+import { VisualisationComponent } from './visualisation.component';
+import {RouterTestingModule} from "@angular/router/testing";
+import {HttpClientModule} from "@angular/common/http";
+
+
+describe('VisualisationComponent', () => {
+  let component: VisualisationComponent;
+  let fixture: ComponentFixture<VisualisationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ VisualisationComponent ],
+      imports: [Ng2ImgMaxModule, RouterTestingModule, HttpClientModule]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VisualisationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/visualisation/visualisation.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { MultilinguismService } from "../../services/multilinguism.service";
+import {BoardService} from "../../services/board.service";
+
+@Component({
+  selector: 'app-visualisation',
+  templateUrl: './visualisation.component.html',
+  styleUrls: ['./visualisation.component.css']
+})
+export class VisualisationComponent implements OnInit {
+
+  constructor(public boardService: BoardService,
+              public multilinguism: MultilinguismService) { }
+
+  pathDisplay:string = this.boardService.PathDisplay;
+
+  getView(choice:string):void{
+    this.boardService.PathDisplay = choice;
+    this.pathDisplay = choice;
+  }
+
+  ngOnInit(): void {
+    if(this.pathDisplay == null){
+      this.pathDisplay = "Path";
+    }
+  }
+}

src/app/services/board.service.ts

@@ -37,6 +37,7 @@ export class BoardService {
 
   board: Grid;
   currentPath = '#HOME';
+  PathDisplay:string = 'Path';
 
   /*the current forms that verb and noun have to use to conjugate*/
   currentVerbTerminaison: { currentPerson: string, currentNumber: string } = { currentPerson: '', currentNumber: '' };
@@ -83,6 +84,11 @@ export class BoardService {
         const nameSplited = name.split('/');
         name = nameSplited.length >= 2 ? nameSplited[nameSplited.length - 2] : name;
       }
+      if(this.PathDisplay == "TitlePage"){
+        const tabName:string[] = name.split('/');
+        name = tabName[tabName.length-2];
+      }
+
       return name;
     }
     return this.configurationService.LANGUAGE_VALUE === 'FR' ? 'Accueil' : 'Home';

src/assets/multilinguism.json

@@ -10,6 +10,7 @@
     { "id" : "appearance" , "FR" : "Apparence", "EN" : "Appearance" },
     { "id" : "globalAppearance" , "FR" : "Apparence générale", "EN" : "Global Appearance" },
     { "id" : "paletteManagement" , "FR" : "Gestion des palettes", "EN" : "Palette Management" },
+    { "id" : "visualisation" , "FR" : "Visualisation", "EN" : "View" },
     { "id" : "language" , "FR" : "Langue", "EN" : "Language" },
     { "id" : "grammar" , "FR" : "Grammaire", "EN" : "Grammar" },
     { "id" : "share" , "FR" : "Importer", "EN" : "Import" },
@@ -373,7 +374,9 @@
     { "id" : "focusSelection", "FR": "Sélection par fixation", "EN": "Selection by focus"},
     { "id" : "WordNameFile", "FR": "ClavierAugCom", "EN": "GridFileAugcom"},
     { "id" : "WordTitle", "FR": "Clavier Augcom", "EN": "AugCom main grid"},
-    { "id" : "WordFolder", "FR": "Sous Dossier", "EN": "Folder"}
-
+    { "id" : "WordFolder", "FR": "Sous Dossier", "EN": "Folder"},
+    { "id" : "path", "FR": "Chemin", "EN": "Path"},
+    { "id" : "titlePage", "FR": "Titre de la page", "EN": "Title of the page"},
+    { "id" : "visualisationPath", "FR": "Visualisation du chemin", "EN": "Path visualization"}
   ]
 }