From 64f62f29344f7343ed3c1a9609b3d0661623a30a Mon Sep 17 00:00:00 2001
From: Marcos A <marcosanjos@alunos.utfpr.edu.br>
Date: Wed, 3 Jul 2019 10:23:04 -0300
Subject: [PATCH 1/2] Modal of active card

---
 app/_layouts/stocks.twig               |  98 ++++++++++++++++++++----
 app/_layouts/wallet.twig               |  99 +++++++++++++++++++++----
 public/assets/img/ativos/petrobras.jpg | Bin 0 -> 5024 bytes
 3 files changed, 170 insertions(+), 27 deletions(-)
 create mode 100644 public/assets/img/ativos/petrobras.jpg

diff --git a/app/_layouts/stocks.twig b/app/_layouts/stocks.twig
index b210657..9678903 100644
--- a/app/_layouts/stocks.twig
+++ b/app/_layouts/stocks.twig
@@ -1,38 +1,110 @@
 {% extends "default_internal.twig" %}
 
 {% block content %}
+
     <div class="container">
         <div class="row align-items-start">
-            <div class="col">
+           <div class="col">
                 <div class="card border-secondary mb-3" style="width: 18rem;">
-                    <img alt="Imagem de capa do card" class="card-img-top" src="assets/img/contato.png">
+                    <img alt="Imagem de capa do card" class="card-img-top" src="../assets/img/ativos/petrobras.jpg">
                     <div class="card-body text-secondary">
-                        <h5 class="card-title">Título do card</h5>
-                        <p class="card-text">Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.</p>
-                        <a class="btn btn-outline-secondary" href="#">Visitar</a>
+                        <h5 class="card-title">Petroleo Brasileiro SA Petrobras Preference Shares</h5>
+                        <p class="card-text">BVMF: PETR4</p>
+                        <div class="card-body ">
+                            <p class="card-title text-center">Valor de compra R$26.86</p>
+                        </div>
+                        <a class="btn btn-outline-secondary" href="#" data-toggle="modal" data-target="#ModalLongoExemplo">Comprar</a>
+                        
                     </div>
                 </div>
             </div>
             <div class="col">
                 <div class="card border-secondary mb-3" style="width: 18rem;">
-                    <img alt="Imagem de capa do card" class="card-img-top" src="assets/img/contato.png">
+                    <img alt="Imagem de capa do card" class="card-img-top" src="../assets/img/ativos/petrobras.jpg">
                     <div class="card-body text-secondary">
-                        <h5 class="card-title">Título do card</h5>
-                        <p class="card-text">Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.</p>
-                        <a class="btn btn-outline-secondary" href="#">Visitar</a>
+                        <h5 class="card-title">Petroleo Brasileiro SA Petrobras Preference Shares</h5>
+                        <p class="card-text">BVMF: PETR4</p>
+                        <div class="card-body ">
+                            <p class="card-title text-center">Valor de compra R$26.86</p>
+                        </div>
+                        <a class="btn btn-outline-secondary" href="#" data-toggle="modal" data-target="#ModalLongoExemplo">Comprar</a>
+                        
                     </div>
                 </div>
             </div>
             <div class="col">
                 <div class="card border-secondary mb-3" style="width: 18rem;">
-                    <img alt="Imagem de capa do card" class="card-img-top" src="assets/img/contato.png">
+                    <img alt="Imagem de capa do card" class="card-img-top" src="../assets/img/ativos/petrobras.jpg">
                     <div class="card-body text-secondary">
-                        <h5 class="card-title">Título do card</h5>
-                        <p class="card-text">Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.</p>
-                        <a class="btn btn-outline-secondary" href="#">Visitar</a>
+                        <h5 class="card-title">Petroleo Brasileiro SA Petrobras Preference Shares</h5>
+                        <p class="card-text">BVMF: PETR4</p>
+                        <div class="card-body ">
+                            <p class="card-title text-center">Valor de compra R$26.86</p>
+                        </div>
+                        <a class="btn btn-outline-secondary" href="#" data-toggle="modal" data-target="#ModalLongoExemplo">Comprar</a>
+                        
                     </div>
                 </div>
             </div>
         </div>
     </div>
