From 737adfca3e54e700fc2e00aafe8e02057de5c075 Mon Sep 17 00:00:00 2001 From: Matheus Costa Vieira Date: Wed, 1 Apr 2020 14:49:33 -0300 Subject: [PATCH] =?UTF-8?q?Adicionado=20tela=20de=20solicita=C3=A7=C3=A3o?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/settings.json | 6 ++++++ README.md | 8 +++++--- _config.yml | 2 ++ _includes/js/solicitacao.js | 5 ++++- _includes/solicitar/contato.html | 18 ++++++++++++++++ _includes/solicitar/contato.js | 9 ++++++++ _includes/solicitar/email.js | 26 ++++++++++++++++++++++++ _includes/solicitar/estabelecimento.html | 22 ++++++++++++++++++++ _includes/solicitar/estabelecimento.js | 9 ++++++++ _includes/solicitar/itens.html | 22 ++++++++++++++++++++ _includes/solicitar/itens.js | 11 ++++++++++ _includes/solicitar/main.html | 15 ++++++++++++++ _includes/solicitar/scripts.html | 7 +++++++ _includes/solicitar/variaveis.js | 6 ++++++ _includes/solicitar/whatsapp.js | 13 ++++++++++++ assets/json/estabelecimentos.json | 2 ++ solicitar/index.md | 14 +++++++------ 17 files changed, 185 insertions(+), 10 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 _includes/solicitar/contato.html create mode 100644 _includes/solicitar/contato.js create mode 100644 _includes/solicitar/email.js create mode 100644 _includes/solicitar/estabelecimento.html create mode 100644 _includes/solicitar/estabelecimento.js create mode 100644 _includes/solicitar/itens.html create mode 100644 _includes/solicitar/itens.js create mode 100644 _includes/solicitar/main.html create mode 100644 _includes/solicitar/scripts.html create mode 100644 _includes/solicitar/variaveis.js create mode 100644 _includes/solicitar/whatsapp.js diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..f8383ba --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,6 @@ +{ + "emmet.includeLanguages":{ + "jekyll": "html", + "scss": "css" + } +} \ No newline at end of file diff --git a/README.md b/README.md index ba93197..b2386de 100644 --- a/README.md +++ b/README.md @@ -30,13 +30,15 @@ Confirme os dados do estabelecimento. - [X] Adicionar itens. - [X] Remover itens. - [X] Salvar itens na solicitação de compra -- [ ] Pagina de envio da solicitação de compra +- [X] Pagina de envio da solicitação de compra + - [ ] Envio da solicitação por whatsapp + - [ ] Envio da solicitação por e-mail - [ ] Cadastrar estabelecimentos com dados reais. -- [ ] Ajustar os formulários como a página de cadastro +- [X] Ajustar os formulários como a página de cadastro - [X] Seus dados - [X] Estabelecimento - [X] Itens - - [ ] Eviar solicitação de compra + - [X] Eviar solicitação de compra - [X] Verificar o serviço [Form Submit](https://formsubmit.co/) ## Rodar localmente diff --git a/_config.yml b/_config.yml index 659d04e..470e710 100644 --- a/_config.yml +++ b/_config.yml @@ -13,6 +13,7 @@ repository: matheus-vieira/solicitacao-compra github: [metadata] incremental: true +port: 8081 host: 0.0.0.0 # Fill in your Google Analytics ID to track your website using GA @@ -20,6 +21,7 @@ host: 0.0.0.0 author: name: Matheus Costa Vieira + email: matheus.costa.vieira@gmail.com plugins: - jekyll-github-metadata diff --git a/_includes/js/solicitacao.js b/_includes/js/solicitacao.js index 81ce03d..5cd9a2a 100644 --- a/_includes/js/solicitacao.js +++ b/_includes/js/solicitacao.js @@ -27,6 +27,9 @@ const solicitacao = (function Solicitacao(d) { addContato: defineProp(c => change({ contato: c })), addEstabelecimento: defineProp(e => change({ estabelecimento: e })), addItens: defineProp(i => change({ itens: i })), - getSolicitacao: defineProp(getSolicitacao) + getSolicitacao: defineProp(getSolicitacao), + getContato: defineProp(() => getSolicitacao().contato), + getEstabelecimento: defineProp(() => getSolicitacao().estabelecimento), + getItens: defineProp(() => getSolicitacao().itens) }); })(); diff --git a/_includes/solicitar/contato.html b/_includes/solicitar/contato.html new file mode 100644 index 0000000..d254c1f --- /dev/null +++ b/_includes/solicitar/contato.html @@ -0,0 +1,18 @@ + +
+
+ Seus dados +
+
+
+
Sem informações de contato
+
+
+ +
\ No newline at end of file diff --git a/_includes/solicitar/contato.js b/_includes/solicitar/contato.js new file mode 100644 index 0000000..b13a693 --- /dev/null +++ b/_includes/solicitar/contato.js @@ -0,0 +1,9 @@ +const buildContato = function(ev) { + const data = solicitacao.getContato(); + if (data) { + const toRemove = contatoDataHolder.querySelector(".Box-row"); + contatoDataHolder.removeChild(toRemove); + addHtml(contatoDataHolder, contatoDataTpl, data); + } +}; +window.addEventListener("load", buildContato); diff --git a/_includes/solicitar/email.js b/_includes/solicitar/email.js new file mode 100644 index 0000000..c4eb460 --- /dev/null +++ b/_includes/solicitar/email.js @@ -0,0 +1,26 @@ +const emailFormTpl = `
+ + + + + + +
`; +const aEmailHandler = function aEmailHandler(ev) { + try { + console.log("email handler"); + const sol = solicitacao.getSolicitacao(); + if (!sol || !sol.contato || !sol.estabelecimento || !sol.itens) + throw new Error("informações faltantes"); + + + throw new Error("email"); + } catch (error) { + ev.preventDefault(); + console.error(error); + return false; + } +}; +document + .getElementById("aEmail") + .addEventListener("click", aEmailHandler, false); diff --git a/_includes/solicitar/estabelecimento.html b/_includes/solicitar/estabelecimento.html new file mode 100644 index 0000000..313e577 --- /dev/null +++ b/_includes/solicitar/estabelecimento.html @@ -0,0 +1,22 @@ + +
+
+ Estabelecimento selecionado +
+
+
+
Sem estabelecimento selecionado
+
+
+
+
+ +
\ No newline at end of file diff --git a/_includes/solicitar/estabelecimento.js b/_includes/solicitar/estabelecimento.js new file mode 100644 index 0000000..1ba6a12 --- /dev/null +++ b/_includes/solicitar/estabelecimento.js @@ -0,0 +1,9 @@ +const buildEstabelecimento = function(ev) { + const data = solicitacao.getEstabelecimento(); + if (data) { + const toRemove = estabelecimentoDataHolder.querySelector(".Box-row"); + estabelecimentoDataHolder.removeChild(toRemove); + addHtml(estabelecimentoDataHolder, estabelecimentoDataTpl, data) + } +}; +window.addEventListener("load", buildEstabelecimento); diff --git a/_includes/solicitar/itens.html b/_includes/solicitar/itens.html new file mode 100644 index 0000000..36d5f7e --- /dev/null +++ b/_includes/solicitar/itens.html @@ -0,0 +1,22 @@ + +
+
+ Itens solicitados +
+
+
+
Sem itens selecionados
+
+
+ +
\ No newline at end of file diff --git a/_includes/solicitar/itens.js b/_includes/solicitar/itens.js new file mode 100644 index 0000000..5cad29a --- /dev/null +++ b/_includes/solicitar/itens.js @@ -0,0 +1,11 @@ +const buildItens = function(ev) { + const data = solicitacao.getItens(); + if (data && data.length) { + const toRemove = itensDataHolder.querySelector(".Box-row"); + itensDataHolder.removeChild(toRemove); + data.forEach((i, idx) => + addHtml(itensDataHolder, itensDataTpl, Object.assign(i, { idx: idx + 1 })) + ); + } +}; +window.addEventListener("load", buildItens); diff --git a/_includes/solicitar/main.html b/_includes/solicitar/main.html new file mode 100644 index 0000000..0a78ee4 --- /dev/null +++ b/_includes/solicitar/main.html @@ -0,0 +1,15 @@ +{% include js/controller.js %} +{% include js/define_prop.js %} +{% include js/guid.js %} +{% include js/supplant.js %} +{% include js/insertAdjacent.js %} +{% include js/addHtml.js %} +{% include js/domHelpers.js %} +{% include js/solicitacao.js %} +{% include itens/Item.js %} +{% include solicitar/variaveis.js %} +{% include solicitar/contato.js %} +{% include solicitar/estabelecimento.js %} +{% include solicitar/itens.js %} +{% include solicitar/email.js %} +{% include solicitar/whatsapp.js %} \ No newline at end of file diff --git a/_includes/solicitar/scripts.html b/_includes/solicitar/scripts.html new file mode 100644 index 0000000..4371030 --- /dev/null +++ b/_includes/solicitar/scripts.html @@ -0,0 +1,7 @@ +{% capture scripts %} +(function () { +{% include solicitar/main.html %} +}()); +{% endcapture %} + + \ No newline at end of file diff --git a/_includes/solicitar/variaveis.js b/_includes/solicitar/variaveis.js new file mode 100644 index 0000000..d680326 --- /dev/null +++ b/_includes/solicitar/variaveis.js @@ -0,0 +1,6 @@ +const contatoDataTpl = tpl("contato-data-tpl"), + itensDataTpl = tpl("itens-data-tpl"), + estabelecimentoDataTpl = tpl("estabelecimento-data-tpl"), + contatoDataHolder = byId("contato-data"), + estabelecimentoDataHolder = byId("estabelecimento-data"), + itensDataHolder = byId("itens-data"); diff --git a/_includes/solicitar/whatsapp.js b/_includes/solicitar/whatsapp.js new file mode 100644 index 0000000..61be4a2 --- /dev/null +++ b/_includes/solicitar/whatsapp.js @@ -0,0 +1,13 @@ +const aWhatsappHandler = function aWhatsappHandler(ev) { + try { + console.log("whatsapp handler"); + throw new Error("whatsapp"); + } catch (error) { + ev.preventDefault(); + console.error(error); + return false; + } +}; +document + .getElementById("aWhatsapp") + .addEventListener("click", aWhatsappHandler, false); diff --git a/assets/json/estabelecimentos.json b/assets/json/estabelecimentos.json index b06d833..ce89666 100644 --- a/assets/json/estabelecimentos.json +++ b/assets/json/estabelecimentos.json @@ -1,6 +1,7 @@ [ { "Nome": "Mercado Bizzoto", + "Email": "contato@bizzoto.com.br", "Telefone": "41988024599", "Whatsapp": "41988024599", "Endereço": { @@ -13,6 +14,7 @@ }, { "Nome": "Supermercado condor", + "Email": "contato@condor.com.br", "Telefone": "4138882213", "Whatsapp": "", "Endereço": { diff --git a/solicitar/index.md b/solicitar/index.md index 3954722..61a908b 100644 --- a/solicitar/index.md +++ b/solicitar/index.md @@ -2,12 +2,14 @@ Aqui estáo seu resumo de compra -> Seus dados -> Estabelecimento -> Items a solicitar +{% include solicitar/contato.html %} -Encaminhar +{% include solicitar/estabelecimento.html %} -[Whatsapp](link) +{% include solicitar/itens.html %} -[E-mail](mailto:mail@mail.com) +## Encaminhar + +[Whatsapp]({{ '/obrigado/' | absolute_url }}){: #aWhatsapp } | [E-mail]({{ '/obrigado/' | absolute_url }}){: #aEmail } + +{% include solicitar/scripts.html %}