app.component.ts

import { Component, OnInit, OnDestroy, HostListener, ViewChild } from "@angular/core";
import { Router, Event, NavigationEnd, ActivationEnd } from "@angular/router";
import { MatDialog } from "@angular/material/dialog";
import { MatSidenav } from "@angular/material/sidenav";
import { MatToolbar } from "@angular/material/toolbar";
import { CdkDragDrop, moveItemInArray } from "@angular/cdk/drag-drop";

import { Observer, jalhydDateRev, jalhydVersion, CalculatorType, Session } from "jalhyd";

import { environment } from "../environments/environment";
import { I18nService } from "./services/internationalisation.service";
import { ErrorService } from "./services/error.service";
import { FormulaireService } from "./services/formulaire.service";
import { FormulaireDefinition } from "./formulaire/definition/form-definition";
import { ServiceFactory } from "./services/service-factory";
import { HttpService } from "./services/http.service";
import { ApplicationSetupService } from "./services/app-setup.service";
import { nghydDateRev, nghydVersion } from "../date_revision";

import { DialogConfirmCloseCalcComponent } from "./components/dialog-confirm-close-calc/dialog-confirm-close-calc.component";
import { DialogConfirmEmptySessionComponent } from "./components/dialog-confirm-empty-session/dialog-confirm-empty-session.component";
import { DialogLoadSessionComponent } from "./components/dialog-load-session/dialog-load-session.component";
import { DialogSaveSessionComponent } from "./components/dialog-save-session/dialog-save-session.component";
import { QuicknavComponent } from "./components/quicknav/quicknav.component";
import { NotificationsService } from "./services/notifications.service";

import { HotkeysService, Hotkey } from "angular2-hotkeys";

import { MatomoInjector, MatomoTracker } from "ngx-matomo";

import { saveAs } from "file-saver";

import * as pako from "pako";

// to be able to check for window.cordova
declare let window: any;
// to expose cordova API
declare let cordova: any;
// to expose cordova Device plugin
declare let device: any;

@Component({
  selector: "nghyd-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
  providers: [ErrorService]
})
export class AppComponent implements OnInit, OnDestroy, Observer {

  @ViewChild("sidenav", { static: false })
  public sidenav: MatSidenav;

  @ViewChild("navbar", { static: false })
  public navbar: MatToolbar;

  /** current calculator, inferred from _currentFormId by setActiveCalc() (used for navbar menu) */
  public currentCalc: any;

  /** shows or hides the progressbar under the navbar */
  public showProgressBar = false;

  /** liste des modules de calcul ouverts */
  private _calculators: Array<{
    title: string,
    type: CalculatorType,
    uid: string,
    active?: boolean,
    latestAnchor?: string
  }> = [];

  /**
   * id du formulaire courant
   * on utilise pas directement FormulaireService.currentFormId pour éviter l'erreur
   * ExpressionChangedAfterItHasBeenCheckedError
   */
  private _currentFormId: string;

  private _innerWidth: number;