+
+
+<!-- Modal -->
+<div class="modal fade" id="ModalLongoExemplo" tabindex="-1" role="dialog" aria-labelledby="TituloModalLongoExemplo" aria-hidden="true">
+  <div class="modal-dialog " role="document">
+    <div class="modal-content modal-lg">
+      <div class="modal-header">
+        <h5 class="modal-title" id="TituloModalLongoExemplo">Compra do Ativo</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+
+      <div class="modal-body">
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col-sm">
+                    <p>O Fabuloso Gerador de Lero-lero v2.0 é capaz de gerar qualquer 
+                              quantidade de texto vazio e prolixo, ideal para engrossar uma 
+                              tese de mestrado, impressionar seu chefe ou preparar</p>
+                </div>
+                <div class="col-sm">
+                    <form>
+                        <div class="form-group">
+                            <label for="valor-ativo">Valor do Ativo</label>
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                            <span class="input-group-text">R$</span>
+                                    </div>
+                                    <input type="Integer" class="form-control" id="valor-ativo" placeholder="150.65">
+                                </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="qdt-dinheiro">Quantidade em reais</label>
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                            <span class="input-group-text">R$</span>
+                                    </div>
+                                    <input type="Integer" class="form-control" id="qdt-dinheiro" placeholder="R$ 1999,99">
+                                </div>
+                        </div>
+                    </form>
+                
+                </div>
+            </div>
+        </div>
+    
+             
+        
+   
+      </div>
+      <div class="modal-footer">  
+        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Fechar</button>
+        <button type="button" class="btn btn-outline-success">Confirmar Compra</button>
+
+      </div>
+    </div>
+  </div>
+</div>
 {% endblock %}
diff --git a/app/_layouts/wallet.twig b/app/_layouts/wallet.twig
index e5d2a97..16dfc98 100644
--- a/app/_layouts/wallet.twig
+++ b/app/_layouts/wallet.twig
@@ -8,40 +8,111 @@
             </div>
         </div>
 
-    <div class="container">
+   <div class="container">
         <div class="row align-items-start">
-            <div class="col">
+           <div class="col">
                 <div class="card border-secondary mb-3" style="width: 18rem;">
-                    <img alt="Imagem de capa do card" class="card-img-top" src="assets/img/contato.png">
+                    <img alt="Imagem de capa do card" class="card-img-top" src="../assets/img/ativos/petrobras.jpg">
                     <div class="card-body text-secondary">
-                        <h5 class="card-title">Título do card</h5>
-                        <p class="card-text">Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.</p>
-                        <a class="btn btn-outline-secondary" href="#">Visitar</a>
+                        <h5 class="card-title">Petroleo Brasileiro SA Petrobras Preference Shares</h5>
+                        <p class="card-text">BVMF: PETR4</p>
+                        <div class="card-body ">
+                            <p class="card-title text-center">Valor de compra R$26.86</p>
+                        </div>
+                        <a class="btn btn-outline-secondary" href="#" data-toggle="modal" data-target="#ModalLongoExemplo">Comprar</a>
+                        
                     </div>
                 </div>
             </div>
             <div class="col">
                 <div class="card border-secondary mb-3" style="width: 18rem;">
-                    <img alt="Imagem de capa do card" class="card-img-top" src="assets/img/contato.png">
+                    <img alt="Imagem de capa do card" class="card-img-top" src="../assets/img/ativos/petrobras.jpg">
                     <div class="card-body text-secondary">
