annexe-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âches annexe: ces tâches ne sont pas obligatoires pour atteindre les objectifs pédagogiques définis. Elles sont rapides et permettent aux joueurs plus rapides d'être occupés en attendant que les autres finissent leurs tâches. Il est préférable d'en mettre."
    matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedTooltips"
    [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]="'#b9dfe3'" mat-menu-item (click)="onClickChange('normal')">Transformer en Tâche</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-prerequires" [class]="displayPrequires">
        <div class="piece-prerequires-prerequires">
            <label class="piece-prerequires-title">Antécédents</label>
            <div class="piece-prerequires-form">
                <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>
            </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" [(ngModel)]="task.identifier" 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 annexe</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>
        </div>
        <textarea class="piece-form-content" [(ngModel)]="task.objective" [style.background-image]="(i == findFirstIndexOfTaskType('annexe')[0] && j == findFirstIndexOfTaskType('annexe')[1]) ? urlIcon : ''"
            placeholder="Vérifier ses connaissances sur les formulaires PHP"
            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>