wanderval

Sugestão de melhoria no layout Layout original Alternativa 1 Alternativa 2 Layout original lista Alternativa Links imagem: https://imghub.io/i/sCktV https://imghub.io/i/sChi2 https://imghub.io/i/sC0Gm https://imghub.io/i/sC1aT https://imghub.io/i/sCtgS Link jsbin https://jsbin.com/zisivoquma/1/edit?html,css,output

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

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.

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

.box-image-2 { display: flex; align-items: center; } https://jsbin.com/hukerubeve/edit?html,css,output

Isso ai parabéns! uma dica! quando surgir duvida sobre a lib, você pode pesquisar no npmjs muitas libs tem exemplo ex: require('mysql') https://www.npmjs.com/package/mysql

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

limite o tamanho da div .container-cards { flex-wrap: wrap; display: inline-flex; width: 430px; align-items: center; justify-content: center; } link: https://jsbin.com/dasidosija/edit?html,css,output

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

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.

Fazer isso é fácil, mas você não falou como espera que funcione assim fica difícil! 1- Tirar do input e colocar onde? em uma div? em um span? //Atribui o valor ao input $("#evento_value").val(total); //Insere o text entre as tags <span> text </span> $("#resultado").text(total); tá aqui um exemplo https://jsbin.com/haginosode/edit?html,js,output

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

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

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?

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])

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

Seu problema é css os botoes estão ai. <style> .list-logos { margin: 30px; } .slick-arrow { background: red; } </style> https://jsbin.com/puyofifari/edit?html,css,js,output

O que o teu banco retorna? que tipo de dado, nao precisa postar aqui já que é um dado sencivel mas tente colcoar uma estrutura do objeto que é retornaod pelo banco

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); }

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();

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.

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

Usa essa lógica como base e faz a sua regressiva, lembrando que isso só funciona na maquina local, pra ser mais exato no mesmo navegador https://jsbin.com/hixosokopo/edit?html,js,output

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

Pelo que percebi essa aplicação é node.js e não uma aplicação front-end está aparecendo undefined pq você não esta retornando nada no response, isso é uma API náo pode deixar de usar response e request. Essa é uma chamada de APi para rota como foi delegado para outro método manipular response(res) ou request(req) como é um get deve ter um response populado. Segundo seu Model não está fazendo nada além de fazer console.log então mesmo chegando resposta do banco nada voltara para o controller. app.get('/estagio/movimentacoes/cadastroSeguros', segurosRoutes.segurosGetAll); Como você pode ver em nenhum momento foi utilizado o "res"nesse método =====CONTROLLER const segurosController = require('../models/segurosModels.js'); module.exports = { segurosGetAll, } async function segurosGetAll(req, res) { console.log('Acessando Models!!!') try{ const retorno = await segurosController.getAll() console.log(JSON.stringify(retorno)) }catch (err){ console.log(err) } } =====ALTERACAO CONTROLLER const segurosController = require("../models/segurosModels.js"); module.exports = { segurosGetAll }; async function segurosGetAll(req, res) { console.log("=========SEGUROS GET ALL CONTROLLER========"); try { const retorno = await segurosController.getAll(); console.log(JSON.stringify(retorno)); res.json(retorno); } catch (err) { console.log(err); res.json({ error: true }); } } ======MODEL====== const conexao = require('../../config/conexao.js'); module.exports = { getAll, } function getAll() { m_sql = 'select * from seguros '; console.log("SQL em Model Seguros...."+'\n'+m_sql) conexao.query(m_sql); console.log("GetAll Sql retornando: ") } =====ALTERACAO MODEL======= // const client = require("../../config/conexao.js"); // const moment = require("moment"); // comentei pq nao vi nenhuma utilizacao // APENAS TEST MOCK const client = require("../config/conexao.js"); module.exports = { getAll }; async function getAll() { console.log("=========GET ALL MODEL========"); const m_sql = "select A.*, B.seg_razaosocial, B.seg_nomefantasia, C.alu_nome, D.usu_username from seguros A left join seguradora B on A.seg_codigo = B.seg_codigo left join usuarios D on A.usu_codigo = D.usu_codigo left join alunos C on A.alu_codigo = C.alu_codigo "; let retorno; try { retorno = await client.query(m_sql); } catch (error) { throw new Error(error); } return retorno; } tenta acessar essa plataforma: https://codesandbox.io/s/zealous-brahmagupta-mqhxd?file=/src/index.js