fix lint

teammapper-frontend/src/app/core/services/dialog/dialog.service.ts

@@ -17,7 +17,9 @@ export class DialogService {
   constructor(private dialog: MatDialog) {}
 
   openPictogramDialog() {
-    this.pictogramsModalRef = this.dialog.open(DialogPictogramsComponent, { width: '100%' });
+    this.pictogramsModalRef = this.dialog.open(DialogPictogramsComponent, {
+      width: '100%',
+    });
   }
 
   closePictogramDialog() {

teammapper-frontend/src/app/core/services/pictograms/picto-types.ts

@@ -1,61 +1,22 @@
 export type IPictogramResponse = {
-  schematic: boolean,
-  sex: boolean,
-  violence: boolean,
-  aac: boolean,
-  aacColor: boolean,
-  skin: boolean,
-  hair: boolean,
-  downloads: number,
-  categories: string[],
-  synsets: string[],
-  tags: string[],
-  _id: number,
+  schematic: boolean;
+  sex: boolean;
+  violence: boolean;
+  aac: boolean;
+  aacColor: boolean;
+  skin: boolean;
+  hair: boolean;
+  downloads: number;
+  categories: string[];
+  synsets: string[];
+  tags: string[];
+  _id: number;
   keywords: {
-      keyword: string,
-      type: number,
-      plural: string,
-      hasLocution: boolean
-  }[],
-  created: Date,
-  lastUpdated: Date,
-}
-
-export type ISearchResultResponse = {
-  _id: number,
-  tags: string[],
-  synsets: string[],
-  sex: boolean,
-  schematic: boolean,
-  keywords: {
-      type: number,
-      meaning: string,
-      plural: string,
-      keyword: string,
-      hasLocation: boolean,
-  }[],
-  desc: string,
-  categories: string[],
-  violence: boolean,
-  hair: false,
-  skin: false,
-  aac: false,
-  aacColor: false,
-  score: number,
-}[]
-
-export type IPictogramNewResponse = {
-  aac: boolean,
-  aacColor: boolean,
-  categories: string[],
-  downloads: number,
-  hair: boolean,
-  keywords: string[],
-  schematic: boolean,
-  sex: boolean,
-  skin: boolean,
-  synsets: string[],
-  tags: string[],
-  violence: boolean,
-  _id: number,
-}[];
+    keyword: string;
+    type: number;
+    plural: string;
+    hasLocution: boolean;
+  }[];
+  created: Date;
+  lastUpdated: Date;
+};

teammapper-frontend/src/app/core/services/pictograms/pictogram.service.ts

@@ -1,35 +1,33 @@
-import { Injectable, OnDestroy } from "@angular/core";
+import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { Observable } from "rxjs/internal/Observable";
-import { IPictogramResponse } from "./picto-types";
+import { Observable } from 'rxjs/internal/Observable';
+import { IPictogramResponse } from './picto-types';
+import { environment } from 'src/environments/environment';
 
 @Injectable({
   providedIn: 'root',
 })
-export class PictogramService implements OnDestroy {
-  private apirUrl = "https://api.arasaac.org/v1/pictograms"
-  private staticAssetUrl = "https://static.arasaac.org/pictograms"
-  private apiResource = "bestsearch"
-  //export const apiBaseUrl = process.env.REACT_APP_API || 'https://api.arasaac.org/api';
-  //export const apiIdentifierBaseUrl = process.env.REACT_APP_API_IMAGES || 'https://static.arasaac.org/images';
+export class PictogramService {
+  private apirUrl =
+    environment.pictogramApiUrl || 'https://api.arasaac.org/v1/pictograms';
+  private staticAssetUrl =
+    environment.pictogramStaticUrl || 'https://static.arasaac.org/pictograms';
+  private apiResource = 'bestsearch';
 
   constructor(private http: HttpClient) {}
 
-  ngOnDestroy() {
-  }
-
   getPictos(seachTerm: string): Observable<IPictogramResponse[]> {
-    const language = 'de'
-    const url = `${this.apirUrl}/${language}/${this.apiResource}/${seachTerm}`
-    return this.http.get<IPictogramResponse[]>(url)
+    const language = 'de';
+    const url = `${this.apirUrl}/${language}/${this.apiResource}/${seachTerm}`;
+    return this.http.get<IPictogramResponse[]>(url);
   }
 
-  getPictoImageUrl(id: number, size: number = 300, fileType: string = 'png') {
-    return `${this.staticAssetUrl}/${id}/${id}_${size}.${fileType}`
+  getPictoImageUrl(id: number, size = 300, fileType = 'png') {
+    return `${this.staticAssetUrl}/${id}/${id}_${size}.${fileType}`;
   }
 
   getPictoImage(id: number): Observable<Blob> {
-    const url = this.getPictoImageUrl(id)
-    return this.http.get(url, { responseType: 'blob' })
+    const url = this.getPictoImageUrl(id);
+    return this.http.get(url, { responseType: 'blob' });
   }
-}
+}

teammapper-frontend/src/app/core/services/utils/utils.service.ts

@@ -157,5 +157,5 @@ export class UtilsService {
         resolve(reader.result);
       };
     });
