feat: ✨ Aula 1 - Código implementado em JS

app/app.ts

@@ -1,8 +1,9 @@
-import { NegociacaoController } from './controllers/negociacao-controller.js';
+import { NegociacaoController } from "./controllers/negociacao-controllers.js";
 
 const controller = new NegociacaoController();
-const form = document.querySelector('.form');
-form.addEventListener('submit', event => {
-    event.preventDefault();
-    controller.adiciona();
-});
+const form = document.querySelector(".form");
+
+form.addEventListener("submit", (event) => {
+  event.preventDefault();
+  controller.adiciona();
+});

app/controllers/negociacao-controllers.ts

@@ -0,0 +1,55 @@
+import { DiasDaSemana } from "../enums/dias-da-semana.js";
+import { Negociacao } from "../models/negociacao.js";
+import { Negociacoes } from "../models/negociacoes.js";
+import { AlertView } from "../views/alert-view.js";
+import { NegociacoesView } from "../views/negociacoes-view.js";
+
+export class NegociacaoController {
+  private inputData: HTMLInputElement;
+  private inputQuantidade: HTMLInputElement;
+  private inputValor: HTMLInputElement;
+  private negociacoes = new Negociacoes();
+  private negociaçõesView = new NegociacoesView("#negociacoesView", true);
+  private alertView = new AlertView("#alertView");
+
+  constructor() {
+    this.inputData = document.querySelector("#data");
+    this.inputQuantidade = document.querySelector("#quantidade");
+    this.inputValor = document.querySelector("#valor");
+    this.negociaçõesView.update(this.negociacoes);
+  }
+
+  adiciona(): void {
+    const negociacao = Negociacao.createdEscope(
+      this.inputData.value,
+      this.inputQuantidade.value,
+      this.inputValor.value
+    );
+    if (!this.isDateUtil(negociacao.data)) {
+      this.alertView.update("Apenas negociações de em dias uteis são aceitas");
+      return;
+    }
+    this.negociacoes.adiciona(negociacao);
+    this.limparFormulario();
+    this.updatedView();
+  }
+
+  private isDateUtil(date: Date) {
+    return (
+      date.getDay() > DiasDaSemana.DOMINGO &&
+      date.getDay() < DiasDaSemana.SABADO
+    );
+  }
+
+  private limparFormulario(): void {
+    this.inputData.value = "";
+    this.inputQuantidade.value = "";
+    this.inputValor.value = "";
+    this.inputData.focus();
+  }
+
+  private updatedView(): void {
+    this.negociaçõesView.update(this.negociacoes);
+    this.alertView.update("Negociação adiconada com sucesso!");
+  }
+}

app/enums/dias-da-semana.ts

@@ -0,0 +1,9 @@
+export enum DiasDaSemana {
+  DOMINGO = 0,
+  SEGUNDA = 1,
+  TERCA = 2,
+  QUARTA = 3,
+  QUINTA = 4,
+  SEXTA = 5,
+  SABADO = 6,
+}

app/models/negociacao.ts

@@ -1,16 +1,27 @@
 export class Negociacao {
-    constructor(
-        private _data: Date, 
-        public readonly quantidade: number, 
-        public readonly valor: number
-    ) {}
+  constructor(
+    private _data: Date,
+    public readonly quantidade: number,
+    public readonly valor: number
+  ) {}
 
-    get volume(): number {
-        return this.quantidade * this.valor;
-    }
+  get data(): Date {
+    const data = new Date(this._data.getTime());
+    return data;
+  }
 
-    get data(): Date {
-        const data = new Date(this._data.getTime());
-        return data;
-    }
-}
+  get volume(): number {
+    return this.quantidade * this.valor;
+  }
+  public static createdEscope(
+    dateStr: string,
+    quantStr: string,
+    valueStr: string
+  ): Negociacao {
+    const exp = /-/g;
+    const date = new Date(dateStr.replace(exp, ","));
+    const quantidade = parseInt(quantStr);
+    const valor = parseFloat(valueStr);
+    return new Negociacao(date, quantidade, valor);
+  }
+}

app/models/negociacoes.ts

@@ -1,13 +1,15 @@
-import { Negociacao } from './negociacao.js';
+import { Negociacao } from "./negociacao.js";
 
 export class Negociacoes {
-    private negociacoes: Negociacao[] = [];
+  private negociacoes: Negociacao[] = [];
 
-    adiciona(negociacao: Negociacao) {
-        this.negociacoes.push(negociacao);
-    }
-
-    lista(): readonly Negociacao[] {
-        return this.negociacoes;
-    }
+  adiciona(negociacao: Negociacao) {
+    this.negociacoes.push(negociacao);
+  }
+  // ReadonlyArray<Negociacao> é o mesmo que:
+  lista(): readonly Negociacao[] {
+    return this.negociacoes;
+  }
 }
+
+const negociacoes = new Negociacoes();

app/views/alert-view.ts

@@ -0,0 +1,9 @@
+import { View } from "./view.js";
+
+export class AlertView extends View<string> {
+  protected template(model: string): string {
+    return `
+      <p class='alert alert-info'>${model}</p>
+    `;
+  }
+}

app/views/negociacoes-view.ts

