fixed static page of equipaments

pinsisApp/src/app/events/events.component.html

 <section class="photos-page" lang="pt">
   <div class="container">
-    <h2> Visualização dos Aceleradores </h2>
-      <div class="row align-items-start">
+    <!-- <h2> Visualização dos Aceleradores </h2> -->
 
-          <div class="col-sm-5 col-md-5 pt-4" *ngFor="let machine of machines; let i = index">
+    <div class="row justify-content-center">
+        <p class="graph-warning">
+            <b>AVISO:</b> Para acessar a página de edição dos equipamentos é preciso estar loggado
+        </p>
+    </div>
+      <div class="row justify-content-center">
+
+          <div class="col-md-5 pt-4" *ngFor="let machine of machines; let i = index">
               <div class="container photos-btn">
                 <img src='../assets/images/logo.png' alt="Avatar" class="img">
 
@@ -26,5 +32,24 @@
               </div>
           </div>
       </div>
+      <div class="row justify-content-center pt-4 ">
+
+        <div routerLink="/" class=" btn-list-el ">
+          <a>CADASTRAR</a>
+        </div>
+
+      </div>
+
+
   </div>
+
+
+
+    <!-- <button type="button" (click)="registerUser()" class="  button  float-right">Cadastrar</button> -->
+
+
+
+
+
+
 </section>

pinsisApp/src/app/events/events.component.scss

 // Importando os estilos globais
 @import '../../sass/styles';
 
-// Letras 
+// Letras
+.graph-warning {
+  padding: 20px 20px 20px 20px;
+  background-color: $white;
+  border: 3px solid $dark-purple;
+
+  margin-bottom: 40px;
+  color: $text-dark;
+  font-family: $open;
+  font-size: 20px;
+  line-height: 1.1em;
+}
+
+.btn-list-el {
+  padding: 20px  40px;
+  cursor:pointer;
+  outline: 0;
+  background: $bg-secondary;
+  text-align: center;
+
+  border-right: 3px solid $bg-default;
+
+  a {
+    font-size: 16px;
+    color: $text-light;
+    font-weight: bolder;
+    text-decoration: none;
+  }
+
+  &:hover {
+    text-decoration: none;
+    background: $dark-purple;
+    transition: 0.15s linear;
+  }
+
+
+  @media screen and (min-width: $break-small + 1) and (max-width: $break-large) {
+    padding: 10px 5px;
+    a {
+      font-size: 11px;
+    }
+    }
+
+}
+
+
 .photos-page {
     text-align: justify;
     hyphens: auto;
     font-family: $font-default;
     color: #000000;
-  
+
     h2 {
       font-family: $font-header;
       font-weight: bolder;
       font-size: 36px;
       color: $text-dark;
     }
-  
+
     h3 {
       color: $text-dark;
       padding: 10px;
@@ -39,7 +84,7 @@
     display: inline-block;
     color: $text-dark;
   }
-  
+
 // Imagens
 .img {
     max-width: 100%;
@@ -50,14 +95,15 @@
     border-radius: 50%;
     padding: 10px;
   }
-  
+
 .photos-btn {
     align-items: center;
       background-color: #b0cfed;
     padding: 5px;
     border-radius: 3%;
+
 }
 
 .more_text {
   display: none;
-}
\ No newline at end of file
+}

pinsisApp/src/app/graphs-page/graphs-page.scss

@@ -17,6 +17,30 @@
 
 
 @import '../../sass/styles';
+
+.button {
+  background-color: #8e8cc4;
+  border: none;
+  color: white;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: 4px 2px;
+  cursor: pointer;
+
+
+  &:hover {
+    text-decoration: none;
+    background:#4f425b;
+    transition: 0.15s linear;
+    cursor: pointer;
+  }
+}
+
+
+
 .graph-warning {
   padding: 20px 20px 20px 20px;
   background-color: $white;

pinsisApp/src/app/header/header.component.html

@@ -65,7 +65,7 @@
 
 
 				</div>
-				
+
         <div class="btn-list vertical-center d-none d-sm-block d-md-block d-lg-block d-xl-block">
             <div class="row">
 
@@ -82,7 +82,7 @@
                 <a>LOG OUT</a>
             </div>
 
-					    
+
             </div>
 
           <div class="btn-list vertical-botton d-none d-sm-block d-md-block d-lg-block d-xl-block">

pinsisApp/src/app/main-page/main-page.component.html

@@ -37,7 +37,7 @@
 			</div>
 
 			<div class="mx-auto col-12 col-md-3 home-btn">
-	<a routerLink="/registro-equipamentos">
+	<a routerLink="/equipamentos">
 			<img src="../../assets/images/machine.png" alt="Máquina" class="horizontal-center">
 	</a>
 </div>

pinsisApp/src/app/register/register.component.html

@@ -62,4 +62,4 @@
 
   </div>
 </div>
-</section>
\ No newline at end of file
+</section>

pinsisApp/src/app/register/register.component.scss

@@ -8,9 +8,9 @@
   .card {
     border-radius: 6px;
   }
-  
+
   .button {
-    background-color: #8e8cc4; 
+    background-color: #8e8cc4;
     border: none;
     color: white;
     padding: 15px 32px;
@@ -47,4 +47,3 @@
         font-size: 20px;
     }
 }
-

server/routes/api.js

@@ -62,45 +62,58 @@ function verifyToken(req, res, next) {
 router.get('/events', (req,res) => {
   let events = [
 
-		{ 
+		{
 		serial_number: 1,
 	  room: 'a',
 	  date_last_maintenance: 'a',
 	  date_next_maintenance: 'a',
 	  status: 'a',
-	
+
 		address: 'a',
 	  address_number: 'a',
 	 	district: 'a',
 	  city: 'a',
 	  state: 'a'
 	  },
-		{ 
+		{
 		serial_number: 2,
 	  room: 'b',
 	  date_last_maintenance: 'b',
 	  date_next_maintenance: 'b',
 	  status: 'b',
-	
+
 		address: 'b',
 	  address_number: 'b',
 	 	district: 'b',
 	  city: 'b',
 	  state: 'b'
 	  },
-		{ 
+		{
 		serial_number: 3,
 	  room: 'c',
 	  date_last_maintenance: 'c',
 	  date_next_maintenance: 'c',
 	  status: 'c',
-	
+
 		address: 'c',
 	  address_number: 'c',
 	 	district: 'c',
 	  city: 'c',
 	  state: 'c'
-	  }
+  },
+  {
+  serial_number: 4,
+  room: 'c',
+  date_last_maintenance: 'c',
+  date_next_maintenance: 'c',
+  status: 'c',
+
+  address: 'c',
+  address_number: 'c',
+  district: 'c',
+  city: 'c',
+  state: 'c'
+  }
   ]
   res.json(events)
 })