Observer

S2rg45 · Jul 19, 2019 · efffff0 · efffff0
1 parent 8b82b83
commit efffff0
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 0 deletions.
diff --git a/ejercicios/decorator/index.html b/ejercicios/decorator/index.html
@@ -0,0 +1,16 @@
+<html>
+  <head>
+    <title>Decorator</title>
+  </head>
+
+  <body>
+    <a href="/ejercicios/">Go back</a>
+
+    <div style="margin-top: 3rem;">
+      <label for="email">Email</label>
+      <input id="email" />
+    </div>
+
+    <script src="/ejercicios/decorator/index.ts"></script>
+  </body>
+</html>
diff --git a/ejercicios/decorator/index.ts b/ejercicios/decorator/index.ts
@@ -0,0 +1,28 @@
+class Field {
+  errors: string[];
+  input: HTMLInputElement;
+
+  constructor(input: HTMLInputElement) {
+    this.input = input;
+    this.errors = [];
+
+    let errorMessage = document.createElement('p');
+    errorMessage.className = 'text-danger';
+    this.input.parentNode.insertBefore(errorMessage, this.input.nextSibling);
+
+    this.input.addEventListener('input', () => {
+      this.errors = [];
+      this.validate();
+      errorMessage.innerText = this.errors[0] || '';
+    });
+  }
+
+  validate() {}
+}
+
+function RequiredFieldDecorator(field: Field) {
+  return field;
+}
+
+let field = new Field(document.querySelector('#email'));
+RequiredFieldDecorator(field);
diff --git a/ejercicios/index.html b/ejercicios/index.html
@@ -46,6 +46,9 @@ <h1>Índice</h1>
       <li>
         <a href="/ejercicios/observer/index.html">Observer</a>
       </li>
+      <li>
+        <a href="/ejercicios/decorator/index.html">Decorator</a>
+      </li>
     </ol>
   </body>
 </html>
diff --git a/ejercicios/observer/index.ts b/ejercicios/observer/index.ts
@@ -0,0 +1,54 @@
+interface Observer {
+  update: (data: any) => void;
+}
+
+interface Subject {
+  subscribe: (observer: Observer) => void;
+  unsubscribe: (observer: Observer) => void;
+}
+
+class BitcoinPrice implements Subject {
+  observers: Observer[] = [];
+
+  constructor() {
+    const el: HTMLInputElement = document.querySelector('#value');
+    el.addEventListener('input', () => {
+      this.notify(el.value);
+    });
+  }
+
+  subscribe(observer: Observer) {
+    this.observers.push(observer);
+  }
+
+  unsubscribe(observer: Observer) {
+    const index = this.observers.findIndex(obs => {
+      return obs === observer;
+    });
+
+    this.observers.splice(index, 1);
+  }
+
+  notify(data: any) {
+    this.observers.forEach(observer => observer.update(data));
+  }
+}
+
+class PriceDisplay implements Observer {
+  private el: HTMLElement;
+
+  constructor() {
+    this.el = document.querySelector('#price');
+  }
+
+  update(data: any) {
+    this.el.innerText = data;
+  }
+}
+
+const value = new BitcoinPrice();
+const display = new PriceDisplay();
+
+value.subscribe(display);
+
+setTimeout(() => value.unsubscribe(display), 5000);
-Original file line number
+Diff line change
@@ Expand Up / @@ -46,6 +46,9 @@ <h1>Índice</h1> @@
           <li>
             <a href="/ejercicios/observer/index.html">Observer</a>
           </li>
+          <li>
+            <a href="/ejercicios/decorator/index.html">Decorator</a>
+          </li>
         </ol>
       </body>
     </html>