optionnal-task.component.html

<div class="piece" [ngStyle]="{'width': pieceWidth+'px'}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displaySymbolChoice='hide'" (click)="onClickPiece()"
    [style.background]="task.supplementaryRole ?
    'linear-gradient(140deg, var(--piece-background-color) 0%, var(--piece-background-color) 55%,'+task.supplementaryRole.color+' 55%,'+task.supplementaryRole.color+' 100%)'
    : 'var(--piece-background-color)'"
    matTooltip="Tâche optionnelle: cette tâche peut être réalisée ou non. À la différence d'une tâche annexe, les tâches optionnelles sont utiles pour répondre aux objectifs pédagogiques, comme les tâches simples, mais offent la possibilité au joueur de réaliser la tâche de plusieurs manières différentes."
    matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedTooltips"
    [class]="pieceDetailsService.piece == task ? 'isActive' : 'border'">
    <div class="piece-attach piece-attach-left"></div>
    <div class="piece-attach piece-attach-right" [style.background]="task.supplementaryRole ? task.supplementaryRole.color : 'var(--piece-background-color)'"></div>

    <div class="piece-menu" [class]="displayMenu">
        <div>    
            <mat-icon fontIcon="change_circle" [matMenuTriggerFor]="menuChange"
            matTooltip="Changer le type de cette tuile."
            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
            <mat-menu #menuChange="matMenu">
                <button class="piece-menu-changeMenuButton" [style.background-color]="'#b9dfe3'" mat-menu-item (click)="onClickChange('normal')">Transformer en Tâche</button>
                <button class="piece-menu-changeMenuButton" [style.background-color]="'#bccecc'" mat-menu-item (click)="onClickChange('annexe')">Transformer Tâche annexe</button>
                <button class="piece-menu-changeMenuButton" [style.background-color]="'#b28386'" mat-menu-item (click)="onClickChange('final')" *ngIf="canChangeInFinalTask()">Transformer une Tâche finale</button>
            </mat-menu>
        </div>
        <mat-icon fontIcon="backspace" (click)="onClickErase()"
        matTooltip="Effacer le contenu de cette tuile."
        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
        <mat-icon fontIcon="delete" (click)="onClickDelete()"
        matTooltip="Supprimer la tuile."
        matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
        <div class="piece-menu-directioncross">
            <div class="piece-menu-directioncross-left">
                <mat-icon style="transform: rotate(0turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('left')"
                matTooltip="Décaler la tuile vers la gauche. Dans le cas où une tuile est déjà présente, leurs places sont inversées."
                matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>                
            </div>
            <div class="piece-menu-directioncross-updownarrows">
                <div class="piece-menu-updownarrows-up">
                    <mat-icon style="transform: rotate(0.25turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('top')"
                    matTooltip="Décaler la tuile vers le haut (ceci placera la tuile à la fin de la ligne)."
                    matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>                
                </div>
                <div class="piece-menu-directioncross-updownarrows-down">
                    <mat-icon style="transform: rotate(0.75turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('bottom')"
                    matTooltip="Décaler la tuile vers le bas (ceci placera la tuile à la fin de la ligne)."
                    matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
                </div>
            </div>
            <div class="piece-menu-directioncross-right">
                <mat-icon style="transform: rotate(0.5turn) scale(0.6);" fontIcon="arrow_back_ios" (click)="moveTask('right')"
                matTooltip="Décaler la tuile vers la droite. Dans le cas où une tuile est déjà présente, leurs places sont inversées."
                matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></mat-icon>
            </div>
        </div>
    </div>

    <div class="piece-symbolchoice" [class]="displaySymbolChoice">
        <div class="piece-symbolchoice-header">
            <label>Choisir un symbole de tâche commune :</label>
            <div><mat-icon fontIcon="delete" (click)="setSymbol('','')"></mat-icon></div>
        </div>
        <div class="piece-symbolchoice-symbols">
            <mat-icon [style.color]="'#d79297'" fontIcon="favorite" (click)="setSymbol('favorite','#d79297')"></mat-icon>
            <mat-icon [style.color]="'#9ad5ec'" fontIcon="diamond" (click)="setSymbol('diamond','#9ad5ec')"></mat-icon>
            <mat-icon [style.color]="'#e9ec54'" fontIcon="star" (click)="setSymbol('star','#e9ec54')"></mat-icon>
            <mat-icon [style.color]="'#f5cee3'" fontIcon="hexagon" (click)="setSymbol('hexagon','#f5cee3')"></mat-icon>
            <mat-icon [style.color]="'#d3d2d2'" fontIcon="add" (click)="setSymbol('add','#d3d2d2')"></mat-icon>
            <mat-icon [style.color]="'#9ad5ec'" fontIcon="circle" (click)="setSymbol('circle','#9ad5ec')"></mat-icon>
            <mat-icon [style.color]="'#b6cc87'" fontIcon="eco" (click)="setSymbol('eco','#b6cc87')"></mat-icon>
            <mat-icon [style.color]="'#d0bbdb'" fontIcon="play_arrow" (click)="setSymbol('play_arrow','#d0bbdb')"></mat-icon>
            <mat-icon [style.color]="'#8b7e64'" fontIcon="remove" (click)="setSymbol('remove','#8b7e64')"></mat-icon>
        </div>
        <div class="piece-symbolchoice-symbols">
            <mat-icon [style.color]="'#d79297'" fontIcon="square" (click)="setSymbol('square','#d79297')"></mat-icon>
            <mat-icon [style.color]="'#9ad5ec'" fontIcon="square" (click)="setSymbol('square','#9ad5ec')"></mat-icon>
            <mat-icon [style.color]="'#e9ec54'" fontIcon="square" (click)="setSymbol('square','#e9ec54')"></mat-icon>
            <mat-icon [style.color]="'#f5cee3'" fontIcon="square" (click)="setSymbol('square','#f5cee3')"></mat-icon>
            <mat-icon [style.color]="'#d3d2d2'" fontIcon="square" (click)="setSymbol('square','#d3d2d2')"></mat-icon>
            <mat-icon [style.color]="'#9ad5ec'" fontIcon="square" (click)="setSymbol('square','#9ad5ec')"></mat-icon>
            <mat-icon [style.color]="'#b6cc87'" fontIcon="square" (click)="setSymbol('square','#b6cc87')"></mat-icon>
            <mat-icon [style.color]="'#d0bbdb'" fontIcon="square" (click)="setSymbol('square','#d0bbdb')"></mat-icon>
            <mat-icon [style.color]="'#8b7e64'" fontIcon="square" (click)="setSymbol('square','#8b7e64')"></mat-icon>
        </div>
    </div>

    <div class="piece-prerequires" [class]="pieceDetailsService.piece == task ? displayPrequires : 'hide'">
        <div class="piece-prerequires-prerequires">
            <label class="piece-prerequires-title">Antécédents</label>
            <div class="piece-prerequires-form">
                <div style="text-align: center;" *ngIf="j == 0">La première tâche de la ligne ne peut pas avoir d'antécédent</div>
                <ng-container *ngIf="hasPossibleAntecedents()">
                    <ng-container *ngFor="let inlineTask of role.tasks">
                        <ng-container *ngFor="let element of inlineTask; let index = index">
                            <div class="piece-prerequires-prerequires-element" *ngIf="element?.identifier && (task.identifier != element?.identifier) && index < j">
                                <input name="antecedent" type="checkbox" [checked]="isCheckedTask(element)" (change)="checkboxChangedTask($event, element)"/>
                                <label for="antecedent">{{element?.identifier}}</label>
                            </div>
                        </ng-container>
                    </ng-container>
                </ng-container>
                <div style="text-align: center;" *ngIf="!hasPossibleAntecedents() && j != 0">Veuillez d'abord entrer des identifiants aux tâches précédentes</div>
            </div>
        </div>
        <div class="piece-prerequires-ressources">
            <label class="piece-prerequires-title">Ressources & Compétences</label>
            <div class="piece-prerequires-form">
                <ng-container *ngFor="let ressource of scenario.ressources">
                    <div class="piece-prerequires-ressources-element" *ngIf="ressource.name">
                        <div class="piece-prerequires-ressources-element-checkbox">
                            <input name="ressource" type="checkbox" (change)="checkboxChangedRessource($event, ressource)" [checked]="isCheckedRessource(ressource)"/>
                            <label for="ressource">{{ressource.name}}</label>   
                        </div>
                        <div class="piece-prerequires-ressources-element-quantity" *ngIf="isCheckedRessource(ressource)">
                            <select name="ressource" [(ngModel)]="getAssociatePrerequireRessource(ressource).operator">
                                <option><</option>
                                <option><=</option>
                                <option>=</option>
                                <option>>=</option>
                                <option>></option>
                            </select>
                            <input type="text" value="1" [(ngModel)]="getAssociatePrerequireRessource(ressource).quantity"/> 
                        </div>
                    </div>
                </ng-container>
                <ng-container *ngFor="let ressource of role.ressources">
                    <div class="piece-prerequires-ressources-element" *ngIf="ressource.name">
                        <div class="piece-prerequires-ressources-element-checkbox">
                            <input name="ressource" type="checkbox" (change)="checkboxChangedRessource($event, ressource)" [checked]="isCheckedRessource(ressource)"/>
                            <label for="ressource">{{ressource.name}}</label>   
                        </div>
                        <div class="piece-prerequires-ressources-element-quantity" *ngIf="isCheckedRessource(ressource)">
                            <select name="ressource" [(ngModel)]="getAssociatePrerequireRessource(ressource).operator">
                                <option><</option>
                                <option><=</option>
                                <option>=</option>
                                <option>>=</option>
                                <option>></option>
                            </select>
                            <input type="text" value="1" [(ngModel)]="getAssociatePrerequireRessource(ressource).quantity"/> 
                        </div>
                    </div>
                </ng-container>
            </div>
        </div>
    </div>

    <div class="piece-form">
        <div class="piece-form-top">
            <input class="piece-form-top-identifier" name="identifier" type="text" [value]="task.identifier" (change)="changeIdentifier($event)" placeholder="A" min="1" maxlength="5"
            matTooltip="Identifiant de la tâche (ex: A, B, C, …)"
            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"/>
            <div class="piece-form-top-title">Tâche<br>optionnelle</div>
            <mat-icon class="piece-form-top-comment" fontIcon="comment" *ngIf="task.comments.length > 0"></mat-icon>
            <mat-icon class="piece-form-top-repeat" fontIcon="refresh" *ngIf="task.repeat.iteration > 0 || task.repeat.while != ''"></mat-icon>
            <button mat-button class="piece-form-top-symbol" (click)="changeDisplaySymbolChoice()"
            matTooltip="Indicateur de tâche commune: si cette tâche doit être faite avec un autre rôle, mettez le même symbole sur la tâche de ces deux rôles"
            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips">
                <mat-icon *ngIf="task.symbol.symbol" [style.color]="task.symbol.color" [fontIcon]="task.symbol.symbol"></mat-icon>
            </button>    
        </div>
        <textarea class="piece-form-content" [(ngModel)]="task.objective" [style.background-image]="(i == findFirstIndexOfTaskType('optionnal')[0] && j == findFirstIndexOfTaskType('optionnal')[1]) ? urlIcon : ''"
            placeholder="Partir d'un template / Partir de zéro"
            matTooltip="Action à effectuer (interagir avec un objet, parler avec quelqu'un, …)"
            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"></textarea>
        <div class="piece-form-bottom">
            <div class="piece-form-bottom-duration"
            matTooltip="Durée de la tâche (en unité de temps, minutes ou tours)"
            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips">
                <input name="value" type="number" [(ngModel)]="task.duration" (input)="durationChange()" min="1" (change)="task.duration < 1 ? task.duration = 1 : ''"/>
                <select name="unite" [(ngModel)]="task.durationUnit" (change)="durationChange()">
                    <option value="UT">UT</option>
                    <option value="min">min</option>
                    <option value="tours">tours</option> 
                </select>
            </div>
            <mat-icon class="piece-form-character" fontIcon="person" *ngIf="task.characters.length > 0"
            [style.color]="task.characters.length == 1 ? task.characters[0].color : 'black'"
            [style.background]="task.characters.length > 1 ? 'linear-gradient('+ task.characters[0].color +','+ task.characters[task.characters.length-1].color +')' : 'white'"></mat-icon>
            <mat-icon class="piece-form-interrupt" fontIcon="front_hand" *ngIf="task.interrupt != ''"></mat-icon>
            <button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()"
            matTooltip="Prérequis pour effectuer cette tâche"
            matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips">
                Prérequis
            </button>
        </div>
    </div>
</div>