@@ -0,0 +1,36 @@
+import { Negociacoes } from "../models/negociacoes.js";
+import { View } from "./view.js";
+
+export class NegociacoesView extends View<Negociacoes> {
+  private formatDate(data: Date): string {
+    return new Intl.DateTimeFormat().format(data);
+  }
+
+  protected template(model: Negociacoes): string {
+    return `
+    <table class='table table-hover table-bordered'>
+      <thead>
+        <tr>
+          <th>DATA</th>
+          <th>QUANTIDADE</th>
+          <th>VALOR</th>
+        </tr>
+      </thead>
+      <tbody>
+        ${model
+          .lista()
+          .map((negociacao) => {
+            return `
+            <tr> 
+              <td>${this.formatDate(negociacao.data)}</td>
+              <td>${negociacao.quantidade}</td>
+              <td>${negociacao.valor}</td>
+            </tr>
+            `;
+          })
+          .join("")}
+      </tbody>
+    </table>
+    `;
+  }
+}

app/views/view.ts

@@ -0,0 +1,20 @@
+export abstract class View<T> {
+  protected element: HTMLElement;
+  private scape: boolean = false;
+  constructor(seletor: string, scapeBool?: boolean) {
+    this.element = document.querySelector(seletor);
+    if (scapeBool) {
+      this.scape = scapeBool;
+    }
+  }
+
+  protected abstract template(model: T): string;
+
+  update(model: T): void {
+    let template = this.template(model);
+    if (this.scape) {
+      template = template.replace(/<script>[\s\S]*?<\/script>/, "");
+    }
+    this.element.innerHTML = template;
+  }
+}

dist/index.html

@@ -1,39 +1,54 @@
 <!DOCTYPE html>
 <html>
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Negociações</title>
-    <link rel="stylesheet" href="css/bootstrap.css">
-</head>
+    <link rel="stylesheet" href="css/bootstrap.css" />
+  </head>
 
-<body class="container">
-
+  <body class="container">
     <h1 class="text-center">Negociações</h1>
-    
-    <div id="mensagemView"></div>
-    
+
+    <div id="alertView"></div>
+
     <form class="form">
-
-        <div class="form-group">
-            <label for="data">Data</label>
-            <input type="date" id="data" class="form-control" required autofocus/>        
-        </div>    
-
-        <div class="form-group">
-            <label for="quantidade">Quantidade</label>
-            <input type="number" min="1" step="1" id="quantidade" class="form-control" value="1" required/>
-        </div>
-
-        <div class="form-group">
-            <label for="valor">Valor</label>
-            <input id="valor" type="number" class="form-control"  min="0.01" step="0.01" value="0.0" required />
-        </div>
-
-        <button class="btn btn-primary" type="submit">Incluir</button>
+      <div class="form-group">
+        <label for="data">Data</label>
+        <input type="date" id="data" class="form-control" required autofocus />
+      </div>
+
+      <div class="form-group">
+        <label for="quantidade">Quantidade</label>
+        <input
+          type="number"
+          min="1"
+          step="1"
+          id="quantidade"
+          class="form-control"
+          value="1"
+          required
+        />
+      </div>
+
+      <div class="form-group">
+        <label for="valor">Valor</label>
+        <input
+          id="valor"
+          type="number"
+          class="form-control"
+          min="0.01"
+          step="0.01"
+          value="0.0"
+          required
+        />
+      </div>
+
+      <button class="btn btn-primary" type="submit">Incluir</button>
     </form>
-    <br>
-    <br>
+    <br />
+    <br />
+    <div id="negociacoesView"></div>
     <script type="module" src="js/app.js"></script>
-</body>
-</html>
+  </body>
+</html>

dist/js/app.js

@@ -1,7 +1,7 @@
-import { NegociacaoController } from './controllers/negociacao-controller.js';
+import { NegociacaoController } from "./controllers/negociacao-controllers.js";
 const controller = new NegociacaoController();
-const form = document.querySelector('.form');
-form.addEventListener('submit', event => {
+const form = document.querySelector(".form");
+form.addEventListener("submit", (event) => {
     event.preventDefault();
     controller.adiciona();
 });

dist/js/controllers/NegociacaoController.js

@@ -0,0 +1,29 @@
+import { Negociacao } from "../models/negociacao.js";
+import { Negociacoes } from "../models/negociacoes.js";
+export class NegociacaoController {
+    constructor() {
+        this.negociacoes = new Negociacoes();
+        this.inputData = document.querySelector("#data");
+        this.inputQuantidade = document.querySelector("#quantidade");
+        this.inputValor = document.querySelector("#valor");
+    }
+    adiciona() {
+        const negociacao = this.criaNegociacao();
+        this.negociacoes.adiciona(negociacao);
+        console.log(this.negociacoes.lista());
+        this.limparFormulario();
+    }
+    criaNegociacao() {
+        const exp = /-/g;
+        const date = new Date(this.inputData.value.replace(exp, ","));
+        const quantidade = parseInt(this.inputQuantidade.value);
+        const valor = parseFloat(this.inputValor.value);
+        return new Negociacao(date, quantidade, valor);
+    }
+    limparFormulario() {
+        this.inputData.value = "";
+        this.inputQuantidade.value = "";
+        this.inputValor.value = "";
+        this.inputData.focus();
+    }
+}