Sistema de agendamento de horários para clientes da barbearia Barber Woods
Projeto com o objetivo de auxiliar uma barbearia a ter um maior controle nos horários dos seus clientes. Um escopo simples e direto, e de poucos passos para a melhor interação com o usuário.
Guardar nome do barbeiro escolhido na páginia (/page-barber) e passar para a página de cadastro de horário (/page-registerSchedule);ResolvidoRecuperar o nome do barbeiro e imprimir no front-end na página /page-registerSchedule;ResolvidoManipular calendário em JavaScript e pegar a data selecionada para envio ao banco de dados;Resolvido- Retirar o horário reservado da lista de horários disponíveis na página /page-registerSchedule;
- Inverter data para padrão Brasil e imprimir na page-clients (ainda para ser criada);
- Retirar do banco de dados todos os clientes cadastrados e colocar na page-clients (ainda para ser criada);
- Criar filtro para a page-clients, de horário, dia da semana e mês;
- Foi utilizado a propriedade
item()do javascript para pegar o elemento correspondente a posição enviada pelo clique do botão. Com isso foi possível usar a propriedadevaluee extrair o valor (que era o nome do barbeiro, cadastrado no db). Após isso foi possível enviar utilizandowindow.location.href = '/page-registerSchedule' + '?barber='+ nomedoBarbeiro;via get. - Para recuperar o dato enviado via get par a página, utilizei a propriedade:
window.location.search, que recupera a string a partir do '?'. Assim fui apenas manipulando essa string com a propriedadesplit()até chegar no nome do barbeiro puro. Para coloca-lo em tela, selecionei a tag que queria colocar com oquerySelector()e criei um novo texto com ocreateTexteNode ()passando como parâmetro o nome do barberio. Por fim, foi só atribuir esse valor na tag com a propriedadeappendChild(), tendo como Pai a tag escolhida e como filho o texto criado. - Para manipular o calendário, foi preciso entender como o calendário funcionava e aprender sobre as propriedade
date(). Assim pude extrair a data selecionada e coloca-la em um input com 'display: none', para assim ser possível cadastrar no meu banco de dados. Utilizei ainda oslice()para poder pegar apenas a parte da string que desejo da data.