add possibility to request to remote server for picto

angular.json

@@ -36,7 +36,8 @@
               "node_modules/jquery/dist/jquery.min.js",
               "node_modules/bootstrap/dist/js/bootstrap.min.js",
               "src/assets/js/sql.js",
-              "src/assets/js/annyang.min.js"
+              "src/assets/js/annyang.min.js",
+              "src/assets/js/index.js"
             ]
           },
           "configurations": {
@@ -110,7 +111,8 @@
               "node_modules/jquery/dist/jquery.min.js",
               "node_modules/bootstrap/dist/js/bootstrap.min.js",
               "src/assets/js/sql.js",
-              "src/assets/js/annyang.min.js"
+              "src/assets/js/annyang.min.js",
+              "src/assets/js/index.js"
             ]
           }
         },

src/app/components/alternative-forms/alternative-forms.component.html

@@ -99,7 +99,7 @@
                   <div class="input">
                     <input #search class="searchField" type="search" id="imagefromLib"
                            placeholder="{{this.multilinguism.translate('searchForWord')}}">
-                    <input class="searchLib" type="button" value="search" (click)="searchInLib(search.value)">
+                    <input class="searchLib" type="button" value="search" (click)="searchInLibApi(search.value)">
                   </div>
                 </div>
               </div>
@@ -108,7 +108,7 @@
                 <ng-container *ngFor="let b of this.imageList ">
 
                   <div class="pictoImg haveBackgroundImage"
-                       [ngStyle]="{'background-image':'url(assets/libs/mulberry-symbols/EN-symbols/'+b+'.svg)'}"
+                       [ngStyle]="{'background-image': 'url(' + b + ')'}"
                        (click)="previewMullberry(b)"></div>
                 </ng-container>
               </div>

src/app/components/alternative-forms/alternative-forms.component.ts

@@ -9,6 +9,10 @@ import {Ng2ImgMaxService} from 'ng2-img-max';
 import {ElementForm} from '../../types';
 import {BoardService} from '../../services/board.service';
 import {MultilinguismService} from '../../services/multilinguism.service';
+import {ConfigurationService} from '../../services/configuration.service';
+declare var getUrlPicto:any;
+declare var clearUrlImageJS:any;
+declare var monitorInput:any;
 
 @Component({
   selector: 'app-alternative-forms',
@@ -23,7 +27,8 @@ export class AlternativeFormsComponent implements OnInit {
               public boardService: BoardService,
               public getIconService: GeticonService,
               public dbnaryService: DbnaryService,
-              public editionService: EditionService) {
+              public editionService: EditionService,
+              public configurationService: ConfigurationService) {
   }
 
   imageList = [];
@@ -255,7 +260,7 @@ export class AlternativeFormsComponent implements OnInit {
    */
   previewMullberry(t: string) {
     this.imageSelectionStarted = true;
-    this.previewWithURL('assets/libs/mulberry-symbols/EN-symbols/' + t + '.svg');
+    this.previewWithURL(t);
   }
 
   /**
@@ -287,5 +292,24 @@ export class AlternativeFormsComponent implements OnInit {
     this.imageList = tempList.slice(0, 100);
   }
 
-
+  /**
+   * Return the list of 100 first mullberry library images, sorted by length name, matching with string 'text'
+   *
+   * @param text, the string researched text
+   * @return list of 100 mulberry library images
+   */
+  searchInLibApi(text: string){
+    this.imageList = [];
+    let tempList: any[];
+    clearUrlImageJS();
+    if(this.configurationService.LANGUAGE_VALUE === 'FR'){
+      monitorInput(text, "fra");
+    }else{
+      monitorInput(text, "eng");
+    }
+    setTimeout(() => {
+      tempList = getUrlPicto();
+      this.imageList = tempList[0].slice(0,100);
+    }, 500);
+  }
 }

src/app/components/edition/edition.component.html

@@ -11,8 +11,7 @@
      'border-style': 'solid',
      'border-color': this.editionService.curentBorderColor}">
         <div class="image haveBackgroundImage"
-             [style.background-image]="this.sanitizer.bypassSecurityTrustStyle('url(\'' +this.editionService.imageURL+'\')')">
-
+             [ngStyle]="{'background-image': this.editionService.imageURL }">
         </div>
         <div class="label centerText">
           {{this.editionService.name}}

src/app/components/image-selection-page/image-selection-page.component.html

@@ -38,6 +38,10 @@
         </div>
         <label class="label" for="imagefromLib">{{this.multilinguism.translate("fromLibrary")}}: </label>
         <div class="input">
+          <input #search class="searchField" type="search" id="imagefromLib" (keyup.enter)="searchInLibApi(search.value)"
+                 placeholder="{{this.multilinguism.translate('searchForWord')}}">
+          <input class="searchLib" type="button" value="search" (click)="searchInLibApi(search.value)">
+          <!-- Autocomplete with picto in assets
           <input #search
                  class="searchField"
                  type="search"
@@ -53,15 +57,16 @@
             </mat-option>
           </mat-autocomplete>
           <input class="searchLib" type="button" value="search">
+          -->
         </div>
       </div>
 
       <div class="wrapperPreview ">
         <ng-container *ngFor="let b of this.imageList ">
 
           <div class="pictoImg haveBackgroundImage"
-               [ngStyle]="{'background-image': this.getThumbnailPreviewLibrary(b)}"
-               (click)="this.previewLibrary(b)"></div>
+               [ngStyle]="{'background-image': this.getPictoFromApi(b)}"
+               (click)="this.previewLibraryFromAPI(b)"></div>
         </ng-container>
       </div>
     </div>

src/app/components/image-selection-page/image-selection-page.component.spec.ts

@@ -44,12 +44,13 @@ describe('ImageSelectionPageComponent', () => {
     expect(component.editionService.imageURL).toEqual('https://images.freeimages.com/images/large-previews/e12/corn-field-1-1368931.jpg');
   });
 
+/*
   it('should change the image from mulberry', () => {
     const compiled = fixture.debugElement.nativeElement;
-    component.searchInLib('dog');
+    component.searchInLibApi('chat');
     fixture.detectChanges();
     compiled.querySelector('.pictoImg').click();
-    expect(component.editionService.imageURL).toContain('dog');
+    expect(component.editionService.imageURL).toContain('chat');
   });
-
+*/
 });

