diff --git a/public/favicon.ico b/public/favicon.ico index a11777cc..bdbe4466 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html index 2d2e5a27..b8c019fb 100644 --- a/public/index.html +++ b/public/index.html @@ -2,7 +2,7 @@ - +
diff --git a/src/App.js b/src/App.js index 8b0df956..938b0893 100644 --- a/src/App.js +++ b/src/App.js @@ -13,6 +13,7 @@ import PatternPrinter from "./pages/PatternPrinter"; import EditPattern from "./pages/EditPattern"; import PrintersList from "./pages/PrintersList"; import PatternList from "./pages/PatternList"; +import ViewPattern from "./pages/ViewPattern"; import ForgottenPasswordPage from "./pages/ForgottenPassword"; import { ToastContainer } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; @@ -34,6 +35,7 @@ function App() { } /> } /> } /> + } /> } /> } /> diff --git a/src/assets/voltar_vector.svg b/src/assets/voltar_vector.svg new file mode 100644 index 00000000..e67e965b --- /dev/null +++ b/src/assets/voltar_vector.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/pages/PatternList.js b/src/pages/PatternList.js index c66ac758..372b0c63 100644 --- a/src/pages/PatternList.js +++ b/src/pages/PatternList.js @@ -155,7 +155,12 @@ export default function PatternList() {

- Padrão {pattern.marca} - {pattern.modelo} - {pattern.tipo} + + Padrão {pattern.marca} - {pattern.modelo} - {pattern.tipo} +

{pattern.status === 'DESATIVADO' &&
Desativado
}
diff --git a/src/pages/ViewPattern.js b/src/pages/ViewPattern.js new file mode 100644 index 00000000..7dc7f8f8 --- /dev/null +++ b/src/pages/ViewPattern.js @@ -0,0 +1,90 @@ +import "../style/pages/viewPattern.css"; +import React, { useEffect, useState } from "react"; +import Ellipse from "../assets/login_ellipse.svg"; +import voltar_vector from "../assets/voltar_vector.svg"; +import Navbar from "../components/navbar/Navbar"; +import { useParams } from "react-router-dom"; + +export default function ViewPattern() { + + const { padrao } = useParams(); + + const infoLabels = { + tipo: "Tipo", + modelo: "Modelo", + marca: "Marca", + } + + const oidLabels = { + mdeoloImpressora: "Modelo de impressora", + numeroSerie: "Número de série", + versaoFirmware: "Versão de Firmware", + tempoAtivoSistema: "Tempo ativo do sistema", + totalDigitalizacoes: "Total de digitalizações", + totalCopiasPB: "Total de cópias P&B", + totalCopiasColoridas: "Total de cópias color", + totalImpressoesPb: "Total de impressões P&B", + totalImpressoesColoridas: "Total de impressões color", + totalGeral: "Total geral", + enderecoIp: "Endereço de IP", + } + + const [pattern, setPattern] = useState() + + useEffect(() => { + try { + const patternString = atob(padrao); + const patternObject = JSON.parse(patternString); + setPattern(patternObject); + } catch (error) { + console.error("Error decoding Base64 string", error); + } + }, [padrao]) + + return ( + <> + +
+
+ + { pattern ? ( +
+ +
+ + Voltar +
+ +
+ {Object.entries(infoLabels).map(([key, label]) => ( +
+ +

{pattern[key]}

+
+ ))} +
+ +
+

SNMP

+ {Object.entries(oidLabels).map(([key, label]) => ( +
+ +

{pattern[key]}

+
+ ))} +
+ +
+ ) : ( +

Carregando dados...

+ ) + } +
+ +
+ elipse +
+
+ + ); +} diff --git a/src/style/pages/viewPattern.css b/src/style/pages/viewPattern.css new file mode 100644 index 00000000..69399905 --- /dev/null +++ b/src/style/pages/viewPattern.css @@ -0,0 +1,163 @@ +/* Container */ + +.viewpattern-container { + display: flex; + justify-content: flex-end; + align-items: center; +} + +/* View card */ + +.viewpattern-card { + background-color: #FFFFFF; + border-radius: 10px; + display: flex; + width: 43rem; + height: 100%; + justify-content: flex-start; + align-items: center; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5); + padding: 1rem 5rem; + margin-right: 8vw; + margin-top: 8%; + margin-bottom: 1vh; +} + +.viewpattern-loading-text { + color: #003366; + display: block; + font-size: 20px; +} + +/* Header */ + +.viewpattern-card-header { + width: 100%; + margin-top: 10px; + margin-bottom: 70px; + display: block; +} + +.viewpattern-card-header a { + font-weight: bold; + font-size: 22px; + color: #003366; + margin-left: 8px; + text-decoration: none; +} + +/* Infos */ + +.viewpattern-info-group{ + display: flex; + width: 100%; + flex-wrap: wrap; + justify-content: space-between; + margin-bottom: 20px; + padding: 16px 0; +} + +.viewpattern-info-header { + display: block; + width: 100%; + color: #003366; + font-size: 30px; +} + +.viewpattern-info-line { + display: flex; + width: 100%; + justify-content: flex-start; + flex-wrap: wrap; + margin-bottom: 10px; +} + +.viewpattern-info-line label { + color: #003366; + display: block; + margin-bottom: 0px; +} + +.viewpattern-info-box { + display: flex; + width: 50%; + flex-direction: column; + margin-bottom: 12px; + box-sizing: border-box; +} + +.viewpattern-info-box label { + color: #003366; + display: block; + margin-bottom: 0px; +} + +.viewpattern-info-box p { + color: #003366; + display: block; + font-size: 20px; + margin-top: 5px; + margin-bottom: 0px; +} + +.viewpattern-oid-line { + display: block; + width: 100%; + margin-bottom: 30px; +} + +.viewpattern-oid-line p { + color: #003366; +} + +.viewpattern-oid-box { + display: flex; + justify-content: flex-start; + width: 100%; + height: fit-content; + margin: 0px; +} + +.viewpattern-oid-box label { + color: #003366; + width: 50%; + margin-bottom: 0px; +} + +.viewpattern-oid-box p { + color: #003366; + display: block; + font-size: 16px; + margin-top: 5px; + margin-bottom: 0px; +} + +/*Estilo de circuferencia */ + +.viewpattern-ellipse { + position: fixed; + display: flex; + top: 10vh; + right: 0vw; + width: fit-content; + min-height: 100vh; + justify-content: flex-end; + align-items: end; + z-index: -1; + color:#003366; +} + +.viewpattern-ellipse img{ + width: 40vw; + height: 100vh; +} + +@media (max-width: 1210px) { + .viewpattern-container{ + display: flex; + flex-direction: column; + gap: 5rem; + padding-left: 2rem; + align-items: center; + } +} \ No newline at end of file diff --git a/src/tests/pages/VIewPattern.test.js b/src/tests/pages/VIewPattern.test.js new file mode 100644 index 00000000..028664f2 --- /dev/null +++ b/src/tests/pages/VIewPattern.test.js @@ -0,0 +1,51 @@ +import React from 'react'; +import { render as rtlRender, fireEvent, waitFor, screen } from '@testing-library/react'; +import '@testing-library/jest-dom/extend-expect'; +import * as router from 'react-router-dom'; +import { BrowserRouter as Router, useParams } from 'react-router-dom'; +import ViewPattern from '../../pages/ViewPattern'; + +jest.mock('react-router-dom', () => ({ + ...jest.requireActual('react-router-dom'), + useNavigate: jest.fn(), + useParams: jest.fn(), +})); + +function render(ui, { route = '/', ...renderOptions } = {}) { + window.history.pushState({}, 'Test page', route); + + function Wrapper({ children }) { + return {children}; + } + + return rtlRender(ui, { wrapper: Wrapper, ...renderOptions }); +} + +describe('ViewPrinter', () => { + + beforeEach(() => { + router.useNavigate.mockImplementation(jest.requireActual('react-router-dom').useNavigate); + jest.clearAllMocks(); + }); + + it('should render page', async () => { + useParams.mockReturnValue({ padrao: "" }); + + render(); + + expect(screen.getByText('Carregando dados...')).toBeInTheDocument(); + }) + + it('should render page with pattern data', async () => { + useParams.mockReturnValue({padrao: "eyJpZCI6ImNscHp4anI4dDAwMDBrem1oMGcwYW5uMHQiLCJ0aXBvIjoiYSIsIm1hcmNhIjoiYiIsIm1vZGVsb0ltcHJlc3NvcmEiOiJkIiwibW9kZWxvIjoiYyIsIm51bWVyb1NlcmllIjoiZSIsInZlcnNhb0Zpcm13YXJlIjoiZiIsInRvdGFsRGlnaXRhbGl6YWNvZXMiOiJoIiwidG90YWxDb3BpYXNQQiI6ImkiLCJ0b3RhbENvcGlhc0NvbG9yaWRhcyI6ImoiLCJ0b3RhbEltcHJlc3NvZXNQYiI6InRlc3RlIiwidG90YWxJbXByZXNzb2VzQ29sb3JpZGFzIjoibCIsInRvdGFsR2VyYWwiOiJtIiwiZW5kZXJlY29JcCI6Im4iLCJzdGF0dXMiOiJBVElWTyIsInRlbXBvQXRpdm9TaXN0ZW1hIjoiZyIsIm51bSI6bnVsbH0="}) + + render(); + + await waitFor(() => { + expect(screen.getByText('a')).toBeInTheDocument(); + expect(screen.getByText('b')).toBeInTheDocument(); + expect(screen.getByText('c')).toBeInTheDocument(); + }) + }); + +}) \ No newline at end of file