From ae74e6dddff3672471d1a5b05d6981595cdaa112 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Vitor=20Pereira?= Date: Thu, 17 Oct 2024 21:46:25 -0300 Subject: [PATCH 1/4] refa: refatorando tela de estacoes --- tupan/src/app/_api/get/estacoes.ts | 55 ++++++++++ tupan/src/app/estacoes/page.tsx | 169 ++++------------------------- tupan/src/hooks/receberEstacao.ts | 87 +++++++++++++++ 3 files changed, 164 insertions(+), 147 deletions(-) create mode 100644 tupan/src/app/_api/get/estacoes.ts create mode 100644 tupan/src/hooks/receberEstacao.ts diff --git a/tupan/src/app/_api/get/estacoes.ts b/tupan/src/app/_api/get/estacoes.ts new file mode 100644 index 0000000..d130fe7 --- /dev/null +++ b/tupan/src/app/_api/get/estacoes.ts @@ -0,0 +1,55 @@ +import { api_route } from ".."; + +interface Estacao { + id: number; + nome: string; + topico:string, + ativo:boolean, + criado: string; + modificado: string; + endereco_id: number; +} + +export const obterEstacoes = async (): Promise => { + try { + const response = await fetch(`${api_route}estacoes`, { + method: "GET", + headers: { + "Authorization": `Token 1112a98d58500b7a165191fc56b2a9c1513413e8`, + "Content-Type": "application/json", + }, + }); + + if (!response.ok) { + throw new Error(`Erro ao obter estacções: ${response.statusText}`); + } + + const data = await response.json(); + return data as Estacao[]; + } catch (error) { + console.error("Erro na requisição:", error); + throw error; + } +}; + +export const obterEstacaoPorId = async (id: number): Promise => { + try { + const response = await fetch(`${api_route}estacoes/${id}`, { + method: "GET", + headers: { + "Authorization": `Token 1112a98d58500b7a165191fc56b2a9c1513413e8`, + "Content-Type": "application/json", + }, + }); + + if (!response.ok) { + throw new Error(`Erro ao obter estação: ${response.statusText}`); + } + + const data = await response.json(); + return data as Estacao; + } catch (error) { + console.error("Erro na requisição:", error); + throw error; + } +} diff --git a/tupan/src/app/estacoes/page.tsx b/tupan/src/app/estacoes/page.tsx index 4f1f5af..b4c26f8 100644 --- a/tupan/src/app/estacoes/page.tsx +++ b/tupan/src/app/estacoes/page.tsx @@ -5,158 +5,33 @@ import { MenuLateral } from '@/components/menu-lateral'; import { NavTop } from '@/components/nav-top'; import Link from 'next/link'; import { Botao } from '@/components/botao'; +import { useGetEstacoes } from '@/hooks/receberEstacao'; -export default function Estacoes() { - const [estacoes, setEstacoes] = useState([]); - const [loading, setLoading] = useState(true); - const [showModal, setShowModal] = useState(false); - const [selectedEstacao, setSelectedEstacao] = useState(null); - - interface Estacao { - id: number; - nome: string; - temperatura: number; - umidade: number; - vento: number; - chuva: number; - topico: string; - criado: string; - modificado: string; - ativo: boolean; - } - - useEffect(() => { - const fetchEstacoes = async () => { - try { - const response = await fetch('http://127.0.0.1:8000/estacoes', { - method: 'GET', - headers: { - Authorization: `Token 1112a98d58500b7a165191fc56b2a9c1513413e8`, - 'Content-Type': 'application/json', - }, - }); - - if (!response.ok) { - throw new Error('Erro ao buscar estações'); - } - - const data = await response.json(); - if (Array.isArray(data)) { - setEstacoes(data); - } else { - console.error('A resposta não é um array:', data); - } - } catch (error) { - console.error(error); - } finally { - setLoading(false); - } - }; - - fetchEstacoes(); - }, []); - - const openModal = (estacao: Estacao) => { - setSelectedEstacao(estacao); - setShowModal(true); - }; - - const closeModal = () => { - setShowModal(false); - setSelectedEstacao(null); - }; - - const toggleAtivo = async (id: number, ativo: boolean) => { - const confirmed = window.confirm( - `Tem certeza que deseja ${ativo ? 'desativar' : 'ativar'} esta estação?` - ); - if (!confirmed) return; +const menuData = [ + { nome: 'Estações', path: '/estacoes', icone: 'bx bx-home' }, + { nome: 'Parâmetros', path: '/parametros', icone: 'bx bxs-thermometer' }, + { nome: 'Alertas', path: '/alertas', icone: 'bx bx-alarm-exclamation' }, + { nome: 'Usuários', path: '/usuarios', icone: 'bx bx-user' }, + { nome: 'Educacional', path: '/educacional', icone: 'bx bx-book' }, + { nome: 'Logout', path: '/', icone: 'bx bx-log-out' }, +]; - try { - const estacaoAtual = estacoes.find((estacao) => estacao.id === id); +const colunas = [ + { label: 'estacao', acessor: 'nome' }, + { label: 'Data de Criação', acessor: 'date' }, + { label: 'Status', acessor: 'status' }, +]; - const body = JSON.stringify({ - ativo: !ativo, - nome: estacaoAtual.nome, - endereco: estacaoAtual.endereco, - topico: estacaoAtual.topico, - }); - const response = await fetch(`http://127.0.0.1:8000/estacoes/${id}`, { - method: 'PUT', - headers: { - Authorization: `Token 1112a98d58500b7a165191fc56b2a9c1513413e8`, - 'Content-Type': 'application/json', - }, - body, - }); - - if (!response.ok) { - const errorData = await response.json(); - throw new Error( - `Erro ao atualizar a estação: ${errorData.detail || response.statusText}` - ); - } - - setEstacoes((prevEstacoes) => - prevEstacoes.map((estacao) => - estacao.id === id ? { ...estacao, ativo: !ativo } : estacao - ) - ); - - alert(`Estação ${ativo ? 'desativada' : 'ativada'} com sucesso!`); - } catch (error) { - console.error('Erro ao atualizar a estação:', error); - alert('Falha ao atualizar a estação.'); - } - }; - - const updateEstacao = async () => { - if (!selectedEstacao) return; - - try { - const response = await fetch(`http://127.0.0.1:8000/estacoes/${selectedEstacao.id}`, { - method: 'PUT', - headers: { - Authorization: `Token 1112a98d58500b7a165191fc56b2a9c1513413e8`, - 'Content-Type': 'application/json', - }, - body: JSON.stringify(selectedEstacao), - }); - - if (!response.ok) { - const errorData = await response.json(); - throw new Error( - `Erro ao atualizar a estação: ${errorData.detail || response.statusText}` - ); - } - - setEstacoes((prevEstacoes) => - prevEstacoes.map((estacao) => - estacao.id === selectedEstacao.id ? selectedEstacao : estacao - ) - ); - - alert('Estação atualizada com sucesso!'); - closeModal(); - } catch (error) { - console.error('Erro ao atualizar a estação:', error); - alert('Falha ao atualizar a estação.'); - } - }; +export default function Estacoes() { + const { estacoes, loading, error, refetch } = useGetEstacoes(); - const menuData = [ - { nome: 'Estações', path: '/estacoes', icone: 'bx bx-home' }, - { nome: 'Parâmetros', path: '/parametros', icone: 'bx bxs-thermometer' }, - { nome: 'Alertas', path: '/alertas', icone: 'bx bx-alarm-exclamation' }, - { nome: 'Usuários', path: '/usuarios', icone: 'bx bx-user' }, - { nome: 'Educacional', path: '/educacional', icone: 'bx bx-book' }, - { nome: 'Logout', path: '/', icone: 'bx bx-log-out' }, - ]; - if (loading) { - return
Carregando...
; - } + const dados = estacoes.map((estacao) => ({ + nome: estacao.nome, + date: new Date(estacao.criado).toLocaleDateString(), + status: 'Ativado', + })); return (
@@ -174,7 +49,7 @@ export default function Estacoes() { Estações - {estacoes.length === 0 ? ( + {estacoes.length === 0 && !loading && !error ? ( <>

Nenhuma estação cadastrada

diff --git a/tupan/src/hooks/receberEstacao.ts b/tupan/src/hooks/receberEstacao.ts new file mode 100644 index 0000000..ad46e59 --- /dev/null +++ b/tupan/src/hooks/receberEstacao.ts @@ -0,0 +1,87 @@ +import { useState, useEffect } from 'react'; +import { + obterEstacaoPorId, + obterEstacoes, +} from '@/app/_api/get/estacoes'; + +interface Estacao { + id: number; + nome: string; + topico:string, + ativo:boolean, + criado: string; + modificado: string; + endereco_id: number; +} + +export const useGetEstacoes = () => { + const [estacoes, setEstacoes] = useState([]); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(null); + + const fetchEstacoes = async () => { + console.log('Iniciando busca de estações'); + setLoading(true); + setError(null); + + try { + const result = await obterEstacoes(); + console.log('Estações obtidas com sucesso:', result); + setEstacoes(result); + } catch (error) { + if (error instanceof Error) { + console.error('Erro ao obter estações:', error.message); + setError(error.message); + } else { + console.error('Erro desconhecido ao obter estações'); + setError('Erro desconhecido'); + } + } finally { + setLoading(false); + } + }; + + useEffect(() => { + console.log('useEffect: Chamando fetchEstacoes'); + fetchEstacoes(); + }, []); + + return { estacoes, loading, error, refetch: fetchEstacoes }; +}; + +export const useGetEstacaoById = (id: number) => { + const [estacao, setEstacao] = useState(null); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(null); + + const fetchEstacao = async () => { + setLoading(true); + setError(null); + + try { + const result = await obterEstacaoPorId(id); + console.log('Estação obtida com sucesso:', result); + setEstacao(result); + } catch (error) { + if (error instanceof Error) { + console.error('Erro ao obter estação:', error.message); + setError(error.message); + } else { + console.error('Erro desconhecido ao obter estação'); + setError('Erro desconhecido'); + } + } finally { + setLoading(false); + } + }; + + useEffect(() => { + if (id) { + fetchEstacao(); + } else { + console.error('ID não disponível, abortando fetch da estação'); + } + }, [id]); + + return { estacao, loading, error, refetch: fetchEstacao }; +}; From 25db5e8e24d3d46e8c8b0342431a10568792e5ec Mon Sep 17 00:00:00 2001 From: gabriel santos Date: Sat, 19 Oct 2024 22:08:56 -0300 Subject: [PATCH 2/4] refa: fazendo o componente de verificacao de token e retirando os hardcodados da aplicacao --- tupan/src/app/_api/delete/parametro.ts | 13 +++- tupan/src/app/_api/get/estacoes.ts | 31 +++++++--- tupan/src/app/_api/get/parametros.ts | 25 ++++++-- tupan/src/app/_api/post/parametros.ts | 10 ++- tupan/src/app/_api/update/parametro.ts | 10 ++- tupan/src/app/cadastro-estacoes/page.tsx | 79 +++++++++++++----------- tupan/src/app/estacoes/page.tsx | 30 +++++++-- tupan/src/app/usuarios/page.tsx | 49 ++++----------- tupan/src/hooks/verificacaoToken.tsx | 28 +++++++++ 9 files changed, 182 insertions(+), 93 deletions(-) create mode 100644 tupan/src/hooks/verificacaoToken.tsx diff --git a/tupan/src/app/_api/delete/parametro.ts b/tupan/src/app/_api/delete/parametro.ts index eb30897..f996bac 100644 --- a/tupan/src/app/_api/delete/parametro.ts +++ b/tupan/src/app/_api/delete/parametro.ts @@ -1,11 +1,22 @@ import { api_route } from '..'; +// Função para obter o token armazenado +const obterToken = (): string | null => { + return localStorage.getItem('token'); +}; + export const deletarParametro = async (id: number): Promise => { + const token = obterToken(); // Obtendo o token armazenado + + if (!token) { + throw new Error('Token não encontrado. Por favor, faça login.'); + } + try { const response = await fetch(`${api_route}/parametros/${id}`, { method: 'DELETE', headers: { - 'Authorization': `Token 1112a98d58500b7a165191fc56b2a9c1513413e8`, + 'Authorization': `Token ${token}`, // Usando o token dinamicamente 'Content-Type': 'application/json', }, }); diff --git a/tupan/src/app/_api/get/estacoes.ts b/tupan/src/app/_api/get/estacoes.ts index d130fe7..1afdc23 100644 --- a/tupan/src/app/_api/get/estacoes.ts +++ b/tupan/src/app/_api/get/estacoes.ts @@ -3,25 +3,36 @@ import { api_route } from ".."; interface Estacao { id: number; nome: string; - topico:string, - ativo:boolean, + topico: string; + ativo: boolean; criado: string; modificado: string; endereco_id: number; } +// Função para obter o token armazenado no localStorage +const obterToken = (): string | null => { + return localStorage.getItem("token"); +}; + export const obterEstacoes = async (): Promise => { + const token = obterToken(); // Obtendo o token armazenado + + if (!token) { + throw new Error("Token não encontrado. Por favor, faça login."); + } + try { const response = await fetch(`${api_route}estacoes`, { method: "GET", headers: { - "Authorization": `Token 1112a98d58500b7a165191fc56b2a9c1513413e8`, + "Authorization": `Token ${token}`, // Usando o token dinamicamente "Content-Type": "application/json", }, }); if (!response.ok) { - throw new Error(`Erro ao obter estacções: ${response.statusText}`); + throw new Error(`Erro ao obter estações: ${response.statusText}`); } const data = await response.json(); @@ -33,13 +44,19 @@ export const obterEstacoes = async (): Promise => { }; export const obterEstacaoPorId = async (id: number): Promise => { + const token = obterToken(); // Obtendo o token armazenado + + if (!token) { + throw new Error("Token não encontrado. Por favor, faça login."); + } + try { const response = await fetch(`${api_route}estacoes/${id}`, { method: "GET", headers: { - "Authorization": `Token 1112a98d58500b7a165191fc56b2a9c1513413e8`, + "Authorization": `Token ${token}`, // Usando o token dinamicamente "Content-Type": "application/json", - }, + }, }); if (!response.ok) { @@ -52,4 +69,4 @@ export const obterEstacaoPorId = async (id: number): Promise => { console.error("Erro na requisição:", error); throw error; } -} +}; diff --git a/tupan/src/app/_api/get/parametros.ts b/tupan/src/app/_api/get/parametros.ts index e5994ef..bbd935a 100644 --- a/tupan/src/app/_api/get/parametros.ts +++ b/tupan/src/app/_api/get/parametros.ts @@ -11,12 +11,23 @@ interface Parametro { modificado: string; } +// Função para obter o token armazenado +const obterToken = (): string | null => { + return localStorage.getItem("token"); +}; + export const obterParametros = async (): Promise => { + const token = obterToken(); // Obtendo o token armazenado + + if (!token) { + throw new Error("Token não encontrado. Por favor, faça login."); + } + try { const response = await fetch(`${api_route}parametros`, { method: "GET", headers: { - "Authorization": `Token 1112a98d58500b7a165191fc56b2a9c1513413e8`, + "Authorization": `Token ${token}`, // Usando o token dinamicamente "Content-Type": "application/json", }, }); @@ -34,13 +45,19 @@ export const obterParametros = async (): Promise => { }; export const obterParametroPorId = async (id: number): Promise => { + const token = obterToken(); // Obtendo o token armazenado + + if (!token) { + throw new Error("Token não encontrado. Por favor, faça login."); + } + try { const response = await fetch(`${api_route}parametros/${id}`, { method: "GET", headers: { - "Authorization": `Token 1112a98d58500b7a165191fc56b2a9c1513413e8`, + "Authorization": `Token ${token}`, // Usando o token dinamicamente "Content-Type": "application/json", - }, + }, }); if (!response.ok) { @@ -53,4 +70,4 @@ export const obterParametroPorId = async (id: number): Promise => { console.error("Erro na requisição:", error); throw error; } -} +}; diff --git a/tupan/src/app/_api/post/parametros.ts b/tupan/src/app/_api/post/parametros.ts index 79ceec6..9eb87cc 100644 --- a/tupan/src/app/_api/post/parametros.ts +++ b/tupan/src/app/_api/post/parametros.ts @@ -10,10 +10,18 @@ interface Parametro { export const criarParametro = async (parametro: Parametro): Promise => { try { + + // Recupera o token do localStorage + const token = localStorage.getItem('token'); + + // Verifica se o token está disponível + if (!token) { + throw new Error('Token não encontrado. Por favor, faça login.'); + } const response = await fetch(`${api_route}parametros`, { method: "POST", headers: { - "Authorization": `Token 1112a98d58500b7a165191fc56b2a9c1513413e8`, + "Authorization": `Token ${token} `, "Content-Type": "application/json", }, body: JSON.stringify(parametro), diff --git a/tupan/src/app/_api/update/parametro.ts b/tupan/src/app/_api/update/parametro.ts index 8af3542..9dee3cc 100644 --- a/tupan/src/app/_api/update/parametro.ts +++ b/tupan/src/app/_api/update/parametro.ts @@ -15,10 +15,18 @@ export const atualizarParametro = async ( parametro: Parametro ): Promise => { try { + // Recupera o token do localStorage + const token = localStorage.getItem('token'); + + // Verifica se o token está disponível + if (!token) { + throw new Error('Token não encontrado. Por favor, faça login.'); + } + const response = await fetch(`${api_route}/parametros/${parametro.id}`, { method: 'PUT', headers: { - 'Authorization': `Token 1112a98d58500b7a165191fc56b2a9c1513413e8`, + 'Authorization': `Token ${token}`, // Utiliza o token recuperado do localStorage 'Content-Type': 'application/json', }, body: JSON.stringify(parametro), diff --git a/tupan/src/app/cadastro-estacoes/page.tsx b/tupan/src/app/cadastro-estacoes/page.tsx index cc76367..1c85dba 100644 --- a/tupan/src/app/cadastro-estacoes/page.tsx +++ b/tupan/src/app/cadastro-estacoes/page.tsx @@ -2,6 +2,11 @@ import { Fragment, useState, useEffect } from 'react'; +// Função para obter o token armazenado +const obterToken = (): string | null => { + return localStorage.getItem('token'); +}; + export default function CadastroEstacoes() { const [nome, setNome] = useState(''); const [cep, setCep] = useState(''); @@ -16,15 +21,15 @@ export default function CadastroEstacoes() { const [parametrosSelecionados, setParametrosSelecionados] = useState([]); const [parametrosDisponiveis, setParametrosDisponiveis] = useState([]); - const token = '1112a98d58500b7a165191fc56b2a9c1513413e8'; - useEffect(() => { const fetchParametros = async () => { try { + const token = obterToken(); // Obtendo o token armazenado + const response = await fetch('http://localhost:8000/parametros', { method: 'GET', headers: { - Authorization: `Token 1112a98d58500b7a165191fc56b2a9c1513413e8`, + Authorization: `Token ${token}`, // Usando o token dinamicamente 'Content-Type': 'application/json', }, }); @@ -36,73 +41,76 @@ export default function CadastroEstacoes() { } const data = await response.json(); - setParametrosDisponiveis(data); + setParametrosDisponiveis(data); } catch (error) { console.error('Erro ao buscar parâmetros:', error); } }; fetchParametros(); - }, [token]); + }, []); const handleSubmit = async (event) => { event.preventDefault(); - + const novoEndereco = { - logradouro, - bairro, - cidade, - estado, - numero, - complemento, - cep, - latitude, - longitude, + logradouro, + bairro, + cidade, + estado, + numero, + complemento, + cep, + latitude, + longitude, }; - + try { + const token = obterToken(); // Obtendo o token armazenado + const enderecoResponse = await fetch('http://localhost:8000/enderecos', { method: 'POST', headers: { - Authorization: `Token 1112a98d58500b7a165191fc56b2a9c1513413e8`, + Authorization: `Token ${token}`, // Usando o token dinamicamente 'Content-Type': 'application/json', }, body: JSON.stringify(novoEndereco), }); - + if (!enderecoResponse.ok) { const errorData = await enderecoResponse.json(); console.error('Erro ao cadastrar o endereço:', errorData); throw new Error('Erro ao cadastrar o endereço'); } - + const enderecoData = await enderecoResponse.json(); - + const novaEstacao = { - nome, - topico: "Tópico do broker MQTT", - endereco: enderecoData.id, - parametros: parametrosSelecionados, + nome, + topico: 'Tópico do broker MQTT', + endereco: enderecoData.id, + parametros: parametrosSelecionados, }; - + const estacaoResponse = await fetch('http://localhost:8000/estacoes', { - method: 'POST', - headers: { - Authorization: `Token 1112a98d58500b7a165191fc56b2a9c1513413e8`, - 'Content-Type': 'application/json', - }, - body: JSON.stringify(novaEstacao), + method: 'POST', + headers: { + Authorization: `Token ${token}`, // Usando o token dinamicamente + 'Content-Type': 'application/json', + }, + body: JSON.stringify(novaEstacao), }); - + if (!estacaoResponse.ok) { const errorData = await estacaoResponse.json(); console.error('Erro ao cadastrar a estação:', errorData); throw new Error('Erro ao cadastrar a estação'); } - + const data = await estacaoResponse.json(); alert('Estação cadastrada com sucesso!'); - + + // Resetando os campos do formulário setNome(''); setCep(''); setNumero(''); @@ -118,7 +126,6 @@ export default function CadastroEstacoes() { console.error(err); } }; - const handleParametroChange = (parametro) => { if (parametrosSelecionados.includes(parametro)) { @@ -238,12 +245,10 @@ export default function CadastroEstacoes() { checked={parametrosSelecionados.includes(parametro.id)} className='mt-3 ml-3 checkbox-bolinha' /> -
))}
- - -
- + + + {estacoes + .sort((a, b) => a.id - b.id) + .map((estacao) => ( + openModal(estacao)} + > + + {estacao.id} + + {estacao.nome} + {estacao.topico} + + {new Date(estacao.criado).toLocaleDateString('pt-BR')} + + + {new Date(estacao.modificado).toLocaleDateString('pt-BR')} + + + {estacao.ativo ? 'Sim' : 'Não'} + + + {estacao.ativo ? ( + + ) : ( + + )} + + + ))} + + + )} + + +
+ + + +
+ + + + {/* Gráfico de Pizza */} +
+

Distribuição das Estações

+
- )} + diff --git a/tupan/src/app/parametros/page.tsx b/tupan/src/app/parametros/page.tsx index 3cd3768..9fe11d6 100644 --- a/tupan/src/app/parametros/page.tsx +++ b/tupan/src/app/parametros/page.tsx @@ -1,19 +1,22 @@ 'use client'; +import { useEffect, useState } from 'react'; import { MenuLateral } from '@/components/menu-lateral'; import { Tabela } from '@/components/tabela'; import { Formulario } from '@/components/formulario-parametros'; import { NavTop } from '@/components/nav-top'; import { useGetParametros } from '@/hooks/receberParametro'; +import { Bar } from 'react-chartjs-2'; +import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js'; -const menuData = [ +ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend); +const menuData = [ { nome: 'Estações', path: '/estacoes', icone: 'bx bx-home' }, { nome: 'Parâmetros', path: '/parametros', icone: 'bx bxs-thermometer' }, { nome: 'Alertas', path: '/alertas', icone: 'bx bx-alarm-exclamation' }, { nome: 'Usuários', path: '/usuarios', icone: 'bx bx-user' }, { nome: 'Educacional', path: '/educacional', icone: 'bx bx-book' }, { nome: 'Logout', path: '/logout', icone: 'bx bx-log-out' }, - ]; const colunas = [ @@ -24,31 +27,61 @@ const colunas = [ export default function Parametros() { const { parametros, loading, error, refetch } = useGetParametros(); + const [dadosGrafico, setDadosGrafico] = useState({ labels: [], datasets: [] }); const dados = parametros.map((parametro) => ({ nome: parametro.nome, date: new Date(parametro.criado).toLocaleDateString(), - status: 'Ativado', + status: 'Ativado', })); const handleSubmit = () => { refetch(); }; + useEffect(() => { + console.log("Parâmetros:", parametros); // Verificar se os parâmetros estão corretos + const labels = [...new Set(parametros.map((parametro) => parametro.unidade))]; // Usando unidade + const counts = labels.map( + (label) => parametros.filter((parametro) => parametro.unidade === label).length // Usando unidade + ); + + setDadosGrafico({ + labels, + datasets: [ + { + label: 'Quantidade de Parâmetros por Unidade', + data: counts, + backgroundColor: 'rgba(75, 192, 192, 0.5)', + borderColor: 'rgba(75, 192, 192, 1)', + borderWidth: 1, + }, + ], + }); + + console.log("Dados do Gráfico:", { + labels, + datasets: [ + { + label: 'Quantidade de Parâmetros por Unidade', + data: counts, + }, + ], + }); + }, [parametros]); + + + return (
- {/* Menu lateral ocupando a lateral esquerda */}
- {/* Conteúdo principal ocupando o resto da tela */}
- {/* Barra superior ocupando a parte superior da tela */}
- {/* Verifica se não há parâmetros e ajusta o layout */} {loading &&

Loading...

} {error &&

Error: {error}

} {parametros.length === 0 && !loading && !error ? ( @@ -58,12 +91,16 @@ export default function Parametros() {
) : ( <> - {/* Tabela ocupando metade da largura */}
+ + {/* Gráfico de Parâmetros */} +
+

Distribuição dos Parâmetros por Medida

+ +
- {/* Formulário ocupando metade da largura */}
From e27824629b5b581e9c8ab3993904af8499b13fea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Vitor=20Pereira?= Date: Sun, 20 Oct 2024 20:10:37 -0300 Subject: [PATCH 4/4] refa: refatorando telas de visualizacao, cadastro e edicao de estacoes --- tupan/src/app/_api/delete/estacao.ts | 22 ++ tupan/src/app/_api/delete/parametro.ts | 2 +- tupan/src/app/_api/get/enderecos.ts | 58 +++++ tupan/src/app/_api/get/estacoes.ts | 4 +- tupan/src/app/_api/get/parametros.ts | 2 +- tupan/src/app/_api/post/enderecos.ts | 37 +++ tupan/src/app/_api/post/estacoes.ts | 55 +++++ tupan/src/app/_api/post/parametros.ts | 2 +- tupan/src/app/_api/update/endereco.ts | 39 +++ tupan/src/app/_api/update/estacao.ts | 35 +++ tupan/src/app/_api/update/parametro.ts | 2 +- tupan/src/app/cadastro-estacoes/page.tsx | 2 +- tupan/src/app/estacoes/[id]/page.tsx | 85 +++++++ tupan/src/app/estacoes/page.tsx | 121 +++------- .../formulario-atualizacao-estacoes.tsx | 216 +++++++++++++++++ tupan/src/components/formulario-estacoes.tsx | 224 ++++++++++++++++++ tupan/src/components/tabela-estacoes.tsx | 94 ++++++++ tupan/src/hooks/adicionarEstacao.ts | 41 ++++ tupan/src/hooks/atualizarEndereco.ts | 89 +++++++ tupan/src/hooks/atualizarEstacao.ts | 77 ++++++ tupan/src/hooks/deletarEstacao.ts | 12 + tupan/src/hooks/formulario.ts | 43 ++++ tupan/src/hooks/receberEndereco.ts | 90 +++++++ 23 files changed, 1256 insertions(+), 96 deletions(-) create mode 100644 tupan/src/app/_api/delete/estacao.ts create mode 100644 tupan/src/app/_api/get/enderecos.ts create mode 100644 tupan/src/app/_api/post/enderecos.ts create mode 100644 tupan/src/app/_api/post/estacoes.ts create mode 100644 tupan/src/app/_api/update/endereco.ts create mode 100644 tupan/src/app/_api/update/estacao.ts create mode 100644 tupan/src/app/estacoes/[id]/page.tsx create mode 100644 tupan/src/components/formulario-atualizacao-estacoes.tsx create mode 100644 tupan/src/components/formulario-estacoes.tsx create mode 100644 tupan/src/components/tabela-estacoes.tsx create mode 100644 tupan/src/hooks/adicionarEstacao.ts create mode 100644 tupan/src/hooks/atualizarEndereco.ts create mode 100644 tupan/src/hooks/atualizarEstacao.ts create mode 100644 tupan/src/hooks/deletarEstacao.ts create mode 100644 tupan/src/hooks/receberEndereco.ts diff --git a/tupan/src/app/_api/delete/estacao.ts b/tupan/src/app/_api/delete/estacao.ts new file mode 100644 index 0000000..471643f --- /dev/null +++ b/tupan/src/app/_api/delete/estacao.ts @@ -0,0 +1,22 @@ +import { api_route } from '..'; + +export const deletarEstacao = async (id: number): Promise => { + try { + const response = await fetch(`${api_route}/estacoes/${id}`, { + method: 'DELETE', + headers: { + 'Authorization': `Token 2948c11eaf985f44737d8fa84db99846e8197fae`, + 'Content-Type': 'application/json', + }, + }); + + if (!response.ok) { + throw new Error(`Erro ao deletar a estação: ${response.statusText}`); + } + + console.log('Estação deletada com sucesso'); + } catch (error) { + console.error('Erro na requisição:', error); + throw error; + } +}; diff --git a/tupan/src/app/_api/delete/parametro.ts b/tupan/src/app/_api/delete/parametro.ts index eb30897..9f3055d 100644 --- a/tupan/src/app/_api/delete/parametro.ts +++ b/tupan/src/app/_api/delete/parametro.ts @@ -5,7 +5,7 @@ export const deletarParametro = async (id: number): Promise => { const response = await fetch(`${api_route}/parametros/${id}`, { method: 'DELETE', headers: { - 'Authorization': `Token 1112a98d58500b7a165191fc56b2a9c1513413e8`, + 'Authorization': `Token 2948c11eaf985f44737d8fa84db99846e8197fae`, 'Content-Type': 'application/json', }, }); diff --git a/tupan/src/app/_api/get/enderecos.ts b/tupan/src/app/_api/get/enderecos.ts new file mode 100644 index 0000000..45a4e90 --- /dev/null +++ b/tupan/src/app/_api/get/enderecos.ts @@ -0,0 +1,58 @@ +import { api_route } from ".."; + +interface Endereco { + id: number; + logradouro: string; + bairro: string; + cidade: string; + estado: string; + numero: number; + complemento: string; + cep: string; + latitude: number; + longitude: number; +} + +export const obterEnderecos = async (): Promise => { + try { + const response = await fetch(`${api_route}enderecos`, { + method: "GET", + headers: { + "Authorization": `Token 2948c11eaf985f44737d8fa84db99846e8197fae`, + "Content-Type": "application/json", + }, + }); + + if (!response.ok) { + throw new Error(`Erro ao obter endereços: ${response.statusText}`); + } + + const data = await response.json(); + return data as Endereco[]; + } catch (error) { + console.error("Erro na requisição:", error); + throw error; + } +}; + +export const obterEnderecoPorId = async (id: number): Promise => { + try { + const response = await fetch(`${api_route}enderecos/${id}`, { + method: "GET", + headers: { + "Authorization": `Token 2948c11eaf985f44737d8fa84db99846e8197fae`, + "Content-Type": "application/json", + }, + }); + + if (!response.ok) { + throw new Error(`Erro ao obter endereço: ${response.statusText}`); + } + + const data = await response.json(); + return data as Endereco; + } catch (error) { + console.error("Erro na requisição:", error); + throw error; + } +} diff --git a/tupan/src/app/_api/get/estacoes.ts b/tupan/src/app/_api/get/estacoes.ts index d130fe7..246d6c8 100644 --- a/tupan/src/app/_api/get/estacoes.ts +++ b/tupan/src/app/_api/get/estacoes.ts @@ -15,7 +15,7 @@ export const obterEstacoes = async (): Promise => { const response = await fetch(`${api_route}estacoes`, { method: "GET", headers: { - "Authorization": `Token 1112a98d58500b7a165191fc56b2a9c1513413e8`, + "Authorization": `Token 2948c11eaf985f44737d8fa84db99846e8197fae`, "Content-Type": "application/json", }, }); @@ -37,7 +37,7 @@ export const obterEstacaoPorId = async (id: number): Promise => { const response = await fetch(`${api_route}estacoes/${id}`, { method: "GET", headers: { - "Authorization": `Token 1112a98d58500b7a165191fc56b2a9c1513413e8`, + "Authorization": `Token 2948c11eaf985f44737d8fa84db99846e8197fae`, "Content-Type": "application/json", }, }); diff --git a/tupan/src/app/_api/get/parametros.ts b/tupan/src/app/_api/get/parametros.ts index e5994ef..867e3e9 100644 --- a/tupan/src/app/_api/get/parametros.ts +++ b/tupan/src/app/_api/get/parametros.ts @@ -16,7 +16,7 @@ export const obterParametros = async (): Promise => { const response = await fetch(`${api_route}parametros`, { method: "GET", headers: { - "Authorization": `Token 1112a98d58500b7a165191fc56b2a9c1513413e8`, + "Authorization": `Token 2948c11eaf985f44737d8fa84db99846e8197fae`, "Content-Type": "application/json", }, }); diff --git a/tupan/src/app/_api/post/enderecos.ts b/tupan/src/app/_api/post/enderecos.ts new file mode 100644 index 0000000..6ab636c --- /dev/null +++ b/tupan/src/app/_api/post/enderecos.ts @@ -0,0 +1,37 @@ +import { api_route } from ".."; + +interface Endereco { + logradouro: string; + bairro: string; + cidade: string; + estado: string; + numero: number; + complemento: string; + cep: string; + latitude: number; + longitude: number; +} + +export const criarEndereco = async (endereco: Endereco): Promise => { + try { + const response = await fetch(`${api_route}enderecos`, { + method: "POST", + headers: { + "Authorization": `Token 2948c11eaf985f44737d8fa84db99846e8197fae`, + "Content-Type": "application/json", + }, + body: JSON.stringify(endereco), + }); + + const responseData = await response.json(); + + if (!response.ok) { + throw new Error(`Erro ao criar o endereço: ${response.statusText}`); + } + + return responseData; + } catch (error) { + console.error("Erro na requisição do endereço:", error); + throw error; + } +}; diff --git a/tupan/src/app/_api/post/estacoes.ts b/tupan/src/app/_api/post/estacoes.ts new file mode 100644 index 0000000..c81417f --- /dev/null +++ b/tupan/src/app/_api/post/estacoes.ts @@ -0,0 +1,55 @@ +import { api_route } from ".."; +import { criarEndereco } from "@/app/_api/post/enderecos"; + +interface Estacao { + nome: string; + topico: string; + ativo: boolean; + criado: string; + modificado: string; +} + +interface Endereco { + logradouro: string; + bairro: string; + cidade: string; + estado: string; + numero: number; + complemento: string; + cep: string; + latitude: number; + longitude: number; +} + +// Remova o segundo parâmetro 'endereco' porque ele já foi tratado antes +export const criarEstacao = async (estacao: Estacao, enderecoId: number): Promise => { + console.log('Função criarEstacao foi chamada'); + try { + // Criando o payload da estação com o endereco (ID) correto + const estacaoComEndereco = { ...estacao, endereco: enderecoId }; // Usar "endereco" diretamente + + console.log('Payload enviado:', estacaoComEndereco); + + const response = await fetch(`${api_route}estacoes`, { + method: "POST", + headers: { + "Authorization": `Token 2948c11eaf985f44737d8fa84db99846e8197fae`, + "Content-Type": "application/json", + }, + body: JSON.stringify(estacaoComEndereco), + }); + + console.log('Resposta da API ao criar a estação:', response); + + if (!response.ok) { + const errorData = await response.json(); + console.error('Erro ao criar a estação:', errorData); + throw new Error(`Erro ao criar a estação: ${response.statusText}`); + } + + return await response.json(); + } catch (error) { + console.error("Erro na requisição:", error); + throw error; + } +}; diff --git a/tupan/src/app/_api/post/parametros.ts b/tupan/src/app/_api/post/parametros.ts index 79ceec6..8eca08d 100644 --- a/tupan/src/app/_api/post/parametros.ts +++ b/tupan/src/app/_api/post/parametros.ts @@ -13,7 +13,7 @@ interface Parametro { const response = await fetch(`${api_route}parametros`, { method: "POST", headers: { - "Authorization": `Token 1112a98d58500b7a165191fc56b2a9c1513413e8`, + "Authorization": `Token 2948c11eaf985f44737d8fa84db99846e8197fae`, "Content-Type": "application/json", }, body: JSON.stringify(parametro), diff --git a/tupan/src/app/_api/update/endereco.ts b/tupan/src/app/_api/update/endereco.ts new file mode 100644 index 0000000..ef895df --- /dev/null +++ b/tupan/src/app/_api/update/endereco.ts @@ -0,0 +1,39 @@ +import { api_route } from '..'; + +interface Endereco { + id: number, + logradouro: string; + bairro: string; + cidade: string; + estado: string; + numero: number; + complemento: string; + cep: string; + latitude: number; + longitude: number; +} + +export const atualizarEndereco = async ( + endereco: Endereco +): Promise => { + try { + const response = await fetch(`${api_route}enderecos/${endereco.id}`, { + method: 'PUT', + headers: { + 'Authorization': `Token 2948c11eaf985f44737d8fa84db99846e8197fae`, + 'Content-Type': 'application/json', + }, + body: JSON.stringify(endereco), + }); + + if (!response.ok) { + throw new Error(`Erro ao atualizar o Endereço: ${response.statusText}`); + } + + const data = await response.json(); + return data as Endereco[]; + } catch (error) { + console.error('Erro na requisição:', error); + throw error; + } +}; diff --git a/tupan/src/app/_api/update/estacao.ts b/tupan/src/app/_api/update/estacao.ts new file mode 100644 index 0000000..e6e6fdc --- /dev/null +++ b/tupan/src/app/_api/update/estacao.ts @@ -0,0 +1,35 @@ +import { api_route } from '..'; + +interface Estacao { + id: number; + nome: string; + topico:string, + ativo:boolean, + criado: string; + modificado: string; +} + +export const atualizarEstacao = async ( + estacao: Estacao +): Promise => { + try { + const response = await fetch(`${api_route}estacoes/${estacao.id}`, { + method: 'PUT', + headers: { + 'Authorization': `Token 2948c11eaf985f44737d8fa84db99846e8197fae`, + 'Content-Type': 'application/json', + }, + body: JSON.stringify(estacao), + }); + + if (!response.ok) { + throw new Error(`Erro ao atualizar a estação: ${response.statusText}`); + } + + const data = await response.json(); + return data as Estacao[]; + } catch (error) { + console.error('Erro na requisição:', error); + throw error; + } +}; diff --git a/tupan/src/app/_api/update/parametro.ts b/tupan/src/app/_api/update/parametro.ts index 8af3542..606c917 100644 --- a/tupan/src/app/_api/update/parametro.ts +++ b/tupan/src/app/_api/update/parametro.ts @@ -18,7 +18,7 @@ export const atualizarParametro = async ( const response = await fetch(`${api_route}/parametros/${parametro.id}`, { method: 'PUT', headers: { - 'Authorization': `Token 1112a98d58500b7a165191fc56b2a9c1513413e8`, + 'Authorization': `Token 2948c11eaf985f44737d8fa84db99846e8197fae`, 'Content-Type': 'application/json', }, body: JSON.stringify(parametro), diff --git a/tupan/src/app/cadastro-estacoes/page.tsx b/tupan/src/app/cadastro-estacoes/page.tsx index cc76367..17c7f19 100644 --- a/tupan/src/app/cadastro-estacoes/page.tsx +++ b/tupan/src/app/cadastro-estacoes/page.tsx @@ -24,7 +24,7 @@ export default function CadastroEstacoes() { const response = await fetch('http://localhost:8000/parametros', { method: 'GET', headers: { - Authorization: `Token 1112a98d58500b7a165191fc56b2a9c1513413e8`, + Authorization: `Token 2948c11eaf985f44737d8fa84db99846e8197fae`, 'Content-Type': 'application/json', }, }); diff --git a/tupan/src/app/estacoes/[id]/page.tsx b/tupan/src/app/estacoes/[id]/page.tsx new file mode 100644 index 0000000..9f631dc --- /dev/null +++ b/tupan/src/app/estacoes/[id]/page.tsx @@ -0,0 +1,85 @@ +"use client"; + +import { useEffect, useState } from "react"; +import { MenuLateral } from "@/components/menu-lateral"; +import { FormularioAtualizacaoEstacoes } from "@/components/formulario-atualizacao-estacoes"; +import { Botao } from "@/components/botao"; +import { PopConfirmacao } from "@/components/pop-confirmacao"; +import { usePopConfirmacao } from "@/hooks/visivel"; +import { useFormularioEstacoes } from "@/hooks/formulario"; +import { NavTop } from "@/components/nav-top"; +import { useDynamicContext } from "@/app/context"; +import { useToggle } from "@/hooks/check"; + +const menuData = [ + { nome: "Estações", path: "/estacoes", icone: "bx bx-home" }, + { nome: "Parâmetros", path: "/parametros", icone: "bx bxs-thermometer" }, + { nome: "Alertas", path: "/alertas", icone: "bx bx-alarm-exclamation" }, + { nome: "Usuários", path: "/usuarios", icone: "bx bx-user" }, + { nome: "Educacional", path: "/educacional", icone: "bx bx-book" }, + { nome: "Logout", path: "/", icone: "bx bx-log-out" }, +]; + +export default function EstacoesID() { + const { isVisible, mensagem, showPopConfirmacao, hidePopConfirmacao } = + usePopConfirmacao(); + const { formValues, handleChange, setFormValues } = useFormularioEstacoes(); + const { state } = useDynamicContext(); + + const [nomeFormulario, setNomeFormulario] = useState( + undefined + ); + const [initialStatus, setInitialStatus] = useState(false); + + useEffect(() => { + const searchParams = new URLSearchParams(window.location.search); + const nome = searchParams.get("nome") || state.nome; + const id = searchParams.get("id"); + const status = searchParams.get("status"); + + setNomeFormulario(nome || "Formulário de Estações"); + setInitialStatus(status === "Ativado"); + + if (id) { + setFormValues({ + nome: nome || "", + id: id || "", + status: status || "", + }); + } + }, [setFormValues, state]); + + const { isChecked, handleChange: handleToggleChange } = + useToggle(initialStatus); + + return ( +
+ {/* Menu lateral ocupando a lateral esquerda */} +
+ +
+ + {/* Conteúdo principal ocupando o resto da tela */} +
+ {/* Barra superior ocupando a parte superior da tela */} + + +
+
+ console.log("Formulário enviado")} + dados={formValues} + showPopConfirmacao={showPopConfirmacao} + nomeFormulario={nomeFormulario || "Formulário de Estações"} + initialStatus={initialStatus} + /> +
+ + {isVisible && ( + + )} +
+
+
+ ); +} \ No newline at end of file diff --git a/tupan/src/app/estacoes/page.tsx b/tupan/src/app/estacoes/page.tsx index b4c26f8..161f130 100644 --- a/tupan/src/app/estacoes/page.tsx +++ b/tupan/src/app/estacoes/page.tsx @@ -3,6 +3,8 @@ import { useEffect, useState } from 'react'; import { MenuLateral } from '@/components/menu-lateral'; import { NavTop } from '@/components/nav-top'; +import { Tabela } from '@/components/tabela-estacoes'; +import { Formulario } from '@/components/formulario-estacoes'; import Link from 'next/link'; import { Botao } from '@/components/botao'; import { useGetEstacoes } from '@/hooks/receberEstacao'; @@ -20,19 +22,27 @@ const colunas = [ { label: 'estacao', acessor: 'nome' }, { label: 'Data de Criação', acessor: 'date' }, { label: 'Status', acessor: 'status' }, + { label: 'Topico', acessor: 'topico' }, ]; export default function Estacoes() { + const [showModal, setShowModal] = useState(false); const { estacoes, loading, error, refetch } = useGetEstacoes(); const dados = estacoes.map((estacao) => ({ nome: estacao.nome, + topico: estacao.topico, date: new Date(estacao.criado).toLocaleDateString(), status: 'Ativado', + endereco_id: estacao.endereco_id })); + const handleSubmit = () => { + refetch(); + }; + return (
{/* Menu lateral */} @@ -40,104 +50,37 @@ export default function Estacoes() {
-
+
{/* NavTop */} -
-

- Estações -

+
+ {loading &&

Loading...

} + {error &&

Error: {error}

} {estacoes.length === 0 && !loading && !error ? ( <> -
-

Nenhuma estação cadastrada

-
-
- - - +
+

Nenhuma estação cadastrada

+
+ ) : ( - - - - - - - - - - - - - - {estacoes - .sort((a, b) => a.id - b.id) - .map((estacao) => ( - openModal(estacao)} - > - - - - - - - - - ))} - -
IdNomeTópico - Data de criação - - Data de atualização - Ativo
- {estacao.id} - {estacao.nome}{estacao.topico} - {new Date(estacao.criado).toLocaleDateString('pt-BR')} - - {new Date(estacao.modificado).toLocaleDateString( - 'pt-BR' - )} - - {estacao.ativo ? 'Sim' : 'Não'} - - {estacao.ativo ? ( - - ) : ( - - )} -
- )} + <> +
+ +
+ +
+ +
+ + + )} {/* Modal */} - {showModal && ( + {/* {showModal && (

Editar Estação

@@ -185,8 +128,8 @@ export default function Estacoes() {
- )} -
+ )} */} +
); diff --git a/tupan/src/components/formulario-atualizacao-estacoes.tsx b/tupan/src/components/formulario-atualizacao-estacoes.tsx new file mode 100644 index 0000000..2e09fce --- /dev/null +++ b/tupan/src/components/formulario-atualizacao-estacoes.tsx @@ -0,0 +1,216 @@ +'use client'; + +import { useEffect, useState } from 'react'; +import { useSearchParams } from 'next/navigation'; +import { Input } from '@/components/input'; +import { Select } from '@/components/select'; +import { FormularioProps } from '@/types/interfaces'; +import { Toggle } from './toggle'; +import { Botao } from './botao'; +import { useEditable } from '@/hooks/editar'; +import { useUpdateEstacao } from '@/hooks/atualizarEstacao'; +import { useUpdateEndereco } from '@/hooks/atualizarEndereco'; +import { useGetEstacaoById } from '@/hooks/receberEstacao'; +import { useGetEnderecoById } from '@/hooks/receberEndereco'; +import { useFormularioEstacoes } from '@/hooks/formulario'; +import { useDeleteEstacao } from '@/hooks/deletarEstacao'; + +export const FormularioAtualizacaoEstacoes = ({ + onSubmit, initialStatus, nomeFormulario, showPopConfirmacao }: + FormularioProps & { initialStatus: boolean, showPopConfirmacao: (message: string) => void, nomeFormulario: string }) => { + const searchParams = useSearchParams(); + const idParam = searchParams.get('id'); + const id = idParam ? Number(idParam) : null; + const { estacao: formValues, loading, error } = useGetEstacaoById(id); + const { endereco: Values, loading: loadingEndereco, error: errorEndereco } = useGetEnderecoById(id); + const { isEditable, toggleEdit } = useEditable(); + const { formValues: formularioValues, setFormValues, handleChange } = useFormularioEstacoes( + (formValues as unknown as Record) || {} + ); + const { updateEstacao, loading: loadingUpdate, error: errorUpdate } = useUpdateEstacao(); + const { updateEndereco, loading: loadingUpdate2, error: errorUpdate2 } = useUpdateEndereco(); + const [isInitialized, setIsInitialized] = useState(false); + + useEffect(() => { + if (formValues && !isInitialized && Object.keys(formValues).length > 0) { + setFormValues((prevState) => ({ + ...prevState, + nome: formValues.nome || '', + topico: formValues.topico || '', + })); + } + + if (Values && Object.keys(Values).length > 0) { + setFormValues((prevState) => ({ + ...prevState, + cep: Values.cep || '', + numero: Values.numero ? Values.numero.toString() : '', + logradouro: Values.logradouro || '', + cidade: Values.cidade || '', + bairro: Values.bairro || '', + complemento: Values.complemento || '', + latitude: Values.latitude ? Values.latitude.toString() : '', + longitude: Values.longitude ? Values.longitude.toString() : '', + estado: Values.estado || '', + })); + } + + setIsInitialized(true); + }, [formValues, Values, isInitialized, setFormValues]); + + + const handleSubmit = async (event: React.FormEvent) => { + event.preventDefault(); + + const updatedEstacao = { + id: id || 0, + nome: formularioValues.nome, + topico: formularioValues.topico, + modificado: new Date().toISOString(), + ativo: initialStatus, + endereco: Values ? Values.id : null, + }; + + const updatedEndereco = { + id: id || 0, + cep: formularioValues.cep, + numero: Number(formularioValues.numero), // Convertendo para número + logradouro: formularioValues.logradouro, + cidade: formularioValues.cidade, + bairro: formularioValues.bairro, + complemento: formularioValues.complemento, + latitude: Number(formularioValues.latitude), // Convertendo para número + longitude: Number(formularioValues.longitude), // Convertendo para número + estado: formularioValues.estado + }; + + + if (isNaN(updatedEstacao.id)) { + console.error('ID inválido:', updatedEstacao.id); + return; // Não envia se o ID for inválido + } + + try { + await updateEstacao(updatedEstacao); + await updateEndereco(updatedEndereco); + onSubmit(updatedEstacao as any); + showPopConfirmacao(`Estação: "${nomeFormulario}" atualizada com sucesso!`); + } catch (error) { + console.error('Erro ao atualizar a estação:'), error; + } + }; + + const handleDelete = async () => { + if (id) { + const confirmDelete = confirm('Tem certeza que deseja deletar esta estação?'); + if (confirmDelete) { + try { + await useDeleteEstacao(id); + } catch (error) { + console.error('Erro ao deletar a estação:', error); + } + }} + }; + + return ( + <> + +
+
+

+ Estação - {formularioValues.nome || ''} +

+
+
+ + +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ + +
+ + +
+
+
+
+
+ + ); +}; diff --git a/tupan/src/components/formulario-estacoes.tsx b/tupan/src/components/formulario-estacoes.tsx new file mode 100644 index 0000000..5401218 --- /dev/null +++ b/tupan/src/components/formulario-estacoes.tsx @@ -0,0 +1,224 @@ +'use client'; + +import { Input } from '@/components/input'; +import { useFormularioEstacoes } from '@/hooks/formulario'; +import { FormularioProps } from '@/types/interfaces'; +import { PopConfirmacao } from '@/components/pop-confirmacao'; +import { Select } from './select'; +import { useCreateEstacao } from '@/hooks/adicionarEstacao'; +import { Botao } from './botao'; +import { usePopConfirmacao } from '@/hooks/visivel'; +import { useGetParametros } from '@/hooks/receberParametro'; + +export const Formulario = ({ onSubmit, dados }: FormularioProps) => { + const { formValues, handleChange } = useFormularioEstacoes(dados); + const { submitEstacaoComEndereco } = useCreateEstacao(); + const { isVisible, mensagem, showPopConfirmacao, hidePopConfirmacao } = usePopConfirmacao(); + + + const { parametros, loading, error } = useGetParametros(); + console.log(parametros); + + const handleFormSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + + if (!formValues.nome || !formValues.cep || !formValues.numero) { + return alert("Por favor, preencha todos os campos obrigatórios."); + } + + const estacao = { + nome: formValues.nome, + topico: formValues.topico, + ativo: formValues.ativo === "true", + }; + + + + const endereco = { + logradouro: formValues.logradouro, + bairro: formValues.bairro, + cidade: formValues.cidade, + estado: formValues.estado, + numero: Number(formValues.numero), + complemento: formValues.complemento, + cep: formValues.cep, + latitude: Number(formValues.latitude), + longitude: Number(formValues.longitude) + }; + + try { + await submitEstacaoComEndereco(estacao, endereco); + showPopConfirmacao(`Estação: ${formValues.nome}, adicionada com sucesso!`); + onSubmit(e); + } catch (error) { + console.error('Erro ao criar a estação:', error); + alert("Houve um erro ao cadastrar a estação. Tente novamente."); + } + }; + + return ( +
+
+

+ Crie uma nova estação +

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