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)'"
    [ngClass]="{'isActive': (pieceDetailsService.piece == task ? true : false)}">
    <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]="'#bccecc'" mat-menu-item (click)="onClickChange('annexe')">Transformer en Tâche annexe</button>
                <button class="piece-menu-changeMenuButton" [style.background-color]="'#e8e3b3'" mat-menu-item (click)="onClickChange('optionnal')">Transformer Tâche optionnelle</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."
                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."
                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]="displayPrequires">
        <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'abords entrer des identifiants aux tâches précédentes</div>
            </div>
        </div>
        <div class="piece-prerequires-ressources">
            <label class="piece-prerequires-title">Ressources & attributs</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</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('normal')[0] && j == findFirstIndexOfTaskType('normal')[1]) ? urlIcon : ''"
            placeholder="Positionner dans l'ordre les balises HTML principales"
            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()"/>
                <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-bottom-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-bottom-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>