-                        <h5 class="card-title">Título do card</h5>
-                        <p class="card-text">Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.</p>
-                        <a class="btn btn-outline-secondary" href="#">Visitar</a>
+                        <h5 class="card-title">Petroleo Brasileiro SA Petrobras Preference Shares</h5>
+                        <p class="card-text">BVMF: PETR4</p>
+                        <div class="card-body ">
+                            <p class="card-title text-center">Valor de compra R$26.86</p>
+                        </div>
+                        <a class="btn btn-outline-secondary" href="#" data-toggle="modal" data-target="#ModalLongoExemplo">Comprar</a>
+                        
                     </div>
                 </div>
             </div>
             <div class="col">
                 <div class="card border-secondary mb-3" style="width: 18rem;">
-                    <img alt="Imagem de capa do card" class="card-img-top" src="assets/img/contato.png">
+                    <img alt="Imagem de capa do card" class="card-img-top" src="../assets/img/ativos/petrobras.jpg">
                     <div class="card-body text-secondary">
-                        <h5 class="card-title">Título do card</h5>
-                        <p class="card-text">Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.</p>
-                        <a class="btn btn-outline-secondary" href="#">Visitar</a>
+                        <h5 class="card-title">Petroleo Brasileiro SA Petrobras Preference Shares</h5>
+                        <p class="card-text">BVMF: PETR4</p>
+                        <div class="card-body ">
+                            <p class="card-title text-center">Valor de compra R$26.86</p>
+                        </div>
+                        <a class="btn btn-outline-secondary" href="#" data-toggle="modal" data-target="#ModalLongoExemplo">Comprar</a>
+                        
                     </div>
                 </div>
             </div>
         </div>
     </div>
+
+
+<!-- Modal -->
+<div class="modal fade" id="ModalLongoExemplo" tabindex="-1" role="dialog" aria-labelledby="TituloModalLongoExemplo" aria-hidden="true">
+  <div class="modal-dialog " role="document">
+    <div class="modal-content modal-lg">
+      <div class="modal-header">
+        <h5 class="modal-title" id="TituloModalLongoExemplo">Compra do Ativo</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+
+      <div class="modal-body">
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col-sm">
+                    <p>O Fabuloso Gerador de Lero-lero v2.0 é capaz de gerar qualquer 
+                              quantidade de texto vazio e prolixo, ideal para engrossar uma 
+                              tese de mestrado, impressionar seu chefe ou preparar</p>
+                </div>
+                <div class="col-sm">
+                    <form>
+                        <div class="form-group">
+                            <label for="valor-ativo">Valor do Ativo</label>
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                            <span class="input-group-text">R$</span>
+                                    </div>
+                                    <input type="Integer" class="form-control" id="valor-ativo" placeholder="150.65">
+                                </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="qdt-dinheiro">Quantidade em reais</label>
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                            <span class="input-group-text">R$</span>
+                                    </div>
+                                    <input type="Integer" class="form-control" id="qdt-dinheiro" placeholder="R$ 1999,99">
+                                </div>
+                        </div>
+                    </form>
+                
+                </div>
+            </div>
+        </div>
+    
+             
+        
+   
+      </div>
+      <div class="modal-footer">  
+        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Fechar</button>
+        <button type="button" class="btn btn-outline-success">Confirmar Compra</button>
+
+      </div>
+    </div>
+  </div>
+</div>
 {% endblock %}
 
 {% block scripts %}
diff --git a/public/assets/img/ativos/petrobras.jpg b/public/assets/img/ativos/petrobras.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..10030ad4e1a78ece4fb1d62465d5defd09fc0626
GIT binary patch
literal 5024
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
L|2vG_wAudy^cq1T

literal 0
HcmV?d00001


From 9ffbbc973af39e0d0bd37fe650033ec97db0ad6c Mon Sep 17 00:00:00 2001
From: Marcos A <marcosanjos@alunos.utfpr.edu.br>
Date: Wed, 3 Jul 2019 14:58:42 -0300
Subject: [PATCH 2/2] Modal of active card (wallet)

---
 app/_layouts/wallet.twig | 184 ++++++++++++++++++++++++++++++++++++---
 1 file changed, 174 insertions(+), 10 deletions(-)

