isa44.74/organizee-front
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

removed merge conflicts

Browse source
This commit is contained in:
Sana EL HIRI 2022-02-09 17:55:44 +01:00
commit ae1fc13951
45 changed files with 1705 additions and 1801 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/app/pages/page-accueil/page-accueil.component.html
View file

@ -1,2 +1,22 @@
<app-header></app-header>
<app-signin></app-signin>
<body>
<div class="bienvenue">
<h2 class="titre">BIENVENUE</h2>
<p>
Notre service vous offre des outils et des fonctionnalités pour vous aider à gérer la charge mentale de votre foyer.
<p>Réunis à un seul endroit pour toute la famille, vous pourrez faire des suggestions de menus, gérer un répertoire de
contacts utiles et établir des to-dot-list communes.</p>
<p>Plus de conflit, plus d’excuse de pas avoir su ou de ne pas avoir
lu, nous sommes là pour vous aider !</p>
</div>
<div class="connexion">
<app-signin></app-signin>
</div>
<div class="pub">
<img src="../../../assets/images/menu.png" />
<img src="../../../assets/images/repertoire.png" />
<img src="../../../assets/images/todo.png" />
</div>
</body>

39
src/app/pages/page-accueil/page-accueil.component.scss
View file

@ -0,0 +1,39 @@
.bienvenue {
float: left;
display: inline;
border: 4px solid #5d5fef;
border-radius: 10px;
margin-top: 50px;
margin-left: 200px;
padding-right: 10px;
padding-left: 10px;
}
.titre {
text-align: center;
}
p {
font-size: 1em;
line-height: 2em;
}
.connexion {
float: right;
display: inline;
margin-top: -40px;
margin-right: 200px;
}
.pub {
padding-top: 100px;
padding-right: 100px;
padding-left: 200px;
display: flex;
justify-content: space-between;
}
img {
border: 1px solid #d3d3d3;
border-radius: 10px;
box-shadow: 6px 6px #d3d3d3;
}

22
src/app/pages/page-add-member/page-add-member.component.html
View file

@ -5,6 +5,11 @@
<form (ngSubmit)="onSubmit()" [formGroup]="addMemberForm">
<h1>J'inscris un nouveau membre</h1>
<div class="form-floating">
<input type="color" class="form-control" id="floatingInputcouleur" placeholder="" name="couleur"
formControlName="couleurFc">
<label for="floatingInputcouleur">Choisissez une couleur !</label>
</div>
<!-- <div class="form-floating">
<input type="text"
class="form-control"
id="floatingInputlastName"
@ -14,7 +19,7 @@
[ngClass]="{'is-valid' : addMemberForm.controls['lastNameFc'].touched && addMemberForm.controls['lastNameFc'].valid,
'is-invalid': addMemberForm.controls['lastNameFc'].touched && !addMemberForm.controls['lastNameFc'].valid}">
<label for="floatingInputlastName">Avatar</label>
</div>
</div> -->
<div class="form-floating">
<input type="text"
class="form-control"
@ -48,20 +53,7 @@
'is-invalid': addMemberForm.controls['dateNaissanceFc'].touched && !addMemberForm.controls['dateNaissanceFc'].valid}">
<label for="floatingInputfirstName">Date de naissance</label>
</div>
<div class="form-floating">
<select type="text"
class="form-control"
id="floatingInputprofil"
name="profil"
formControlName="profilFc"
[ngClass]="{'is-valid' : addMemberForm.controls['profilFc'].touched && addMemberForm.controls['profilFc'].valid,
'is-invalid': addMemberForm.controls['profilFc'].touched && !addMemberForm.controls['profilFc'].valid}">
<option>Adulte</option>
<option>Enfant</option>
</select>
<label for="floatingInputfirstName">Profil</label>
</div>
<div class="form-floating">
<div class="form-floating">
<input type="email"
class="form-control"
id="floatingInput"

8
src/app/pages/page-add-member/page-add-member.component.ts
View file