-  };
+  }
 }

teammapper-frontend/src/app/modules/application/application.module.ts

@@ -24,7 +24,7 @@ import { DialogPictogramsComponent } from './components/dialog-pictograms/dialog
     MatMenuModule,
     MatTabsModule,
     ApplicationRoutingModule,
-    ColorPickerModule
+    ColorPickerModule,
   ],
   declarations: [
     ApplicationComponent,

teammapper-frontend/src/app/modules/application/components/dialog-pictograms/dialog-pictograms.component.html

@@ -20,7 +20,7 @@ <h2 mat-dialog-title>{{ 'MODALS.PICTOGRAMS.TITLE' | translate }}</h2>
 <mat-divider class="my-1"></mat-divider>
 <span class="text-sm">{{ 'MODALS.PICTOGRAMS.TERMS_TEXT' | translate }}</span>
 <br />
-<img ngSrc="/assets/images/logo_ARASAAC.png" width="200" height="50"><br />
+<a href="https://arasaac.org/"><img ngSrc="/assets/images/logo_ARASAAC.png" width="200" height="50"></a><br />
 </mat-dialog-content>
 <mat-dialog-actions>
   <button mat-raised-button [mat-dialog-close]="true">

teammapper-frontend/src/app/modules/application/components/dialog-pictograms/dialog-pictograms.component.ts

@@ -10,46 +10,52 @@ import { DialogService } from 'src/app/core/services/dialog/dialog.service';
 @Component({
   selector: 'teammapper-dialog-pictograms',
   templateUrl: 'dialog-pictograms.component.html',
-  styleUrls: ['./dialog-pictograms.component.scss']
+  styleUrls: ['./dialog-pictograms.component.scss'],
 })
 export class DialogPictogramsComponent {
-  public pictos: IPictogramResponse[] 
-  public searchTerm: string = ""
+  public pictos: IPictogramResponse[];
+  public searchTerm = '';
   public cardLayout = this.breakpointObserver
-  .observe([Breakpoints.Handset])
-  .pipe(
-    map(({ matches }) => {
-      if (matches) {
+    .observe([Breakpoints.Handset])
+    .pipe(
+      map(({ matches }) => {
+        if (matches) {
+          return {
+            columns: 1,
+            miniCard: { cols: 1, rows: 1 },
+          };
+        }
+
         return {
-          columns: 1,
-          miniCard: { cols: 1, rows: 1 }
+          columns: 4,
+          miniCard: { cols: 1, rows: 1 },
         };
-      }
-
-      return {
-        columns: 4,
-        miniCard: { cols: 1, rows: 1 }
-      };
-    })
-  );
+      })
+    );
 
-  constructor(private pictoService: PictogramService, private breakpointObserver: BreakpointObserver, private mmpService: MmpService, private utilsService: UtilsService, private dialogService: DialogService) {}
+  constructor(
+    private pictoService: PictogramService,
+    private breakpointObserver: BreakpointObserver,
+    private mmpService: MmpService,
+    private utilsService: UtilsService,
+    private dialogService: DialogService
+  ) {}
 
   @HostListener('document:keydown.enter')
   async search() {
     this.pictoService.getPictos(this.searchTerm).subscribe(pictos => {
-      this.pictos = pictos
+      this.pictos = pictos;
     });
   }
 
   async getImageFileOfId(id: number) {
     this.pictoService.getPictoImage(id).subscribe(async img => {
       this.mmpService.addNodeImage(await this.utilsService.blobToBase64(img));
-      this.dialogService.closePictogramDialog()
+      this.dialogService.closePictogramDialog();
     });
   }
 
   getImageUrlOfId(id: number): string {
-    return this.pictoService.getPictoImageUrl(id)
+    return this.pictoService.getPictoImageUrl(id);
   }
 }

teammapper-frontend/src/app/modules/application/components/toolbar/toolbar.component.html

@@ -141,13 +141,6 @@
       <mat-icon>broken_image</mat-icon>
     </button>
   </ng-template>
-  <button
-    (click)="pictogram()"
-    [title]="'TOOLTIPS.PICTOGRAM' | translate"
-    color="primary"
-    mat-icon-button>
-    <mat-icon>nature_people</mat-icon>
-  </button>
   <ng-template #renderInput>
     <label
       for="image-upload"
@@ -163,6 +156,15 @@
       accept="image/*"
       [disabled]="editDisabled" />
   </ng-template>
+  <div *ngIf="featureFlagPictograms">
+    <button
+      (click)="pictogram()"
+      [title]="'TOOLTIPS.PICTOGRAM' | translate"
+      color="primary"
+      mat-icon-button>
+      <mat-icon>nature_people</mat-icon>
+    </button>
+  </div>
 
   <div class="vertical-line">
     <div></div>

teammapper-frontend/src/app/modules/application/components/toolbar/toolbar.component.ts

@@ -3,6 +3,7 @@ import { ExportNodeProperties } from '@mmp/map/types';
 import { TranslateService } from '@ngx-translate/core';
 import { DialogService } from 'src/app/core/services/dialog/dialog.service';
 import { MmpService } from 'src/app/core/services/mmp/mmp.service';
+import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'teammapper-toolbar',
@@ -12,6 +13,7 @@ import { MmpService } from 'src/app/core/services/mmp/mmp.service';
 export class ToolbarComponent {
   @Input() public node: ExportNodeProperties;
   @Input() public editDisabled: boolean;
+  public featureFlagPictograms: boolean = environment.featureFlagPictograms;
 
   constructor(
     private translationService: TranslateService,

teammapper-frontend/src/app/root.module.ts

@@ -31,7 +31,7 @@ export function createTranslateLoader(http: HttpClient) {
         deps: [HttpClient],
       },
     }),
-    HotkeyModule.forRoot()
+    HotkeyModule.forRoot(),
   ],
   declarations: [RootComponent],
   providers: [

teammapper-frontend/src/app/shared/shared.module.ts

@@ -18,8 +18,8 @@ import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/mat
 import { StripTags } from './pipes/striptags.pipe';
 import { InverseBoolPipe } from './pipes/inverse-bool.pipe';
 import { MatDialogModule } from '@angular/material/dialog';
-import {MatGridListModule} from '@angular/material/grid-list';
-import { NgOptimizedImage } from '@angular/common'
+import { MatGridListModule } from '@angular/material/grid-list';
+import { NgOptimizedImage } from '@angular/common';
 
 const PIPES = [StripTags, InverseBoolPipe];
 
@@ -43,7 +43,7 @@ const PIPES = [StripTags, InverseBoolPipe];
     MatInputModule,
     MatSelectModule,
     MatSlideToggleModule,
-    NgOptimizedImage
+    NgOptimizedImage,
   ],
   declarations: [...PIPES],
   exports: [

teammapper-frontend/src/assets/i18n/de.json

@@ -83,7 +83,7 @@
       "TITLE": "Piktogramm einfügen",
       "BUTTON_SEARCH": "Suchen",
       "FORM_INPUT_LABEL_SEARCH": "Suchwort",
-      "TERMS_TEXT": "Piktogramme von Sergio Palao (Urheber), ARASAAC (arasaac.org), Regierung von Aragón in Spanien (Eigentümer), CC BY-SA-NC 4.0",
+      "TERMS_TEXT": "Piktogramm-Urheber Sergio Palao. Herkunft: ARASAAC (http://www.arasaac.org). Lizenz: CC (BY-NC-SA). Eigentümer: Regierung von Aragon (Spanien)",
       "EMPTY": "Aktuell keine Ergebnisse"
     },
     "SHARE": {

teammapper-frontend/src/environments/environment.prod.ts

@@ -2,4 +2,7 @@ export const environment = {
   production: true,
   version: '0.4.0',
   name: 'TeamMapper',
+  pictogramApiUrl: 'https://api.arasaac.org/v1/pictograms',
+  pictogramStaticUrl: 'https://static.arasaac.org/pictograms',
+  featureFlagPictograms: true,
 };

teammapper-frontend/src/environments/environment.ts

@@ -2,4 +2,7 @@ export const environment = {
   production: false,
   version: '0.4.0',
   name: 'TeamMapper',
+  pictogramApiUrl: 'https://api.arasaac.org/v1/pictograms',
+  pictogramStaticUrl: 'https://static.arasaac.org/pictograms',
+  featureFlagPictograms: true,
 };