Skip to content

R
RLG Maker
Commit 7685c7e0 authored by Romain DELEAU's avatar Romain DELEAU
Browse files
Options

dynamic tasks

parent 7327d477
Hide whitespace changes
Inline Side-by-side
Showing with 879 additions and 206 deletions
src/app/app.component.html
View file @ 7685c7e0
......@@ -15,8 +15,13 @@
<div class="container-scenario-chronologie-title">Chronologie générale de la mission</div>
<div class="container-scenario-chronologie-steps">
<div *ngFor="let step of mission.chronologie, let i = index" [style.z-index]="mission.chronologie.length-i">
<app-step *ngIf="step != null" [step]="step"></app-step>
<div [style.width]="'400px'" *ngIf="step == null"></div>
<app-step *ngIf="step != null" [step]="step" [parent]="mission" [index]="i" [mission]="mission"></app-step>
<div class="container-scenario-main-missions-mission-buttonAdd" style="height: 300px;" *ngIf="step == null">
<button mat-button (click)="addMissionStep(mission, i)"><mat-icon fontIcon="add"></mat-icon></button>
</div>
</div>
<div class="container-scenario-main-missions-mission-buttonAdd" style="height: 300px;">
<button mat-button (click)="addMissionStep(mission, mission.chronologie.length)"><mat-icon fontIcon="add"></mat-icon></button>
</div>
</div>
</div>
......@@ -37,32 +42,53 @@
<div class="container-scenario-main-missions-mission-roles-role-chronologie-steps">
<div *ngFor="let step of role.chronologie, let i = index" [style.z-index]="role.chronologie.length-i">
<app-step *ngIf="step != null" [step]="step"></app-step>
<div [style.width]="'400px'" *ngIf="step == null"></div>
<app-step *ngIf="step != null" [step]="step" [parent]="role" [index]="i" [mission]="mission"></app-step>
<div class="container-scenario-main-missions-mission-buttonAdd" style="height: 300px;" *ngIf="step == null">
<button mat-button (click)="addRoleStep(mission, role, i)"><mat-icon fontIcon="add"></mat-icon></button>
</div>
</div>
<div class="container-scenario-main-missions-mission-buttonAdd" style="height: 300px;">
<button mat-button (click)="addRoleStep(mission, role, role.chronologie.length)"><mat-icon fontIcon="add"></mat-icon></button>
</div>
</div>
</div>
<div style="display: flex; flex-direction: row;">
<app-role [style.z-index]="2" [role]="role"></app-role>
<div class="container-scenario-main-missions-mission-roles-role-tasks"
[style.z-index]="1">
<div class="container-scenario-main-missions-mission-roles-role-tasks-inlineTasks"
[style.z-index]="2">
<app-task [style.z-index]="3"></app-task>
<app-task [style.z-index]="2"></app-task>
<app-repeat-task [style.z-index]="1"></app-repeat-task>
</div>
<div class="container-scenario-main-missions-mission-roles-role-tasks-inlineTasks"
[style.z-index]="2">
<app-annexe-task [style.z-index]="3"></app-annexe-task>
<app-optionnal-task [style.z-index]="2"></app-optionnal-task>
<app-final-task [style.z-index]="1"></app-final-task>
</div>
<div class="container-scenario-main-missions-mission-roles-role-tasks-inlineTasks"
[style.z-index]="2">
<app-random-event [style.z-index]="2"></app-random-event>
<div class="container-scenario-main-missions-mission-roles-role-tasks" [style.z-index]="1">
<div class="container-scenario-main-missions-mission-roles-role-tasks-inlineTasks" *ngFor="let tasks of role.tasks, let i = index" [style.z-index]="role.tasks.length+i">
<div *ngFor="let task of tasks, let j = index" [style.z-index]="tasks.length-j">
<div *ngIf="task != null">
<app-task *ngIf="task.type == 'normal'" [task]="task" [mission]="mission" [role]="role" [i]="i" [j]="j"></app-task>
<app-annexe-task *ngIf="task.type == 'annexe'" [task]="task" [mission]="mission" [role]="role" [i]="i" [j]="j"></app-annexe-task>
<app-random-event *ngIf="task.type == 'event'" [task]="task" [mission]="mission" [role]="role" [i]="i" [j]="j"></app-random-event>
<app-optionnal-task *ngIf="task.type == 'optionnal'" [task]="task" [mission]="mission" [role]="role" [i]="i" [j]="j"></app-optionnal-task>
<app-final-task *ngIf="task.type == 'final'" [task]="task" [mission]="mission" [role]="role" [i]="i" [j]="j"></app-final-task>
<app-repeat-task *ngIf="task.type == 'repeat'" [task]="task" [mission]="mission" [role]="role" [i]="i" [j]="j"></app-repeat-task>
</div>
<div class="container-scenario-main-missions-mission-buttonAdd" style="height: 400px;" *ngIf="task == null">
<button mat-button [matMenuTriggerFor]="addTaskMenu"><mat-icon fontIcon="add"></mat-icon></button>
<mat-menu #addTaskMenu="matMenu">
<button class="container-scenario-main-missions-mission-roles-role-tasks-menuButton" [style.background-color]="'#b9dfe3'" mat-menu-item (click)="addTask(mission, role, i, j, 'normal')">Ajouter une Tâche</button>
<button class="container-scenario-main-missions-mission-roles-role-tasks-menuButton" [style.background-color]="'#bccecc'" mat-menu-item (click)="addTask(mission, role, i, j, 'annexe')">Ajouter une Tâche annexe</button>
<button class="container-scenario-main-missions-mission-roles-role-tasks-menuButton" [style.background-color]="'#e8e3b3'" mat-menu-item (click)="addTask(mission, role, i, j, 'optionnal')">Ajouter une Tâche optionnelle</button>
<button class="container-scenario-main-missions-mission-roles-role-tasks-menuButton" [style.background-color]="'#b28386'" mat-menu-item (click)="addTask(mission, role, i, j, 'final')" *ngIf="dontContainFinalOrRepeatTask(tasks)">Ajouter une Tâche finale</button>
<button class="container-scenario-main-missions-mission-roles-role-tasks-menuButton" [style.background-color]="'#bfdaa3'" mat-menu-item (click)="addTask(mission, role, i, j, 'event')">Ajouter un Événement aléatoire</button>
<button class="container-scenario-main-missions-mission-roles-role-tasks-menuButton" [style.background-color]="'#abbcc6'" mat-menu-item (click)="addTask(mission, role, i, j, 'repeat')" *ngIf="dontContainFinalOrRepeatTask(tasks)">Recommencer le tour</button>
</mat-menu>
</div>
</div>
<div class="container-scenario-main-missions-mission-buttonAdd" style="height: 400px;" *ngIf="dontContainFinalOrRepeatTask(tasks)">
<button mat-button [matMenuTriggerFor]="addTaskMenu"><mat-icon fontIcon="add"></mat-icon></button>
<mat-menu #addTaskMenu="matMenu">
<button class="container-scenario-main-missions-mission-roles-role-tasks-menuButton" [style.background-color]="'#b9dfe3'" mat-menu-item (click)="addTask(mission, role, i, tasks.length, 'normal')">Ajouter une Tâche</button>
<button class="container-scenario-main-missions-mission-roles-role-tasks-menuButton" [style.background-color]="'#bccecc'" mat-menu-item (click)="addTask(mission, role, i, tasks.length, 'annexe')">Ajouter une Tâche annexe</button>
<button class="container-scenario-main-missions-mission-roles-role-tasks-menuButton" [style.background-color]="'#e8e3b3'" mat-menu-item (click)="addTask(mission, role, i, tasks.length, 'optionnal')">Ajouter une Tâche optionnelle</button>
<button class="container-scenario-main-missions-mission-roles-role-tasks-menuButton" [style.background-color]="'#b28386'" mat-menu-item (click)="addTask(mission, role, i, tasks.length, 'final')">Ajouter une Tâche finale</button>
<button class="container-scenario-main-missions-mission-roles-role-tasks-menuButton" [style.background-color]="'#bfdaa3'" mat-menu-item (click)="addTask(mission, role, i, tasks.length, 'event')">Ajouter un Événement aléatoire</button>
<button class="container-scenario-main-missions-mission-roles-role-tasks-menuButton" [style.background-color]="'#abbcc6'" mat-menu-item (click)="addTask(mission, role, i, tasks.length, 'repeat')">Recommencer le tour</button>
</mat-menu>
</div>
</div>
</div>
</div>
......
src/app/app.component.scss
View file @ 7685c7e0
......@@ -29,7 +29,7 @@
&-scenario {
&-chronologie {
margin-bottom: 400px;
margin-bottom: 450px;
position: relative;
left: 800px;
......@@ -63,7 +63,26 @@
flex-direction: column;
margin-bottom: 100px;
position: relative;
top: -734px;
top: -784px;
&-buttonAdd {
display: flex;
width: 400px;
justify-content: center;
align-items: center;
button {
border-radius: 10px;
background-color: #f7f7f7;
border: solid black 1px;
width: 75px;
height: 75px;
mat-icon {
transform: scale(1.5);
}
}
}
&-missionPieces {
display: flex;
......@@ -74,7 +93,7 @@
display: flex;
flex-direction: column;
position: relative;
top: -359px;
top: -409px;
&-role {
display: flex;
......@@ -82,7 +101,7 @@
margin-bottom: 50px;
&-chronologie {
margin-bottom: 25px;
margin-bottom: 75px;
margin-left: 400px;
&-title {
......@@ -106,6 +125,15 @@
display: flex;
flex-direction: row;
}
&-menuButton {
border-radius: 10px;
margin-bottom: 5px;
}
&-menuButton:hover {
opacity: 0.75;
}
}
}
}
......
src/app/app.component.ts
View file @ 7685c7e0
import { Component } from '@angular/core';
import { Mission } from './class/mission/mission';
import { Scenario } from './class/scenario/scenario';
import { Step } from './class/step/step';
import { Task } from './class/task/task';
import { Role } from './class/role/role';
@Component({
selector: 'app-root',
......@@ -13,10 +17,14 @@ export class AppComponent {
constructor() {
this.scenario = new Scenario();
this.scenario.missions.forEach(mission => {
mission.equalizeLengths();
});
}
test() {
console.log(this.scenario);
test(): void {
}
downloadFile(): void {
......@@ -30,7 +38,7 @@ export class AppComponent {
URL.revokeObjectURL(url);
}
onFileSelected(event: any) {
onFileSelected(event: any): void {
const file: File = event.target.files[0];
if (file) {
const reader: FileReader = new FileReader();
......@@ -42,4 +50,23 @@ export class AppComponent {
};
}
}
addMissionStep(mission: Mission, index: number): void {
mission.addChronologieStep(index);
mission.equalizeLengths();
}
addRoleStep(mission: Mission, role: Role, index: number): void {
role.addChronologieStep(index);
mission.equalizeLengths();
}
addTask(mission: Mission, role: Role, i: number, j: number, type: string) {
role.addTask(i, j, type);
mission.equalizeLengths();
}
dontContainFinalOrRepeatTask(tasks: (Task|null)[]): boolean {
return !(tasks.some(task => task?.type == 'final') || tasks.some(task => task?.type == 'repeat'));
}
}
\ No newline at end of file
src/app/app.module.ts
View file @ 7685c7e0
......@@ -5,6 +5,7 @@ import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatMenuModule } from '@angular/material/menu';
import { AppComponent } from './app.component';
import { EducationalObjectiveComponent } from './pieces/educational-objective/educational-objective.component';
......@@ -65,7 +66,8 @@ import { MouseWheelZoomDirective } from './directives/mouse-wheel-zoom.directive
FormsModule,
BrowserAnimationsModule,
MatIconModule,
MatButtonModule
MatButtonModule,
MatMenuModule
],
providers: [],
bootstrap: [AppComponent]
......
src/app/class/mission/mission.ts
View file @ 7685c7e0
......@@ -2,11 +2,210 @@ import { EducationnalObjective } from "../educationnal-objective/educationnal-ob
import { MissionContext } from "../mission-context/mission-context";
import { Role } from "../role/role";
import { Step } from "../step/step";
import { Task } from "../task/task";
export class Mission {
educationnalObjective: EducationnalObjective = new EducationnalObjective();
context: MissionContext = new MissionContext();
roles: Role[] = [new Role(), new Role()];
chronologie: Step[] = [new Step()];
chronologie: (Step | null)[] = [new Step()];
public addChronologieStep(index: number) {
this.chronologie[index] = new Step();
}
public removeChronologieStep(index: number) {
if (this.chronologie.length-1 == index) {
this.chronologie.splice(index, 1);
} else {
this.chronologie[index] = null;
}
}
public calcMaxLineLength(): number {
let length: number = 0;
let cpt: number = 0;
// Pour chaque étape de mission
for (let j = 0; j < this.chronologie.length; j++) {
let step: Step | null = this.chronologie[j];
if (step != null && step.durationUnit == 'UT') {
if (step.duration > 0) {
if (step.duration <= 10) {
cpt = cpt + step.duration;
} else {
cpt = cpt + 10;
}
} else {
cpt = cpt + 1;
}
} else {
cpt = cpt + 1;
}
}
if (cpt > length) {
length = cpt;
}
cpt = 0;
// Pour chaque role
for (let k = 0; k < this.roles.length; k++) {
let role: Role = this.roles[k];
// Pour chaque étape du role
for (let l = 0; l < role.chronologie.length; l++) {
let step: Step | null = role.chronologie[l];
if (step != null && step.durationUnit == 'UT') {
if (step.duration > 0) {
if (step.duration <= 10) {
cpt = cpt + step.duration;
} else {
cpt = cpt + 10;
}
} else {
cpt = cpt + 1;
}
} else {
cpt = cpt + 1;
}
}
if (cpt > length) {
length = cpt;
}
cpt = 0;
// Pour chaque ligne de tâche
for (let m = 0; m < role.tasks.length; m++) {
let inlineTasks: (Task | null)[] = role.tasks[m];
// Pour chaque tâche
for (let n = 0; n < inlineTasks.length; n++) {
let task: Task | null = inlineTasks[n];
if (task != null && task.durationUnit == 'UT') {
if (task.duration > 0) {
if (task.duration <= 10) {
cpt = cpt + task.duration;
} else {
cpt = cpt + 10;
}
} else {
cpt = cpt + 1;
}
} else {
cpt = cpt + 1;
}
}
if (cpt > length) {
length = cpt;
}
cpt = 0;
}
}
return length;
}
public equalizeLengths(): void {
//Pour la chronologie
if (this.chronologie.some(element => element instanceof Step)) {
let lastIndexStep = this.chronologie.length-1;
while (!(this.chronologie[lastIndexStep] instanceof Step)) {
lastIndexStep--;
}
this.chronologie.splice(lastIndexStep+1, this.chronologie.length);
} else {
this.chronologie = [];
}
// Pour chaque role
this.roles.forEach(role => {
// Pour la chronologie du role
if (role.chronologie.some(element => element instanceof Step)) {
let lastIndexStep = role.chronologie.length-1;
while (!(role.chronologie[lastIndexStep] instanceof Step)) {
lastIndexStep--;
}
role.chronologie.splice(lastIndexStep+1, role.chronologie.length);
} else {
role.chronologie = [];
}
// Pour les taches
role.tasks.forEach(inlineTasks => {
if (inlineTasks.some(element => element instanceof Task)) {
let lastIndexTask = inlineTasks.length-1;
while (!(inlineTasks[lastIndexTask] instanceof Task)) {
lastIndexTask--;
}
inlineTasks.splice(lastIndexTask+1, inlineTasks.length);
} else {
inlineTasks = [];
}
});
});
//---------
let maxLineLength: number = this.calcMaxLineLength()-1;
if (!(this.chronologie[maxLineLength] instanceof Step)) {
this.chronologie[maxLineLength] = null;
}
this.roles.forEach(role => {
if (!(role.chronologie[maxLineLength] instanceof Step)) {
role.chronologie[maxLineLength] = null;
}
role.tasks.forEach(inlineTasks => {
if (!(inlineTasks.some(task => task?.type == 'final') || inlineTasks.some(task => task?.type == 'repeat'))) {
if (!(inlineTasks[maxLineLength] instanceof Task)) {
inlineTasks[maxLineLength] = null;
}
}
});
});
// DurationChange
/*
let maxLineLength: number = this.calcMaxLineLength()-1;
if (!(this.chronologie[maxLineLength] instanceof Step)) {
this.chronologie[maxLineLength - this.sumUT(this.chronologie)] = null;
}
this.roles.forEach(role => {
if (!(role.chronologie[maxLineLength] instanceof Step)) {
role.chronologie[maxLineLength - this.sumUT(role.chronologie)] = null;
}
role.tasks.forEach(inlineTasks => {
if (!(inlineTasks[maxLineLength] instanceof Task)) {
inlineTasks[maxLineLength - this.sumUT(inlineTasks)] = null;
}
});
});
*/
}
// DurationChange
/*
sumUT(list: ((Step|null)|(Task|null))[]): number {
let sum = 0;
list.forEach(element => {
if (element?.durationUnit == 'UT') {
console.log('UT OK');
if (element.duration > 1) {
console.log('Duration < 1 OK');
if (element.duration>=10) {
sum = sum + 10;
} else {
sum = sum + element.duration;
console.log('addition : '+sum);
}
}
}
});
console.log(sum);
return sum;
}
*/
}
src/app/class/role/role.ts
View file @ 7685c7e0
......@@ -17,10 +17,49 @@ export class Role {
ressources: Ressource[] = [];
supplementaryRoles: SupplementaryRole[] = [];
comments: Comment[] = [];
occurences: RoleOccurrence[] = [new RoleOccurrence()]
tasks: Task[][] = [
[new Task('normal')]
]
chronologie: Step[] = [];
occurences: RoleOccurrence[] = [new RoleOccurrence()];
tasks: (Task | null)[][] = [[new Task('normal')], []];
chronologie: (Step | null)[] = [];
public addChronologieStep(index: number) {
this.chronologie[index] = new Step();
}
public removeChronologieStep(index: number) {
if (this.chronologie.length-1 == index) {
this.chronologie.splice(index, 1);
} else {
this.chronologie[index] = null;
}
}
public addTask(i: number, j: number, type: string) {
this.tasks[i][j] = new Task(type);
if (this.tasks[i+1] == null) {
this.tasks[i+1] = [];
}
}
public removeTask(i: number, j: number) {
if (this.tasks[i].length-1 == j) {
this.tasks[i].splice(j, 1);
} else {
this.tasks[i][j] = null;
}
if (!this.tasks[i].some(element => element instanceof Task)) {
this.tasks.splice(i,1);
}
}
public moveTask(i: number, j: number, direction: string): void {
let tmp: Task|null = this.tasks[i][j];
if (direction == 'left') {
this.tasks[i][j] = this.tasks[i][j-1];
this.tasks[i][j-1] = tmp;
} else if (direction == 'right' && (this.tasks[i][j+1]?.type != 'final' && this.tasks[i][j+1]?.type != 'repeat')) {
this.tasks[i][j] = this.tasks[i][j+1];
this.tasks[i][j+1] = tmp;
}
}
}
src/app/class/task/task.ts
View file @ 7685c7e0
......@@ -6,13 +6,13 @@ import { Symbol } from "../symbol/symbol";
export class Task {
type: string; //peut être : normal / annexe / event / optionnal / final / repeater
type: string; //peut être : normal / annexe / event / optionnal / final / repeat
identifier: string = '';
symbol: Symbol = new Symbol();
objective: string = '';
antecedents: Task[] = [];
duration: number = 1;
durationUnite: string = 'UT';
durationUnit: string = 'UT';
comments: Comment[] = [];
character!: Character;
repeat: Repeat = new Repeat();
......@@ -24,4 +24,13 @@ export class Task {
this.type = type;
}
public changeType(type: string) {
if (type == 'annexe') {
this.type = type;
this.symbol.color = '';
this.symbol.symbol = '';
} else {
this.type = type;
}
}
}
src/app/pieces/role/role.component.html
View file @ 7685c7e0
......@@ -12,7 +12,7 @@
<div class="piece-form">
<div class="piece-form-title">Rôle 1</div>
<img src="../../../assets/background-images/role.png"/>
<img src="../../../assets/background-images/role_opacity0.png"/>
<div class="piece-form-intitule">
<label for="intitule">Intitulé</label>
<input name="intitule" type="text" [(ngModel)]="role.intitule" placeholder="Développeur/euse web"/>
......
src/app/pieces/step/step.component.html
View file @ 7685c7e0
......@@ -13,7 +13,7 @@
<textarea [(ngModel)]="step.description"></textarea>
<div class="piece-form-duration">
<label for="duration">Durée</label>
<input name="duration" type="text" [(ngModel)]="step.duration" (input)="durationChange()"/>
<input name="duration" type="number" [(ngModel)]="step.duration" (input)="durationChange()"/>
<select name="duration" [(ngModel)]="step.durationUnit" (change)="durationChange()">
<option value="UT">UT</option>
<option value="min">min</option>
......
src/app/pieces/step/step.component.scss
View file @ 7685c7e0
......@@ -113,7 +113,7 @@
width: 50px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
text-align: right;
text-align: center;
}
select {
......
src/app/pieces/step/step.component.ts
View file @ 7685c7e0
import { Component, Input, OnInit } from '@angular/core';
import { Mission } from 'src/app/class/mission/mission';
import { Role } from 'src/app/class/role/role';
import { Step } from 'src/app/class/step/step';
@Component({
......@@ -9,6 +11,9 @@ import { Step } from 'src/app/class/step/step';
export class StepComponent implements OnInit {
@Input() step: Step = new Step;
@Input() parent!: Mission | Role;
@Input() index!: number;
@Input() mission!: Mission;
displayMenu: string = 'hide';
pieceWidth = '400px';
......@@ -24,14 +29,22 @@ export class StepComponent implements OnInit {
}
onClickErase(): void {
this.step.description = '';
this.step.durationUnit = 'UT';
this.step.duration = 1;
}
onClickDelete(): void {
if (this.parent instanceof Mission) {
this.parent.removeChronologieStep(this.index);
} else if (this.parent instanceof Role) {
this.parent.removeChronologieStep(this.index);
}
this.mission.equalizeLengths();
}
durationChange(): void {
/*
if(this.step.durationUnit === 'UT') {
if(this.step.duration >= 1 && this.step.duration <= 10) {
this.pieceWidth = (this.step.duration*400)+'px';
......@@ -43,6 +56,7 @@ export class StepComponent implements OnInit {
} else {
this.pieceWidth = '400px';
}
*/
}
}
src/app/pieces/tasks/annexe-task/annexe-task.component.html
View file @ 7685c7e0
<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displayPrequires='hide'; displaySymbolChoice='hide'">
<div class="piece-attach piece-attach-left"></div>
<div class="piece-attach piece-attach-right"></div>
<div class="piece-menu" [class]="displayMenu">
<mat-icon fontIcon="change_circle" (click)="onClickChange()"></mat-icon>
<mat-icon fontIcon="arrow_back_ios" (click)="moveTask('left')" *ngIf="canMoveTo('left')"></mat-icon>
<div>
<mat-icon fontIcon="change_circle" [matMenuTriggerFor]="menuChange"></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()"></mat-icon>
<mat-icon fontIcon="delete" (click)="onClickDelete()"></mat-icon>
<mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
<mat-icon fontIcon="arrow_forward_ios" (click)="moveTask('right')" *ngIf="canMoveTo('right')"></mat-icon>
</div>
<div class="piece-prerequires" [class]="displayPrequires">
......@@ -64,18 +73,18 @@
<div class="piece-form">
<div class="piece-form-top">
<input class="piece-form-top-identifier" name="identifier" type="text" placeholder="A" min="1" maxlength="5"/>
<input class="piece-form-top-identifier" name="identifier" type="text" [(ngModel)]="task.identifier" placeholder="A" min="1" maxlength="5"/>
<div class="piece-form-top-title">Tâche annexe</div>
</div>
<textarea class="piece-form-content" placeholder="Vérifier ses connaissances sur les formulaires PHP"></textarea>
<textarea class="piece-form-content" [(ngModel)]="task.objective" placeholder="Vérifier ses connaissances sur les formulaires PHP"></textarea>
<div class="piece-form-bottom">
<button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()">
Prérequis
</button>
<div class="piece-form-bottom-duration">
<input name="value" type="text" [(ngModel)]="duration" (input)="durationChange()"/>
<select name="unite" [(ngModel)]="durationUnit" (change)="durationChange()">
<option selected value="UT">UT</option>
<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>
......
src/app/pieces/tasks/annexe-task/annexe-task.component.scss
View file @ 7685c7e0
......@@ -9,7 +9,7 @@
&-menu {
position: absolute;
width: 150px;
width: 200px;
height: 50px;
background-color: #f7f7f7;
z-index: -1;
......@@ -32,6 +32,15 @@
mat-icon:hover {
opacity: 0.75;
}
&-changeMenuButton {
border-radius: 10px;
margin-bottom: 5px;
}
&-changeMenuButton:hover {
opacity: 0.75;
}
}
&-menu.show {
......@@ -48,13 +57,13 @@
height: 150px;
background-color: #f7f7f7;
z-index: -1;
bottom: 0;
left: 25px;
bottom: 10px;
left: 50px;
border: solid black 1px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
transition: transform 0.5s ease;
border-top: none;
border-left: none;
display: flex;
flex-direction: row;
......@@ -137,7 +146,7 @@
}
&-prerequires.show {
transform: translateY(100%);
transform: translateX(100%);
}
&-attach {
......@@ -254,7 +263,7 @@
input {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
width: 20px;
width: 50px;
text-align: center;
z-index: 2;
}
......
src/app/pieces/tasks/annexe-task/annexe-task.component.ts
View file @ 7685c7e0
import { Component, OnInit } from '@angular/core';
import { Component, Input, OnInit } from '@angular/core';
import { Mission } from 'src/app/class/mission/mission';
import { Role } from 'src/app/class/role/role';
import { Task } from 'src/app/class/task/task';
@Component({
selector: 'app-annexe-task',
......@@ -7,23 +10,30 @@ import { Component, OnInit } from '@angular/core';
})
export class AnnexeTaskComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
displayMenu: string = 'hide';
displaySymbolChoice: string = 'hide';
displayPrequires: string = 'hide';
durationUnit: string = 'UT';
duration: number = 1;
pieceWidth: string = '400px';
@Input() task: Task = new Task('normal');
@Input() mission!: Mission;
@Input() role!: Role;
@Input() i!: number;
@Input() j!: number;
constructor() { }
ngOnInit(): void {
this.durationChange();
}
durationChange(): void {
if(this.durationUnit === 'UT') {
if(this.duration >= 1 && this.duration <= 10) {
this.pieceWidth = (this.duration*400)+'px';
} else if(this.duration > 10) {
/*
if(this.task.durationUnit === 'UT') {
if(this.task.duration >= 1 && this.task.duration <= 10) {
this.pieceWidth = (this.task.duration*400)+'px';
} else if(this.task.duration > 10) {
this.pieceWidth = '4000px';
} else {
this.pieceWidth = '400px';
......@@ -31,10 +41,14 @@ export class AnnexeTaskComponent implements OnInit {
} else {
this.pieceWidth = '400px';
}
*/
}
onClickErase(): void {
this.task.duration = 1;
this.task.durationUnit = 'UT';
this.task.identifier = '';
this.task.objective = '';
}
onClickDots(): void {
......@@ -42,11 +56,12 @@ export class AnnexeTaskComponent implements OnInit {
}
onClickDelete(): void {
this.role.removeTask(this.i, this.j);
this.mission.equalizeLengths();
}
onClickChange(): void {
onClickChange(type: string): void {
this.task.changeType(type);
}
changeDisplayPrerequires(): void {
......@@ -57,4 +72,41 @@ export class AnnexeTaskComponent implements OnInit {
}
}
canChangeInFinalTask(): boolean {
let res: boolean = true;
let lastTaskIndex: number = -1;
for (let i = this.role.tasks[this.i].length - 1; i >= 0; i--) {
if (this.role.tasks[this.i][i] instanceof Task) {
lastTaskIndex = i;
break;
}
}
if (this.j < lastTaskIndex || this.role.tasks[this.i].some(task => task?.type == 'final') || this.role.tasks[this.i].some(task => task?.type == 'repeat')) {
res = false;
}
return res;
}
moveTask(direction: string): void {
this.role.moveTask(this.i, this.j, direction);
this.displayMenu = 'hide';
this.displayPrequires = 'hide';
this.displaySymbolChoice = 'hide';
this.mission.equalizeLengths();
}
canMoveTo(direction: string): boolean {
let res: boolean = true;
if (direction == 'left') {
if (this.j == 0) {
res = false;
}
} else if (direction == 'right') {
if (this.role.tasks[this.i][this.j+1]?.type == 'final' || this.role.tasks[this.i][this.j+1]?.type == 'repeat') {
res = false;
}
}
return res;
}
}
src/app/pieces/tasks/final-task/final-task.component.html
View file @ 7685c7e0
<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displayPrequires='hide'; displaySymbolChoice='hide'">
<div class="piece-attach piece-attach-left"></div>
<div class="piece-menu" [class]="displayMenu">
<mat-icon fontIcon="change_circle" (click)="onClickChange()"></mat-icon>
<mat-icon fontIcon="arrow_back_ios" (click)="moveTask('left')" *ngIf="canMoveTo('left')"></mat-icon>
<div>
<mat-icon fontIcon="change_circle" [matMenuTriggerFor]="menuChange"></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]="'#e8e3b3'" mat-menu-item (click)="onClickChange('optionnal')">Transformer une Tâche optionnelle</button>
</mat-menu>
</div>
<mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
<mat-icon fontIcon="delete" (click)="onClickDelete()"></mat-icon>
<mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
<mat-icon fontIcon="arrow_forward_ios" (click)="moveTask('right')" *ngIf="canMoveTo('right')"></mat-icon>
</div>
<div class="piece-symbolchoice" [class]="displaySymbolChoice">
......@@ -92,21 +101,21 @@
<div class="piece-form">
<div class="piece-form-top">
<input class="piece-form-top-identifier" name="identifier" type="text" placeholder="A" min="1" maxlength="5"/>
<input class="piece-form-top-identifier" name="identifier" type="text" [(ngModel)]="task.identifier" placeholder="A" min="1" maxlength="5"/>
<div class="piece-form-top-title">Tâche finale</div>
<button mat-button class="piece-form-top-symbol" (click)="changeDisplaySymbolChoice()">
<mat-icon *ngIf="symbol" [style.color]="symbolColor" [fontIcon]="symbol"></mat-icon>
<mat-icon *ngIf="task.symbol.symbol" [style.color]="task.symbol.color" [fontIcon]="task.symbol.symbol"></mat-icon>
</button>
</div>
<textarea class="piece-form-content" placeholder="Positionner dans l'ordre les balises HTML principales"></textarea>
<textarea class="piece-form-content" [(ngModel)]="task.objective" placeholder="Mettre le site web en ligne"></textarea>
<div class="piece-form-bottom">
<button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()">
Prérequis
</button>
<div class="piece-form-bottom-duration">
<input name="value" type="text" [(ngModel)]="duration" (input)="durationChange()"/>
<select name="unite" [(ngModel)]="durationUnit" (change)="durationChange()">
<option selected value="UT">UT</option>
<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>
......
src/app/pieces/tasks/final-task/final-task.component.scss
View file @ 7685c7e0
......@@ -9,7 +9,7 @@
&-menu {
position: absolute;
width: 150px;
width: 200px;
height: 50px;
background-color: #f7f7f7;
z-index: -1;
......@@ -32,6 +32,15 @@
mat-icon:hover {
opacity: 0.75;
}
&-changeMenuButton {
border-radius: 10px;
margin-bottom: 5px;
}
&-changeMenuButton:hover {
opacity: 0.75;
}
}
&-menu.show {
......@@ -94,13 +103,13 @@
height: 150px;
background-color: #f7f7f7;
z-index: -1;
bottom: 0;
left: 25px;
bottom: 10px;
left: 50px;
border: solid black 1px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
transition: transform 0.5s ease;
border-top: none;
border-left: none;
display: flex;
flex-direction: row;
......@@ -183,7 +192,7 @@
}
&-prerequires.show {
transform: translateY(100%);
transform: translateX(100%);
}
&-attach {
......@@ -291,7 +300,7 @@
input {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
width: 20px;
width: 50px;
text-align: center;
z-index: 2;
}
......
src/app/pieces/tasks/final-task/final-task.component.ts
View file @ 7685c7e0
import { Component, OnInit } from '@angular/core';
import { Component, Input, OnInit } from '@angular/core';
import { Mission } from 'src/app/class/mission/mission';
import { Role } from 'src/app/class/role/role';
import { Task } from 'src/app/class/task/task';
@Component({
selector: 'app-final-task',
......@@ -11,23 +14,26 @@ export class FinalTaskComponent implements OnInit {
displaySymbolChoice: string = 'hide';
displayPrequires: string = 'hide';
durationUnit: string = 'UT';
duration: number = 1;
pieceWidth: string = '400px';
symbol: string = ''; // A changer quand implémentation des données
symbolColor: string = ''; //A changer quand implémentation des données
@Input() task: Task = new Task('normal');
@Input() mission!: Mission;
@Input() role!: Role;
@Input() i!: number;
@Input() j!: number;
constructor() { }
ngOnInit(): void {
this.durationChange();
}
durationChange(): void {
if(this.durationUnit === 'UT') {
if(this.duration >= 1 && this.duration <= 10) {
this.pieceWidth = (this.duration*400)+'px';
} else if(this.duration > 10) {
/*
if(this.task.durationUnit === 'UT') {
if(this.task.duration >= 1 && this.task.duration <= 10) {
this.pieceWidth = (this.task.duration*400)+'px';
} else if(this.task.duration > 10) {
this.pieceWidth = '4000px';
} else {
this.pieceWidth = '400px';
......@@ -35,22 +41,34 @@ export class FinalTaskComponent implements OnInit {
} else {
this.pieceWidth = '400px';
}
*/
}
onClickErase(): void {
this.task.duration = 1;
this.task.durationUnit = 'UT';
this.task.identifier = '';
this.task.objective = '';
this.task.symbol.color = '';
this.task.symbol.symbol = '';
}
onClickDots(): void {
}
onClickChange(): void {
onClickChange(type: string): void {
if (type == 'annexe') {
this.task.symbol.color = '';
this.task.symbol.symbol = '';
}
this.task.changeType(type);
this.mission.equalizeLengths();
}
onClickDelete(): void {
this.role.removeTask(this.i, this.j);
this.mission.equalizeLengths();
}
changeDisplaySymbolChoice(): void {
......@@ -62,8 +80,8 @@ export class FinalTaskComponent implements OnInit {
}
setSymbol(symbol: string, symbolColor: string): void {
this.symbol = symbol;
this.symbolColor = symbolColor;
this.task.symbol.symbol = symbol;
this.task.symbol.color = symbolColor;
this.displaySymbolChoice = 'hide';
}
......@@ -75,4 +93,22 @@ export class FinalTaskComponent implements OnInit {
}
}
moveTask(direction: string): void {
this.role.moveTask(this.i, this.j, direction);
this.displayMenu = 'hide';
this.displayPrequires = 'hide';
this.displaySymbolChoice = 'hide';
this.mission.equalizeLengths();
}
canMoveTo(direction: string): boolean {
let res: boolean = true;
if (direction == 'left') {
if (this.role.tasks[this.i][this.j-1] instanceof Task || this.j == 0) {
res = false;
}
}
return res;
}
}
src/app/pieces/tasks/optionnal-task/optionnal-task.component.html
View file @ 7685c7e0
<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displayPrequires='hide'; displaySymbolChoice='hide'">
<div class="piece-attach piece-attach-left"></div>
<div class="piece-attach piece-attach-right"></div>
<div class="piece-menu" [class]="displayMenu">
<mat-icon fontIcon="change_circle" (click)="onClickChange()"></mat-icon>
<mat-icon fontIcon="arrow_back_ios" (click)="moveTask('left')" *ngIf="canMoveTo('left')"></mat-icon>
<div>
<mat-icon fontIcon="change_circle" [matMenuTriggerFor]="menuChange"></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()"></mat-icon>
<mat-icon fontIcon="delete" (click)="onClickDelete()"></mat-icon>
<mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
<mat-icon fontIcon="arrow_forward_ios" (click)="moveTask('right')" *ngIf="canMoveTo('right')"></mat-icon>
</div>
<div class="piece-symbolchoice" [class]="displaySymbolChoice">
......@@ -93,21 +102,21 @@
<div class="piece-form">
<div class="piece-form-top">
<input class="piece-form-top-identifier" name="identifier" type="text" placeholder="A" min="1" maxlength="5"/>
<input class="piece-form-top-identifier" name="identifier" type="text" [(ngModel)]="task.identifier" placeholder="A" min="1" maxlength="5"/>
<div class="piece-form-top-title">Tâche<br>optionnelle</div>
<button mat-button class="piece-form-top-symbol" (click)="changeDisplaySymbolChoice()">
<mat-icon *ngIf="symbol" [style.color]="symbolColor" [fontIcon]="symbol"></mat-icon>
<mat-icon *ngIf="task.symbol.symbol" [style.color]="task.symbol.color" [fontIcon]="task.symbol.symbol"></mat-icon>
</button>
</div>
<textarea class="piece-form-content" placeholder="Positionner dans l'ordre les balises HTML principales"></textarea>
<textarea class="piece-form-content" [(ngModel)]="task.objective" placeholder="Partir d'un template / Partir de zéro"></textarea>
<div class="piece-form-bottom">
<button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()">
Prérequis
</button>
<div class="piece-form-bottom-duration">
<input name="value" type="text" [(ngModel)]="duration" (input)="durationChange()"/>
<select name="unite" [(ngModel)]="durationUnit" (change)="durationChange()">
<option selected value="UT">UT</option>
<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>
......
src/app/pieces/tasks/optionnal-task/optionnal-task.component.scss
View file @ 7685c7e0
......@@ -9,7 +9,7 @@
&-menu {
position: absolute;
width: 150px;
width: 200px;
height: 50px;
background-color: #f7f7f7;
z-index: -1;
......@@ -32,6 +32,15 @@
mat-icon:hover {
opacity: 0.75;
}
&-changeMenuButton {
border-radius: 10px;
margin-bottom: 5px;
}
&-changeMenuButton:hover {
opacity: 0.75;
}
}
&-menu.show {
......@@ -94,13 +103,13 @@
height: 150px;
background-color: #f7f7f7;
z-index: -1;
bottom: 0;
left: 25px;
bottom: 10px;
left: 50px;
border: solid black 1px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
transition: transform 0.5s ease;
border-top: none;
border-left: none;
display: flex;
flex-direction: row;
......@@ -183,7 +192,7 @@
}
&-prerequires.show {
transform: translateY(100%);
transform: translateX(100%);
}
&-attach {
......@@ -299,7 +308,7 @@
input {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
width: 20px;
width: 50px;
text-align: center;
z-index: 2;
}
......
src/app/pieces/tasks/optionnal-task/optionnal-task.component.ts
View file @ 7685c7e0
import { Component, OnInit } from '@angular/core';
import { Component, Input, OnInit } from '@angular/core';
import { Mission } from 'src/app/class/mission/mission';
import { Role } from 'src/app/class/role/role';
import { Task } from 'src/app/class/task/task';
@Component({
selector: 'app-optionnal-task',
......@@ -11,24 +14,26 @@ export class OptionnalTaskComponent implements OnInit {
displaySymbolChoice: string = 'hide';
displayPrequires: string = 'hide';
durationUnit: string = 'UT';
duration: number = 1;
pieceWidth: string = '400px';
symbol: string = ''; // A changer quand implémentation des données
symbolColor: string = ''; //A changer quand implémentation des données
@Input() task: Task = new Task('normal');
@Input() mission!: Mission;
@Input() role!: Role;
@Input() i!: number;
@Input() j!: number;
constructor() { }
ngOnInit(): void {
this.durationChange();
}
durationChange(): void {
if(this.durationUnit === 'UT') {
if(this.duration >= 1 && this.duration <= 10) {
this.pieceWidth = (this.duration*400)+'px';
} else if(this.duration > 10) {
/*
if(this.task.durationUnit === 'UT') {
if(this.task.duration >= 1 && this.task.duration <= 10) {
this.pieceWidth = (this.task.duration*400)+'px';
} else if(this.task.duration > 10) {
this.pieceWidth = '4000px';
} else {
this.pieceWidth = '400px';
......@@ -36,22 +41,33 @@ export class OptionnalTaskComponent implements OnInit {
} else {
this.pieceWidth = '400px';
}
*/
}
onClickErase(): void {
this.task.duration = 1;
this.task.durationUnit = 'UT';
this.task.identifier = '';
this.task.objective = '';
this.task.symbol.color = '';
this.task.symbol.symbol = '';
}
onClickDots(): void {
}
onClickChange(): void {
onClickChange(type: string): void {
if (type == 'annexe') {
this.task.symbol.color = '';
this.task.symbol.symbol = '';
}
this.task.changeType(type);
}
onClickDelete(): void {
this.role.removeTask(this.i, this.j);
this.mission.equalizeLengths();
}
changeDisplaySymbolChoice(): void {
......@@ -63,8 +79,8 @@ export class OptionnalTaskComponent implements OnInit {
}
setSymbol(symbol: string, symbolColor: string): void {
this.symbol = symbol;
this.symbolColor = symbolColor;
this.task.symbol.symbol = symbol;
this.task.symbol.color = symbolColor;
this.displaySymbolChoice = 'hide';
}
......@@ -76,4 +92,41 @@ export class OptionnalTaskComponent implements OnInit {
}
}
canChangeInFinalTask(): boolean {
let res: boolean = true;
let lastTaskIndex: number = -1;
for (let i = this.role.tasks[this.i].length - 1; i >= 0; i--) {
if (this.role.tasks[this.i][i] instanceof Task) {
lastTaskIndex = i;
break;
}
}
if (this.j < lastTaskIndex || this.role.tasks[this.i].some(task => task?.type == 'final') || this.role.tasks[this.i].some(task => task?.type == 'repeat')) {
res = false;
}
return res;
}
moveTask(direction: string): void {
this.role.moveTask(this.i, this.j, direction);
this.displayMenu = 'hide';
this.displayPrequires = 'hide';
this.displaySymbolChoice = 'hide';
this.mission.equalizeLengths();
}
canMoveTo(direction: string): boolean {
let res: boolean = true;
if (direction == 'left') {
if (this.j == 0) {
res = false;
}
} else if (direction == 'right') {
if (this.role.tasks[this.i][this.j+1]?.type == 'final' || this.role.tasks[this.i][this.j+1]?.type == 'repeat') {
res = false;
}
}
return res;
}
}
src/app/pieces/tasks/random-event/random-event.component.html
View file @ 7685c7e0
<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displayPrequires='hide'; displaySymbolChoice='hide'">
<div class="piece-attach piece-attach-left"></div>
<div class="piece-attach piece-attach-right"></div>
<div class="piece-menu" [class]="displayMenu">
<mat-icon fontIcon="arrow_back_ios" (click)="moveTask('left')" *ngIf="canMoveTo('left')"></mat-icon>
<mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
<mat-icon fontIcon="delete" (click)="onClickDelete()"></mat-icon>
<mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
<mat-icon fontIcon="arrow_forward_ios" (click)="moveTask('right')" *ngIf="canMoveTo('right')"></mat-icon>
</div>
<div class="piece-symbolchoice" [class]="displaySymbolChoice">
......@@ -92,21 +94,21 @@
<div class="piece-form">
<div class="piece-form-top">
<input class="piece-form-top-identifier" name="identifier" type="text" placeholder="A" min="1" maxlength="5"/>
<input class="piece-form-top-identifier" name="identifier" type="text" [(ngModel)]="task.identifier" placeholder="A" min="1" maxlength="5"/>
<div class="piece-form-top-title">Événement<br>aléatoire</div>
<button mat-button class="piece-form-top-symbol" (click)="changeDisplaySymbolChoice()">
<mat-icon *ngIf="symbol" [style.color]="symbolColor" [fontIcon]="symbol"></mat-icon>
<mat-icon *ngIf="task.symbol.symbol" [style.color]="task.symbol.color" [fontIcon]="task.symbol.symbol"></mat-icon>
</button>
</div>
<textarea class="piece-form-content" placeholder="Positionner dans l'ordre les balises HTML principales"></textarea>
<textarea class="piece-form-content" [(ngModel)]="task.objective" placeholder="Le client modifie sa demande"></textarea>
<div class="piece-form-bottom">
<button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()">
Prérequis
</button>
<div class="piece-form-bottom-duration">
<input name="value" type="text" [(ngModel)]="duration" (input)="durationChange()"/>
<select name="unite" [(ngModel)]="durationUnit" (change)="durationChange()">
<option selected value="UT">UT</option>
<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>
......
src/app/pieces/tasks/random-event/random-event.component.scss
View file @ 7685c7e0
......@@ -9,7 +9,7 @@
&-menu {
position: absolute;
width: 150px;
width: 200px;
height: 50px;
background-color: #f7f7f7;
z-index: -1;
......@@ -94,13 +94,13 @@
height: 150px;
background-color: #f7f7f7;
z-index: -1;
bottom: 0;
left: 25px;
bottom: 10px;
left: 50px;
border: solid black 1px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
transition: transform 0.5s ease;
border-top: none;
border-left: none;
display: flex;
flex-direction: row;
......@@ -183,7 +183,7 @@
}
&-prerequires.show {
transform: translateY(100%);
transform: translateX(100%);
}
&-attach {
......@@ -303,7 +303,7 @@
input {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
width: 20px;
width: 50px;
text-align: center;
z-index: 2;
}
......
src/app/pieces/tasks/random-event/random-event.component.ts
View file @ 7685c7e0
import { Component, OnInit } from '@angular/core';
import { Component, Input, OnInit } from '@angular/core';
import { Mission } from 'src/app/class/mission/mission';
import { Role } from 'src/app/class/role/role';
import { Task } from 'src/app/class/task/task';
@Component({
selector: 'app-random-event',
......@@ -7,27 +10,30 @@ import { Component, OnInit } from '@angular/core';
})
export class RandomEventComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
displayMenu: string = 'hide';
displaySymbolChoice: string = 'hide';
displayPrequires: string = 'hide';
durationUnit: string = 'UT';
duration: number = 1;
pieceWidth: string = '400px';
symbol: string = ''; // A changer quand implémentation des données
symbolColor: string = ''; //A changer quand implémentation des données
@Input() task: Task = new Task('normal');
@Input() mission!: Mission;
@Input() role!: Role;
@Input() i!: number;
@Input() j!: number;
constructor() { }
ngOnInit(): void {
this.durationChange();
}
durationChange(): void {
if(this.durationUnit === 'UT') {
if(this.duration >= 1 && this.duration <= 10) {
this.pieceWidth = (this.duration*400)+'px';
} else if(this.duration > 10) {
/*
if(this.task.durationUnit === 'UT') {
if(this.task.duration >= 1 && this.task.duration <= 10) {
this.pieceWidth = (this.task.duration*400)+'px';
} else if(this.task.duration > 10) {
this.pieceWidth = '4000px';
} else {
this.pieceWidth = '400px';
......@@ -35,10 +41,16 @@ export class RandomEventComponent implements OnInit {
} else {
this.pieceWidth = '400px';
}
*/
}
onClickErase(): void {
this.task.duration = 1;
this.task.durationUnit = 'UT';
this.task.identifier = '';
this.task.objective = '';
this.task.symbol.color = '';
this.task.symbol.symbol = '';
}
onClickDots(): void {
......@@ -46,7 +58,8 @@ export class RandomEventComponent implements OnInit {
}
onClickDelete(): void {
this.role.removeTask(this.i, this.j);
this.mission.equalizeLengths();
}
changeDisplaySymbolChoice(): void {
......@@ -58,8 +71,8 @@ export class RandomEventComponent implements OnInit {
}
setSymbol(symbol: string, symbolColor: string): void {
this.symbol = symbol;
this.symbolColor = symbolColor;
this.task.symbol.symbol = symbol;
this.task.symbol.color = symbolColor;
this.displaySymbolChoice = 'hide';
}
......@@ -71,4 +84,25 @@ export class RandomEventComponent implements OnInit {
}
}
moveTask(direction: string): void {
this.role.moveTask(this.i, this.j, direction);
this.displayMenu = 'hide';
this.displayPrequires = 'hide';
this.displaySymbolChoice = 'hide';
this.mission.equalizeLengths();
}
canMoveTo(direction: string): boolean {
let res: boolean = true;
if (direction == 'left') {
if (this.j == 0) {
res = false;
}
} else if (direction == 'right') {
if (this.role.tasks[this.i][this.j+1]?.type == 'final' || this.role.tasks[this.i][this.j+1]?.type == 'repeat') {
res = false;
}
}
return res;
}
}
src/app/pieces/tasks/repeat-task/repeat-task.component.html
View file @ 7685c7e0
......@@ -2,13 +2,15 @@
<div class="piece-attach piece-attach-left"></div>
<div class="piece-menu" [class]="displayMenu">
<mat-icon fontIcon="arrow_back_ios" (click)="moveTask('left')" *ngIf="canMoveTo('left')"></mat-icon>
<mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
<mat-icon fontIcon="delete" (click)="onClickDelete()"></mat-icon>
<mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
<mat-icon fontIcon="arrow_forward_ios" (click)="moveTask('right')" *ngIf="canMoveTo('right')"></mat-icon>
</div>
<div class="piece-form">
<label>Recommencer<br>le tour jusqu'à ce que :</label>
<textarea></textarea>
<textarea [(ngModel)]="task.objective" placeholder="Faire valider au commanditaire"></textarea>
</div>
</div>
src/app/pieces/tasks/repeat-task/repeat-task.component.scss
View file @ 7685c7e0
......@@ -11,12 +11,12 @@
&-menu {
position: absolute;
width: 150px;
width: 200px;
height: 50px;
background-color: #f7f7f7;
z-index: -1;
top: -50px;
left: 30%;
left: 35%;
transform: translateX(-50%);
transition: transform 0.5s ease;
border-top-left-radius: 10px;
......@@ -70,12 +70,12 @@
z-index: 2;
label {
margin-top: 15%;
margin-top: 10%;
font-family: 'Glacial Indifference Bold';
margin-bottom: 10px;
text-align: center;
width: 70%;
font-size: 17px;
font-size: 23px;
}
textarea {
......
src/app/pieces/tasks/repeat-task/repeat-task.component.ts
View file @ 7685c7e0
import { Component, OnInit } from '@angular/core';
import { Component, Input, OnInit } from '@angular/core';
import { Mission } from 'src/app/class/mission/mission';
import { Role } from 'src/app/class/role/role';
import { Task } from 'src/app/class/task/task';
@Component({
selector: 'app-repeat-task',
......@@ -9,13 +12,19 @@ export class RepeatTaskComponent implements OnInit {
displayMenu: string = 'hide';
@Input() task: Task = new Task('normal');
@Input() mission!: Mission;
@Input() role!: Role;
@Input() i!: number;
@Input() j!: number;
constructor() { }
ngOnInit(): void {
}
onClickErase(): void {
this.task.objective = '';
}
onClickDots(): void {
......@@ -23,6 +32,23 @@ export class RepeatTaskComponent implements OnInit {
}
onClickDelete(): void {
this.role.removeTask(this.i, this.j);
this.mission.equalizeLengths();
}
moveTask(direction: string): void {
this.role.moveTask(this.i, this.j, direction);
this.displayMenu = 'hide';
this.mission.equalizeLengths();
}
canMoveTo(direction: string): boolean {
let res: boolean = true;
if (direction == 'left') {
if (this.role.tasks[this.i][this.j-1] instanceof Task || this.j == 0) {
res = false;
}
}
return res;
}
}
src/app/pieces/tasks/task/task.component.html
View file @ 7685c7e0
<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displayPrequires='hide'; displaySymbolChoice='hide'">
<div class="piece-attach piece-attach-left"></div>
<div class="piece-attach piece-attach-right"></div>
<div class="piece-menu" [class]="displayMenu">
<mat-icon fontIcon="change_circle" (click)="onClickChange()"></mat-icon>
<mat-icon fontIcon="arrow_back_ios" (click)="moveTask('left')" *ngIf="canMoveTo('left')"></mat-icon>
<div>
<mat-icon fontIcon="change_circle" [matMenuTriggerFor]="menuChange"></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()"></mat-icon>
<mat-icon fontIcon="delete" (click)="onClickDelete()"></mat-icon>
<mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
<mat-icon fontIcon="arrow_forward_ios" (click)="moveTask('right')" *ngIf="canMoveTo('right')"></mat-icon>
</div>
<div class="piece-symbolchoice" [class]="displaySymbolChoice">
......@@ -93,21 +102,21 @@
<div class="piece-form">
<div class="piece-form-top">
<input class="piece-form-top-identifier" name="identifier" type="text" placeholder="A" min="1" maxlength="5"/>
<input class="piece-form-top-identifier" name="identifier" type="text" [(ngModel)]="task.identifier" placeholder="A" min="1" maxlength="5"/>
<div class="piece-form-top-title">Tâche</div>
<button mat-button class="piece-form-top-symbol" (click)="changeDisplaySymbolChoice()">
<mat-icon *ngIf="symbol" [style.color]="symbolColor" [fontIcon]="symbol"></mat-icon>
<mat-icon *ngIf="task.symbol.symbol" [style.color]="task.symbol.color" [fontIcon]="task.symbol.symbol"></mat-icon>
</button>
</div>
<textarea class="piece-form-content" placeholder="Positionner dans l'ordre les balises HTML principales"></textarea>
<textarea class="piece-form-content" [(ngModel)]="task.objective" placeholder="Positionner dans l'ordre les balises HTML principales"></textarea>
<div class="piece-form-bottom">
<button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()">
Prérequis
</button>
<div class="piece-form-bottom-duration">
<input name="value" type="text" [(ngModel)]="duration" (input)="durationChange()"/>
<select name="unite" [(ngModel)]="durationUnit" (change)="durationChange()">
<option selected value="UT">UT</option>
<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>
......
src/app/pieces/tasks/task/task.component.scss
View file @ 7685c7e0
......@@ -9,7 +9,7 @@
&-menu {
position: absolute;
width: 150px;
width: 200px;
height: 50px;
background-color: #f7f7f7;
z-index: -1;
......@@ -32,6 +32,15 @@
mat-icon:hover {
opacity: 0.75;
}
&-changeMenuButton {
border-radius: 10px;
margin-bottom: 5px;
}
&-changeMenuButton:hover {
opacity: 0.75;
}
}
&-menu.show {
......@@ -94,13 +103,13 @@
height: 150px;
background-color: #f7f7f7;
z-index: -1;
bottom: 0;
left: 25px;
bottom: 10px;
left: 50px;
border: solid black 1px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
transition: transform 0.5s ease;
border-top: none;
border-left: none;
display: flex;
flex-direction: row;
......@@ -183,7 +192,7 @@
}
&-prerequires.show {
transform: translateY(100%);
transform: translateX(100%);
}
&-attach {
......@@ -303,7 +312,7 @@
input {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
width: 20px;
width: 50px;
text-align: center;
z-index: 2;
}
......
src/app/pieces/tasks/task/task.component.ts
View file @ 7685c7e0
import { Component, OnInit } from '@angular/core';
import { Component, Input, OnInit } from '@angular/core';
import { Mission } from 'src/app/class/mission/mission';
import { Role } from 'src/app/class/role/role';
import { Task } from 'src/app/class/task/task';
@Component({
selector: 'app-task',
......@@ -11,24 +14,26 @@ export class TaskComponent implements OnInit {
displaySymbolChoice: string = 'hide';
displayPrequires: string = 'hide';
durationUnit: string = 'UT';
duration: number = 1;
pieceWidth: string = '400px';
symbol: string = ''; // A changer quand implémentation des données
symbolColor: string = ''; //A changer quand implémentation des données
@Input() task: Task = new Task('normal');
@Input() mission: Mission = new Mission();
@Input() role!: Role;
@Input() i!: number;
@Input() j!: number;
constructor() { }
ngOnInit(): void {
this.durationChange();
}
durationChange(): void {
if(this.durationUnit === 'UT') {
if(this.duration >= 1 && this.duration <= 10) {
this.pieceWidth = (this.duration*400)+'px';
} else if(this.duration > 10) {
/*
if(this.task.durationUnit === 'UT') {
if(this.task.duration >= 1 && this.task.duration <= 10) {
this.pieceWidth = (this.task.duration*400)+'px';
} else if(this.task.duration > 10) {
this.pieceWidth = '4000px';
} else {
this.pieceWidth = '400px';
......@@ -36,22 +41,33 @@ export class TaskComponent implements OnInit {
} else {
this.pieceWidth = '400px';
}
*/
}
onClickErase(): void {
this.task.duration = 1;
this.task.durationUnit = 'UT';
this.task.identifier = '';
this.task.objective = '';
this.task.symbol.color = '';
this.task.symbol.symbol = '';
}
onClickDots(): void {
}
onClickChange(): void {
onClickChange(type: string): void {
if (type == 'annexe') {
this.task.symbol.color = '';
this.task.symbol.symbol = '';
}
this.task.changeType(type);
}
onClickDelete(): void {
this.role.removeTask(this.i, this.j);
this.mission.equalizeLengths();
}
changeDisplaySymbolChoice(): void {
......@@ -63,8 +79,8 @@ export class TaskComponent implements OnInit {
}
setSymbol(symbol: string, symbolColor: string): void {
this.symbol = symbol;
this.symbolColor = symbolColor;
this.task.symbol.symbol = symbol;
this.task.symbol.color = symbolColor;
this.displaySymbolChoice = 'hide';
}
......@@ -76,6 +92,42 @@ export class TaskComponent implements OnInit {
}
}
canChangeInFinalTask(): boolean {
let res: boolean = true;
let lastTaskIndex: number = -1;
for (let i = this.role.tasks[this.i].length - 1; i >= 0; i--) {
if (this.role.tasks[this.i][i] instanceof Task) {
lastTaskIndex = i;
break;
}
}
if (this.j < lastTaskIndex || this.role.tasks[this.i].some(task => task?.type == 'final') || this.role.tasks[this.i].some(task => task?.type == 'repeat')) {
res = false;
}
return res;
}
moveTask(direction: string): void {
this.role.moveTask(this.i, this.j, direction);
this.displayMenu = 'hide';
this.displayPrequires = 'hide';
this.displaySymbolChoice = 'hide';
this.mission.equalizeLengths();
}
canMoveTo(direction: string): boolean {
let res: boolean = true;
if (direction == 'left') {
if (this.j == 0) {
res = false;
}
} else if (direction == 'right') {
if (this.role.tasks[this.i][this.j+1]?.type == 'final' || this.role.tasks[this.i][this.j+1]?.type == 'repeat') {
res = false;
}
}
return res;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment