Ir para conteúdo

wanderval

Members
 Perfil  Explorar Conteúdo

  • Total de itens

    409

  • Registro em

  • Última visita

  • Dias vencidos

    2

Posts postados por wanderval

  3. Postado

    Primeiro ponto seu HTML está utilizando tabela pra montar o layout, isso é desaconselhável considerado uma má pratica atualmente

    e utilizar atributos de estilização no html so quando é um framework, mas se você está fazendo manualmente então isso deixa o html muito confuso, vai começar a ficar complexa a manutenção.

     

    Ex de html pro card: 

    <div class="box-container custom" product-id="01" >
  <div class="container-image">
    <img src="https://pizzariadesucesso.com/wp-content/uploads/2018/05/pizza_R_l5_3.jpg" style="border-radius: 10px;" width="75px" height="75px" />
  </div>
  <div class="container-info">
    <div class="container-description">
      <span class="title">MODA DA CASA</span>
      <span class="description">Molho de tomate, mussarela, calabresa ralada, catupiry, alho tostado, cebola, azeitonas e oregano.</span>
    </div>
    <div class="container-currency">
      <span class="currency-value-displayed">28.00</span>
      <input type="checkbox" name="sabor" id="evento_value2" class="currency-check" value="28.00" />
      <select name="qntdade" onchange="changedQuantity(event, '01')">
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
    </div>
  </div>
</div>

     JS 

    var total = 0;
var itemsDoPedido = [];

$(":checkbox").click(function () {
  var cardContainer = $(this).parents('.box-container');
  var id = $(cardContainer).attr('product-id');
  
  if ($(this).is(":checked")) {
    addItem(this, cardContainer, id)
  } else {
    removeItem(cardContainer, id);
  }
  
  updateTotal(id, cardContainer);
});


function addItem(itemRef, cardContainer, id) {
  var valor = $(itemRef).val();
  var quantity = $(cardContainer).find('select').val();
  var pedido = itemsDoPedido.find(item => item.id == id);
  
  if(pedido) {
    pedido.quantidade = quantity;
    itemsDoPedido = [...itemsDoPedido, pedido];
  } else {
    var produto = createProductObject(id, quantity, valor);
    itemsDoPedido.push(produto);  
  }
}

function removeItem(cardContainer, id) {
  var pedido = itemsDoPedido.find(item => item.id == id);
  if(pedido) {
    itemsDoPedido = itemsDoPedido.filter(item => item.id != id);
  }
}

function changedQuantity(event, id) {
  var cardContainer = $('.box-container[product-id="'+id+'"]');
  var isChecked = $(cardContainer).find(":checkbox").is(":checked");
  var quantity = $(cardContainer).find('select').val();
  
  if(isChecked) {
    itemsDoPedido.find(item => { 
      if(item.id === id){
        item.quantidade = quantity;
      }
    });
  }
  
  updateTotal(id, cardContainer);
}

function updateTotal(id, cardContainer) {
  total = calcValue(itemsDoPedido);
  const pedido = itemsDoPedido.filter(item => item.id === id);
  const totalValueItem = calcValue(pedido);
  $(cardContainer).find('.total-value').val(totalValueItem);
  $("#resultado").text(formatPrice(total));
}

function calcValue(productList) {
  return productList.reduce(function(acumulador, valorAtual) {
    return acumulador + (parseInt(valorAtual.quantidade) * parseFloat(valorAtual.valor));
  },0);
}

function createProductObject(id, quantity, valor){
  var produtoModel = {
      id: id,
      quantidade:quantity,
      valor: valor 
    };
  return produtoModel;
}

function formatPrice(value, currency = true) {
  var valor = parseFloat(value);
  let valorFormatado = null;
  
  if(currency) {
    //Valor com cifrão
    valorFormatado = valor.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
  }
  else {
    //Valor sem cifrão  
  valorFormatado = valor.toLocaleString('pt-BR', { minimumFractionDigits: 2});
  }

  return valorFormatado;
}

    https://jsbin.com/gikewuvesi/edit?html,js,output

  4. Postado

    17 minutos atrás, acneto.frc disse:

    Verifiquei no link....tem muita coisa bacana pra poder implementar..

    Obrigado!

    O que me diz sobre eu usar Classes neste meu projeto.

    Já trabalhei um pouco com Java POO nada muito profundo mas entendo sobre private, public.

    Tem alguma sugestão de bom material...vídeo aula, tutoriais, etc?

     

    Bom no caso do back-end, muitos realmente utilizam padrões de orientação de objeto, por existir muitos padrões já consolidado como SOLID, MVC, então não vejo problema, mas é bom ver um daqueles cursos pra pegar a dinâmica da linguagem, alguns cursos usam o typescript que aproxima ainda mais dos conceitos de linguagem typadas como Java. Mas quando falo de usar as classes nem tudo é usado com esse conceito mas modelos são mais comuns inclusive com integração com banco de dados como ORM.

  5. Postado

    JS: 

    function changedValue(event, id) {
  var atualValue = $('#'+id+' .currency-check').val();
  var quantity = event.currentTarget.value;
  var newValue = calcValue(quantity, atualValue);
  
  console.log(newValue, quantity, atualValue, id);
  
  updateCardValue(id, newValue)
}

