Skip to content
Snippets Groups Projects
installer.component.html 4.49 KiB
Newer Older
  • Learn to ignore specific revisions
  • <mat-horizontal-stepper linear #stepper style="height: 100vh;overflow: auto;">
        <mat-step>
            <ng-template matStepLabel>Installation</ng-template>
            <div class="stepContainer">
                <div class="stepContent">
                    <app-welcome></app-welcome>
                </div>
                <div style="display: flex;">
                    <div style="flex: 1;text-align: left;">
    
                    </div>
                    <div style="flex: 1;text-align: right;">
                        <button mat-button matStepperNext style="font-size: 35px;">
                            suivant <i class="fa fa-arrow-circle-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </mat-step>
        <mat-step [stepControl]="appPrerequisite.getFormGroup()">
            <ng-template matStepLabel>Prérequis</ng-template>
            <div class="stepContainer">
                <div class="stepContent">
                    <app-prerequisite #appPrerequisite></app-prerequisite>
                </div>
                <div style="display: flex;">
                    <div style="flex: 1;text-align: left;">
                        <button mat-button matStepperPrevious style="font-size: 35px;">
                            <i class="fa fa-arrow-circle-left"></i> précédent
                        </button>
                    </div>
                    <div style="flex: 1;text-align: right;">
                        <button mat-button matStepperNext style="font-size: 35px;"
                            [disabled]="!appPrerequisite.isValidStep()">
                            suivant <i class="fa fa-arrow-circle-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </mat-step>
        <mat-step [stepControl]="appDatabase.getFormGroup()">
            <ng-template matStepLabel>Base de données</ng-template>
            <div class="stepContainer">
                <div class="stepContent">
                    <app-database #appDatabase></app-database>
                </div>
                <div style="display: flex;">
                    <div style="flex: 1;text-align: left;">
                        <button mat-button matStepperPrevious style="font-size: 35px;">
                            <i class="fa fa-arrow-circle-left"></i> précédent
                        </button>
                    </div>
                    <div style="flex: 1;text-align: right;">
                        <button mat-button matStepperNext style="font-size: 35px;"
                            [disabled]="!appDatabase.isValidStep()">
                            suivant <i class="fa fa-arrow-circle-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </mat-step>
        <mat-step>
            <ng-template matStepLabel>Stockage</ng-template>
            Bonjour
            <div>
                <button mat-button matStepperPrevious>Back</button>
                <button mat-button matStepperNext>Next</button>
            </div>
        </mat-step>
        <mat-step>
            <ng-template matStepLabel>Personnalisation</ng-template>
            Bonjour
            <div>
                <button mat-button matStepperPrevious>Back</button>
                <button mat-button matStepperNext>Next</button>
            </div>
        </mat-step>
        <mat-step>
            <ng-template matStepLabel>Utilisateur sytème</ng-template>
            Bonjour
            <div>
                <button mat-button matStepperPrevious>Back</button>
                <button mat-button matStepperNext>Next</button>
            </div>
        </mat-step>
        <mat-step optional>
            <ng-template matStepLabel>Serveur mail</ng-template>
            Bonjour
            <div>
                <button mat-button matStepperPrevious>Back</button>
            </div>
        </mat-step>
        <ng-template matStepperIcon="edit">
            <mat-icon class="fa fa-check stepIcon"></mat-icon>
        </ng-template>
    
        <ng-template matStepperIcon="done">
            <mat-icon class="fa fa-check stepIcon"></mat-icon>
        </ng-template>
    
        <ng-template matStepperIcon="error">
            <mat-icon class="fa fa-times stepIcon" style="color: red;font-size: 15px !important;"></mat-icon>
        </ng-template>
    </mat-horizontal-stepper>
    
    <!--<mat-sidenav-container autosize class="maarch-container">
        <mat-sidenav-content>
            <div class="bg-head">
                <div class="bg-head-content" [class.fullContainer]="appService.getViewMode()">
                    toto
                </div>
            </div>
            <div class="container" [class.fullContainer]="appService.getViewMode()">
                <div class="container-content">
                    toto
                </div>
            </div>
        </mat-sidenav-content>
    </mat-sidenav-container>-->