Merge branch 'dev' into page404

src/app/components/fiche-contact/fiche-contact.component.html

@@ -1,7 +1,7 @@
 <div class="container">
     <div class="row">
         <div class="col-sm">  
-            <button class="w-100 btn btn-lg btn-rounded btn-secondary">
+            <button routerLink="../modifier-contact/{{personne.id}}"  class="w-100 btn btn-lg btn-rounded btn-secondary">
                 Modifier
             </button>
         </div>

src/app/components/header/header.component.html

@@ -2,9 +2,9 @@
     <div class="container-fluid">
         <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
             <div class="navbar-nav">
-                <img routerLink="accueil" routerLinkActive="active-custom" class="nav-link" style="max-height: 12% ; max-width: 12%" src="../../../assets/images/logo-organizee.png"/>
+                <img id="img" routerLink="accueil" routerLinkActive="active-custom" src="../../../assets/images/logo-organizee.png"/>
             </div>
         </div>
         <a class="navbar-brand" href="#">Organizee</a>
     </div>
-</nav>
+</nav>

src/app/components/header/header.component.scss

@@ -1,4 +1,33 @@
 .navbar-brand {
   position: absolute;
-  margin-left: 10%;
+  margin-left: 12%;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: bold;
+  font-size: 3rem;
+  color: #5d5fef;
+}
+
+a:visited {
+  color: #5d5fef;
+}
+
+a:focus {
+  border-bottom: 1px solid;
+  background: #a5a6f6;
+}
+
+a:hover {
+  color: #7879f1;
+}
+
+a:active {
+  color: #5d5fef;
+}
+
+.navbar-nav {
+  height: 6rem;
+}
+
+#img {
+  margin-left: 50%;
 }

src/app/components/meteo/meteo.component.html

@@ -1 +1,7 @@
-<p>meteo works!</p>
+<div class="meteo">
+  <input type="text" id="ville">
+  <label for="ville">Entrez votre code postal</label>
+  <button id="meteo-button">Ok !</button>
+  <iframe id="widget_autocomplete_preview" width="150" height="300" frameborder="0"
+    src="https://meteofrance.com/widget/prevision/751010"> </iframe>
+</div>

src/app/components/signin/signin.component.html

@@ -1,45 +1,31 @@
-
 <div class="signin-form text-center">
-    <main class="form-signin">
-        <form (ngSubmit)="onSubmit(signinForm)" #signinForm="ngForm">
-            <div class="form-floating">
-                <input type="email" 
-                        class="form-control" 
-                        id="floatingInput" 
-                        placeholder="" 
-                        name="email" 
-                        ngModel
-                        required
-                        [ngClass]="{'is-valid': signinForm.form.touched && signinForm.form.value['email'] != '' , 
+  <main class="form-signin">
+    <form (ngSubmit)="onSubmit(signinForm)" #signinForm="ngForm">
+      <div class="connexion">
+      <div class="form-floating">
+        <input type="email" class="form-control" id="floatingInput" placeholder="" name="email" ngModel required
+          [ngClass]="{'is-valid': signinForm.form.touched && signinForm.form.value['email'] != '' ,
                                     'is-invalid': signinForm.form.touched && signinForm.form.value['email'] == ''}">
-                <label for="floatingInput">Adresse email</label>
-            </div>
-            <div class="form-floating">
-                <input type="password" 
-                        class="form-control" 
-                        id="floatingPassword" 
-                        placeholder="" 
-                        name="password"
-                        ngModel
-                        required
-                        [ngClass]="{'is-valid': signinForm.form.touched && signinForm.form.value['password'] != '' , 
+        <label for="floatingInput">Adresse email</label>
+      </div>
+      <div class="form-floating">
+        <input type="password" class="form-control" id="floatingPassword" placeholder="" name="password" ngModel
+          required [ngClass]="{'is-valid': signinForm.form.touched && signinForm.form.value['password'] != '' ,
                                     'is-invalid': signinForm.form.touched && signinForm.form.value['password'] == ''}">
-                <label for="floatingPassword">Mot de passe</label>
-            </div>
+        <label for="floatingPassword">Mot de passe</label>
+      </div>
 
