API tools faq
paste
Guest User

work1

a guest
Dec 30th, 2018
369
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.12 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="pt-br">
  3.   <head>
  4.     <!-- Meta tags Obrigatórias -->
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.  
  8.     <!-- Bootstrap CSS -->
  9.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  10.  
  11.     <!-- Font Awesome -->
  12.     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
  13.  
  14.     <!-- HTML5Shiv -->
  15.     <!--[if lt IE 9]>
  16.      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  17.    <![endif]-->
  18.  
  19.     <!-- Estilo customizado -->
  20.     <link rel="stylesheet" type="text/css" href="css/estilo.css">
  21.  
  22.     <title>Seguro automotivo - Outline</title>
  23.     <link rel="icon"  href="imagens/favicon.png">
  24.   </head>
  25.   <body>
  26.    
  27.    
  28.  
  29.     <section id="home2" class="d-flex"><!-- Início seção home -->
  30.       <h2 class="col-md-12 text-center">Dados dos Clientes</h2>
  31.         <table class="table table-striped">
  32.       <thead>
  33.         <tr>
  34.           <th>nome</th>
  35.           <th>cpf</th>
  36.           <th>endereco</th>
  37.           <th>telefone</th>
  38.           <th>placa do carro</th>
  39.           <th>compania</th>
  40.         </tr>
  41.       </thead>
  42.  
  43.       <tbody>
  44.         <tr id="app">
  45.           <td>
  46.             {{cliente.nome}}
  47.           </td>
  48.           <td v-for = "cliente in clientes">
  49.           {{cliente.cpf}}
  50.           </td>
  51.           <td v-for = "cliente in clientes">
  52.           {{cliente.endereco}}
  53.           </td>
  54.           <td v-for = "cliente in clientes">
  55.           {{cliente.telefone}}
  56.           </td>
  57.           <td v-for = "cliente in clientes">
  58.           {{cliente.placa}}
  59.           </td>
  60.           <td v-for = "cliente in clientes">
  61.           {{cliente.compania}}
  62.           </td>  
  63.           <td>
  64.             <button type="submit" id="editar" class="btn btn-negative" @click="editClient(cliente)" >Editar</button>
  65.           </td>
  66.         </tr>
  67.       </tbody>
  68.     </table>
  69. </section>
  70.  
  71.   <div id="modal" v-if="openModal">
  72.     <div class="wrap">
  73.         <form action="" class="col-md-12 pane-body" id="cadastro-cliente">
  74.         <div class="container row  justify-content-center">
  75.           <div class="row justify-content-center">
  76.             <h2 class="col-md-12 text-center">Cadastro do cliente</h2>
  77.           <div class="form-group col-md-12 justify-content-center">
  78.             <label for="nome">Nome Completo</label>
  79.             <input type="text" class="form-control" name="name" id="nome" v-model="client nome" placeholder="Nome Completo">
  80.               </div>
  81.         <div class="form-group col-md-6">
  82.           <label for="cpf">CPF</label>
  83.           <input type="text" class="form-control" name="cpf" id="cpf" v-model="client cpf" placeholder="CPF com 9 digitos">
  84.         </div>
  85.         <div class="form-group col-md-6">
  86.          <label for="endereco">Endereço</label>
  87.          <input type="text" class="form-control" name="endereco" v-model="client endereco" id="endereco" placeholder="ex: Rua Professor araujo, 12345">
  88.         </div>
  89.         <div class="form-group col-md-6">
  90.           <label for="telefone">Telefone</label>
  91.           <input type="text" class="form-control" name="telefone" id="telefone" v-model="client telefone" placeholder="ex: 539822232512">
  92.         </div>
  93.         <div class="form-group col-md-6">
  94.           <label for="placa">Placa do carro</label>
  95.           <input type="placa" class="form-control" name="placa" id="placa" v-model="client placa" placeholder="ex: asd-1234">
  96.         </div>
  97.         <div class="form-group col-md-6">
  98.           <label for="compania">Compania</label>
  99.           <input type="text" class="form-control" name="compania" id="compania" v-model="client compania" placeholder="ex: asd-1234">
  100.         </div>
  101.         </div>
  102.         <div class="justify-content-center pb-5">
  103.           <button type="button" id="salvar" class="btn btn-primary">Cadastrar</button>
  104.           <button type="button" class="btn btn-negative" @click="showModal=false">Fechar</button>
  105.         </div>
  106.         </div>
  107.       </form>
  108.     </div>
  109.   </div>
  110. </body>
  111.  
  112.  
  113.       <footer><!--INICIO RODAPE-->    
  114.        <footer class="mt-4">
  115.         <div class="container">
  116.           <div class="row d-flex">
  117.             <ul class="navbar-nav ml-auto col-md-1">
  118.                 <li class="nav-item">
  119.                   <a href="" class="nav-link">Home</a>
  120.                 </li>
  121.               </ul>
  122.                <ul class="navbar-nav ml-auto col-md-1">    
  123.                 <li class="nav-item">
  124.                   <a href="" class="nav-link">Empresa</a>    
  125.               </ul>
  126.                <ul class="navbar-nav ml-auto col-md-1">            
  127.                 <li class="nav-item">
  128.                   <a href="" class="nav-link">Planos</a>
  129.                 </li>
  130.               </ul>
  131.             <div class="col-md-4 col text-light">
  132.               <p class="text-center">
  133.               Copyright&copy; All rights reserve Outline Corretora.
  134.               </p>
  135.               <p class="text-center">
  136.                 made by Alisson.
  137.               </p>
  138.  
  139.             </div>
  140.             <div class="col-md-4 d-flex justify-content-end">
  141.               <a href="" class="btn align-self-center btn-outline-light">
  142.                 <i class="fab fa-facebook"></i>
  143.               </a>
  144.               <a href="" class="btn align-self-center btn-outline-light ml-2">
  145.                 <i class="fab fa-twitter"></i>
  146.               </a>
  147.               <a href="" class="btn align-self-center btn-outline-light ml-2">
  148.                 <i class="fab fa-instagram"></i>
  149.               </a>
  150.               <a href="" class="btn align-self-center btn-outline-light ml-2">
  151.                 <i class="fab fa-youtube"></i>
  152.               </a>
  153.             </div>
  154.           </div>
  155.         </div>
  156.       </div>
  157.       </footer><!--FIM RODAPE-->
  158.  
  159.  
  160.     <!-- JavaScript (Opcional) -->
  161.     <!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS -->
  162.     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  163.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
  164.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  165.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  166.  
  167.     <script>
  168.       var read = require('read-file-utf8')
  169.       var loki = require('lokijs');
  170.       var db = new loki('loki.json')
  171.       var data = read(__dirname+'/loki.json')
  172.       db.loadJSON(data);
  173.       const Vue = require('vue');
  174.  
  175.  
  176.       var clientes = db.getCollection('clientes');
  177.       Vue.config.productionTip = false;
  178.  
  179.       new Vue({
  180.         el:'#app',
  181.         data:{
  182.           clientes: [],
  183.           client:{
  184.             nome:'',
  185.             cpf: '',
  186.             endereco:'',
  187.             telefone:'',
  188.             placa:'',
  189.             compania:''
  190.           },
  191.           $('#showModal').modal({
  192.           showModal: false();
  193.           }),
  194.         },
  195.         mounted: function(){
  196.         this.clientes = clientes.data;
  197.         console.log(this.clientes);
  198.        },
  199.        methods:{
  200.         editClient:function(client){
  201.         this.mode='edicao';
  202.         this.showModal = true;
  203.         this.client=client;
  204.         }
  205.         createClient:function{
  206.           this.mode='edicao';
  207.           this.showModal = true;
  208.           this.client=client;
  209.           this.client:{
  210.             nome:'',
  211.             cpf: '',
  212.             endereco:'',
  213.             telefone:'',
  214.             placa:'',
  215.             compania:''
  216.           };
  217.         }
  218.        }
  219.       });
  220.     </script>
  221. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!