Merge pull request #47 from fga-eps-mds/188-pagina-visualizacao-padrao

188 pagina visualizacao padrao
fga-eps-mds · Dec 11, 2023 · cecde81 · cecde81
2 parents caba8ed + ef2426b
commit cecde81
Show file tree

Hide file tree

Showing 8 changed files with 316 additions and 2 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <div id="root"></div>

diff --git 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() {
             <Route path="/editarpadrao/:padrao" element={<EditPattern />} />
             <Route path="/impressorascadastradas" element={<PrintersList />} />
             <Route path="/padroescadastrados" element={<PatternList />} />
+            <Route path="/visualizarpadrao/:padrao" element={<ViewPattern />} />
           </Route>
           <Route path="/login" element={<Login />} />
           <Route path="/" element={<Home />} />

diff --git a/src/assets/voltar_vector.svg b/src/assets/voltar_vector.svg
diff --git a/src/pages/PatternList.js b/src/pages/PatternList.js
@@ -155,7 +155,12 @@ export default function PatternList() {
             <div key={pattern.id_padrao} className="patternlist-pattern" style={{ color: pattern.status === "ATIVO" ? '' : 'gray' }}>
               <div className="patternlist-model">
                 <h4>
-                  <Link to={`/visualizarpadrao/${btoa(JSON.stringify(pattern))}`}>Padrão {pattern.marca} - {pattern.modelo} - {pattern.tipo}</Link>
+                  <Link 
+                    to={`/visualizarpadrao/${btoa(JSON.stringify(pattern))}`}
+                    style={{ color: pattern.status === "ATIVO" ? '' : 'gray' }}
+                   >
+                    Padrão {pattern.marca} - {pattern.modelo} - {pattern.tipo}
+                   </Link>
                 </h4>
                 {pattern.status === 'DESATIVADO' && <h5>Desativado</h5>}
               </div>

diff --git a/src/pages/ViewPattern.js 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 (
+    <>
+      <Navbar />
+      <div className="viewpattern-container">
+        <div className="viewpattern-card">
+
+          { pattern ? (
+            <div className="viewpattern-info-group">
+
+              <header className="viewpattern-card-header">
+                <img alt="" src={voltar_vector}></img>
+                <a href="/padroescadastrados">Voltar</a>
+              </header>
+
+              <div className="viewpattern-info-line">
+                {Object.entries(infoLabels).map(([key, label]) => (
+                  <div key={key} className="viewpattern-info-box">
+                    <label>{label}</label>
+                    <p>{pattern[key]}</p>
+                  </div>
+                ))}
+              </div>
+
+              <div className="viewpattern-oid-line">
+                <p>SNMP</p>
+                {Object.entries(oidLabels).map(([key, label]) => (
+                  <div key={key} className="viewpattern-oid-box">
+                    <label>{label}:</label>
+                    <p>{pattern[key]}</p>
+                  </div>
+                ))}
+              </div>
+
+            </div>
+            ) : (
+              <p id="viewpattern-loading-text">Carregando dados...</p>
+            )
+          }
+        </div>
+
+        <div className="viewpattern-ellipse">
+          <img alt="elipse" src={Ellipse} />
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/style/pages/viewPattern.css 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;
+    }
+}
diff --git a/src/tests/pages/VIewPattern.test.js 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 <Router>{children}</Router>;
+  }
+
+  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(<ViewPattern />);
+
+    expect(screen.getByText('Carregando dados...')).toBeInTheDocument();
+  })
+
+  it('should render page with pattern data', async () => {
+    useParams.mockReturnValue({padrao: "eyJpZCI6ImNscHp4anI4dDAwMDBrem1oMGcwYW5uMHQiLCJ0aXBvIjoiYSIsIm1hcmNhIjoiYiIsIm1vZGVsb0ltcHJlc3NvcmEiOiJkIiwibW9kZWxvIjoiYyIsIm51bWVyb1NlcmllIjoiZSIsInZlcnNhb0Zpcm13YXJlIjoiZiIsInRvdGFsRGlnaXRhbGl6YWNvZXMiOiJoIiwidG90YWxDb3BpYXNQQiI6ImkiLCJ0b3RhbENvcGlhc0NvbG9yaWRhcyI6ImoiLCJ0b3RhbEltcHJlc3NvZXNQYiI6InRlc3RlIiwidG90YWxJbXByZXNzb2VzQ29sb3JpZGFzIjoibCIsInRvdGFsR2VyYWwiOiJtIiwiZW5kZXJlY29JcCI6Im4iLCJzdGF0dXMiOiJBVElWTyIsInRlbXBvQXRpdm9TaXN0ZW1hIjoiZyIsIm51bSI6bnVsbH0="})
+
+    render(<ViewPattern />);
+
+    await waitFor(() => {
+      expect(screen.getByText('a')).toBeInTheDocument();
+      expect(screen.getByText('b')).toBeInTheDocument();
+      expect(screen.getByText('c')).toBeInTheDocument();
+    })
+  });
+
+})