-            <button class="w-100 btn btn-lg btn-success" 
-                    type="submit"
-                    [disabled]="signinForm.invalid">Se connecter</button>
-
-
-            <button class="w-100 btn btn-lg btn-success" 
-            routerLink="../creation-compte" routerLinkActive="active-custom"
-            >S'inscrire</button>
-
-        </form>
-
-        <div *ngIf="errorForm">
-            <p class="text-danger">Il manque des informations dans le formulaire...</p>
-        </div>
-    </main>
+      <button class="w-100 btn btn-lg btn-outline-success" type="submit" [disabled]="signinForm.invalid">Se
+        connecter</button>
+</div>
+
+      <button class="w-100 btn btn-lg btn-outline-success" routerLink="../creation-compte"
+        routerLinkActive="active-custom">S'inscrire</button>
+
+    </form>
+
+    <div *ngIf="errorForm">
+      <p class="text-danger">Il manque des informations dans le formulaire...</p>
+    </div>
+  </main>
 </div>

src/app/components/signin/signin.component.scss

@@ -1,31 +1,46 @@
 .signin-form {
   height: 100vh;
   padding-top: 40px;
-  background-color: #f5f5f5;
+  background-color: #fff;
 }
 
 .form-signin {
   width: 100%;
   max-width: 330px;
-  padding: 15px;
-  margin: auto;
-  .checkbox {
-    font-weight: 400;
-  }
-
-  .form-floating:focus-within {
-    z-index: 2;
-  }
-
-  input[type="email"] {
-    margin-bottom: -1px;
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  input[type="password"] {
-    margin-bottom: 10px;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
+  margin-top: 50px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.connexion {
+  border: solid 4px;
+  border-radius: 10px;
+  background-color: #ffff;
+  border-color: #5d5fef;
+}
+
+.form-floating:focus-within {
+  z-index: 2;
+}
+
+input[type="email"] {
+  margin-bottom: -1px;
+  margin-right: 50px;
+  padding-right: 10px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+input[type="password"] {
+  padding-right: 10px;
+  margin-bottom: 10px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.btn-outline-success {
+  margin-top: 10px;
+  margin-bottom: 5px;
+  background-color: #ffff;
+  color: #5d5fef !important;
+  border-color: #5d5fef !important;
 }

src/app/components/to-do-list/to-do-list.component.html

@@ -1 +1,72 @@
-<p>to-do-list works!</p>
+<input
+  type="text"
+  class="todo-input"
+  placeholder="Ajoute une nouvelle Tâche"
+  [(ngModel)]="todoTitle"
+  (keyup.enter)="addTitle()"
+/>
+
+<div class="element" *ngFor="let todo of todosFilter()">
+  <div class="element-gauche">
+    <input
+      type="checkbox"
+      [(ngModel)]="todo.completed"
+      (change)="doneEdit(todo)"
+    />
+    <div
+      *ngIf="!todo.editing; else editingTodo"
+      class="nomTache"
+      [ngClass]="{ completed: todo.completed }"
+      (dblclick)="modifier(todo)"
+    >
+      {{ todo.title }}
+    </div>
+    <ng-template #editingTodo>
+      <input
+        type="text"
+        class="modifier-element"
+        [(ngModel)]="todo.title"
+        (blur)="doneEdit(todo)"
+        (keyup.enter)="doneEdit(todo)"
+        (keyup.esc)="cancelEdit(todo)"
+        autofocus
+      />
+    </ng-template>
+  </div>
+  <div class="deleteTache" (click)="deleteTodo(todo.id)">&times;</div>
+</div>
+<div class="extra-container">
+  <div>
+    <label
+      ><input
+        type="checkbox"
+        (change)="cocherAllTodoList()"
+        [(ngModel)]="masterSelected"
+      />Selectionner toutes les tâches</label
+    >
+  </div>
+  <div>{{ toDoRest() }} tâches</div>
+</div>
+<div class="extra-container">
+  <div>
+    <button [ngClass]="{ active: filter === 'tous' }" (click)="filter = 'tous'">
+      Toutes la To Do List
+    </button>
+    <button
+      [ngClass]="{ active: filter === 'active' }"
+      (click)="filter = 'active'"
+    >
+      A Faire
+    </button>
+    <button
+      [ngClass]="{ active: filter === 'complete' }"
+      (click)="filter = 'complete'"
+    >
+      Terminées
+    </button>
+  </div>
+
+  <div>
+    <button (click)="effacerList()">Effacer la To Do List</button>
+  </div>
+</div>

src/app/components/to-do-list/to-do-list.component.scss

@@ -0,0 +1,86 @@
+.todo-input {
+  width: 100%;
+  padding: 10px 18px;
+  font-size: 18px;
+  margin-bottom: 16px;
+  &:focus {
+    outline: 0;
+  }
+}
+.element {
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  animation-duration: 0.3s;
+}
+
+.deleteTache {
+  cursor: pointer;
+  margin-left: 14px;
+  &:hover {
+    color: black;
+  }
+}
+
+.element-gauche { // later
+  display: flex;
+  align-items: center;
+}
+
+.nomTache{
+  padding: 10px;
+  border: 1px solid white;
+  margin-left: 12px;
+}
+
+.modifier-element {
+  font-size: 24px;
+  color: #2c3e50;
+  margin-left: 12px;
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ccc; //override defaults
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.completed {
+  text-decoration: line-through;
+  color: grey;
+}
+
+.extra-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 16px;
+  border-top: 1px solid lightgrey;
+  padding-top: 14px;
+  margin-bottom: 14px;
+}
+
+button {
+  font-size: 14px;
+  background-color: white;
+  appearance: none;
+
+  &:hover {
+    background: lightgreen;
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.active {
+  background: lightgreen;
+}
+.completed {
+  text-decoration: line-through;
+  color: grey;
+}

src/app/components/to-do-list/to-do-list.component.ts

@@ -1,15 +1,138 @@
 import { Component, OnInit } from '@angular/core';
+import { Todo } from 'src/app/interfaces/todo';
 
 @Component({
   selector: 'app-to-do-list',
   templateUrl: './to-do-list.component.html',
-  styleUrls: ['./to-do-list.component.scss']
+  styleUrls: ['./to-do-list.component.scss'],
 })
 export class ToDoListComponent implements OnInit {
+  public beforeEditCache: string;
+  public todos: Todo[];
+  public todoTitle: string;
+  public idTodo: number;
+  public filter : string;
+  public casesRestantes : boolean;
+  public masterSelected: boolean;
 
-  constructor() { }
-
-  ngOnInit(): void {
+  constructor() {
+    this.beforeEditCache = '';
+    this.todos = [];
+    this.todoTitle = '';
+    this.idTodo = 0;
+    this.filter ='';
+    this.casesRestantes=true;
+    this.masterSelected= false;
   }
 
-}
+  ngOnInit(): void {
+    this.beforeEditCache = '';
+    this.casesRestantes=true;
+    this.filter='tous';
+    this.idTodo = 4;
+    this.todoTitle = '';
+    this.todos = [
+      {
+        id: 1,
+        title: 'Finish Angular Screencast',
+        completed: false,
+        editing: false,
+      },
+      {
+        id: 2,
+        title: 'Take over world',
+        completed: false,
+        editing: false,
+      },
+      {
+        id: 3,
+        title: 'One more thing',
+        completed: false,
+        editing: false,
+      },
+    ];
+  }
+  //ajouter tache
+  addTitle(): void {
+    if (this.todoTitle.trim().length === 0) {
+      return;
+    }
+
+    this.todos.push({
+      id: this.idTodo,
+      title: this.todoTitle,
+      completed: false,
+      editing: false,
+    });
+    this.todoTitle = '';
+    this.idTodo++;
+  }
+
+  //modifier la tâche
+  modifier(todo: Todo): void {
+    this.beforeEditCache = todo.title;
+    todo.editing = true;
+  }
+
+  // modifier l'apparence focus
+  doneEdit(todo: Todo): void {
+    if (todo.title.trim().length === 0) {
+      todo.title = this.beforeEditCache;
+    }
+    this.casesRestantes= this.casesQuiRestes();
+    todo.editing = false;
+  }
+
+  // annuler la modification
+  cancelEdit(todo: Todo): void {
+    todo.title = this.beforeEditCache;
+    todo.editing = false;
+  }
+
+  //supprimer la tache
+  deleteTodo(id: number): void {
+    this.todos = this.todos.filter((todo) => todo.id !== id);
+  }
+
+  //nombre de tâches restantes
+  toDoRest(): number{
+    return this.todos.filter(todo=> !todo.completed).length;
+  }
+
+  //Cocher toutes les tâches de la liste
+  listComplete(): boolean {
+    return this.todos.filter(todo=> todo.completed).length>0;
+  }
+
+  //Effacer la to do list
+
+  effacerList(): void {
+    this.todos = [];
+  }
+
+  //cocher toutes les cases de la todoList
+  cocherAllTodoList(): void {
+    for (var i = 0; i < this.todos.length; i++) {
+      this.todos[i].completed = this.masterSelected;
+    }
+    this.cocherAllTodoList();
+  }
+
+  casesQuiRestes(): boolean {
+    return this.toDoRest() !== 0;
+  }
+
+  //barre de filtre des tâches
+  todosFilter(): Todo[] {
+    if(this.filter === 'tous'){
+      return this.todos
+    }else if (this.filter === 'active'){
+      return this.todos.filter(todo=> !todo.completed)
+    }else if (this.filter === 'complete'){
+      return this.todos.filter(todo=>todo.completed)
+    }
+    return this.todos
+    }
+  }
+
+