Ir ao conteúdo
  • Cadastre-se

Mizrain Phelipe Sá

Membro Pleno
  • Posts

    71
  • Cadastrado em

  • Última visita

  1. @Marcelo Calazans Olá amigo, seu post me tiro algumas dúvidas sobre o assunto e irei usar suas dicas, obrigado!
  2. Olá pessoal, desenvolvi um site em Angular12 onde a estrutura(template e abas) já esta praticamente pronta. O site sera focado em noticias(estilo tecmundo, msn etc) que eu pretendo colocar. O problema não esta em colocar as noticias mais em como eu farei esse armazenamento de forma dinâmica na medida em que obviamente as noticias forem crescendo. Ja ouvi falar dos sites em CMS com WordPress, porém não se encaixa para meu projeto em Angular e no meu estilo de fazer na mão. Eu sei que precisarei usar um banco de dados, no caso o MySQL talvez, porém não sei como devo fazer esse processo. Alguém pode me tirar essa dúvida, como faço para gerenciar o conteudo das noticias do site de forma que não pese o sistema quando chegar a mais de 1000 notícias por ai?
  3. @Rui Guilherme Agradeço pela sua resposta brother! Mais em relação ao Angular e o framework utilizado no órgão público em que eu trabalho para desenvolvimento frontend dos sistemas aqui, por isso eu o utilizo e estudo mais, fora que entre ele e o React foi o que mais me identifiquei. Porém eu mantenho um estudo concentrado em relação ao React Native também por ser um framework muito utilizado no mercado.
  4. Olá pessoal, sou programador nível intermediário e atualmente costumo programar em C# (backend) e Angular (frontend). Porém o que eu sei de C# ainda e muito básico, assim como o framework Angular. Gostaria de saber na opinião ou experiência de vocês quanto tempo e estudando quantas horas por dia e o necessário para se dominar a linguagem C# ou ao menos já ter um bom conhecimento da linguagem?
  5. Você poderia transformar esse input do "enviar" em um button e colocar uma função "onclick" nele. Ao ser clicado o botão, dispararia a função chamada pelo onclick onde você poderia colocar as verificações de validação e então o redirecionamento de página. <button type="submit" name="" placeholder="Login" onclick = "disparaFunction()"></button
  6. Tenho uma função que verifica se os campos do meu formulário foram preenchidos ou não pegando pelo seu valor. Caso tenha sido preenchido determinados campos e executado uma ação em que aparece a progressBar. Nesta função tenho 4 Ifs que fazem a verificação e vai acrescentando mais um numero de campos para ver se foi preenchido ou não e então exibe a progressBar correspondente. O problema é se todo o formulário foi preenchido ativando o quarto If e exibindo a "progressBar100", se depois disso o valor do campo "verInq1" for excluído a barra que passa a ser exibida no lugar da "progressBar100" será a "progressBar0" ao invés de ser a "progressBar75". Isso acontece em todos os Ifs. Então eu queria fazer a verificação ao contrário também, em ordem decrescente onde se o último If não foi validado então ele retornasse o terceiro If e assim por diante. HTML das progressBar. <div style="margin-bottom: 1.5em;"> <div id="InqProgress0" class="progress barProgressAbas"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div> <div id="InqProgress25" class="progress barProgressAbas ocultaProgressAbas"> <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div> </div> <div id="InqProgress50" class="progress barProgressAbas ocultaProgressAbas"> <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div> </div> <div id="InqProgress75" class="progress barProgressAbas ocultaProgressAbas"> <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div> </div> <div id="InqProgress100" class="progress barProgressAbas ocultaProgressAbas"> <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div> </div> </div> Meu JS para checar o valor e executar ação. function progressBarInq() { let progressBar0 = document.getElementById("InqProgress0"); let progressBar25 = document.getElementById("InqProgress25"); let progressBar50 = document.getElementById("InqProgress50"); let progressBar75 = document.getElementById("InqProgress75"); let progressBar100 = document.getElementById("InqProgress100"); //25% let verInq1 = document.getElementById("InqueritoCircunscricaoPolicial"); //50% let verInq5 = document.getElementById("NumeroDoIP"); //75% let verInq8 = document.getElementById("DataDoRelatorio"); //100% let verInq11 = document.getElementById("NumeroDoProcesso"); if (verInq1.value) { progressBar0.style.display = "none"; progressBar25.style.display = "block"; progressBar50.style.display = "none"; progressBar75.style.display = "none"; progressBar100.style.display = "none"; } if (verInq1.value && verInq5.value) { progressBar0.style.display = "none"; progressBar25.style.display = "none"; progressBar50.style.display = "block"; progressBar75.style.display = "none"; progressBar100.style.display = "none"; } if (verInq1.value && verInq5.value && verInq8.value) { progressBar0.style.display = "none"; progressBar25.style.display = "none"; progressBar50.style.display = "none"; progressBar75.style.display = "block"; progressBar100.style.display = "none"; } if (verInq1.value && verInq5.value && verInq8.value && verInq11.value) { progressBar0.style.display = "none"; progressBar25.style.display = "none"; progressBar50.style.display = "none"; progressBar75.style.display = "none"; progressBar100.style.display = "block"; } } progressBarInq();
  7. @Marcelo Calazans Então, quero que verifique automaticamente se o campo esta preenchido ou não. Não precisa ser depois do submit. No caso eu usei o seu exemplo na minha função e funciono, porém esta dando erro no console (Cannot read property 'value' of null).
  8. Gostaria de uma função que verificasse se alguns campos do formulário foram preenchidos e caso verdadeiro ela executaria um código meu, caso falso ela não faria nada. Resumindo gostaria de saber como faço a verificação dos campos, o código que será executado eu já tenho pronto. HTML dos campos que pretendo verificar se foram preenchidos: <!-- verifica select --> <div class="form-group pmd-textfield col-md-4"> <label for="InqueritoCircunscricaoPolicial" class="control-label cssPerguntas espacamentoLabels"> <strong>1.1</strong> Circunscrição policial </label> <select asp-for="InqueritoModel.COD_INQUERITO_CIRCUNSCRICAO_POLICIAL " asp-items="Model.ListCircunscricao" id="InqueritoCircunscricaoPolicial" class="select-codigo" onchange="mostrarOutroDeCombo(this, 'DSC_OUTRO_INQUERITO_CIRCUNSCRICAO_POLICIAL')"> <option value="">Selecione a circunscrição</option> </select> </div> <!-- verifica input --> <div class="form-group pmd-textfield col-sm-3"> <label for="NumeroDaOcorrencia" class="control-label cssPerguntas espacamentoLabels"> <strong>1.3</strong> Número da ocorrência </label> <input class="form-control" id="NumeroDaOcorrencia" maxlength="1000" placeholder="N° da ocorrência" asp-for="InqueritoModel.NumeroDaOcorrencia" type="text"> </div> <!-- verifica input --> <div class="form-group pmd-textfield col-sm-3"> <label for="DataDaInstauracao" class="control-label cssPerguntas espacamentoLabels"> <strong>1.9</strong> Data da instauração </label> <input class="form-control" id="DataDaInstauracao" min="1900-01-01" asp-for="InqueritoModel.DataDaInstauracao" type="date"> </div>
  9. criei uma função para que quando o botão for clicado ele faça a "barProgress25" aparecer e a "barProgress0" ocultar da tela. Porém o que acontece e que quando clico no botão ele executa a função porém após o refresh da página pois ele manda um submit o "barProgress25" e "barProgress0" voltam a ter seus css originais. Como resolvo isso? HTML code button. <button type="submit" id="btnSalvar" onclick="desabilitaBtn(this.id); exibeBarras();" class="btnSalvarGreen btnInqBar" form="FormInquerito" style="margin-left: 1em;"> SALVAR </button> HTML code bar. <div id="barProgress0" class="progress barProgress"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div> <div id="barProgress25" class="progress barProgress"> <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div> </div> Code function. function exibeBarras(visivel) { if (visivel == undefined) { visivel = true; } if (visivel) { document.getElementById("barProgress25").style.display = "block"; document.getElementById("barProgress0").style.display = "none"; } }
  10. Tenho uma barra de progresso que deve mostrar a porcentagem de preenchimento de um formulário dividido em abas, sendo que cada aba contem um "form". Essa barra de progresso e um plug-in do JQuery (FormProgressBar) que é ativado através de campos preenchidos com o parâmetro "required". Na primeira aba a barra de porcentagem funciona perfeitamente, porém quando mudo para outra aba contendo outro form a barra de porcentagem some. Gostaria que a barra de porcentagem não sumisse ao mudar de aba e que ela continuasse a contagem ate o final do formulário, como resolvo isso? 1- Aqui a barra funcionando corretamente na primeira aba do formulário. 2- Aqui a barra some quando eu vou para outra aba do formulário. Este é o código HTML do form dessas duas Abas, estou usando nas duas a class "formProgress" para chamar o plug-in da barra de progresso. <form action="/Pasta/SalvarInquerito" method="post" id="FormInquerito" class="formProgress"></form> <form method="post" action="/Pasta/SalvarCrime" id="FormCrime" class="formProgress"></form> Este é o JS do formProgressBar com formatações CSS da barra que e chamada no HTML. $(".formProgress").formProgressBar({ percentCounting: true, // default: false height: 16,// default: 10 // default: 500 transitionTime: 500, //ease, linear, ease-in, ease-out, ease-in-out transitionType: 'ease-in', }); E este é o código base do plug-in. $.fn.formProgressBar = function(options) { var defaults = { readCount: false, validClass: 'valid', invalidClass: 'error', percentCounting: true, transitionTime: 0, height: 10, transitionType: 'ease', //ease, linear, ease-in, ease-out, ease-in-out parentElement: "body" }; var settings = $.extend( {}, defaults, options ); //$(settings.parentElement).prepend("<div id='jQueryProgressFormBar'><div></div></div>") $("#jQueryProgressFormBar").css("width","100%").css("height",settings.height).css("z-index",10000) $("#jQueryProgressFormBar>div").css({ WebkitTransition : 'all '+settings.transitionTime+'ms '+settings.transitionType, MozTransition : 'all '+settings.transitionTime+'ms '+settings.transitionType, MsTransition : 'all '+settings.transitionTime+'ms '+settings.transitionType, OTransition : 'all '+settings.transitionTime+'ms '+settings.transitionType, transition : 'all '+settings.transitionTime+'ms '+settings.transitionType }).css("height",settings.height); this.elementsRequied = function () { var formElements = $(this).find("input[required], textarea[required], select[required]").toArray() arr = []; formElements.map(function (item) { arr[item.name] = 0; if(item.checked) arr[item.name] = 1; }) return arr; } this.refresh = function () { formFields = this.elementsRequied(); } this.renderBar = function () { var correctFields = 0 var length = 0; var error = false; for(var item in formFields){ if(formFields[item]==1){ correctFields++; } if(formFields[item]==-1) error=true; length++; } var percentOfSuccess = (correctFields/length*100).toFixed(2); if(settings.percentCounting) $("#jQueryProgressFormBar>div").text(Math.round(percentOfSuccess)+" %") $("#jQueryProgressFormBar>div").css("width",percentOfSuccess+"%") if(error==true) $("#jQueryProgressFormBar>div").addClass('warn') else $("#jQueryProgressFormBar>div").removeClass('warn').removeClass('error') } this.bindElements = function () { var editBar = this.renderBar $(this).find("input[required], textarea[required], select[required]").change(function () { if(!settings.readCount){ switch ($(this).prop('nodeName')){ case "INPUT": switch ($(this).attr("type")){ case "text": if($(this).val()!=""){ formFields[$(this).attr("name")]=1 }else{ formFields[$(this).attr("name")]=-1 } break; case "email": var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; if(re.test(String($(this).val()).toLowerCase())){ formFields[$(this).attr("name")]=1 }else{ formFields[$(this).attr("name")]=-1 } break; case "number": if($.isNumeric($(this).val())){ formFields[$(this).attr("name")]=1 }else{ formFields[$(this).attr("name")]=-1 } break; case "checkbox": if($(this).is(':checked')){ formFields[$(this).attr("name")]=1 }else{ formFields[$(this).attr("name")]=-1 } break; case "radio": if($(this).is(':checked')){ formFields[$(this).attr("name")]=1 }else{ formFields[$(this).attr("name")]=-1 } break; } break; case "SELECT": if($(this).val()!=""){ formFields[$(this).attr("name")]=1 }else{ formFields[$(this).attr("name")]=-1 } break; } }else{ switch ($(this).attr("type")){ case "checkbox": if($(this).is(':checked')){ formFields[$(this).attr("name")]=1 }else{ formFields[$(this).attr("name")]=-1 } break; case "radio": if($(this).is(':checked')){ formFields[$(this).attr("name")]=1 }else{ formFields[$(this).attr("name")]=-1 } break; } } editBar(); }) if(settings.readCount) { var $div = $(this).find("input[required], textarea[required], select[required]"); var observer = new MutationObserver(function (mutations) { mutations.forEach(function (mutation) { if (mutation.attributeName === "class") { if ($(mutation.target).hasClass(settings.validClass)) { formFields[$(mutation.target).attr("name")] = 1 } else if ($(mutation.target).hasClass(settings.invalidClass)) { formFields[$(mutation.target).attr("name")] = -1 } editBar(); } }); }); $div.map(function (item) { observer.observe($div[item], { attributes: true }); }) } ; $(this).submit(function (e) { if($("#jQueryProgressFormBar>div").hasClass('warn')){ $("#jQueryProgressFormBar>div").removeClass("warn").addClass("error") e.preventDefault() return } var correctFields = 0 for(var item in formFields){ if(formFields[item]==1){ correctFields++; } length++; } if(correctFields!=length){ $("#jQueryProgressFormBar>div").removeClass("warn").addClass("error") e.preventDefault() return } $("#jQueryProgressFormBar>div").removeClass("warn").removeClass("error") }) } var formFields = this.elementsRequied(); this.bindElements() return this; }; $.fn.formProgressBar
  11. @Rui Guilherme Gostei da sua resposta, me ajudo bastante porém no exemplo você coloco as datas manualmente dentro da const resultado, eu queria saber como posso fazer isso automaticamente puxando a data certa do banco
  12. Tenho duas colunas onde são registradas datas e horas, a coluna "DataDoIndiciamento" e "DataDoRecebimentoDaDenuncia". A partir dessas duas colunas eu preciso pegar a data com o menor tempo da coluna "DataDoIndiciamento" ate "DataDoRecebimentoDaDenuncia" e então jogar na tela o numero de dias de uma data para a outra. No caso eu precisaria pegar da coluna "DataDoIndiciamento" o valor [2021-03-17 00:00:00.000] já que esse seria o menor tempo, tirar as horas e pegar apenas a data e então pegaria da coluna "DataDoRecebimentoDaDenuncia" da mesma linha o valor referente [24-03-2021 00:00:00.000], tiraria as horas e faria a contagem do número de dias da "DataDoIndiciamento" ate "DataDoRecebimentoDaDenuncia" que no caso daria 7 dias e então mostraria na tela esse resultado. Eu já tenho uma public List da dados que uso para pegar as colunas dessa tabela já montada: // --------- graficos com base na TR_CRIME_AUTOR --------- public List<CrimeAutorModel> GetAllCrimeAutorModel() { using (IDbConnection cn = ConnectionAnaliseCriminal) { try { cn.Open(); string query = "SELECT COD_CRIME_AUTOR" + ", DataDoIndiciamento" + ", DataDoRecebimentoDaDenuncia" + " FROM dbo.TR_CRIME_AUTOR" + " WHERE DT_EXCLUSAO_LOGICA IS NULL"; return cn.Query<CrimeAutorModel>(query).ToList(); } finally { cn.Close(); } } } E também já tenho o Ajax montado na controller que pega da dados e uso para passar no JS: // --------- graficos com base na TR_CRIME_AUTOR ---------- [HttpGet] public JsonResult AjaxGetAllCrimeAutorModel() => Json(new DashboardDados().GetAllCrimeAutorModel()); E tenho a base da função: async function shortestTimeDays() { let resultado, numberOfDays = 0; //chama o método ajax que trás todos os objetos try { const resposta = await fetch(`/Dashboard/AjaxGetAllCrimeAutorModel`); resultado = await resposta.json(); } catch (e) { console.error("Erro ao realizar fetch"); return console.error(e); } } Agora gostaria de saber como devo proceder no javascript para fazer o meu objetivo e poder jogar na tela o resultado. <div class="blocoProcessos" style="margin-bottom: 2em;"> <div style="width: 100%;text-align:center;"> <div> <span style="font-size: 20px;font-weight: 400;">Tempo minimo fase pré-processual</span> </div> <hr class="hrBlocoProcesso" style="margin-bottom: 5px;margin-top: 10px;" /> <div style="display: flex;flex-direction: column;align-items: center;"> <span>Tempo (em dias)</span> <span style="font-size: 25px;">*</span> </div> </div> </div> Grato Mizrain.
  13. Estou usando um código no meu script que peguei na net e funciona, mas esta exibindo os valores ao contrário, os valores com zero aparecem no topo e depois os valores vêm em ordem crescente (1,2,3 ...). Queria que a ordem ficasse assim (4,3,1,0) e que a ordem fosse decrescente no gráfico também, da mais alta para a mais baixa. async function grMeioEmpregado() { let agressaoFisica = 0; let armaBranca = 0; let armaFogo = 0; let asfixia = 0; let fogo = 0; let objetoContundente = 0; let veneno = 0; let outro = 0; let nCI = 0; const url = `/Crime/AjaxAgressaoFisica` const url2 = `/Crime/AjaxArmaBranca` const url3 = `/Crime/AjaxArmaFogo` const url4 = `/Crime/AjaxAsfixia` const url5 = `/Crime/AjaxFogo` const url6 = `/Crime/AjaxObjetoContundente` const url7 = `/Crime/AjaxVeneno` const url8 = `/Crime/AjaxOutroMeioEmpregado` const url9 = `/Crime/AjaxNCIMeioEmpregado` try { const resposta = await fetch(url); const resposta2 = await fetch(url2); const resposta3 = await fetch(url3); const resposta4 = await fetch(url4); const resposta5 = await fetch(url5); const resposta6 = await fetch(url6); const resposta7 = await fetch(url7); const resposta8 = await fetch(url8); const resposta9 = await fetch(url9); const resultado = await resposta.json(); const resultado2 = await resposta2.json(); const resultado3 = await resposta3.json(); const resultado4 = await resposta4.json(); const resultado5 = await resposta5.json(); const resultado6 = await resposta6.json(); const resultado7 = await resposta7.json(); const resultado8 = await resposta8.json(); const resultado9 = await resposta9.json(); agressaoFisica = resultado; armaBranca = resultado2; armaFogo = resultado3; asfixia = resultado4; fogo = resultado5; objetoContundente = resultado6; veneno = resultado7; outro = resultado8; nCI = resultado9; } catch (e) { console.error(e); } const countries = ['Agressão Física', 'Arma Branca', 'Arma de Fogo', 'Asfixia', 'Fogo', 'Objeto Contundente', 'Veneno', 'Outro', 'NCI - Não Consta Informação']; const mortalityRates = [agressaoFisica, armaBranca, armaFogo, asfixia, fogo, objetoContundente, veneno, outro, nCI]; const sortedData = mortalityRates.map((v, i) => ({ rate: v, country: countries[i] })).sort((o1, o2) => o1.rate - o2.rate); var ctx = document.getElementById('grMeioEmpregado').getContext('2d'); var chart = new Chart(ctx, { type: 'horizontalBar', data: { labels: sortedData.map(o => o.country), datasets: [{ label: 'Nº de Meios empregado', backgroundColor: [ 'RGBA(178,235,242,0.56)', 'RGBA(178,235,242,0.56)', 'RGBA(178,235,242,0.56)', 'RGBA(178,235,242,0.56)', 'RGBA(178,235,242,0.56)', 'RGBA(178,235,242,0.56)', ], borderWidth: 1, borderColor: 'RGBA(0,172,193,0.48)', hoverBackgroundColor: 'RGBA(0,172,193,0.22)', hoverBorderColor: 'RGBA(0,172,193,0.48)', data: sortedData.map(o => o.rate), }] }, options: { scales: { xAxes: [{ ticks: { autoSkip: false, min: 0, max: 10, callback: function (value) { return value + "%" } }, scaleLabel: { display: true, labelString: "Porcentagem" } }], yAxes: [{ ticks: { beginAtZero: true } }], }, responsive: true, legend: { labels: { fontSize: 15, } }, animation: { animateScale: true, duration: 2000, }, plugins: { datalabels: { color: '#616161', } } } }); } grMeioEmpregado(); Assim fica o gráfico com a ordem errada: Resolvido, basicamente era só trocar a posição .sort((o1, o2) para .sort((o2, o1)
  14. Tenho um select que quando o usuário selecionar a option "NCI - Não consta informação - Código 0" ele deve desabilitar as outras opções não permitindo que seja adicionado nenhum option a mais. Precisaria de um script que pegasse o "value" dessa minha option e desabilitasse as outras, como faço? Obs: o "data-value" dessa option é = 0 Código: <div class="row"> <div class="col-md-4 form-group pmd-textfield" style="padding-top: 0.8em;"> <select asp-for="Vitima.COD_POSSUI_ANTECEDENTE_CRIMINAL" asp-items="@(Model.Vitima.CodVitima > 0 ? Model.PossuiAntecedenteCriminal.Where(x => !x.Text.Contains("criança")) : new List<SelectListItem>())" id="Antecedente" onchange="toggleTabela(this, 'divAlertaAntecedenteCriminal', 'corpoTabelaAntecedenteCriminal', 'containerBtnAdicionaAntecedentes')" data-modal="AvisoExclusaoAntecedentes" class="select-country" disabled="@(Model.Vitima.CodVitima <= 0 ? true : false)"> @if (Model.Vitima.CodVitima > 0) { <option value="">Selecione uma opção</option> } else { <option value="">Salve a vítima antes de utilizar essa opção</option> } </select> </div> </div> Código da option: <div class="item" data-value="0"> "NCI - Não Consta Informação - Código " <strong>0</strong> </div>

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...