diff --git a/css/estilo.css b/css/estilo.css new file mode 100644 index 00000000..f0eb00bd --- /dev/null +++ b/css/estilo.css @@ -0,0 +1,200 @@ +/* Rules for sizing the icon. */ + +.material-icons.md-18 { + font-size: 18px; +} + +.material-icons.md-24 { + font-size: 24px; +} + +.material-icons.md-32 { + font-size: 32px; +} + +.material-icons.md-36 { + font-size: 36px; +} + +.material-icons.md-48 { + font-size: 48px; +} + + +/* Rules for using icons as black on a light background. */ + +.material-icons.md-dark { + color: rgba(0, 0, 0, 0.54); +} + +.material-icons.md-dark.md-inactive { + color: rgba(0, 0, 0, 0.26); +} + + +/* Rules for using icons as white on a dark background. */ + +.material-icons.md-light { + color: rgba(74, 92, 104, 1); +} + +.material-icons.md-light:hover { + color: rgba(255, 255, 255, 0.8); +} + +.material-icons.md-custom { + color: #ffffff; + vertical-align: bottom; +} + + +/*navbar configures*/ + +.navbar { + background-color: #102938; + padding: 0; +} + +.navbarLinks { + font-family: "Helvetica Neue", "Helvetica", "sans-serif"; + font-weight: bold; + font-size: 12.39pt; + text-transform: uppercase; +} + +.navbar-light .navbar-nav .nav-link { + color: #ffffff; +} + +.navbar-light .navbar-nav .nav-link:hover { + color: #39bb9d; +} + +.navbar-bg-center { + background-color: #39bb9d; + margin: 0; + padding: 0.5em; + border: 0; +} + +.navbar-brand, +.navbar-collapse { + padding: 0 2rem; +} + +.navbar-bg-center .navbar-nav .nav-link:hover { + color: rgba(16, 41, 56, 0.7); +} + +.nav-secLink { + font-family: "Trebuchet MS", "Helvetica", sans-serif; + font-size: 12pt; + color: #666666; +} + +.nav-secLink:hover { + font-weight: bold; + color: #39bb9d; +} + + +.dropdown-toggle::after { + color: #4a5c68; +} + + +.active-secLink { + font-weight: bold; + color: #39bb9d; +} + +main { + margin-bottom: 3rem; +} + +.copyright { + padding-left: 1.25rem; +} + +.help-ico { + padding-right: 1.25rem; + display: block; + float: right; + color: #999999; +} + +.footer { + font-family: "Trebuchet MS", "Helvetica", sans-serif; + font-size: 12pt; + color: #999999; + background-color: #565351!important; + padding: 5px 0; +} + +.jbt-title { + font-family: "Helvetica Neue", "Helvetica", "sans-serif"; + font-weight: bold; + font-size: 12pt; + color: #102938; + padding: 0 0 0 1rem; + margin: 0; +} + +.jbt-text { + font-family: "Helvetica Neue", "Helvetica", "sans-serif"; + font-size: 12pt; + color: #102938; +} + +.card-body img { + margin: 0 0.45rem; + padding: 0; +} + +.jumbotron { + margin: 0; + padding: 0.85rem 1.25rem; + background-color: #ffffff; + border-bottom:solid rgba(153, 153, 153, 0.7) 1px; + position: relative; +} + +table { + text-align: center; +} + +.section-title{ + text-align: center; + font-family: "Helvetica Neue", "Helvetica", "sans-serif"; + font-weight: bold; + color: #102938; + padding-top: 1rem; +} + +.graf-section { + width: 75%; +} + +label { + margin-right: 0.5rem; +} + +.conj-input{ + margin: 0.5rem 0.5rem 0 0; +} + +.form-custom{ + margin-top: 1rem; +} + +.form-font{ + margin-top: 0; + padding-top:0; +} + +.form-coluna-hum, +.col-sm-10 { + padding-left: 0; +} + + diff --git a/css/estilo.min.css b/css/estilo.min.css new file mode 100644 index 00000000..bf26c54a --- /dev/null +++ b/css/estilo.min.css @@ -0,0 +1,186 @@ +/* Tamanhos dos icones */ + +.material-icons.md-24 { + font-size: 24px; +} + +.material-icons.md-32 { + font-size: 32px; +} + +/* Estilo dos ícones */ + +.material-icons.md-custom { + color: #ffffff; + vertical-align: bottom; +} + +.material-icons.md-light { + color: rgba(74, 92, 104, 1); +} + +.material-icons.md-light:hover { + color: rgba(255, 255, 255, 0.8); +} + +/*configurações página*/ + +.navbarLinks, +.jbt-title, +.section-title { + font-family: "Helvetica Neue", "Helvetica", "sans-serif"; + font-weight: bold; +} + +.jbt-title, +.jbt-text, +.nav-secLink, +.footer { + font-size: 12pt; +} + +.jbt-title, +.jbt-text, +.section-title { + color: #102938; +} + +.navbarLinks { + font-size: 12.39pt; + text-transform: uppercase; +} + + +.jbt-title { + padding: 0 0 0 1rem; + margin: 0; +} + + +.jbt-text { + font-family: "Helvetica Neue", "Helvetica", "sans-serif"; +} + +.section-title { + text-align: center; + padding-top: 1rem; +} + +.nav-secLink, +.footer { + font-family: "Trebuchet MS", "Helvetica", sans-serif; +} + +.navbar-light .navbar-nav .nav-link { + color: #ffffff; +} + +.navbar-light .navbar-nav .nav-link:hover { + color: #39bb9d; +} + +.navbar { + background-color: #102938; + padding: 0; +} + +.navbar-bg-center { + background-color: #39bb9d; + margin: 0; + padding: 0.5em; + border: 0; +} + +.navbar-brand, +.navbar-collapse { + padding: 0 2rem; +} + +.navbar-bg-center .navbar-nav .nav-link:hover { + color: rgba(16, 41, 56, 0.7); +} + +.nav-secLink { + color: #666666; +} + +.nav-secLink:hover { + font-weight: bold; + color: #39bb9d; +} + + +.dropdown-toggle::after { + color: #4a5c68; +} + + +.active-secLink { + font-weight: bold; + color: #39bb9d; +} + +main { + margin-bottom: 3rem; +} + +.copyright { + padding-left: 1.25rem; +} + +.help-ico { + padding-right: 1.25rem; + display: block; + float: right; + color: #999999; +} + +.footer { + color: #999999; + background-color: #565351!important; + padding: 5px 0; +} + + +.card-body img { + margin: 0 0.45rem; + padding: 0; +} + +.jumbotron { + margin: 0; + padding: 0.85rem 1.25rem; + background-color: #ffffff; + border-bottom: solid rgba(153, 153, 153, 0.7) 1px; + position: relative; +} + +table { + text-align: center; +} + +.graf-section { + width: 75%; +} + +label { + margin-right: 0.5rem; +} + +.conj-input { + margin: 0.5rem 0.5rem 0 0; +} + +.form-custom { + margin-top: 1rem; +} + +.form-font { + margin-top: 0; + padding-top: 0; +} + +.form-coluna-hum, +.col-sm-10 { + padding-left: 0; +} diff --git a/images/Logo.png b/images/Logo.png new file mode 100644 index 00000000..3e1d9659 Binary files /dev/null and b/images/Logo.png differ diff --git a/images/MikeDias.png b/images/MikeDias.png new file mode 100644 index 00000000..a8323a3b Binary files /dev/null and b/images/MikeDias.png differ diff --git a/images/ico-people.png b/images/ico-people.png new file mode 100644 index 00000000..77c65912 Binary files /dev/null and b/images/ico-people.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..10f164d7 --- /dev/null +++ b/index.html @@ -0,0 +1,130 @@ + + + + + + + + + + + + + + + + Teste Front-end Developer + + + +
+ + +
+ +
+ +
+

Pedidos por dia

+ +
+ +
+
+

Pedidos por solicitantes

+ +
+ +
+
+

Pedidos pendentes

+ + + + + + + + + + + + +
Número PedidoSolicitanteData da CompraCEP
+
+
+ + + + + + + + + + + + + + + + + + + + + diff --git a/js/consultaCep.js b/js/consultaCep.js new file mode 100644 index 00000000..eadf1d76 --- /dev/null +++ b/js/consultaCep.js @@ -0,0 +1,60 @@ +$(document).ready(function () { + + function limpa_formulário_cep() { + // Limpa valores do formulário de cep. + $("#entEndereco").val(""); + $("#entComplemento").val(""); + $("#entCidade").val(""); + $("#entEstado").val(""); + } + + //Quando o campo cep perde o foco. + $("#entCep").blur(function () { + + //Nova variável "cep" somente com dígitos. + var cep = $(this).val().replace(/\D/g, ''); + + //Verifica se campo cep possui valor informado. + if (cep != "") { + + //Expressão regular para validar o CEP. + var validacep = /^[0-9]{8}$/; + + //Valida o formato do CEP. + if (validacep.test(cep)) { + + //Preenche os campos com "..." enquanto consulta webservice. + $("#entEndereco").val("..."); + $("#entComplemento").val("..."); + $("#entCidade").val("..."); + $("#entEstado").val("..."); + + //Consulta o webservice viacep.com.br/ + $.getJSON("https://viacep.com.br/ws/"+ cep +"/json/?callback=?", function (dados) { + + if (!("erro" in dados)) { + //Atualiza os campos com os valores da consulta. + $("#entEndereco").val(dados.logradouro); + $("#entBairro").val(dados.bairro); + $("#entCidade").val(dados.localidade); + $("#entEstado").val(dados.uf); + } //end if. + else { + //CEP pesquisado não foi encontrado. + limpa_formulário_cep(); + alert("CEP não encontrado."); + } + }); + } //end if. + else { + //cep é inválido. + limpa_formulário_cep(); + alert("Formato de CEP inválido."); + } + } //end if. + else { + //cep sem valor, limpa formulário. + limpa_formulário_cep(); + } + }); +}); diff --git a/js/method.js b/js/method.js new file mode 100644 index 00000000..3336f00c --- /dev/null +++ b/js/method.js @@ -0,0 +1,94 @@ +// table dashboad + +window.onload = function () { + + var mysql_query = "SELECT p.id,s.nome,p.data_de_compra,p.cep FROM pedidos p INNER JOIN solicitantes s on p.id_solicitante = s.id ORDER BY p.id ASC"; + + mysqlQuery(mysql_query, function (result) { + // mostra o resultado da query + var obj = JSON.parse(result); + var table_body = document.getElementById("pedidosPendentes"); + + obj.forEach(function (pedido) { + var html_body = "" + + "" + pedido.id + "" + + "" + pedido.nome + "" + + "" + pedido.data_de_compra + "" + + "" + pedido.cep + "" + + ""; + table_body.innerHTML += html_body; + }); + + }); +}; + +// graphic Pedidos por Dia + +var ctx = document.getElementById("pedidosDia"); + var pedidosDia = new Chart(ctx, { + type: 'line', + data: { + labels: ["15/06", "22/06", "25/06", "01/07", "05/07", "09/07", "11/07", "15/07"], + datasets: [{ + data: [0, 1, 0, 1, 1, 1, 1, 0], + backgroundColor: 'rgba(153, 153, 153, 0.15)', + borderColor: '#39bb9d', + borderWidth: 6, + pointBackgroundColor: '#39bb9d' + }] + }, + options: { + scales: { + yAxes: [{ + ticks: { + beginAtZero: true, + max: 2, + stepSize: 1 + } + }] + }, + legend: { + display: false, + } + } + }); + +// graphic Pedidos por Solicitante + +var ctx = document.getElementById("pedidosSolicitantes").getContext('2d'); +var myChart = new Chart(ctx, { + type: 'bar', + data: { + labels: ['2 - Benjamin Heitor de Paula', '3 - Luan Alexandre Ian Mendes', '4 - Renato Theo Cavalcanti', '5 - Yuri Kevin Caio Gomes'], + datasets: [{ + data: [1, 2, 1, 1], + backgroundColor: [ + 'rgba(153, 102, 255, 0.25)', + 'rgba(255, 99, 132, 0.25)', + 'rgba(255, 206, 86, 0.25)', + 'rgba(54, 162, 235, 0.2)', + ], + borderColor: [ + 'rgba(153, 102, 255, 0.9)', + 'rgba(255,99,132,0.9)', + 'rgba(255, 206, 86, 0.9)', + 'rgba(75, 192, 192, 0.9)', + ], + borderWidth: 1 + }] + }, + options: { + scales: { + yAxes: [{ + ticks: { + beginAtZero: true, + max: 3, + stepSize: 1 + } + }] + }, + legend: { + display: false, + } + } + }); diff --git a/js/pedido.js b/js/pedido.js new file mode 100644 index 00000000..0cd94d30 --- /dev/null +++ b/js/pedido.js @@ -0,0 +1,65 @@ +$(document).ready(function () { + // preenche os campos relacionados a tabela pedidos + $("#btnBuscar").click(function (mostrarPedido) { + mostrarPedido.preventDefault(); + + var valorInput = $("#inputCodPed").val(); + var mysql_query = "SELECT * FROM pedidos where id = " + valorInput; + mysqlQuery(mysql_query, function (resultPedido) { + + var obj = JSON.parse(resultPedido); + $("#codPedido").val(obj[0].id); + $("#dataCompra").val(obj[0].data_de_compra); + + }); + }); + // preenche os campos relacionados a tabela material + $("#btnBuscar").click(function (mostrarMaterial) { + mostrarMaterial.preventDefault(); + + var valorInput = $("#inputCodPed").val(); + var mysql_query = "SELECT * FROM materiais where id_pedido = " + valorInput; + mysqlQuery(mysql_query, function (resultMaterial) { + + var obj = JSON.parse(resultMaterial); + $("#material").val(obj[0].nome); + $("#marcaMaterial").val(obj[0].marca); + $("#qtddMaterial").val(obj[0].quantidade); + + }); + }); + // preenche os campos relacionados a tabela insumos + $("#btnBuscar").click(function (mostrarInsumo) { + mostrarInsumo.preventDefault(); + + var valorInput = $("#inputCodPed").val(); + var mysql_query = "SELECT * FROM insumos where id_pedido = " + valorInput; + mysqlQuery(mysql_query, function (resultInsumo) { + + var obj = JSON.parse(resultInsumo); + $("#insumo").val(obj[0].descricao); + $("#qtddInsumo").val(obj[0].quantidade); + $("#precoInsumo").val(obj[0].preco); + + }); + }); + // preenche os campos relacionados a tabela solicitantes + $("#btnBuscar").click(function (mostrarSolicitantes) { + mostrarSolicitantes.preventDefault(); + + var valorInput = $("#inputCodPed").val(); + var mysql_query = "SELECT * FROM solicitantes s LEFT JOIN pedidos p on s.id = p.id_solicitante where p.id = " + valorInput; + mysqlQuery(mysql_query, function (resultSolicitantes) { + + var obj = JSON.parse(resultSolicitantes); + $("#nomeCompleto").val(obj[0].nome); + $("#telefone").val(obj[0].telefone); + $("#cpf").val(obj[0].cpf); + $("#cepPedido").val(obj[0].cep); + $("#enderecoPedido").val(obj[0].rua); + $("#bairroPedido").val(obj[0].bairro); + $("#cidadePedido").val(obj[0].cidade); + $("#estadoPedido").val(obj[0].estado); + }); + }); +}); diff --git a/task.html b/task.html new file mode 100644 index 00000000..79cc94e3 --- /dev/null +++ b/task.html @@ -0,0 +1,149 @@ + + + + + + + + + + + + + + Teste Front-end Developer + + + +
+ +
+
+ +

Ícone de grupo Tarefa

+ +

Check if extra insurance is necessary

+
+
+
+ +
+
+
+ + + + + + +
+ + + + +
+ +
+ +
+

Dados do pedido

+ + + + + + + + + + +
+

Dados da entrega

+
+ + + + + +
+
+ + +
+

Dados do solicitante

+
+ + + + + + + + +
+ +
+ +
+ +
+
+ + + + + + + + + + + + + + + + + + +