diff --git a/angular.json b/angular.json
index 1c7e6d6..5ca3921 100644
--- a/angular.json
+++ b/angular.json
@@ -1,5 +1,8 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+ "cli": {
+ "analytics": "aae75a62-72c7-4c0c-a21b-f3c2140272bd"
+ },
"version": 1,
"newProjectRoot": "projects",
"projects": {
diff --git a/src/app/local-storage.service.ts b/src/app/local-storage.service.ts
index 204c7fc..8245260 100644
--- a/src/app/local-storage.service.ts
+++ b/src/app/local-storage.service.ts
@@ -5,8 +5,38 @@ import { Injectable } from '@angular/core';
})
export class LocalStorageService {
// https://developer.mozilla.org/es/docs/Web/API/Window/localStorage
+
+ lsArray = []; //localStorageArray
+
constructor() { }
getName() {
return 'LocalStorageService'
}
+ setItem(key:string, value:string){
+ localStorage.setItem(key,value);
+ }
+ getItem(key: string){
+ localStorage.getItem(key);
+ }
+ removeItem(key) {
+ localStorage.removeItem(key);
+ }
+ clear(){
+ localStorage.clear();
+ }
+ getLocalStorage(){ //esta bien este metodo??
+
+ if (localStorage.length === 0){
+ console.log("local storage esta vacio");
+ }
+ else{
+ console.log(`localStorage tiene ${localStorage.length} elementos`);
+ for (let i = 0; i < localStorage.length; i++) {
+ this.lsArray[i] = JSON.parse(localStorage[i]);
+ console.log(this.lsArray[i]);
+ }
+ }
+ return this.lsArray;
+ }
+
}
diff --git a/src/app/stats/stats.component.html b/src/app/stats/stats.component.html
index b599e29..843fe17 100644
--- a/src/app/stats/stats.component.html
+++ b/src/app/stats/stats.component.html
@@ -3,4 +3,5 @@
[ngStyle]="{width: completedPercentage() + '%'}"
>
{{completedPercentage()}} %
+
diff --git a/src/app/stats/stats.component.ts b/src/app/stats/stats.component.ts
index 1ec80aa..0406f45 100644
--- a/src/app/stats/stats.component.ts
+++ b/src/app/stats/stats.component.ts
@@ -15,6 +15,6 @@ export class StatsComponent implements OnInit {
ngOnInit(): void {
}
completedPercentage() {
- return Math.round(this.service.completedSize() / this.service.list.length * 100) || 0
+ return Math.round(this.service.lsCompletedSize() / this.service.getAll().length * 100) || 0
}
}
diff --git a/src/app/todo-app/todo-app.component.html b/src/app/todo-app/todo-app.component.html
index 786cc57..557c1ba 100644
--- a/src/app/todo-app/todo-app.component.html
+++ b/src/app/todo-app/todo-app.component.html
@@ -1,12 +1,10 @@
-
+
-
\ No newline at end of file
+
diff --git a/src/app/todo-app/todo-app.component.ts b/src/app/todo-app/todo-app.component.ts
index cc42271..17f49c2 100644
--- a/src/app/todo-app/todo-app.component.ts
+++ b/src/app/todo-app/todo-app.component.ts
@@ -14,16 +14,17 @@ export class TodoAppComponent {
private service: TodoService
) {}
- getList() {
- return this.service.list;
+ getLocalStorageList(){
+ return this.service.getAll();
}
- onTodoItemRemoved(id) {
- this.service.remove(id);
+ lsOnTodoItemRemoved(id) {
+ this.service.lsRemove(id);
}
- onItemStateChanged(item: TodoItem) {
- item.toggleCompleted();
+ lsOnItemStateChanged(task: TodoItem){
+ task.isCompleted = !task.isCompleted;
+ this.service.lsOnItemStateChanged(task);
}
onTodoItemCreated(task) {
- this.service.add(task)
+ this.service.add(task);
}
}
diff --git a/src/app/todo-footer/todo-footer.component.html b/src/app/todo-footer/todo-footer.component.html
index a0f7423..ed01bb4 100644
--- a/src/app/todo-footer/todo-footer.component.html
+++ b/src/app/todo-footer/todo-footer.component.html
@@ -1,2 +1,2 @@
-Tasks Completed {{completedSize()}}
-Tasks To do {{incompletedSize()}}
+Tasks Completed localStorage --> {{lsCompletedSize()}}
+Tasks To do localStorage --> {{lsIncompletedSize()}}
\ No newline at end of file
diff --git a/src/app/todo-footer/todo-footer.component.ts b/src/app/todo-footer/todo-footer.component.ts
index 6e1af04..fc16b22 100644
--- a/src/app/todo-footer/todo-footer.component.ts
+++ b/src/app/todo-footer/todo-footer.component.ts
@@ -18,13 +18,18 @@ export class TodoFooterComponent implements OnInit {
ngOnInit() {
}
- incompletedSize() {
- this.countTodo = this.service.incompletedSize()
- return this.countTodo;
+ lsIncompletedSize(){
+ let inc = this.service.lsIncompletedSize()
+ return inc;
}
- completedSize() {
- this.countCompleted =this.service.completedSize()
- return this.countCompleted;
+ lsCompletedSize(){
+ let inc = this.service.lsCompletedSize()
+ return inc;
+ }
+
+
+ setItem(key:string, value:string){
+ this.service.setItem(key,value);
}
}
diff --git a/src/app/todo-form/todo-form.component.html b/src/app/todo-form/todo-form.component.html
index ec0ad47..0e04de8 100644
--- a/src/app/todo-form/todo-form.component.html
+++ b/src/app/todo-form/todo-form.component.html
@@ -4,7 +4,7 @@
diff --git a/src/app/todo-list/todo-list.component.html b/src/app/todo-list/todo-list.component.html
index 127ec76..e910ed6 100644
--- a/src/app/todo-list/todo-list.component.html
+++ b/src/app/todo-list/todo-list.component.html
@@ -1,11 +1,14 @@
-
+LISTA EN localStorage
+
-
{{task.description}}
-
-
+
+
+
+
diff --git a/src/app/todo-list/todo-list.component.ts b/src/app/todo-list/todo-list.component.ts
index fc5d8f0..d51828b 100644
--- a/src/app/todo-list/todo-list.component.ts
+++ b/src/app/todo-list/todo-list.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, OnChanges } from '@angular/core';
import { TodoItem } from '../model/todo-item';
@Component({
@@ -6,21 +6,17 @@ import { TodoItem } from '../model/todo-item';
templateUrl: './todo-list.component.html',
styleUrls: ['./todo-list.component.scss']
})
-export class TodoListComponent implements OnInit {
- @Input() list: any[];
- @Output() itemRemoved = new EventEmitter();
- @Output() itemStateChanged = new EventEmitter();
- constructor() { }
+export class TodoListComponent{
+ array = [];
+ @Input() lsList: any[];
+ @Output() lsItemRemoved = new EventEmitter();
+ @Output() lsItemChanged = new EventEmitter();
- ngOnInit() {
+ lsRemoveItem(id){
+ this.lsItemRemoved.emit(id);
}
- removeItem(id) {
- this.itemRemoved.emit(id);
- }
-
- completeTask(item:TodoItem) {
- this.itemStateChanged.emit(item);
-
+ lsCompleteTask(task: TodoItem){
+ this.lsItemChanged.emit(task);
}
}
\ No newline at end of file
diff --git a/src/app/todo.service.ts b/src/app/todo.service.ts
index 9bba8cc..b2f38d4 100644
--- a/src/app/todo.service.ts
+++ b/src/app/todo.service.ts
@@ -6,7 +6,6 @@ import { LocalStorageService } from './local-storage.service';
})
export class TodoService {
- list = [];
lastItemId = 0;
constructor(private storage: LocalStorageService) { }
@@ -14,24 +13,32 @@ export class TodoService {
add(task) {
const id = this.lastItemId;
task.id = id;
- this.list.push(task);
- this.lastItemId += 10;
- }
- remove(id) {
- const index = this.list.findIndex((element) => element.id === id);
- this.list.splice(index, 1);
+ //CARGO localStorage
+ this.setItem(task.id,JSON.stringify(task));
+
+ this.lastItemId += 1;
}
- incompletedSize() {
- return this.list.filter(item => !item.isCompleted).length;
-
+ lsRemove(id){
+ this.storage.removeItem(id);
+ }
+
+ lsIncompletedSize(){
+ return this.getAll().filter(task => !task.isCompleted).length;
}
- completedSize() {
- return this.list.filter(item => item.isCompleted).length ;
+ lsCompletedSize(){
+ return this.getAll().filter(task => task.isCompleted).length;
}
- getName() {
- return 'TodoService 123' + this.storage.getName();
+ setItem(key:string, value:string){
+ this.storage.setItem(key,value);
+ }
+ getAll(){
+ return this.storage.getLocalStorage();
+ }
+ lsOnItemStateChanged(task){
+ this.setItem(task.id,JSON.stringify(task));
+
}
}