src/app/components/image-selection-page/image-selection-page.component.ts

@@ -14,6 +14,10 @@ import {DialogAddUserComponent} from "../dialog-add-user/dialog-add-user.compone
 import {MatDialog} from "@angular/material/dialog";
 import {DialogModifyColorInsideComponent} from "../dialog-modify-color-inside/dialog-modify-color-inside.component";
 import {DialogModifyColorBorderComponent} from "../dialog-modify-color-border/dialog-modify-color-border.component";
+declare var getUrlPicto:any;
+declare var clearUrlImageJS:any;
+declare var monitorInput:any;
+
 
 @Component({
   selector: 'app-image-selection-page',
@@ -27,7 +31,7 @@ export class ImageSelectionPageComponent implements OnInit {
    * the current list of images related to the chose image library search section
    * (the image list resulting in the research in the mullbery library)
    */
-  imageList: { lib, word }[];
+  imageList = [];
 
   myControl = new FormControl();
   filteredOptions: Observable<string[]>;
@@ -101,6 +105,10 @@ export class ImageSelectionPageComponent implements OnInit {
     }
   }
 
+  getPictoFromApi(p:string){
+    return 'url(' + p + ')';
+  }
+
   /**
    * Set the current preview imageUrl with the image string Url 't' and close the chooseImage panel
    *
@@ -124,7 +132,6 @@ export class ImageSelectionPageComponent implements OnInit {
     if (isColored) {
       this.previewWithURL('assets/libs/FR_Pictogrammes_couleur/' + t + '.png');
     } else {
-      console.log('assets/libs/FR_Noir_et_blanc_pictogrammes/' + t + '.png');
       this.previewWithURL('assets/libs/FR_Noir_et_blanc_pictogrammes/' + t + '.png');
     }
   }
@@ -139,6 +146,10 @@ export class ImageSelectionPageComponent implements OnInit {
     }
   }
 
+  previewLibraryFromAPI(picto:string){
+    this.previewWithURL('url(' + picto + ')');
+  }
+
   cleanString(t: string) {
     return t.replace(/'/g, '\\\'');
   }
@@ -195,6 +206,21 @@ export class ImageSelectionPageComponent implements OnInit {
     this.imageList = tempList.slice(0, 100);
   }
 
+  searchInLibApi(text: string){
+    this.imageList = [];
+    let tempList: any[];
+    clearUrlImageJS();
+    if(this.configurationService.LANGUAGE_VALUE === 'FR'){
+      monitorInput(text, "fra");
+    }else{
+      monitorInput(text, "eng");
+    }
+    setTimeout(() => {
+      tempList = getUrlPicto();
+      this.imageList = tempList[0].slice(0,100);
+    }, 500);
+  }
+
   /*s can be 'inside' or 'border', used to open the corresponding color picker popup  */
   openDialogModifyInside() {
     this.dialog.open(DialogModifyColorInsideComponent, {

src/app/services/board.service.ts

@@ -280,7 +280,11 @@ export class BoardService {
           if (s.replace(/ /g, '') === '') {
             return '';
           }
-          return this.sanitizer.bypassSecurityTrustStyle('url(\'' + s + '\')');
+          if(path.Path.includes('http')){
+            return s
+          }else{
+            return this.sanitizer.bypassSecurityTrustStyle('url(\'' + s + '\')');
+          }
         } else {
           return '';
         }
@@ -301,7 +305,7 @@ export class BoardService {
         if (s.replace(/ /g, '') === '') {
           return '';
         }
-        return 'url(\'' + s + '\')';
+        return 'url('+s+')';
       } else {
         return '';
       }