diff --git a/app/_layouts/wallet.twig b/app/_layouts/wallet.twig
index 16dfc98..33fce82 100644
--- a/app/_layouts/wallet.twig
+++ b/app/_layouts/wallet.twig
@@ -1,6 +1,8 @@
 {% extends "default_internal.twig" %}
 
 {% block content %}
+    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+    
     <div class="container-fluid">
         <div class="row align-items-center">
             <div class="col-sm">
@@ -47,8 +49,19 @@
                         <div class="card-body ">
                             <p class="card-title text-center">Valor de compra R$26.86</p>
                         </div>
-                        <a class="btn btn-outline-secondary" href="#" data-toggle="modal" data-target="#ModalLongoExemplo">Comprar</a>
-                        
+                        <div class="container">
+                            <div class="row align-items-center">
+                                <div class="col-sm">
+                                    <a class="btn btn-outline-success  btn-sm btn-block  " href="#" data-toggle="modal" data-target="#ModalCompra">Comprar</a>
+                                </div>
+                                <div class="col-sm">
+                                    <a class="btn btn-outline-danger  btn-sm btn-block" href="#" data-toggle="modal" data-target="#ModalVenda">Venda</a>
+                                </div>
+                                <div class="col-sm">
+                                    <a class="btn btn-outline-info  btn-sm btn-block" href="#" data-toggle="modal" data-target="#ModalDetalhes">Detalhes</a>
+                                </div>
+                            </div> 
+                        </div>                           
                     </div>
                 </div>
             </div>
@@ -56,10 +69,11 @@
     </div>
 
 
-<!-- Modal -->
-<div class="modal fade" id="ModalLongoExemplo" tabindex="-1" role="dialog" aria-labelledby="TituloModalLongoExemplo" aria-hidden="true">
-  <div class="modal-dialog " role="document">
-    <div class="modal-content modal-lg">
+
+<!-- Modal Compra -->
+<div class="modal fade" id="ModalCompra" tabindex="-1" role="dialog" aria-labelledby="TituloModalLongoExemplo" aria-hidden="true">
+  <div class="modal-dialog modal-lg " role="document">
+    <div class="modal-content ">
       <div class="modal-header">
         <h5 class="modal-title" id="TituloModalLongoExemplo">Compra do Ativo</h5>
         <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
@@ -70,13 +84,74 @@
       <div class="modal-body">
         <div class="container-fluid">
             <div class="row">
+                 <div class="col">       
+                        <img alt="Imagem do Ativo" class="card-img-top" src="../assets/img/ativos/petrobras.jpg">
+                </div>
                 <div class="col-sm">
-                    <p>O Fabuloso Gerador de Lero-lero v2.0 é capaz de gerar qualquer 
-                              quantidade de texto vazio e prolixo, ideal para engrossar uma 
-                              tese de mestrado, impressionar seu chefe ou preparar</p>
+                    <form>
+                        <div class="form-group">
+                            <label for="qdt-dinheiro">Valor Atual do Ativo</label>
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text">R$</span>
+                                    </div>
+                                    <input type="Integer" class="form-control" id="qdt-dinheiro" placeholder="R$ 1999,99">
+                                </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="qdt-dinheiro">Quantidade em reais</label>
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                            <span class="input-group-text">R$</span>
+                                    </div>
+                                    <input type="Integer" class="form-control" id="qdt-dinheiro" placeholder="R$ 1999,99">
+                                </div>
+                        </div>
+                    </form>
+                
+                </div>
+            </div>
+        </div>
+
+      </div>
+      <div class="modal-footer">  
+        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Fechar</button>
+        <button type="button" class="btn btn-outline-success">Confirmar Compra</button>
+
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Modal Venda -->
+<div class="modal fade" id="ModalVenda" tabindex="-1" role="dialog" aria-labelledby="TituloModalLongoExemplo" aria-hidden="true">
+  <div class="modal-dialog modal-lg " role="document">
+    <div class="modal-content ">
+      <div class="modal-header">
+        <h5 class="modal-title" id="TituloModalLongoExemplo">Compra do Ativo</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+
+      <div class="modal-body">
+        <div class="container-fluid">
+            <div class="row">
+                 <div class="col">       
+                        <img alt="Imagem do Ativo" class="card-img-top" src="../assets/img/ativos/petrobras.jpg">
                 </div>
                 <div class="col-sm">
                     <form>
