1 | import { Injectable } from '@angular/core';
|
2 | import { PipeTransform, Pipe } from '@angular/core';
|
3 | import { Directive, HostBinding, HostListener, Input } from '@angular/core';
|
4 | import { Component, OnInit } from '@angular/core';
|
5 | import { NgModule } from '@angular/core';
|
6 |
|
7 | import { Todo } from './app/shared/models/todo.model';
|
8 |
|
9 | import { LabelledTodo } from './app/shared/interfaces/interfaces';
|
10 |
|
11 | namespace BSBO {
|
12 | export namespace Events {
|
13 | /**
|
14 | * A time interface just for documentation purpose
|
15 | */
|
16 | export interface TimeInterface2 {
|
17 | /**
|
18 | * The zone
|
19 | */
|
20 | zone: string;
|
21 | }
|
22 |
|
23 | /**
|
24 | * The todo class
|
25 | *
|
26 | * See {@link TodoStore} for service using it
|
27 | */
|
28 | export class Todo2 {
|
29 | /**
|
30 | * Completed status
|
31 | */
|
32 | completed: boolean;
|
33 | /**
|
34 | * Editing status
|
35 | */
|
36 | editing: boolean;
|
37 |
|
38 | /**
|
39 | * Title
|
40 | */
|
41 | private _title: string;
|
42 | get title() {
|
43 | return this._title;
|
44 | }
|
45 | set title(value: string) {
|
46 | this._title = value.trim();
|
47 | }
|
48 |
|
49 | static classMethod() {
|
50 | return 'hello';
|
51 | }
|
52 |
|
53 | constructor(title: string) {
|
54 | this.completed = false;
|
55 | this.editing = false;
|
56 | this.title = title.trim();
|
57 | }
|
58 |
|
59 | /**
|
60 | * fakeMethod !!
|
61 | *
|
62 | * @example <caption>Usage of fakeMethod</caption>
|
63 | *
|
64 | * returns true;
|
65 | *
|
66 | * fakeMethod()
|
67 | */
|
68 | fakeMethod(): boolean {
|
69 | return true;
|
70 | }
|
71 | }
|
72 |
|
73 | /**
|
74 | * Uppercase the first letter of the string
|
75 | *
|
76 | * __Usage :__
|
77 | * value | firstUpper:exponent
|
78 | *
|
79 | * __Example :__
|
80 | * {{ car | firstUpper}}
|
81 | * formats to: Car
|
82 | */
|
83 | ({
|
84 | name: 'firstUpper'
|
85 | })
|
86 | export class FirstUpperPipe2 implements PipeTransform {
|
87 | transform(value, args) {
|
88 | return value.charAt(0).toUpperCase() + value.slice(1);
|
89 | }
|
90 | }
|
91 |
|
92 | /**
|
93 | * This service is a todo store
|
94 | *
|
95 | * See {@link Todo} for details about the main data of this store
|
96 | */
|
97 | ()
|
98 | export class TodoStore2 {
|
99 | /**
|
100 | * Local array of Todos
|
101 | *
|
102 | * See {@link Todo}
|
103 | */
|
104 | todos: Array<Todo>;
|
105 |
|
106 | constructor() {
|
107 | let persistedTodos = JSON.parse(localStorage.getItem('angular2-todos') || '[]');
|
108 | // Normalize back into classes
|
109 | this.todos = persistedTodos.map((todo: { _title: string; completed: boolean }) => {
|
110 | let ret = new Todo(todo._title);
|
111 | ret.completed = todo.completed;
|
112 | return ret;
|
113 | });
|
114 | }
|
115 |
|
116 | private updateStore() {
|
117 | localStorage.setItem('angular2-todos', JSON.stringify(this.todos));
|
118 | }
|
119 |
|
120 | private getWithCompleted(completed: Boolean) {
|
121 | return this.todos.filter((todo: Todo) => todo.completed === completed);
|
122 | }
|
123 |
|
124 | /**
|
125 | * All the todos are they __completed__ ?
|
126 | *
|
127 | * @returns {boolean} All completed ?
|
128 | */
|
129 | allCompleted(): boolean {
|
130 | return this.todos.length === this.getCompleted().length;
|
131 | }
|
132 |
|
133 | /**
|
134 | * Set all todos status (completed or not)
|
135 | *
|
136 | * @example
|
137 | * // set all at completed
|
138 | * TodoStore.setAllTo(true);
|
139 | *
|
140 | * @example
|
141 | * // set all at not completed
|
142 | * TodoStore.setAllTo(false);
|
143 | *
|
144 | * @param {boolean} completed Status of all todos
|
145 | */
|
146 | setAllTo(completed: boolean) {
|
147 | this.todos.forEach((t: Todo) => (t.completed = completed));
|
148 | this.updateStore();
|
149 | }
|
150 |
|
151 | /**
|
152 | * Remove completed todos
|
153 | */
|
154 | removeCompleted() {
|
155 | this.todos = this.getWithCompleted(false);
|
156 | this.updateStore();
|
157 | }
|
158 |
|
159 | /**
|
160 | * Get remaining todos
|
161 | *
|
162 | * @returns {Array} All remaining todos
|
163 | */
|
164 | getRemaining() {
|
165 | return this.getWithCompleted(false);
|
166 | }
|
167 |
|
168 | /**
|
169 | * Get all todos
|
170 | *
|
171 | * @returns {Array} All todos
|
172 | */
|
173 | getAll() {
|
174 | return this.todos;
|
175 | }
|
176 |
|
177 | /**
|
178 | * Get completed todos
|
179 | *
|
180 | * @returns {Array} All completed todos
|
181 | */
|
182 | getCompleted() {
|
183 | return this.getWithCompleted(true);
|
184 | }
|
185 |
|
186 | /**
|
187 | * Toggle completed todo status
|
188 | *
|
189 | * @param {Todo} todo Todo which change status
|
190 | */
|
191 | toggleCompletion(todo: Todo) {
|
192 | todo.completed = !todo.completed;
|
193 | this.updateStore();
|
194 | }
|
195 |
|
196 | /**
|
197 | * Remove todo
|
198 | *
|
199 | * See {@link Todo}
|
200 | *
|
201 | * @param {Todo} todo Todo to remove
|
202 | * @param {any[]} theArgs the rest of arguments
|
203 | */
|
204 | remove(todo: Todo, ...theArgs) {
|
205 | this.todos.splice(this.todos.indexOf(todo), 1);
|
206 | this.updateStore();
|
207 | }
|
208 |
|
209 | /**
|
210 | * Update store
|
211 | */
|
212 | update() {
|
213 | this.updateStore();
|
214 | }
|
215 |
|
216 | /**
|
217 | * Add todo
|
218 | *
|
219 | * @param {string} title Title of todo
|
220 | */
|
221 | add(title: string) {
|
222 | this.todos.push(new Todo(title));
|
223 | this.updateStore();
|
224 | }
|
225 |
|
226 | /**
|
227 | * Stop monitoring the todo
|
228 | *
|
229 | * @param {LabelledTodo} theTodo A todo
|
230 | * @returns {Promise<void>} promise resolved once we stop monitoring the todo or it is rejected
|
231 | */
|
232 | stopMonitoring(theTodo?: LabelledTodo): Promise<void> {
|
233 | return new Promise<void>((resolve, reject) => {
|
234 | //TODO
|
235 | });
|
236 | }
|
237 | }
|
238 |
|
239 | /**
|
240 | * This directive does nothing !
|
241 | */
|
242 | @Directive({
|
243 | selector: '[donothing]'
|
244 | })
|
245 | export class DoNothingDirective2 {
|
246 | protected popover: string;
|
247 |
|
248 | /**
|
249 | * constructor description
|
250 | */
|
251 | constructor() {
|
252 | console.log('Do nothing directive');
|
253 | }
|
254 |
|
255 | /**
|
256 | * HostBinding description
|
257 | */
|
258 | @HostBinding('style.color') color: string;
|
259 |
|
260 | /**
|
261 | * HostListener description 1
|
262 | */
|
263 | @HostListener('mouseup', ['$event.clientX', '$event.clientY'])
|
264 | onMouseup(mouseX: number, mouseY: number): void {}
|
265 | /**
|
266 | * HostListener description 2
|
267 | */
|
268 | @HostListener('mousedown', ['$event.clientX', '$event.clientY'])
|
269 | onMousedown(mouseX: number, mouseY: number): void {}
|
270 | /**
|
271 | * HostListener description 3
|
272 | */
|
273 | @HostListener('click')
|
274 | onClick(): void {}
|
275 | }
|
276 |
|
277 | /**
|
278 | * The about component
|
279 | *
|
280 | * Display some text with links for details about TodoMVC & Compodoc.
|
281 | */
|
282 | @Component({
|
283 | selector: 'about',
|
284 | template: 'about.component'
|
285 | })
|
286 | export class AboutComponent2 implements OnInit {
|
287 | ngOnInit() {}
|
288 |
|
289 | /**
|
290 | * HostListener mouseup description
|
291 | */
|
292 | @HostListener('mouseup')
|
293 | onMouseup(): void {}
|
294 | }
|
295 |
|
296 | /**
|
297 | * The about module
|
298 | *
|
299 | * Just embedding <about> component and it's routing definition in {@link AboutRoutingModule}
|
300 | */
|
301 | @NgModule({
|
302 | declarations: [],
|
303 | imports: []
|
304 | })
|
305 | export class AboutModule2 {}
|
306 |
|
307 | /**
|
308 | * PI constant
|
309 | * See {@link Todo} for service using it
|
310 | */
|
311 | export const PI2: number = 3.14;
|
312 |
|
313 | /**
|
314 | * A foo bar function
|
315 | *
|
316 | * @param {string} status A status
|
317 | */
|
318 | export function foo2(status: string) {
|
319 | console.log('bar');
|
320 | }
|
321 |
|
322 | export type Name2 = string;
|
323 |
|
324 | export enum PopupEffect2 {
|
325 | fadeIn,
|
326 | fadeOut,
|
327 | bubbleIn,
|
328 | bubbleOut
|
329 | }
|
330 | }
|
331 | }
|
332 |
|
\ | No newline at end of file |