  constructor(
    private intlService: I18nService,
    private appSetupService: ApplicationSetupService,
    private errorService: ErrorService,
    private router: Router,
    private formulaireService: FormulaireService,
    private httpService: HttpService,
    private notificationsService: NotificationsService,
    private confirmEmptySessionDialog: MatDialog,
    private saveSessionDialog: MatDialog,
    private loadSessionDialog: MatDialog,
    private confirmCloseCalcDialog: MatDialog,
    private hotkeysService: HotkeysService,
    private matomoInjector: MatomoInjector,
    private matomoTracker: MatomoTracker
  ) {
    ServiceFactory.instance.httpService = httpService;
    ServiceFactory.instance.applicationSetupService = appSetupService;
    ServiceFactory.instance.i18nService = intlService;
    ServiceFactory.instance.formulaireService = formulaireService;
    ServiceFactory.instance.notificationsService = notificationsService;

    // Matomo open-source Web analytics
    this.matomoInjector.init("http://stasi.g-eau.fr/", 1);

    this.router.events.subscribe((event: Event) => {
      // close side navigation when clicking a calculator tab
      if (event instanceof NavigationEnd) {
        this.sidenav.close();
        window.scrollTo(0, 0);
      }
      // [de]activate calc tabs depending on loaded route
      if (event instanceof ActivationEnd) {
        const path = event.snapshot.url[0].path;
        if (path === "calculator") {
          const calcUid = event.snapshot.params.uid;
          if (this.calculatorExists(calcUid)) {
            this.setActiveCalc(calcUid);
          } else {
            // if required calculator does not exist, redirect to list page
            this.toList();
          }
        } else {
          this.setActiveCalc(null);
        }
      }
    });

    // hotkeys listeners
    this.hotkeysService.add(new Hotkey("alt+s", AppComponent.onHotkey(this.saveForm, this)));
    this.hotkeysService.add(new Hotkey("alt+o", AppComponent.onHotkey(this.loadSession, this)));
    this.hotkeysService.add(new Hotkey("alt+q", AppComponent.onHotkey(this.emptySession, this)));
    this.hotkeysService.add(new Hotkey("alt+n", AppComponent.onHotkey(this.toList, this)));
  }

  /**
   * Wrapper for hotkeys triggers, that executes given function only if
   * hotkeys are enabled in app preferences
   * @param func function to execute when hotkey is entered
   */
  public static onHotkey(func: any, that: any) {
    return (event: KeyboardEvent): boolean => {
      if (ServiceFactory.instance.applicationSetupService.enableHotkeys) {
        func.call(that);
        return false; // Prevent bubbling
      } else {
        console.log("Hotkeys are disabled in app preferences");
      }
    };
  }

  public static exportAsImage(canvas: HTMLCanvasElement) {
    canvas.toBlob((blob) => {
      AppComponent.download(blob, "chart.png", "image/png");
    }); // defaults to image/png
  }

  /**
   * Cordova-compatible file download method
   * @see https://esstudio.site/2019/02/16/downloading-saving-and-opening-files-with-cordova.html
   * @param blob binary object to download
   * @param filename
   * @param mimeType
   */
  public static download(blob: Blob, filename: string, mimeType: string) {
    if (window.cordova && cordova.platformId !== "browser") {
      document.addEventListener("deviceready", function () {
        // save file using codova-plugin-file
        let storageLocation = "";
        switch (device.platform) {
          case "Android":
            storageLocation = cordova.file.externalDataDirectory;
            break;
          case "iOS":
            storageLocation = cordova.file.documentsDirectory;
            break;
        }
        const folderPath = storageLocation;
        window.resolveLocalFileSystemURL(folderPath, (dir) => {
            dir.getFile(
              filename,
              { create: true },
              (file) => {
                file.createWriter(
                  function (fileWriter) {
                    fileWriter.write(blob);
                    fileWriter.onwriteend = () => {
                      const url = file.toURL();
                      cordova.plugins.fileOpener2.open(url, mimeType, {
                        error: (err) => {
                          console.error(err);
                          alert(`No app found to handle type "${mimeType}"`);
                        },
                        success: () => {
                          console.log("success with opening the file");
                        }
                      });
                    };
                    fileWriter.onerror = function (err) {
                      console.error(err);
                    };
                  },
                  function (err) {
                    console.error(err);
                  }
                );
              },
              (err) => {
                console.error(err);
              }
            );
          }, (err) => {
            console.error(err);
          }
        );
      });
    } else {
      saveAs(blob, filename);
    }
  }

  /**
   * Triggered at app startup.
   * Preferences are loaded by app setup service
   * @see ApplicationSetupService.construct()
   */
  ngOnInit() {
    this.formulaireService.addObserver(this);
    this.subscribeErrorService();
    this._innerWidth = window.innerWidth;
  }

  ngOnDestroy() {
    this.unsubscribeErrorService();
    this.formulaireService.removeObserver(this);
  }