function updateCardValue(cardId, newValue) {
  $('#'+cardId+' .currency-value-displayed').text(formatPrice(newValue, false));
  $('#'+cardId+' .total-value').val(newValue);
}

function calcValue(quantity, price) {
  return parseInt(quantity) * parseFloat(price);
}

function formatPrice(value, currency = true) {
  var valor = parseFloat(value);
  let valorFormatado = null;
  
  if(currency) {
    //Valor com cifrão
    valorFormatado = valor.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
  }
  else {
    //Valor sem cifrão	
	valorFormatado = valor.toLocaleString('pt-BR', { minimumFractionDigits: 2});
  }

  return valorFormatado;
}

    HTML: 

    <div id="card_1" class="box-container">
    <section class=box-image>&nbsp;
      <img src="" style="border-radius:10px" width="250px" height="230px"/>
    </section>
    <section class="box-content">
      <label class="title">
        <div align="left"><b>A MODA DA CASA</b></div>
      </label>
      <span class="description">
        <div align="left">Molho de tomate, mussarela, calabresa ralada, catupiry, alho tostado, cebola, azeitonas e oregano</div>
      </span>
    </section>
    <section class=box-image-2>
      <label class="title">
        <div align="center"><b class="currency-value-displayed">28,00</b></div>
      </label>
      <span class="description">
          <div align="left"><br/>
          <input type="checkbox" name="sabor" id="evento_value" class="currency-check" value="28,00">
          <input type="hidden" name="vl_sabor" class="total-value"value="28,00">
            <SELECT name="qntdade" onchange="changedValue(event, 'card_1')">  
              <option value="1">1</option> 
              <option value="2">2</option> 
            </SELECT>                                                 
      </div></span>      
    </section>    
  </div>

    https://jsbin.com/hukerubeve/edit?html,js,output

  8. Postado

    12 horas atrás, acneto.frc disse:

    Na verdade está caindo no rejeitado reject(error), mas está apresentando o conteúdo da consulta em formato Json

    Vou frisar mais uma vez, coloque código nas suas dúvidas, se perde muito tempo, pq se não fizer o mínimo que é deixar clara sua dúvida, tb é desanimador para quem ler sua dúvida.

     

    1-Mas agora eu te pergunto você analisou o script de conexão pra saber como o callback esta manipulando o resultado e o erro ou apenas copiou e colou?

     

    seu problema parece ser muito simples, analise a ordem dos parâmetros, e no momento que o callback e setado no file conexão talvez a ordem esteja apenas invertida, isso explicaria estar sendo retornado o json. então bastaria trocar as posições dos parâmetros da function no model

  10. Postado

    10 horas atrás, lezão disse:

    Bom dia, Wanderval!

    Td bem com você?

    Me desculpa, o resultado pode ser em uma div ou span, tirando do input.... rsrsrs

     

    Obrigado deu certinho era oque eu precisava.

     

    Tenho mais uma duvida como eu coloco para ficar assim R$: 0,00??

    Esta assim 00.

     

     

     

    entenda esse código 

    function formatPrice(value, currency = true) {
  var valor = parseFloat(value);
  let valorFormatado = null;
  
  if(currency) {
    //Valor com cifrão
    valorFormatado = valor.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
  }
  else {
    //Valor sem cifrão	
	valorFormatado = valor.toLocaleString('pt-BR', { minimumFractionDigits: 2});
  }

  return valorFormatado;
}

    link: https://jsbin.com/supawilawu/edit?html,js,output

  11. Postado

    Agora, acneto.frc disse:

     

    Nunca comemorei tanto tomar uma dura.....

    Faltava retornar a Promise. Mas vou seguir com os estudos.

    Grato! Mas certo de que virão muitas outras dúvidas depois dessa.

    Abraços!

     

     

    kkk que bom que entendeu que é uma critica construtiva!

    Dúvida é algo que não acaba sempre havera dúvidas, o importante é se aprimorar.

    Faz aquele curso ai você vai ver como as coisas ficam mais simples.

  13. Postado

    22 horas atrás, acneto.frc disse:

    se for voltar a model como antes terei que modificar a chamada no controller 

    