+                        <div class="form-group">
+                            <label for="qdt-dinheiro">Valor investido no ativos</label>
+                                <div class="input-group">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text">R$</span>
+                                    </div>
+                                    <input type="Integer" class="form-control" id="qdt-dinheiro" placeholder="R$ 1999,99">
+                                </div>
+                        </div>
+                        
                         <div class="form-group">
                             <label for="valor-ativo">Valor do Ativo</label>
                                 <div class="input-group">
@@ -113,6 +188,95 @@
     </div>
   </div>
 </div>
+
+
+<!-- Modal DETALHES -->
+<div class="modal fade" id="ModalDetalhes" tabindex="-1" role="dialog" aria-labelledby="TituloModalDetalhes" aria-hidden="true">
+  <div class="modal-dialog modal-lg" role="document">
+    <div class="modal-content ">
+      <div class="modal-header">
+        <h5 class="modal-title" id="TituloModalDetalhes">Compra do Ativo</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+
+      <div class="modal-body">
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col-sm">
+                     <div class="container-fluid">
+                        <div class="row">
+                            <div class="col-12">       
+                                <img alt="Imagem do Ativo" class="card-img-top" src="../assets/img/ativos/petrobras.jpg">
+                            </div>
+                             <div class="col">       
+                                <p>Petróleo Brasileiro S.A. é uma empresa de capital aberto,
+                                cujo acionista majoritário é o Governo do Brasil, sendo,
+                                portanto, uma empresa estatal de economia mista. Wikipédia</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm">
+                     <div class="container-fluid">
+                        <div class="row">
+                            <div class="col-12">
+                                   <div class="col"> 
+                                    <h2>GRAFICO DO ATIVO...</H2>
+                                   
+                                    {# <!-- Plotly chart will be drawn inside this DIV -->
+                                        <div id="myDiv"></div>  
+                                    </div>    
+                                     #}
+
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="container">
+                <div class="row">
+                    <div class="col-6">
+                        <form>
+                             <div class="form-group">
+                                <label for="valor-ativo">Valor do Ativo</label>
+                                    <div class="input-group">
+                                        <div class="input-group-prepend">
+                                            <span class="input-group-text">R$</span>
+                                        </div>
+                                        <input type="Integer" class="form-control" id="valor-ativo" placeholder="150.65">
+                                    </div>
+                            </div>
+                            <div class="form-group">
+                                <label for="qdt-dinheiro">Quantidade em reais</label>
+                                    <div class="input-group">
+                                        <div class="input-group-prepend">
+                                            <span class="input-group-text">R$</span>
+                                        </div>
+                                        <input type="Integer" class="form-control" id="qdt-dinheiro" placeholder="R$ 1999,99">
+                                    </div>
+                            </div>
+                        </form>
+                    </div>
+                    <div class="col-6">
+                        
+                    </div>
+                </div>  
+            </div>
+        </div>
+
+      </div>
+      <div class="modal-footer">  
+        <button type="button" class="btn btn-outline-success" data-dismiss="modal">Comprar</button>
+        <button type="button" class="btn btn-outline-danger">Vender</button>
+        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Fechar</button>
+
+      </div>
+    </div>
+  </div>
+</div>
 {% endblock %}
 
 {% block scripts %}
@@ -150,4 +314,4 @@
 
         Plotly.newPlot('myDiv', data, layout);
     </script>
-{% endblock %}
+{% endblock %}
\ No newline at end of file