  @HostListener("window:resize", ["$event"])
  onResize(event) {
    // keep track of window size for navbar tabs arrangement
    this._innerWidth = window.innerWidth;
  }

  public get uitextSidenavNewCalc() {
    return this.intlService.localizeText("INFO_MENU_NOUVELLE_CALC");
  }

  public get uitextSidenavParams() {
    return this.intlService.localizeText("INFO_SETUP_TITLE");
  }

  public get uitextSidenavLoadSession() {
    return this.intlService.localizeText("INFO_MENU_LOAD_SESSION_TITLE");
  }

  public get uitextSidenavSaveSession() {
    return this.intlService.localizeText("INFO_MENU_SAVE_SESSION_TITLE");
  }

  public get uitextSidenavEmptySession() {
    return this.intlService.localizeText("INFO_MENU_EMPTY_SESSION_TITLE");
  }

  public get uitextSidenavDiagram() {
    return this.intlService.localizeText("INFO_MENU_DIAGRAM_TITLE");
  }

  public get uitextSidenavSessionProps() {
    return this.intlService.localizeText("INFO_MENU_SESSION_PROPS");
  }

  public get uitextSidenavReportBug() {
    return this.intlService.localizeText("INFO_MENU_REPORT_BUG");
  }

  public get uitextSidenavHelp() {
    return this.intlService.localizeText("INFO_MENU_HELP_TITLE");
  }

  public get uitextSelectCalc() {
    return this.intlService.localizeText("INFO_MENU_SELECT_CALC");
  }

  public getCalculatorLabel(t: CalculatorType) {
    return this.formulaireService.getLocalisedTitleFromCalculatorType(t);
  }

  public get calculators() {
    return this._calculators;
  }

  public get currentFormId() {
    return this._currentFormId;
  }

  public get currentRoute(): string {
    return this.router.url;
  }

  public setActiveCalc(uid: string) {
    this._calculators.forEach((calc) => {
      calc.active = (calc.uid === uid);
    });
    // mark current calc for navbar menu
    const index = this.getCalculatorIndexFromId(uid);
    this.currentCalc = this._calculators[index];
  }

  /**
   * Close calculator using middle click on tab
   */
  public onMouseUp(event: any, uid: string) {
    if (event.which === 2) {
      const dialogRef = this.confirmCloseCalcDialog.open(
        DialogConfirmCloseCalcComponent,
        {
            data: {
              uid: uid
            },
            disableClose: true
        }
      );
      dialogRef.afterClosed().subscribe(result => {
          if (result) {
              this.formulaireService.requestCloseForm(uid);
          }
      });
    }
  }

  /**
   * Returns true if sum of open calculator tabs witdh is lower than navbar
   * available space (ie. if navbar is not overflowing), false otherwise
   */
  public get tabsFitInNavbar() {
    // manual breakpoints
    // @WARNING keep in sync with .calculator-buttons sizes in app.component.scss
    let tabsLimit = 0;
    if (this._innerWidth > 480) {
      tabsLimit = 3;
    }
    if (this._innerWidth > 640) {
      tabsLimit = 4;
    }
    if (this._innerWidth > 800) {
      tabsLimit = 6;
    }
    /*if (this._innerWidth > 1200) {
      tabsLimit = 8;
    }*/

    const fits = this._calculators.length <= tabsLimit;
    return fits;
  }

  /**
   * abonnement au service d'erreurs
   */
  private subscribeErrorService() {
    this.errorService.addObserver(this);
  }

  private unsubscribeErrorService() {
    this.errorService.removeObserver(this);
  }

  public get enableHeaderDoc(): boolean {
    return this.currentRoute === "/list" && this._calculators.length === 0;
  }

  public get enableSaveSessionMenu(): boolean {
    return this._calculators.length > 0;
  }

  public get enableModulesDiagramMenu(): boolean {
    return this._calculators.length > 0;
  }

