SHARE
TWEET

Untitled

a guest Nov 17th, 2019 70 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!doctype html>
  2. <html lang="pt-br">
  3.  
  4. <head>
  5.   <!-- Required meta tags -->
  6.   <meta charset="utf-8">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  8.  
  9.   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B"
  10.     crossorigin="anonymous">
  11.  
  12.  
  13.   <title>Condominios</title>
  14. </head>
  15.  
  16. <body>
  17.   <nav class="  navbar navbar-expand-sm navbar-dark bg-dark">
  18.     <div class="container">
  19.       <a href="#" class="navbar-brand">AudiCond</a>
  20.       <button type="button" class="navbar-toggler">
  21.         <span class="navbar-toggler-icon"></span>
  22.       </button>
  23.       <div class=" row justify-content-end collapse navbar-collapse " id="">
  24.         <ul class=" navbar-nav mr-left">
  25.           <ul class=" navbar-nav mr-auto">
  26.             <li class="nav-item ">
  27.               <a href="home.html" class="nav-link">Home</a>
  28.             </li>
  29.             <li class=" nav-item active">
  30.               <a href="Condominios.html" class="nav-link">Condominios</a>
  31.             </li>
  32.             <li class=" nav-item ">
  33.               <a href="CtaPagar.html" class="nav-link">Contas Pagar</a>
  34.             </li>
  35.           </ul>
  36.         </ul>
  37.       </div>
  38.     </div>
  39.   </nav>
  40.  
  41.   <div class="container" id="cadastro">
  42.     <div class="row">
  43.     </div>
  44.     <div class="row">
  45.  
  46.       <div class="container">
  47.         <div class="row justify-content-left justify-content-md-start">
  48.           <!--tela super peq 12, small(peq) 8, media 4-->
  49.           <div class="col-12 col-sm-8 col-md-4">
  50.             <form action="">
  51.             </form>
  52.           </div>
  53.           <div class=" justify-content-left col-md-6">
  54.             <form action="">
  55.                
  56.                 <input type="hidden" class="form-control" id="id" v-model="id" aria-describedby="id" >
  57.  
  58.               <div class="form-row">
  59.                 <label for="">Nome</label>
  60.                 <input type="text" class="form-control" id="nome" v-model="nome" aria-describedby="nome" placeholder="">
  61.               </div>
  62.  
  63.  
  64.               <div class="form-group">
  65.                 <label for="">CNPJ</label>
  66.                 <input type="text" class="form-control" id="cnpj" v-model="cnpj" aria-describedby="cnpj" placeholder="">
  67.               </div>
  68.  
  69.               <div class="form-group">
  70.                 <label for="">Contato</label>
  71.                 <input type="text" class="form-control" id="contato" v-model="contato" aria-describedby="contato" placeholder="">
  72.               </div>
  73.  
  74.  
  75.  
  76.               <button type="button" class=" btn btn-primary  btn-block" @Click.prevent="addItem">Gravar</button>
  77.             </form>
  78.           </div>
  79.         </div>
  80.       </div>
  81.     </div>
  82.  
  83.   <table class="table">
  84.     <thead>
  85.       <tr>
  86.         <th scope="col">ID</th>
  87.         <th scope="col">Nome</th>
  88.         <th scope="col">CNPJ</th>
  89.         <th scope="col">Contato</th>
  90.         <th scope="col">Ações</th>
  91.       </tr>
  92.     </thead>
  93.     <tbody>
  94.       <tr v-for="p,index in cadastro">
  95.         <td>[[ p.id ]]</td>
  96.         <td>[[ p.nome ]]</td>
  97.         <td>[[ p.cnpj ]]</td>
  98.         <td>[[ p.contato ]]</td>
  99.         <td>
  100.  
  101.           <td>
  102.             <button class="btn btn-success" @click.prevent="editItem(index)">Editar</button>
  103.           </td>
  104.       </tr>
  105.     </tbody>
  106.   </table>
  107. </div>
  108.   <footer>
  109.     <div class="fixed-bottom bg-dark text-white">
  110.       <p class="text-center">Curso de TI - Fundatec @ 2019</p>
  111.     </div>
  112.   </footer>
  113.  
  114.  
  115.  
  116.   <!-- Foi colocado no final para a página carregar mais rápido -->
  117.   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
  118.     crossorigin="anonymous"></script>
  119.   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
  120.     crossorigin="anonymous"></script>
  121.   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
  122.     crossorigin="anonymous"></script>
  123.   <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  124.   <script src="http://unpkg.com/axios/dist/axios.min.js"></script>
  125.  
  126.  
  127.   <script>
  128.     const app = new Vue({
  129.  
  130.       el: '#cadastro',
  131.       delimiters: ["[[","]]"],
  132.       data: {
  133.         url : "http://localhost:8080/vivi/condominiopg",
  134.         cadastro: [], //Array
  135.         //dadosiniciais: json,
  136.         condominio: {},  //Objetos
  137.         id:'',
  138.         nome: '',
  139.         cnpj: '',
  140.         contato: ''
  141.       },
  142.       methods: {
  143.         addItem() {
  144.           if (this.nome != ''){
  145.               if (this.id != '' || this.id != 0 ){
  146.                   //console.log('id existe. Edição....');
  147.               } else {
  148.                     //console.log('id não existe. Inserção....');
  149.                     let idmax = Math.max.apply(Math, this.cadastro.map(function(o) { return o.id; }));
  150.                     console.log('ids ',idmax);
  151.                     this.id = idmax + 1;
  152.               }
  153.               this.condominio = {
  154.                         "id"    : this.id,
  155.                         "nome"  : this.nome,
  156.                         "cnpj"  : this.cnpj,
  157.                         "contato": this.contato
  158.               };
  159.               this.cadastro.push(this.condominio);
  160.               this.condominio = {};
  161.               this.id='';
  162.               this.nome = '';
  163.               this.cnpj = '';
  164.               this.contato = '';
  165.             } else {
  166.                 console.log('Dados vazios!');
  167.             }
  168.         },
  169.         editItem(index) {
  170.           this.id = this.cadastro[index].id;
  171.           this.nome = this.cadastro[index].nome;
  172.           this.cnpj = this.cadastro[index].cnpj;
  173.           this.contato = this.cadastro[index].contato;
  174.           this.cadastro.splice(index, 1);
  175.          
  176.           /*axios.get(this.url).then((response) => {
  177.             const dados = response.data;
  178.             //console.log(dados);
  179.             let tam = dados.length;
  180.             for(let i=0; i<tam ; i++){
  181.               console.log(dados[i]);
  182.               this.cadastro.push(dados[i]);
  183.           }
  184.           }).catch((error) => {
  185.             console.log('ERR: ' + error);
  186.           }); // axios*/
  187.  
  188.         },
  189.  
  190.       getCondominio() {
  191.           axios.get(this.url).then((response) => {
  192.             const dados = response.data;
  193.             //console.log(dados);
  194.             let tam = dados.length;
  195.             for(let i=0; i<tam ; i++){
  196.               console.log(dados[i]);
  197.               this.cadastro.push(dados[i]);
  198.           }
  199.           }).catch((error) => {
  200.             console.log('ERR: ' + error);
  201.           }); // axios
  202.          
  203.         } // getCondominio
  204.     },
  205.       mounted() {
  206.         this.getCondominio();
  207.       }
  208.     });
  209.  
  210.  
  211.   </script>
  212. </body>
  213.  
  214. </html>
RAW Paste Data
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!
 
Top