Skip to content

Commit

Permalink
new form-control
Browse files Browse the repository at this point in the history
  • Loading branch information
@Fernanda-Farias
Fernanda-Farias committed Aug 8, 2024
1 parent aaa6145 commit 9588fe9
Show file tree
Hide file tree
Showing 4 changed files with 138 additions and 59 deletions.
54 changes: 44 additions & 10 deletions src/app/components/restrito/atualiza-produto/atualiza-produto.component.css
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,54 @@
/* Estiliza o main */
main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #21224e;
font-family: Arial, sans-serif;
padding: 20px;
}

h1 {
color: white;
margin-top: 20px;
text-align: center;
}

#section-cadastro {
height: 100%;
width: 700px;
border-radius: 10px;
border: 2px solid black;
max-width: 700px;
margin: 50px auto;
padding: 20px;
border-radius: 15px;
border: 2px solid #1e1e1e;
background-color: #2e2e2e;
}

.form-group {
margin-bottom: 15px;
}

.form-group label {
color: white;
display: block;
margin-bottom: 5px;
}

.form-control {
width: 100%;
padding: 10px;
border-radius: 5px;
border: 1px solid #444;
background-color: #ffffff;
color: rgb(0, 0, 0);
}

.btn-primary {
background-color: #00a000;
color: #fff;
padding: 10px 20px;
margin-top: 50px;
margin-bottom: 10px;
border-radius: 5px;
border: none;
display: block;
margin: 20px auto;
}

.btn-primary:hover {
background-color: #007a00;
}
49 changes: 27 additions & 22 deletions src/app/components/restrito/atualiza-produto/atualiza-produto.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,38 @@
<main>
<h1>Atualiza jogo</h1>
<section id="section-cadastro">
<h1> Atualizar Produto</h1>
<form *ngIf="produto">
<div class="form-group">
<label for="id">ID</label>
<input type="text" class="form-control" id="id" name="id" [(ngModel)]="produto.id" readonly>
</div>

<label for="produto">Id</label>
<input type="text" class="form-control" name="id" [(ngModel)]="produto.id" readonly>
<br>
<div class="form-group">
<label for="nome">Nome</label>
<input type="text" class="form-control" id="nome" name="nome" [(ngModel)]="produto.nome" placeholder="Informe o nome do jogo">
</div>

<label for="produto">Nome</label>
<input type="text" class="form-control" name="produto" [(ngModel)]="produto.nome">
<br>
<div class="form-group">
<label for="pasta">Pasta</label>
<input type="text" class="form-control" id="pasta" name="pasta" [(ngModel)]="produto.pasta" placeholder="Informe a pasta do jogo">
</div>

<label for="pasta">Pasta</label>
<input type="text" class="form-control" name="pasta" [(ngModel)]="produto.pasta">
<br>
<div class="form-group">
<label for="foto">Foto</label>
<input type="text" class="form-control" id="foto" name="foto" [(ngModel)]="produto.foto" placeholder="Informe o nome da imagem">
</div>

<label for="foto">Foto</label>
<input type="text" class="form-control" name="foto" [(ngModel)]="produto.foto">
<br>
<div class="form-group">
<label for="preco">Preço</label>
<input type="number" class="form-control" id="preco" name="preco" [(ngModel)]="produto.preco" placeholder="Informe o preço do jogo">
</div>

<label for="preco">Preço</label>
<input type="number" class="form-control" name="preco" [(ngModel)]="produto.preco">
<br>

<label for="desconto">Desconto</label>
<input type="number" class="form-control" name="desconto" [(ngModel)]="produto.desconto">
<br>

<button type="submit" class="btn btn-primary mb-3" (click)="atualizar(produto.id)">Atualizar</button>
<div class="form-group">
<label for="desconto">Desconto</label>
<input type="number" class="form-control" id="desconto" name="desconto" [(ngModel)]="produto.desconto" placeholder="Informe o desconto em porcentagem">
</div>

<button type="button" class="btn btn-primary mb-3" (click)="atualizar(produto.id)">Atualizar</button>
</form>
</section>
</main>
57 changes: 46 additions & 11 deletions src/app/components/restrito/cadastro-produto/cadastro-produto.component.css
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,55 @@
/* Estiliza o main */
main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #21224e;
font-family: Arial, sans-serif;
padding: 20px;

}

h1 {
color: white;
margin-top: 20px;
text-align: center;
}

#section-cadastro {
height: 100%;
width: 700px;
border-radius: 10px;
border: 2px solid black;
padding: 10px 10px;
margin-top: 50px;
margin-bottom: 10px;
max-width: 700px;
margin: 50px auto;
padding: 20px;
border-radius: 15px;
border: 2px solid #1e1e1e;
background-color: #2e2e2e;
}

.form-group {
margin-bottom: 15px;
}

.form-group label {
color: white;
display: block;
margin-bottom: 5px;
}

.form-control {
width: 100%;
padding: 10px;
border-radius: 5px;
border: 1px solid #444;
background-color: #ffffff;
color: rgb(0, 0, 0);
}

.btn-primary {
background-color: #00a000;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
border: none;
display: block;
margin: 20px auto;
}

.btn-primary:hover {
background-color: #007a00;
}
37 changes: 21 additions & 16 deletions src/app/components/restrito/cadastro-produto/cadastro-produto.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,31 @@
<main>
<h1>Cadastrar jogo</h1>
<section id="section-cadastro">
<h1> Cadastrar Produto</h1>
<form>
<label for="produto">Nome</label>
<input type="text" class="form-control" name="produto" [(ngModel)]="produto.nome">
<br>
<div class="form-group">
<label for="produto">Nome</label>
<input type="text" class="form-control" id="produto" name="produto" [(ngModel)]="produto.nome" placeholder="Informe o nome do jogo">
</div>

<label for="pasta">Pasta</label>
<input type="text" class="form-control" name="pasta" [(ngModel)]="produto.pasta">
<br>
<div class="form-group">
<label for="pasta">Pasta</label>
<input type="text" class="form-control" id="pasta" name="pasta" [(ngModel)]="produto.pasta" placeholder="Informe a pasta do jogo">
</div>

<label for="foto">Foto</label>
<input type="text" class="form-control" name="foto" [(ngModel)]="produto.foto">
<br>
<div class="form-group">
<label for="foto">Foto</label>
<input type="text" class="form-control" id="foto" name="foto" [(ngModel)]="produto.foto" placeholder="Informe o nome da imagem ">
</div>

<label for="preco">Preço</label>
<input type="number" class="form-control" name="preco" [(ngModel)]="produto.preco">
<br>
<div class="form-group">
<label for="preco">Preço</label>
<input type="number" class="form-control" id="preco" name="preco" [(ngModel)]="produto.preco" placeholder="Informe o preço do jogo ">
</div>

<label for="desconto">Desconto</label>
<input type="number" class="form-control" name="desconto" [(ngModel)]="produto.desconto">
<br>
<div class="form-group">
<label for="desconto">Desconto</label>
<input type="number" class="form-control" id="desconto" name="desconto" [(ngModel)]="produto.desconto" placeholder="Informe o desconto em porcentagem">
</div>

<button type="button" class="btn btn-primary mb-3" (click)="cadastrar()">Cadastrar</button>
</form>
Expand Down

0 comments on commit 9588fe9

Please sign in to comment.