  public get enableSessionPropertiesMenu(): boolean {
    return this._calculators.length > 0;
  }

  public get enableEmptySessionMenu(): boolean {
    return this._calculators.length > 0;
  }

  // interface Observer

  update(sender: any, data: any): void {
    if (sender instanceof FormulaireService) {
      switch (data["action"]) {
        case "createForm":
        // add newly created form to calculators list
          const f: FormulaireDefinition = data["form"];
          this._calculators.push(
            {
              "title": f.calculatorName,
              "type": f.calculatorType,
              "uid": f.uid
            }
          );

          // abonnement en tant qu'observateur du nouveau formulaire
          f.addObserver(this);
          break;

        case "invalidFormId":
          this.toList();
          break;

        case "currentFormChanged":
          this._currentFormId = data["formId"];
          break;

        case "saveForm":
          this.saveForm(data["form"]);
          break;

        case "closeForm":
          const form: FormulaireDefinition = data["form"];
          this.closeCalculator(form);
          break;
      }
    } else if (sender instanceof FormulaireDefinition) {
      switch (data["action"]) {
        case "nameChanged":
          this.updateCalculatorTitle(sender, data["name"]);
          break;
      }
    }
  }

  /**
   * Returns true if a form having "formUid" as UID exists
   * @param formId UID to look for
   */
  private calculatorExists(formId: string): boolean {
    return (this.getCalculatorIndexFromId(formId) > -1);
  }

  private getCalculatorIndexFromId(formId: string) {
    const index = this._calculators.reduce((resultIndex, calc, currIndex) => {
      if (resultIndex === -1 && calc["uid"] === formId) {
        resultIndex = currIndex;
      }
      return resultIndex;
    }, -1);

    return index;
  }

  private updateCalculatorTitle(f: FormulaireDefinition, title: string) {
    const formIndex = this.getCalculatorIndexFromId(f.uid);
    this._calculators[formIndex]["title"] = title;
  }

  /**
   * Saves a JSON serialised session file, for one or more calc modules
   * @param calcList modules to save
   * @param filename
   */
  private saveSession(calcList: any[], filename: string) {
    const session: string = this.buildSessionFile(calcList);
    this.matomoTracker.trackEvent("userAction", "saveSession");
    this.formulaireService.downloadTextFile(session, filename);
  }

  /**
   * Builds a session file including Nubs, GUI-specific Nubs metadata,
   * model settings, GUI settings
   * @param calcList Nubs to save
   */
  private buildSessionFile(calcList: any[]): string {
    const serialiseOptions: { [key: string]: {} } = {};
    for (const c of calcList) {
      if (c.selected) {
        serialiseOptions[c.uid] = { // GUI-dependent metadata to add to the session file
          title: c.title
        };
      }
    }
    const settings = {
      precision: this.appSetupService.computePrecision,
      maxIterations: this.appSetupService.maxIterations,
      displayPrecision: this.appSetupService.displayPrecision,
    };
    return Session.getInstance().serialise(serialiseOptions, settings);
  }

  /**
   * Supprime un module de calcul **de l'interface**
   * ATTENTION, ne supprime pas le module de calcul en mémoire !
   * Pour cela, utiliser FormulaireService.requestCloseForm(form.uid);
   * @param form module de calcul à fermer
   */
  private closeCalculator(form: FormulaireDefinition) {
    const formId: string = form.uid;

    // désabonnement en tant qu'observateur
    form.removeObserver(this);
    // recherche du module de calcul correspondant à formId
    const closedIndex = this.getCalculatorIndexFromId(formId);

    /*
     * détermination du nouveau module de calcul à afficher :
     * - celui après celui supprimé
     * - ou celui avant celui supprimé si on supprime le dernier
     */
    let newId = null;
    const l = this._calculators.length;
    if (l > 1) {
      if (closedIndex === l - 1) {
        newId = this._calculators[closedIndex - 1]["uid"];
      } else {
        newId = this._calculators[closedIndex + 1]["uid"];
      }
    }

    // suppression

    this._calculators = this._calculators.filter(calc => {
      return formId !== calc["uid"];
    });

    // MAJ affichage

    if (newId === null) {
      this.toList();
      this._currentFormId = null;
    } else {
      this.toCalc(newId);
    }
  }

