Estilização

nickunger99 · Feb 10, 2022 · a7e1855 · a7e1855
1 parent 91b2fdb
commit a7e1855
Show file tree

Hide file tree

Showing 14 changed files with 147 additions and 53 deletions.
diff --git a/src/app/app.component.css b/src/app/app.component.css
@@ -0,0 +1,3 @@
+body{
+    background-color:  	#F5FFFA;
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,3 +1,5 @@
+<body>
 <app-menu></app-menu>
 <router-outlet></router-outlet>
 <app-rodape></app-rodape>
+</body>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -9,6 +9,7 @@ import { PainelVagasComponent } from './painel-vagas/painel-vagas.component';
 import { MenuComponent } from './menu/menu.component';
 import { RodapeComponent } from './rodape/rodape.component';
 import { AppRoutingModule } from './app-routing/app-routing.module';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [
@@ -22,7 +23,8 @@ import { AppRoutingModule } from './app-routing/app-routing.module';
     BrowserModule,
     HttpClientModule,
     RouterModule,
-    AppRoutingModule
+    AppRoutingModule,
+    FormsModule  
   ],
   providers: [],
   bootstrap: [AppComponent]

diff --git a/src/app/menu/menu.component.css b/src/app/menu/menu.component.css
@@ -0,0 +1,7 @@
+header{
+    background-color:  #6495ED;
+}
+
+a:hover{
+    scale: 1.05; 
+}
diff --git a/src/app/menu/menu.component.html b/src/app/menu/menu.component.html
@@ -1,14 +1,14 @@
 <header>
-  <div class="shadow-sm p-3 mb-5 bg-white rounded">
-<ul class="nav justify-content-center">
+  <div class="shadow-sm p-2 mb-3  ">
+<ul class="nav justify-content-center ">
     <li class="nav-item">
-      <a class="nav-link text-black" aria-current="page" href="#">LH Vagas</a>
+      <a class="nav-link text-white fs-5 mx-2" aria-current="page" href="#">LH Vagas</a>
     </li>
     <li class="nav-item">
-      <a class="nav-link text-black" routerLink="/mural">Mural</a>
+      <a class="nav-link text-white fs-5 mx-2" routerLink="/mural">Mural</a>
     </li>
     <li class="nav-item">
-      <a class="nav-link text-black" routerLink="/painel">Painel</a>
+      <a class="nav-link text-white fs-5 mx-2" routerLink="/painel">Painel</a>
     </li>
   </ul>
 </div>

diff --git a/src/app/mural-vagas/mural-vagas.component.css b/src/app/mural-vagas/mural-vagas.component.css
@@ -10,6 +10,7 @@
     display: flex;
     margin: 20px;
     min-height: 400px;
+
 }
 
 .card-vagas{
@@ -18,12 +19,6 @@
     justify-content: center;
 }
 
