import { io , Socket } from "socket.io-client" ; export class Todo { completed : boolean ; editing : boolean ; private _title : String = "" ; get title ( ) { return this . _title ; } set title ( value ) { this . _title = value . trim ( ) ; } constructor ( title ) { this . completed = false ; this . editing = false ; this . title = title . trim ( ) ; } } export class TodoStore { todos : Array < Todo > ; constructor ( ) { let persistedTodos = JSON . parse ( localStorage . getItem ( 'angular2-todos' ) || '[]' ) ; this . todos = persistedTodos . map ( ( todo ) => { let ret = new Todo ( todo . _title ) ; ret . completed = todo . completed ; return ret ; } ) ; } protected updateStore ( ) { localStorage . setItem ( 'angular2-todos' , JSON . stringify ( this . todos ) ) ; } private getWithCompleted ( completed ) { return this . todos . filter ( ( todo ) => todo . completed === completed ) ; } allCompleted ( ) { return this . todos . length === this . getCompleted ( ) . length ; } setAllTo ( completed ) { this . todos . forEach ( ( t ) => t . completed = completed ) ; this . updateStore ( ) ; } removeCompleted ( ) { this . todos = this . getWithCompleted ( false ) ; this . updateStore ( ) ; } getRemaining ( ) { return this . getWithCompleted ( false ) ; } getCompleted ( ) { return this . getWithCompleted ( true ) ; } toggleCompletion ( todo ) { todo . completed = ! todo . completed ; this . updateStore ( ) ; } remove ( todo ) { this . todos . splice ( this . todos . indexOf ( todo ) , 1 ) ; this . updateStore ( ) ; } add ( title ) { this . todos . push ( new Todo ( title ) ) ; this . updateStore ( ) ; } } export class RemoteTodoStore extends TodoStore { private socket : Socket ; constructor ( ) { super ( ) ; this . socket = io ( "http://localhost:8080" ) ; this . socket . on ( "todos" , ( updatedTodos ) => { this . todos = updatedTodos ; } ) ; } protected updateStore ( ) { this . socket . emit ( "update-store" , this . todos . map ( ( { title , editing , completed } ) => ( { title , editing , completed } ) ) ) ; } }