  private toList() {
    this.router.navigate(["/list"]);
  }

  public toDiagram() {
    this.router.navigate(["/diagram"]);
  }

  public toCalc(id: string) {
    this.router.navigate(["/calculator", id]);
    this.setActiveCalc(id);
    setTimeout(() => { // @WARNING clodo trick to wait for Angular refresh
      this.scrollToLatestQuicknav(id);
    }, 50);
  }

  /**
   * restarts a fresh session by closing all calculators
   */
  public emptySession() {
    const dialogRef = this.confirmEmptySessionDialog.open(
      DialogConfirmEmptySessionComponent,
      { disableClose: true }
    );
    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        this.doEmptySession();
      }
    });
  }

  public doEmptySession() {
    for (const c of this._calculators) {
      const form = this.formulaireService.getFormulaireFromId(c.uid);
      this.formulaireService.requestCloseForm(form.uid);
    }
    // just to be sure, get rid of any Nub possibly stuck in session without any form attached
    Session.getInstance().clear();
    Session.getInstance().documentation = "";
  }

  public loadSession() {
    // création du dialogue de sélection des formulaires à sauver
    const dialogRef = this.loadSessionDialog.open(
      DialogLoadSessionComponent,
      { disableClose: false }
    );
    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        if (result.emptySession) {
          this.doEmptySession();
        }
        this.loadSessionFile(result.file, result.calculators);
      }
    });
  }

  public loadSessionFile(f: File, info?: any) {
    // notes merge detection: was there already some notes ?
    const existingNotes = Session.getInstance().documentation;
    // load
    this.formulaireService.loadSession(f, info)
    .then((data) => {
      if (data.hasErrors) {
        this.notificationsService.notify(this.intlService.localizeText("ERROR_PROBLEM_LOADING_SESSION"), 3500);
      } else {
        if (data.loaded && data.loaded.length > 0) {
          this.matomoTracker.trackEvent("userAction", "loadSession");
          // notes merge detection: was there already some notes ?
          const currentNotes = Session.getInstance().documentation;
          if (existingNotes !== "" && currentNotes !== existingNotes) {
            this.notificationsService.notify(this.intlService.localizeText("WARNING_SESSION_LOAD_NOTES_MERGED"), 3500);
          }
          // go to calc or diagram depending on what was loaded
          if (data.loaded.length > 1) {
            this.toDiagram();
          } else {
            this.toCalc(data.loaded[0]);
          }
        }
      }
    })
    .catch((err) => {
      this.notificationsService.notify(this.intlService.localizeText("ERROR_LOADING_SESSION"), 3500);
      console.error("error loading session - ", err);
      // rollback to ensure session is clean
      this.doEmptySession();
    });
  }

  /**
   * Demande au client d'envoyer un email (génère un lien mailto:), pré-rempli
   * avec un texte standard, et le contenu de la session au format JSON
   */
  public reportBug() {
    const recipient = "bug@cassiopee.g-eau.fr";
    const subject = "[ISSUE] " + this.intlService.localizeText("INFO_REPORT_BUG_SUBJECT");
    let body = this.intlService.localizeText("INFO_REPORT_BUG_BODY");

    // add session description

    // get all forms
    const list = [];
    for (const c of this._calculators) {
      list.push({
        title: c.title,
        uid: c.uid,
        selected: true
      });
    }
    let session = this.buildSessionFile(list);

    // compress
    session = pako.deflate(session, { to: "string" }); // gzip (zlib)
    session = btoa(session); // base64

    body += session + "\n";
    body = encodeURIComponent(body);

    const mailtoURL = `mailto:${recipient}?subject=${subject}&body=${body}`;

    // temporarily disable tab closing alert, as tab won't be closed for real
    this.appSetupService.warnBeforeTabClose = false;
    window.location.href = mailtoURL;
    this.appSetupService.warnBeforeTabClose = true;
  }

  public get revisionInfo(): any {
    return {
      jalhyd: {
        date: jalhydDateRev,
        version: jalhydVersion,
      },
      nghyd: {
        date: nghydDateRev,
        version: nghydVersion
      }
    };
  }

  /**
   * sauvegarde du/des formulaires
   * @param form formulaire à sélectionner par défaut dans la liste
   */
  public saveForm(form?: FormulaireDefinition) {
    // liste des formulaires
    const list = [];
    for (const c of this._calculators) {
      const uid = c["uid"];
      const nub = Session.getInstance().findNubByUid(uid);
      let required = nub.getTargettedNubs().map((req) => {
        return req.uid;
      });
      required = required.filter(
        (item, index) => required.indexOf(item) === index // deduplicate
      );
      list.push({
        "children": nub.getChildren().map((child) => {
          return child.uid;
        }),
        "requires": required,
        "selected": form ? (uid === form.uid) : true,
        "title": c["title"],
        "uid": uid
      });
    }
    // dialogue de sélection des formulaires à sauver
    const dialogRef = this.saveSessionDialog.open(
      DialogSaveSessionComponent,
      {
        data: {
          calculators: list
        },
        disableClose: false
      }
    );
    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        let name = result.filename;

        // ajout extension ".json"
        const re = /.+\.json/;
        const match = re.exec(name.toLowerCase());
        if (match === null) {
          name = name + ".json";
        }

        this.saveSession(result.calculators, name);
      }
    });
  }

  /**
   * Moves the view to one of the Quicknav anchors in the page, and saves this anchor
   * as the latest visited, in _calculators list
   * @param itemId a Quicknav anchor id (ex: "input" or "results")
   */
  public scrollToQuicknav(itemId: string, behavior: ScrollBehavior = "smooth") {
    const idx = this.getCalculatorIndexFromId(this.currentFormId);
    if (idx > -1) {
      const id = QuicknavComponent.prefix + itemId;
      // Scroll https://stackoverflow.com/a/56391657/5986614
      const element = document.getElementById(id);
      if (element && element.offsetParent !== null) { // offsetParent is null when element is not visible
          const yCoordinate = element.getBoundingClientRect().top + window.pageYOffset;
          window.scrollTo({
              top: yCoordinate - 60, // substract a little more than navbar height
              behavior: behavior
          });
          // Save position
          this._calculators[idx].latestAnchor = itemId;
      } else {
        throw Error("scrollToQuicknav: cannot find anchor " + id);
      }
    }
  }

  /**
   * Moves the view to the latest known Quicknav anchor of the current module
   */
  public scrollToLatestQuicknav(formId: string) {
    // Get position
    const idx = this.getCalculatorIndexFromId(formId);
    if (idx > -1) {
      const itemId = this._calculators[idx].latestAnchor;
      // Scroll
      if (itemId) {
        this.scrollToQuicknav(itemId, "auto");
      }
    }
  }

  public dropCalcButton(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.calculators, event.previousIndex, event.currentIndex);
  }

  /**
   * détection de la fermeture de la page/navigateur et demande de confirmation
   */
  @HostListener("window:beforeunload", [ "$event" ]) confirmExit($event) {
    if (
      this.appSetupService.warnBeforeTabClose
      && environment.production // otherwise prevents dev server to reload app after recompiling
    ) {
      // affecter une valeur différente de null provoque l'affichage d'un dialogue de confirmation, mais le texte n'est pas affiché
      $event.returnValue = "Your data will be lost !";
    }
  }

  @HostListener("keydown", [ "$event" ]) onKeydown(event: any) {
    if (event.which === 38 || event.which === 40) { // up / down arrow
      if (event.srcElement.type === "number") {
        event.preventDefault();
      }
    }
  }
}