@ -27,7 +27,7 @@ export class PageAddMemberComponent implements OnInit {
firstNameFc: new FormControl('', [Validators.required]),
lastNameFc: new FormControl('', [Validators.required]),
dateNaissanceFc: new FormControl('', [Validators.required]),
profilFc: new FormControl('', [Validators.required]),
couleurFc: new FormControl('', [Validators.required]),
emailFc: new FormControl('', [
Validators.email,
Validators.required,
@ -56,16 +56,16 @@ export class PageAddMemberComponent implements OnInit {
const emailValue = this.addMemberForm.value['emailFc'];
const passwordValue = this.addMemberForm.value['passwordFc'];
const dateNaissanceValue = this.addMemberForm.value['dateNaissanceFc'];
const teamNameValue = this.addMemberForm.value['teamNameFc'];
const profilValue = this.addMemberForm.value['profilFc'];
const couleurValue = this.addMemberForm.value['couleurFc'];
const passwordConfirmValue = this.addMemberForm.value['passwordConfirmFc'];
const teamValue = [''];
const membre: Membre = {
nom: firstNameValue,
prenom: lastNameValue,
email: emailValue,
password: passwordValue,
couleur: couleurValue,
dateNaissance: dateNaissanceValue,
passwordConfirm: passwordConfirmValue,
roleList: ["ROLE_PARENT"]

2
src/app/pages/page-ajout-contact/page-ajout-contact.component.html
View file

@ -73,7 +73,7 @@
<label for="floatingInputfirstName">Adresse</label>
</div>
<button class="w-100 btn btn-lg btn-success"
<button class="w-100 btn btn-lg btn-secondary"
type="submit"
[disabled]="ajoutContactForm.invalid">Valider</button>

5
src/app/pages/page-ajout-contact/page-ajout-contact.component.scss
View file

@ -24,3 +24,8 @@
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.btn-secondary {
color: #fff;
background-color: #5a1e63 !important;
}

4
src/app/pages/page-ajout-contact/page-ajout-contact.component.ts
View file

@ -26,7 +26,7 @@ export class PageAjoutContactComponent implements OnInit {
}
ngOnInit(): void {
// *********************************pensser a changer group car déprécié********************************
// *********************************pensser à changer group car déprécié********************************
this.ajoutContactForm = this.fb.group({
lastNameFc: new FormControl('', [Validators.required]),
firstNameFc: new FormControl('', [Validators.required]),
@ -52,12 +52,14 @@ export class PageAjoutContactComponent implements OnInit {
const adresseValue = this.ajoutContactForm.value['adresseFc'];
const contact: Contact = {
id: '',
nom: lastNameValue,
prenom: firstNameValue,
telephone: telephoneValue,
email: emailValue,
dateNaissance: dateNaissanceValue,
adresse: adresseValue,
team: { id: '1' }, // changer l'id quand la personne est logé => recuperer l'id de la team du membre
};
if (contact.nom !== '') {

4
src/app/pages/page-dashboard/page-dashboard.component.html
View file

@ -1,2 +1,4 @@
<app-header></app-header>
<app-side-bar></app-side-bar>
<app-side-bar></app-side-bar>
<app-meteo></app-meteo>

84
src/app/pages/page-modifier-contact/page-modifier-contact.component.html
View file

@ -1 +1,83 @@
<p>page-modifier-contact works!</p>
<div>
<app-header></app-header>
<app-side-bar></app-side-bar>
</div>
<div class="modifContact-form text-center">
<main class="form-modifContact">
<form (ngSubmit)="onSubmit()" [formGroup]="modifContactForm">
<h1>Modifier ce contact</h1>
<div class="form-floating">
<input type="text"
class="form-control"
id="floatingInputlastName"
placeholder=""
name="lastName"
formControlName="lastNameFc" value= "{{ listContactInfo.nom }}">
<label for="floatingInputlastName">Nom</label>
</div>
<div class="form-floating">
<input type="text"
class="form-control"
id="floatingInputfirstName"
placeholder=""
name="firstName"
formControlName="firstNameFc" value= "{{ listContactInfo.prenom }}">
<label for="floatingInputfirstName">Prénom</label>
</div>
<div class="form-floating">
<input type="text"
class="form-control"
id="floatingInputTelephone"
placeholder=""
name="telephone"
formControlName="telephoneFc" value= "{{ listContactInfo.telephone }}">
<label for="floatingInputfirstName">Téléphone</label>
</div>
<div class="form-floating">
<input type="email"
class="form-control"
id="floatingInput"
placeholder=""
name="email"
formControlName="emailFc" value= "{{ listContactInfo.email }}">
<label for="floatingInput">Adresse email</label>
</div>
<div class="form-floating">
<input type="date"
class="form-control"
id="floatingInputdateNaissance"
placeholder=""
name="dateNaissance"
formControlName="dateNaissanceFc" value= "{{ listContactInfo.dateNaissance }}">
<label for="floatingInputfirstName">Date de naissance</label>
</div>
<div class="form-floating">
<input type="text"
class="form-control"
id="floatingInputAdresse"
placeholder=""
name="adresse"
formControlName="adresseFc" value= "{{ listContactInfo.adresse }}">
<label for="floatingInputfirstName">Adresse</label>
</div>
<button class="w-100 btn btn-lg btn-secondary"
type="submit"
[disabled]="modifContactForm.invalid">Valider</button>
</form>
</main>
</div>

31
src/app/pages/page-modifier-contact/page-modifier-contact.component.scss
View file

@ -0,0 +1,31 @@
.login-form {
height: 100vh;
padding-top: 40px;
background-color: #f5f5f5;
}
.form-modifContact {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-modifContact .checkbox {
font-weight: 400;
}
.form-modifContact .form-floating:focus-within {
z-index: 2;
}
.form-modifContact input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.btn-secondary {
color: #fff;
background-color: #5a1e63 !important;
}

91
src/app/pages/page-modifier-contact/page-modifier-contact.component.ts
View file

@ -1,15 +1,98 @@
import { Component, OnInit } from '@angular/core';
import {
FormBuilder,
FormControl,
FormGroup,
Validators,
} from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { Contact } from '../../models/contact';
import { RepertoireService } from '../../services/repertoire.service';
@Component({
selector: 'app-page-modifier-contact',
templateUrl: './page-modifier-contact.component.html',
styleUrls: ['./page-modifier-contact.component.scss']
styleUrls: ['./page-modifier-contact.component.scss'],
})
export class PageModifierContactComponent implements OnInit {
public modifContactForm: FormGroup;
public contactInfo: FormGroup;
public listContactInfo: any;
public personneid: any;
constructor() { }
ngOnInit(): void {
constructor(
private repertoireService: RepertoireService,
private router: Router,
private fb: FormBuilder,
private route: ActivatedRoute
) {
this.modifContactForm = new FormGroup({});
this.contactInfo = this.initForm();
this.listContactInfo = '';
}
ngOnInit(): void {
this.personneid = this.route.snapshot.paramMap.get('id'); // récupère l'id du contact à modifier
console.log(this.personneid);
this.repertoireService
.getContactById(this.personneid)
.subscribe((listContactInfo: any) => {
console.log(listContactInfo);
this.listContactInfo = listContactInfo;
});
// *********************************pensser à changer group car déprécié********************************
this.modifContactForm = this.fb.group({
lastNameFc: new FormControl('', [Validators.required]),
firstNameFc: new FormControl('', [Validators.required]),
telephoneFc: new FormControl('', [Validators.required]),
emailFc: new FormControl('', [
Validators.email,
Validators.required,
Validators.pattern(/^([\w\.\-_]+)?\w+@[\w-_]+(\.\w+){1,}/gim),
]), // chercher une meilleure regex
dateNaissanceFc: new FormControl('', [Validators.required]),
adresseFc: new FormControl('', [Validators.required]),
});
}
//Méthode qui initialise les champs du formulaire avec les infos de la BDD
private initForm(contact?: Contact): FormGroup {
return this.fb.group({
firstName: [contact ? contact.nom : ''],
lastName: [contact ? contact.prenom : ''],
telephone: [contact ? contact.telephone : ''],
email: [contact ? contact.email : ''],
dateNaissance: [contact ? contact.dateNaissance : ''],
adresse: [contact ? contact.adresse : ''],
});
}
//Méthode qui envoie les champs modifiés pour mise à jour
public onSubmit(): void {
console.log('value : ', this.modifContactForm.value);
console.log('form : ', this.modifContactForm);
const firstNameValue = this.modifContactForm.value['firstNameFc'];
const lastNameValue = this.modifContactForm.value['lastNameFc'];
const telephoneValue = this.modifContactForm.value['telephoneFc'];
const emailValue = this.modifContactForm.value['emailFc'];
const dateNaissanceValue = this.modifContactForm.value['dateNaissanceFc'];
const adresseValue = this.modifContactForm.value['adresseFc'];
const contact: Contact = {
id: this.personneid,
nom: lastNameValue,
prenom: firstNameValue,
telephone: telephoneValue,
email: emailValue,
dateNaissance: dateNaissanceValue,
adresse: adresseValue,
team: { id: this.listContactInfo.team.id },
};
this.repertoireService.updateContact(contact).subscribe((resp) => {
this.router.navigate(['repertoire/']);
});
}
}

4
src/app/pages/page-not-found/page-not-found.component.html
View file

@ -1,11 +1,11 @@
<app-header></app-header>
<div>
<p> Page introuvable</p>
<a routerLink="" routerLinkActive="!active"><br><br>
Je retourne à l'accueil<br><br><br><br><br><br><br><br><br><br><br><br></a>
</div>

29
src/app/pages/page-not-found/page-not-found.component.scss
View file

@ -1,22 +1,25 @@
a.hover {
color :rgb(219, 200, 28)
color: rgb(219, 200, 28);
}
a {
color: rgb(32, 114, 45);
color: rgb(32, 114, 45);
}
div {
text-align: center;
font-weight: bold;
div {
text-align: center;
font-weight: bold;
// si on préfère une image en fond
// background-image: url("../../../assets/images/404.jpg");
// background-size: cover;
background-image: linear-gradient(to left top, #051937, #004d7a, #008793, #e2ebe7, #f8faf5);
// si on préfère une image en fond
// background-image: url("../../../assets/images/404.jpg");
// background-size: cover;
background-image: linear-gradient(
to left top,
#051937,
#004d7a,
#008793,
#e2ebe7,
#f8faf5
);
}

27
src/app/pages/page-repertoire/page-repertoire.component.ts
View file

@ -1,4 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Contact } from 'src/app/models/contact';
import { RepertoireService } from 'src/app/services/repertoire.service';
@Component({
@ -9,20 +11,38 @@ import { RepertoireService } from 'src/app/services/repertoire.service';
export class PageRepertoireComponent implements OnInit {
public listContact: any[];
public listFull: any[];
public listContactInfo: any;
public personneid: any;
keyword: any;
openDetails: any;
constructor(private repertoireService: RepertoireService) {
constructor(
private repertoireService: RepertoireService,
private router: Router,
private route: ActivatedRoute
) {
this.listContact = [];
this.listFull = [];
this.listContactInfo = '';
}
ngOnInit(): void {
//récupère tout les contact et leurs info
this.repertoireService.getContact().subscribe((listContact: any[]) => {
console.log(listContact);
this.listContact = listContact;
this.listFull = listContact;
});
this.personneid = this.route.snapshot.paramMap.get('id');
console.log(this.personneid);
this.repertoireService
.getContactById(this.personneid)
.subscribe((listContactInfo: any) => {
console.log(listContactInfo);
this.listContactInfo = listContactInfo;
});
}
// Méthode pour récuper ce qui est saisi dans l'input
@ -43,8 +63,13 @@ export class PageRepertoireComponent implements OnInit {
this.listContact = prenom;
}
// Méthode qui au click va ouvrir les détails d'un contat
onClick(personne: any) {
console.log(personne);
this.openDetails = personne;
}
// this.repertoireService.deleteContact(contact).subscribe((resp) => {
// this.router.navigate(['repertoire/']);
// });
}

9
src/app/pages/page-reset-password/page-reset-password.component.html
View file

@ -1,7 +1,8 @@
<app-header></app-header>
<div class="signin-form text-center">
<main class="form-signin">
<div class="reset-form text-center">
<main class="form-reset">
<form (ngSubmit)="onSubmit(resetForm)" #resetForm="ngForm">
<h3>Entrez ici votre email et votre nouveau mot de passe</h3>
<div class="form-floating">
<input type="email" class="form-control" id="floatingEmail" placeholder="" name="email" ngModel required
[ngClass]="{'is-valid': resetForm.form.touched && resetForm.form.value['email'] != '' ,
@ -14,9 +15,7 @@
'is-invalid': resetForm.form.touched && resetForm.form.value['password'] == ''}">
<label for="floatingPassword">Mot de passe</label>
</div>
<button class="w-100 btn btn-lg btn-success" type="submit" [disabled]="resetForm.invalid">Se connecter</button>
<button class="w-100 btn btn-outline-success" type="submit" [disabled]="resetForm.invalid">Enregistrer</button>
</form>

42
src/app/pages/page-reset-password/page-reset-password.component.scss
View file

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

24
src/app/pages/page-reset-password/page-reset-password.component.ts
View file

@ -1,4 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from 'src/app/services/auth.service';
@Component({
selector: 'app-page-reset-password',
@ -6,21 +9,20 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./page-reset-password.component.scss']
})
export class PageResetPasswordComponent implements OnInit {
authService: any;
router: any;
constructor() { }
constructor(private authService: AuthService, private router: Router,) { }
ngOnInit(): void {}
ngOnInit(): void { }
public onSubmit(submittedForm: any): void {
console.log(submittedForm.form.value);
const password = submittedForm.form.value['password'];
const email = submittedForm.form.value['email'];
console.log(email);
this.authService.resetPassword(email, password).subscribe((resp: any) => {
this.router.navigate(['tableau-de-bord']);
const password = submittedForm.form.value['password'];
const email = submittedForm.form.value['email'];
console.log(email);
this.authService.resetPassword(email, password).subscribe((resp: any) => {
window.alert("Votre mot de passe est bien ré-initialisé !")
this.router.navigate(['accueil']);
});
}
});
}
}

27
src/app/pages/page-signup/page-signup.component.html
View file

@ -1,8 +1,13 @@
<app-header></app-header>
<div class="signup-form text-center">
<h1>Inscrivez-vous !</h1>
<main class="form-signup">
<form (ngSubmit)="onSubmit()" [formGroup]="signupForm">
<h1>Inscrivez-vous !</h1>
<div class="form-floating">
<input type="color" class="form-control" id="floatingInputcouleur" placeholder="" name="couleur"
formControlName="couleurFc">
</div>
<div class="form-floating">
<input
type="text"
@ -20,7 +25,7 @@
!signupForm.controls['lastNameFc'].valid
}"
/>
<label for="floatingInputlastName">Nom</label>
<label for="floatingInputlastName">VOTRE NOM</label>
</div>
<div class="form-floating">
<input
@ -39,7 +44,7 @@
!signupForm.controls['firstNameFc'].valid
}"
/>
<label for="floatingInputfirstName">Prénom</label>
<label for="floatingInputfirstName">VOTRE PRENOM</label>
</div>
<div class="form-floating">
<input
@ -58,13 +63,13 @@
!signupForm.controls['dateNaissanceFc'].valid
}"
/>
<label for="floatingInputfirstName">Date de naissance</label>
<label for="floatingInputdateNaissance">VOTRE DATE DE NAISSANCE</label>
</div>
<div class="form-floating">
<input
type="email"
class="form-control"
id="floatingInput"
id="floatingInputemail"
placeholder=""
name="email"
formControlName="emailFc"
@ -77,7 +82,7 @@
!signupForm.controls['emailFc'].valid
}"
/>
<label for="floatingInput">Adresse email</label>
<label for="floatingInputemail">VOTRE EMAIL</label>
</div>
<div class="form-floating">
<input
@ -96,11 +101,11 @@
!signupForm.controls['passwordFc'].valid
}"
/>
<label for="floatingPassword">Mot de passe</label>
<label for="floatingPassword">MOT DE PASSE</label>
</div>
<div class="form-floating">
<input
type="passwordConfirm"
type="password"
class="form-control"
id="floatingpasswordConfirm"
placeholder=""
@ -115,15 +120,15 @@
!signupForm.controls['passwordConfirmFc'].valid
}"
/>
<label for="floatingPassword">Confirmer mot de passe</label>
<label for="floatingPasswordConfirm">CONFIRMEZ VOTRE MOT DE PASSE</label>
</div>
<button
class="w-100 btn btn-lg btn-success"
class="w-100 btn btn-lg btn-outline-success"
type="submit"
[disabled]="signupForm.invalid"
>
Je m'inscris !
CREER MON COMPTE
</button>
</form>
</main>

47
src/app/pages/page-signup/page-signup.component.scss
View file

@ -8,7 +8,13 @@
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
border: solid 1px;
border-radius: 10px;
background-color: #fcddec;
border-color: #ef5da8;
}
.form-signup .checkbox {
@ -20,7 +26,37 @@
}
.form-signup input[type="email"] {
margin-bottom: -1px;
margin-bottom: 10px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signup input[type="color"] {
border: none;
margin-bottom: 10px;
margin-top: -70px;
margin-left: 100px;
border-radius: 50%;
width: 100px;
height: 100px;
}
.form-signup input[type="color"]::-webkit-color-swatch {
border: none;
margin-top: -15px;
border-radius: 80%;
width: 80px;
height: 80px;
}
.form-signup input[type="text"] {
margin-bottom: 10px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signup input[type="date"] {
margin-bottom: 10px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
@ -30,3 +66,10 @@
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.btn-outline-success {
margin-top: 10px;
background-color: #ffff;
color: #ef5da8 !important;
border-color: #ef5da8 !important;
}

3
src/app/pages/page-signup/page-signup.component.ts
View file

@ -32,6 +32,7 @@ export class PageSignupComponent implements OnInit {
lastNameFc: new FormControl('', [Validators.required]),
dateNaissanceFc: new FormControl('', [Validators.required]),
roleFc: new FormControl(''),
couleurFc: new FormControl('', Validators.required),
emailFc: new FormControl('', [
Validators.email,
Validators.required,
@ -61,6 +62,7 @@ export class PageSignupComponent implements OnInit {
const passwordValue = this.signupForm.value['passwordFc'];
const dateNaissanceValue = this.signupForm.value['dateNaissanceFc'];
const passwordConfirmValue = this.signupForm.value['passwordConfirmFc'];
const couleurValue = this.signupForm.value['couleurFc'];
const roleValue = ['ROLE_PARENT'];
const membre: Membre = {
@ -68,6 +70,7 @@ export class PageSignupComponent implements OnInit {
prenom: prenomValue,
email: emailValue,
password: passwordValue,
couleur: couleurValue,
dateNaissance: dateNaissanceValue,
passwordConfirm: passwordConfirmValue,
roleList: roleValue,

5
src/app/pages/page-to-do-list/page-to-do-list.component.html
View file

@ -1,2 +1,5 @@
<app-header></app-header>
<app-side-bar></app-side-bar>
<app-side-bar></app-side-bar>
<div class="container">
<app-to-do-list></app-to-do-list>
</div>