-footer {
-    background: #343A40;
-    width: 100%;
-    height: 100px;
-    position: relative;
-    bottom: 0;
-    left: 0;
-    margin: auto;
+.card:hover{
+    scale: 1.03;
 }
diff --git a/src/app/mural-vagas/mural-vagas.component.html b/src/app/mural-vagas/mural-vagas.component.html
@@ -4,7 +4,7 @@
     <div class="container">
       <article class="card-vagas">
         <div *ngFor="let vaga of vagas">
-          <div class="card" style="width: 18rem">
+          <div class="card border border-dark" style="width: 18rem">
             <img
               src="assets\img\vagas\{{ vaga.foto }}"
               class="card-img-top"

diff --git a/src/app/painel-vagas/painel-vagas.component.css b/src/app/painel-vagas/painel-vagas.component.css
@@ -0,0 +1,3 @@
+body{
+    background-color: #F5FFFA;
+}
diff --git a/src/app/painel-vagas/painel-vagas.component.html b/src/app/painel-vagas/painel-vagas.component.html
@@ -1 +1,52 @@
-<p>painel-vagas works!</p>
+<body>
+<div class="mt-5">
+    <div class="container mt-5 mb-5 d-flex justify-content-center">
+        <div class="card px-1 py-4 border ">
+            <div class="card-body">
+                <h1 class="text-center">Cadastrar</h1>
+
+                <form>
+                    <div class="container">
+                        <div class="col-2">
+                            <label class="form-label">Id</label>
+                            <input type="text" name="id" [(ngModel)]="vaga.id" class="form-control" required />
+                        </div>
+                        <div class="col-7">
+                            <label class="form-label">Nome</label>
+                            <input type="text" name="nome" [(ngModel)]="vaga.nome" class="form-control"
+                                placeholder="Nome da vaga" required />
+                        </div>
+                        <div class="col-7">
+                            <label class="form-label">Foto</label>
+                            <input type="url" name="foto" [(ngModel)]="vaga.foto" class="form-control" required />
+                        </div>
+
+                        <div class="col-7">
+                            <label class="form-label">Descrição</label>
+                            <input type="text" name="descricao" [(ngModel)]="vaga.descricao" class="form-control"
+                                placeholder="Descrição da vaga" required />
+                        </div>
+                        <div class="col-7">
+                            <label class="form-label">Salário</label>
+                            <input type="text" name="salario" [(ngModel)]="vaga.salario" class="form-control"
+                                required />
+                        </div>
+
+                        <div class="mt-3">
+                            <button type="button" class="btn btn-primary me-3" (click)="cadastrar()">
+                                Cadastrar Vaga
+                            </button>
+                            <button type="button" class="btn btn-primary me-3" (click)="atualizar(vaga.id)">
+                                Atualizar Vaga
+                            </button>
+                            <button type="button" class="btn btn-primary" (click)="excluir(vaga.id)">
+                                Excluir Vaga
+                            </button>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+</body>   
diff --git a/src/app/painel-vagas/painel-vagas.component.ts b/src/app/painel-vagas/painel-vagas.component.ts
@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { Vaga } from '../models/Vagas.models';
+import { VagasService } from '../vagas.service';
 
 @Component({
   selector: 'app-painel-vagas',
@@ -7,9 +9,38 @@ import { Component, OnInit } from '@angular/core';
 })
 export class PainelVagasComponent implements OnInit {
 
-  constructor() { }
+  public vaga: Vaga = new Vaga(0,"","","",0);
+
+  constructor(private _vagasService: VagasService) { }
 
   ngOnInit(): void {
   }
 
-}
+  cadastrar() {
+    this._vagasService.cadastrarVaga(this.vaga).subscribe(
+      vaga => {this.vaga = new Vaga(0,"","","",0)},
+      err => {console.log("Erro ao cadastrar")}
+    );
+
+    window.location.href = "/mural";
+  }
+
+  atualizar(id: number) {
+    this._vagasService.atualizarVaga(id, this.vaga).subscribe(
+      vaga => {this.vaga = new Vaga(0,"","","",0)},
+      err => {console.log("Erro ao atualizar")}
+    );
+
+    window.location.href = "/mural";
+  }
+
+  excluir(id: number) {
+    this._vagasService.removerVaga(id).subscribe(
+      vaga => {this.vaga = new Vaga(0,"","","",0)},
+      err => {console.log("Erro ao excluir")}
+    );
+
+    window.location.href = "/mural";
+  }
+
+}
diff --git a/src/app/rodape/rodape.component.css b/src/app/rodape/rodape.component.css
@@ -0,0 +1,8 @@
+footer {
+    background: #ffffff;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    text-align: center;
+    margin-top: 135px;
+}
diff --git a/src/app/rodape/rodape.component.html b/src/app/rodape/rodape.component.html
@@ -1,5 +1,5 @@
-
-<footer >
-    <p class="text-center">Feito por LH</p>
-</footer>
-
+<footer class="page-footer self-lg-end border border-danger">
+  <div class="text-center p-3">
+      © 2022 Copyright | <a href="#" target="_blank">UC12 SA2 Atividade 1 Online </a>
+  </div>
+</footer>
diff --git a/src/app/vagas.service.ts b/src/app/vagas.service.ts
@@ -1,18 +1,31 @@
 import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http'
+import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { Vaga } from './models/Vagas.models';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class VagasService {
-
-  private url = "http://localhost:3000/vagas";
+  private url = 'http://localhost:3000/vagas';
 
-  constructor(private _httpClient: HttpClient) { }
-    getVagas(): Observable<Vaga[]>{
-      return this._httpClient.get<Vaga[]>(this.url);
-
-   }
+  constructor(private _httpClient: HttpClient) {}
+
+  getVagas(): Observable<Vaga[]> {
+    return this._httpClient.get<Vaga[]>(this.url);
+  }
+
+  cadastrarVaga(vaga: Vaga): Observable<Vaga[]> {
+    return this._httpClient.post<Vaga[]>(this.url, vaga);
+  }
+
+  atualizarVaga(id: any, vaga: Vaga): Observable<Vaga[]> {
+    const urlAtualizar = `${this.url}/${id}`;
+    return this._httpClient.put<Vaga[]>(urlAtualizar, vaga);
+  }
+
+  removerVaga(id: any): Observable<Vaga[]> {
+    const urlDeletar = `${this.url}/${id}`;
+    return this._httpClient.delete<Vaga[]>(urlDeletar);
+  }
 }
diff --git a/vagas-db.json b/vagas-db.json
@@ -20,27 +20,6 @@
             "foto": "foto3.png",
             "descricao": "Trabalhar com Spring Boot",
             "salario": 5000
-        },
-        {
-            "id": 4,
-            "nome": "Desenvolvedor Back End Pleno",
-            "foto": "foto3.png",
-            "descricao": "Trabalhar com Spring Boot",
-            "salario": 5000
-        },
-        {
-            "id": 5,
-            "nome": "Desenvolvedor Back End Pleno",
-            "foto": "foto3.png",
-            "descricao": "Trabalhar com Spring Boot",
-            "salario": 5000
-        },
-        {
-            "id": 6,
-            "nome": "Desenvolvedor Back End Pleno",
-            "foto": "foto3.png",
-            "descricao": "Trabalhar com Spring Boot",
-            "salario": 5000
         }
     ]
 }