calculator.component.html

<mat-card class="calculator-card" [id]="ID">

    <mat-card-header class="mat-card-header-text-margin-0">

        <div class="hyd-window-btns">
            <!-- bouton d'aide -->
            <mat-icon id="help-calc" *ngIf="enableHelpButton" (click)="openHelp()" color="accent"
                [title]="uitextOpenHelp">
                help
            </mat-icon>
            <!-- bouton de duplication -->
            <mat-icon id="clone-calc" (click)="cloneCalculator()" [title]="uitextCloneCalculator">
                content_copy
            </mat-icon>
            <!-- bouton de sauvegarde -->
            <mat-icon id="save-calc" (click)="saveCalculator()" [title]="uitextSaveCalculator">
                file_download
            </mat-icon>
            <!-- bouton de fermeture -->
            <mat-icon id="close-calc" (click)="closeCalculator()" [title]="uitextCloseCalculator">
                close
            </mat-icon>
        </div>

        <!-- titre -->
        <!-- on utilise [innerHTML] pour que les codes HTML comme &nbsp; soient interprétés correctement -->
        <mat-card-title>
            <h1 [innerHTML]="uitextTitre"></h1>
            <div id="calculator-used-by" *ngIf="calculatorsUsingThisOne.length > 0">
                {{ uitextUsedBy }}
                <span *ngFor="let c of calculatorsUsingThisOne; let i = index; trackBy:tbIndex">
                    <a class="used-by-item" (click)="toCalc(c.uid)">
                        {{ c.label }}
                    </a>
                    <span *ngIf="i < calculatorsUsingThisOne.length - 1">, </span>
                </span>
            </div>
        </mat-card-title>

    </mat-card-header>

    <quicknav *ngIf="! isPB" [fxHide.gt-sm]="! isWide" [items]="quicknavItems" [currentItem]="'input'" [align]="'left'"></quicknav>

    <div *ngIf="isPB && ! pbShowResultsDisabled" class="fake-quicknav" id="pb-data-results-selector">
        <div class="drs-row">
            <div class="drs-item" [class.current]="showPBInputData">
                <a (click)="showPBInputData = true;">{{ uitextInputData }}</a>
            </div>
            <div class="drs-item" [class.current]="! showPBInputData">
                <a (click)="showPBInputData = false;">{{ uitextResults }}</a>
            </div>
        </div>
    </div>

    <form>

        <mat-card-content>

            <!-- nom du module de calcul -->
            <calc-name id="calculator-name" [model]="formulaire" [title]="uitextCalculatorName"></calc-name>

            <button mat-raised-button type="button" color="accent" id="load-predefined-espece" *ngIf="isEspece"
                (click)="loadPredefinedEspece()" [title]="uitextLoadPredefinedEspece">
                {{ uitextLoadPredefinedEspece }}
            </button>

            <div id="calc-cards-container" class="container" [fxLayout]="isWide ? 'column' : 'row wrap'"
                [fxLayoutAlign]="isWide ? 'space-around stretch' : 'space-around start'">

                <!-- chapitres -->
                <mat-card id="calc-card-field-sets" [class.pab-field-sets]="isWide"
                    [fxFlex.gt-sm]="isWide ? '1 0 auto' : '1 0 400px'"
                    [fxFlex.lt-md]="isWide ? '1 0 auto' : '1 0 500px'"
                    [fxFlex.lt-sm]="isWide ? '1 0 auto' : '1 0 300px'">

                    <div id="calc-card-field-sets-container" [fxLayout]="isPB ? 'row wrap' : 'column'">

                        <!-- PB specific template -->
                        <div *ngIf="isPB" id="pb-schema-container"
                            fxFlex.gt-sm="1 0 400px"
                            fxFlex.lt-md="1 0 500px"
                            fxFlex.lt-sm="1 0 300px">

                            <!-- without this loop, injecting formElements[0] in <pb-schema> makes it not 
                                trigger lifecycle hooks when switching from a PreBarrage module to another… -->
                            <ng-template ngFor let-fe [ngForOf]="formElements">
                                <pb-schema *ngIf="isPbSchema(fe)" [pbSchema]="fe" (radio)=onRadioClick($event)
                                    (validChange)=onElementValid() (nodeSelected)="onPBNodeSelected($event)">
                                </pb-schema>
                            </ng-template>

                            <div fxHide.sm fxFlex.gt-sm="0 0 16px"></div>
                        </div>
                        <!-- PB specific template (2) -->
                        <div *ngIf="isPB" id="pb-form-container" [hidden]="! showPBInputData"
                            fxFlex.gt-sm="1 0 400px"
                            fxFlex.lt-md="1 0 500px"
                            fxFlex.lt-sm="1 0 300px"
                            fxLayout="column">

                            <ng-template ngFor let-fe [ngForOf]="formElements">
                                <field-set *ngIf="isFieldset(fe)"
                                    [style.display]="getElementStyleDisplay(fe.id)" [fieldSet]=fe
                                    (radio)=onRadioClick($event) (validChange)=onElementValid() (inputChange)=onInputChange($event)
                                    (tabPressed)="onTabPressed($event)">
                                </field-set>

                                <fieldset-container *ngIf="isStructureFieldsetContainer(fe)"
                                    [style.display]="getElementStyleDisplay(fe.id)" [_container]=fe
                                    (radio)=onRadioClick($event) (validChange)=onElementValid() (inputChange)=onInputChange($event)
                                    (tabPressed)="onTabPressed($event)" [class]="getFieldsetContainerClass(fe)">
                                </fieldset-container>

                                <basin-fieldset-container *ngIf="isBasinFieldsetContainer(fe)"
                                    [style.display]="getElementStyleDisplay(fe.id)" [_container]=fe
                                    (radio)=onRadioClick($event) (validChange)=onElementValid()
                                    (inputChange)=onInputChange($event) (tabPressed)="onTabPressed($event)"
                                    fxFlex="1 0 auto" [class]="getFieldsetContainerClass(fe)">
                                </basin-fieldset-container>
                            </ng-template>
                        </div>

                        <!-- generic template -->
                        <ng-template *ngIf="! isPB" ngFor let-fe [ngForOf]="formElements">
                            <field-set *ngIf="isFieldset(fe)"
                                [style.display]="getElementStyleDisplay(fe.id)" [fieldSet]=fe
                                (radio)=onRadioClick($event) (validChange)=onElementValid() (inputChange)=onInputChange($event)
                                (tabPressed)="onTabPressed($event)"
                                fxFlex.gt-sm="1 0 auto"
                                fxFlex.lt-md="1 0 auto"
                                fxFlex.lt-sm="1 0 auto">
                            </field-set>

                            <fieldset-container *ngIf="isFieldsetContainer(fe)"
                                [style.display]="getElementStyleDisplay(fe.id)" [_container]=fe
                                (radio)=onRadioClick($event) (validChange)=onElementValid() (inputChange)=onInputChange($event)
                                (tabPressed)="onTabPressed($event)"
                                fxFlex="1 0 auto" [class]="getFieldsetContainerClass(fe)">
                            </fieldset-container>

                            <fieldset-container *ngIf="isStructureFieldsetContainer(fe)"
                                [style.display]="getElementStyleDisplay(fe.id)" [_container]=fe
                                (radio)=onRadioClick($event) (validChange)=onElementValid() (inputChange)=onInputChange($event)
                                (tabPressed)="onTabPressed($event)"
                                fxFlex="1 0 auto" [class]="getFieldsetContainerClass(fe)">
                            </fieldset-container>

                            <pab-table *ngIf="isPabTable(fe)" [pabTable]=fe (radio)=onRadioClick($event)
                                (validChange)=onElementValid() (inputChange)=onInputChange($event)
                                fxFlex="1 0 auto">
                            </pab-table>
                        </ng-template>
                    </div>

                    <mat-card-actions>
                        <!-- bouton calculer -->
                        <button type="submit" id="trigger-calculate" mat-raised-button color="accent" name="Calculer"
                            (click)="doCompute()" [disabled]="isCalculateDisabled"
                            [hidden]="calculateDisabledPermanently">
                            {{ uitextCalculer }}
                        </button>
                    </mat-card-actions>
                </mat-card>

                <!-- résultats -->
                <mat-card id="calc-card-results"
                  [class.pab-results]="isWide" [hidden]="isPB && showPBInputData"
                  [fxFlex.gt-sm]="isWide ? '1 0 auto' : '1 0 400px'"
                  [fxFlex.lt-md]="isWide ? '1 0 auto' : '1 0 500px'"
                  [fxFlex.lt-sm]="isWide ? '1 0 auto' : '1 0 300px'">

                    <div id="fake-results-anchor"></div>

                    <quicknav *ngIf="! isPB" [ngClass.lt-xs]="'extraSmall'" [fxHide.gt-sm]="! isWide" [items]="quicknavItems" [currentItem]="'results'" [align]="'left'"></quicknav>

                    <mat-card-header *ngIf="! isWide" [fxHide.lt-md]="! isPB && ! isWide">
                        <mat-card-title>
                            <h1 [innerHTML]="uitextResultsTitle"></h1>
                        </mat-card-title>
                    </mat-card-header>

                    <button mat-raised-button color="accent" id="generate-pab" *ngIf="isPABCloisons"
                        (click)="generatePAB()" [disabled]="! generatePABEnabled" [title]="uitextGeneratePabTitle">
                        {{ uitextGeneratePAB }}
                    </button>

                    <div *ngIf="isBief" class="multi-buttons-container">
                        <button mat-raised-button color="accent" id="generate-sp-amont" (click)="generateSPAmont()"
                            [disabled]="! generateSPAmontEnabled" [title]="uitextGenerateSPAmontTitle">
                            {{ uitextGenerateSPAmont }}
                        </button>
                        <button mat-raised-button color="accent" id="generate-sp-aval" (click)="generateSPAval()"
                            [disabled]="! generateSPAvalEnabled" [title]="uitextGenerateSPAvalTitle">
                            {{ uitextGenerateSPAval }}
                        </button>
                    </div>

                    <button mat-raised-button color="accent" id="generate-ru-sp" *ngIf="isRegimeUniforme"
                        (click)="generateRuSp()" [disabled]="! generateRuSpEnabled" [title]="uitextGenerateRuSpTitle">
                        {{ uitextGenerateRuSp }}
                    </button>

                    <select-section-details id="generate-cr-sps" *ngIf="hasCourbeRemousResults" [points]="courbeRemousPoints"></select-section-details>

                    <button mat-raised-button color="accent" id="generate-par-simulation" *ngIf="isPAR"
                        (click)="generatePARSimulation()" [disabled]="! generatePARSimulationEnabled"
                        [title]="uitextGenerateParSimulationTitle">
                        {{ uitextGeneratePARSimulation }}
                    </button>

                    <button mat-raised-button color="accent" id="export-all-pb-results" *ngIf="isPB"
                        (click)="exportAllPbResults()" [disabled]="! exportAllPbResultsEnabled">
                        {{ uitextExportAllPbResults }}
                    </button>

                    <button mat-raised-button color="accent" id="generate-backwater-curve" *ngIf="isPAM"
                        (click)="generateBackwaterInPAM()" [disabled]="!generateCrPamEnabled">
                        {{ uitextGenerateBackwaterInPAM }}
                    </button>

                    <mat-card-content>
                        <calc-results id="resultsComp" [formulaire]="formulaire" (afterViewChecked)="onCalcResultsViewChecked()"></calc-results>
                    </mat-card-content>
                </mat-card>

            </div>
        </mat-card-content>

    </form>

</mat-card>