function segurosCadastro(req, res){
    segurosController.getAll(function (err, result){
        console.log("Retorno de Seguros>... "+result[0]);
        var id = result[0].sal_codigo;

    e a model fica ficaria assim (usando callback) 

    
function getAll (callback) {
  m_sql = 'select * from seguros ';      

  conexao.query(m_sql, callback);      

}

     

     

    Cara você tem que prestar mais atenção na descrição em nenhum momento eu disse para voltar o código  do model disse que a forma de manipular a query do banco de dados não mudou e você acabou de comprovar isso!

      

    function getAll (callback) {
  m_sql = 'select * from seguros ';      

  conexao.query(m_sql, callback);      
}

    seu método "query" usa callback, em nenhum momento você colocou algum código sobre ele:

    1: se precisar mudar esse código fará uma determinada alteração caso contrario mantera o callback e terá outra abordagem

    2: Eu avisei você que deveria se preocupar com a manipulação dos dados mas você está tão vidrado em querer fazer funcionar que não esta querendo entender o que está acontecendo, se não exercitar isso vai programar na tentativa e erro.

     

    mantendo o callback:

    https://codesandbox.io/s/zealous-brahmagupta-mqhxd?file=/src/config/conexao.js

  14. Postado

    13 horas atrás, acneto.frc disse:

    Bom dia!

    Me preocupo com a estrutura porque nessa mesma aplicação tenho diversos cadastros funcionando mas utilizando callback e em alguns programas que acessam diversas tabelas tenho callback hell, por isso estou focando na estrutura, então como outros programas realizam CRUD normalmente não penso que seja a LIB.

    Mas se é possível haver problemas por onde começar???

     

     

    não é um problema mas você precisa saber com que lib está trabalhando para a conexão com o banco, pelo seu relato já estava funcionando antes da sua alteração essa parte não mudou a parte de manipular o dado que vem do banco será da mesma forma, então apenas faça da mesmo forma já que realizou a alteração da estrutura somente reveja o código anterior que manipula a resposta do comando query assim sua alteração funcionará sem problema

  15. Postado

    5 horas atrás, acneto.frc disse:

    Bom dia!

    Em algum momento já tentei mostrar o conteúdo com "retorn[0]" mas retorna indefinido.

    Abaixo o retorno neste momento no console:

    GetAll Sql retornando:

    undefined
    ============== Retornando .... Seguros GetAll Controller!!! ====================
    undefined

     

    Olha seu foco deveria estar no model! pra descobrir o deu objeto que contem os dados do select do banco você precisa rever a lib que está usando pra acessar o banco dados, o que o arquivo conexão configura a configuração está correta? se está usando um lib de conexão no próprio site da lib tem a doc que mostra como isso deve ser feito. o fluxo funciona! mas sua dificuldade está no principal que é receber os dados nesse ponto você terá que focar nisso pq ai eu te pergunto pq você está se preocupando tanto com a modificação da estrutura se existe um problema em receber esses dados do banco?

     

  16. Postado

    12 horas atrás, acneto.frc disse:

    Dentro da Modelo tem um colsole.log para apresentar o retorno do await 

    
try{
    retorno = await conexao.query(m_sql); 
    console.log("GetAll Sql retornando: ")
    console.log("\n"+retorno)
  }catch(error) {
    throw new Error(error);
}

  return retorno;

    e mostra no console :

    [object Object]
    TypeError: Converting circular structure to JSON

     

    Esse retorno eu não consigo manipular...

     

    E no navegador retorna:

    error: {}

    resultado da instrução abaixo do controller

    res.send(retorno)


     

     

    O motivo e que você recebe um array"[]" o que tá sendo exibido ai e que você esta recebendo um array de objetos "[object Object]"

    então, se você conhece conceitos de programação sabe que somente iterando vai conseguir visualizar os conteúdos neste ponto ficaria o JSON.stringify(retorno) deste moto teria o objeto completo.

     

    para ver o objeto da primeira posição console.log(retorno[0])

  17. Postado

    1- você postou no lugar errado aqui é Java e não PHP

    2-JSON não é uma linguagem é um estrutura de dado

     

    Simples procure por parser PHP de JSON para objeto usado no php

  20. Postado

    O problema que você está tendo e que está tratando o getLocation como um código syncrono mas ele é asyncrono, isso quer dizer que a sua logica nao vai seguir uma ordem de execução por linha, por esse motivo seu document.write mostra undefined ele executa primeiro que a função.

    Resumindo mesmo que você check o valor no metodo de "sucesso" e naquele momento que existe o valor, mas seu write na ultima linha executou antes disso então nunca terá o valor, seu conceito de variavel global pode ser feito mas precisa executar somente apos o valor for retornado, se você testar o codigo que coloquei a variavel se manteve mas so chamei o metodo apos o valor ser retornado 'simples coloque os console.log e vai ver a ordem que está ocorrendo a execução.

     

    No caso do seu problema apenas utilize o restante da sua logica em metodos assim chamara apenas quando o valor for retornado, viu que coloquei um metodo chamado "manipulaCoord", ele está imprimindo 2 variáveis a que esta sendo enviada por parametro e a variavel de scopo global "coordenadas"

      

    function manipulaCoord(coord) {
  console.log('manipulaCord:', coord, coordenadas);
}

     

      

    coordenadas = ""; //Defini essa variável segundo meus conhecimentos, por ter omitido a palavra 'var' ela é global

function getCurrentLocation(callback) {
  if(!navigator.geolocation) return;
  navigator.geolocation.getCurrentPosition(function(position) {
    var currLocation = { lat: position.coords.latitude, long: position.coords.longitude };
    callback(currLocation);
  });
}

getCurrentLocation(function(currLocMap){
  coordenadas = currLocMap;
  console.log('valor aqui', coordenadas);
  
  // chama o metodo para executar o restante do código
  algumMetodo();
});



function algumMetodo() {
  console.log('algumMetodo: ', coordenadas);
}

     

  21. Postado

      

    const getCoords = async () => {
  if('geolocation' in navigator) {
    const pos = await new Promise((resolve, reject) => {
      navigator.geolocation.getCurrentPosition(resolve, reject);
    });
    
    return {
      long: pos.coords.longitude,
      lat: pos.coords.latitude,
    };
  } 
  else {
    alert("Navegador incompatível com esse recurso");
  }
};

const coords = getCoords().then((data, error) => {
  console.log(data);
});

    OU

      

    var coordenadas = ""; //Defini essa variável segundo meus conhecimentos, por ter omitido a palavra 'var' ela é global

const getCoords = async () => {
  if('geolocation' in navigator) {
    const pos = await new Promise((resolve, reject) => {
      navigator.geolocation.getCurrentPosition(resolve, reject);
    });
    
    return {
      long: pos.coords.longitude,
      lat: pos.coords.latitude,
    };
  } 
  else {
    alert("Navegador incompatível com esse recurso");
  }
};

async function initialize() {
  coordenadas = await getCoords();
  
  console.log('Init:Coord: ', coordenadas);
  manipulaCoord(coordenadas);
}

function manipulaCoord(coord) {
  console.log('manipulaCord:', coord, coordenadas);
}

initialize();

     

  22. Postado

    1 hora atrás, acneto.frc disse:

    Fiz as correções recomendadas e agora apresenta a seguinte mensagem

     

    TypeError: Converting circular structure to JSON
        at JSON.stringify (<anonymous>)
        at segurosGetAll (/home/acneto/0-SistemasWeb/async_await/v03/api/controllers/segurosControllers.js:11:26)
        at process._tickCallback (internal/process/next_tick.js:68:7)

     

    11:26 é o início da palavra

    stringify

     

    E no navegador apresenta:  error: true.

     

    Parece que o que está retornando da model não pode ser "convertido"

     

    Caso faça console.log(retorno), apresenta um monte de informações.

     

     

     

    Aparece erro true pq está quebrando no try do controller, apenas remova essa linha do stringify e substitua {error:true} pelo erro  {error: err} ela não esta sendo usada é apenas um código que você havia colocado e eu manti, e confira o que é retornado do banco o formato de dado retornado.

     

    Obs: você deve colcoar código aqui, e muito dificil apenas avaliar sua argumentação, e note que coloquei anotações e como não colocou eles aqui não sei se realizou as alterações, ex: no model deixei claro que a require que estava usando era de test, e deveria ser usado o arquivo de conexão orginal quando testado ecom amebiente real. mas se você somente oclocar os erros, ninguem aqui no forum vai conseguir analisar sua condição atual.

  23. Postado

    Bom você não colocou nenhum código da modal apenas o calculo, mas você pode fazer o seguinte muitas libs de modal disponibilizam um evento de close, então você escuta esse evento e ao fechar a modal no momento de uma adição você reseta os campos

  25. Postado

    Cara porque você quer fazer dessa forma, a menos que sejá algum desafio pessoal ou estudo de lógica a melhor solução seria usar elementos nativos para isso como:

      

    <input type="time" />
<input type="date" />
<input type="datetime-local" />

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito