Commit 9b869702 authored by faby's avatar faby

front

parent 1c29ce9e
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CrearComponent } from './crear/crear.component';
import { ListarComponent } from './listar/listar.component';
const routes: Routes = [
{ path: '', redirectTo: '/create', pathMatch: 'full' },
{ path: 'create', component: CrearComponent },
{ path: 'listar', component: ListarComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
</li>
</ul>
<router-outlet></router-outlet>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">ng mysql CRUD</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" [routerLink]="[ '/crear' ]" routerLinkActive="active"><i class="fas fa-plus-gamepad"></i> Games</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="[ '/listar' ]" routerLinkActive="active"><i class="fas fa-plus-circle"></i> Add Game</a>
</li>
</ul>
</div>
</div>
</nav>
<router-outlet></router-outlet>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">ng mysql CRUD</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" [routerLink]="[ '/create' ]" routerLinkActive="active"><i class="fas fa-plus-gamepad"></i> Games</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="[ '/listar' ]" routerLinkActive="active"><i class="fas fa-plus-circle"></i> Add Game</a>
</li>
</ul>
</div>
</div>
</nav>
<router-outlet></router-outlet>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">SPRING CRUD</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" [routerLink]="[ '/create' ]" routerLinkActive="active"><i class="fas fa-plus-gamepad"></i> Games</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="[ '/listar' ]" routerLinkActive="active"><i class="fas fa-plus-circle"></i> Add Game</a>
</li>
</ul>
</div>
</div>
</nav>
<router-outlet></router-outlet>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">SPRING CRUD</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" [routerLink]="[ '/create' ]" routerLinkActive="active"><i class="fas fa-plus-gamepad"></i> Crear</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="[ '/listar' ]" routerLinkActive="active"><i class="fas fa-plus-circle"></i> Listar </a>
</li>
</ul>
</div>
</div>
</nav>
<router-outlet></router-outlet>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">SPRING CRUD</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" [routerLink]="[ '/create' ]" routerLinkActive="active"><i class="fas fa-plus-circle"></i> Crear</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="[ '/listar' ]" routerLinkActive="active"><i class=""></i> Listar </a>
</li>
</ul>
</div>
</div>
</nav>
<router-outlet></router-outlet>
<div class="col-md-4 offset-md-2">
<div class="card">
<div class="card-body">
<form action="">
<div class="form-group">
<input type="text" name="title" placeholder="Title" class="form-control" autofocus>
</div>
<div class="form-group">
<textarea name="description" placeholder="Description" id="" rows="2" class="form-control"></textarea>
</div>
<div class="form-group">
<input type="text" name="image" placeholder="Image" class="form-control" autofocus>
</div>
<button class="btn btn-success btn-block" >
SAve
</button>
</form>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-body text-center">
<img src="../../assets/image/noImage.png" alt="" class="card-img-top">
<h3></h3>
<p></p>
<p></p>
</div>
</div>
<div class="col-md-4 offset-md-2">
<div class="card">
<div class="card-body">
<form action="">
<div class="form-group">
<input type="text" name="title" placeholder="Title" class="form-control" autofocus>
</div>
<div class="form-group">
<textarea name="description" placeholder="Description" id="" rows="2" class="form-control"></textarea>
</div>
<div class="form-group">
<input type="text" name="image" placeholder="Image" class="form-control" autofocus>
</div>
<button class="btn btn-success btn-block" >
SAve
</button>
</form>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-body text-center">
<img src="../../assets/image/noImage.png" alt="" class="card-img-top" height="50">
<h3></h3>
<p></p>
<p></p>
</div>
</div>
<div class="col-md-4 offset-md-2">
<div class="card">
<div class="card-body">
<form action="">
<div class="form-group">
<input type="text" name="title" placeholder="Title" class="form-control" autofocus>
</div>
<div class="form-group">
<textarea name="description" placeholder="Description" id="" rows="2" class="form-control"></textarea>
</div>
<div class="form-group">
<input type="text" name="image" placeholder="Image" class="form-control" autofocus>
</div>
<button class="btn btn-success btn-block" >
SAve
</button>
</form>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-body text-center">
<img src="../../assets/image/noImage.png" alt="" class="card-img-top" height="50" width="50">
<h3></h3>
<p></p>
<p></p>
</div>
</div>
<div class="col-md-4 offset-md-2">
<div class="card">
<div class="card-body">
<form action="">
<div class="form-group">
<input type="text" name="title" placeholder="Title" class="form-control" autofocus>
</div>
<div class="form-group">
<textarea name="description" placeholder="Description" id="" rows="2" class="form-control"></textarea>
</div>
<div class="form-group">
<input type="text" name="image" placeholder="Image" class="form-control" autofocus>
</div>
<button class="btn btn-success btn-block" >
SAve
</button>
</form>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-body text-center">
<img src="../../assets/image/noImage.png" alt="" class="card-img-top" >
<h3></h3>
<p></p>
<p></p>
</div>
</div>
<div class="col-md-4 offset-md-2">
<div class="card">
<div class="card-body">
<form action="">
<div class="form-group">
<input type="text" name="title" placeholder="Title" class="form-control" autofocus>
</div>
<div class="form-group">
<textarea name="description" placeholder="Description" id="" rows="2" class="form-control"></textarea>
</div>
<div class="form-group">
<input type="text" name="image" placeholder="Image" class="form-control" autofocus>
</div>
<button class="btn btn-success btn-block" >
SAve
</button>
</form>
</div>
</div>
</div>
<div class="col-md-4 offset-md-2">
<div class="card">
<div class="card-body">
<form action="">
<div class="form-group">
<input type="text" name="title" placeholder="Nombre" class="form-control" autofocus>
</div>
<div class="form-group">
<input type="text" name="title" placeholder="Apellido" class="form-control" autofocus>
</div>
<div class="form-group">
<input type="text" name="title" placeholder="salida destino" class="form-control" autofocus>
</div>
<div class="form-group">
<input type="text" name="title" placeholder="llegada destino" class="form-control" autofocus>
</div>
<div class="form-group">
<input type="date" name="title" class="form-control" autofocus>
</div>
<button class="btn btn-success btn-block" >
SAve
</button>
</form>
</div>
</div>
</div>
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<div class="container">
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
export interface User {
id?: number;
title?: string;
description?: string;
image?: string;
created_at?: Date;
}
\ No newline at end of file
export interface User {
id: number;
nombre: string;
apellido: string;
destinoSalida: string;
destinoLlegada: string;
fecha: Date;
}
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class UserService {
constructor() { }
}
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class UserService {
apiURL = 'http://localhost:9000';
constructor(private http: HttpClient) {}
getGames() {
return this.http.get(`${this.apiURL}/list`);
}
saveGame(user: User) {
return this.http.post(`${this.apiURL}/games`, user);
}
}
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { User } from '../model/User';
@Injectable({
providedIn: 'root'
})
export class UserService {
apiURL = 'http://localhost:9000';
constructor(private http: HttpClient) {}
getGames() {
return this.http.get(`${this.apiURL}/list`);
}
saveGame(user: User) {
return this.http.post(`${this.apiURL}/games`, user);
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Client</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Client</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Client</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://bootswatch.com/4/lux/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CrearComponent } from './crear/crear.component';
import { ListarComponent } from './listar/listar.component';
const routes: Routes = [];
const routes: Routes = [
{ path: '', redirectTo: '/create', pathMatch: 'full' },
{ path: 'create', component: CrearComponent },
{ path: 'listar', component: ListarComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
......
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
</li>
</ul>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">SPRING CRUD</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" [routerLink]="[ '/create' ]" routerLinkActive="active"><i class="fas fa-plus-circle"></i> Crear</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="[ '/listar' ]" routerLinkActive="active"><i class=""></i> Listar </a>
</li>
</ul>
</div>
</div>
</nav>
<router-outlet></router-outlet>
......@@ -3,10 +3,14 @@ import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CrearComponent } from './crear/crear.component';
import { ListarComponent } from './listar/listar.component';
@NgModule({
declarations: [
AppComponent
AppComponent,
CrearComponent,
ListarComponent
],
imports: [
BrowserModule,
......
<div class="col-md-4 offset-md-2">
<div class="card">
<div class="card-body">
<form action="">
<div class="form-group">
<input type="text" name="title" placeholder="Nombre" class="form-control" autofocus>
</div>
<div class="form-group">
<input type="text" name="title" placeholder="Apellido" class="form-control" autofocus>
</div>
<div class="form-group">
<input type="text" name="title" placeholder="salida destino" class="form-control" autofocus>
</div>
<div class="form-group">
<input type="text" name="title" placeholder="llegada destino" class="form-control" autofocus>
</div>
<div class="form-group">
<input type="date" name="title" class="form-control" autofocus>
</div>
<button class="btn btn-success btn-block" >
SAve
</button>
</form>
</div>
</div>
</div>
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CrearComponent } from './crear.component';
describe('CrearComponent', () => {
let component: CrearComponent;
let fixture: ComponentFixture<CrearComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ CrearComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(CrearComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-crear',
templateUrl: './crear.component.html',
styleUrls: ['./crear.component.scss']
})
export class CrearComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
<div class="container">
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ListarComponent } from './listar.component';
describe('ListarComponent', () => {
let component: ListarComponent;
let fixture: ComponentFixture<ListarComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ListarComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ListarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-listar',
templateUrl: './listar.component.html',
styleUrls: ['./listar.component.scss']
})
export class ListarComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
export interface User {
id: number;
nombre: string;
apellido: string;
destinoSalida: string;
destinoLlegada: string;
fecha: Date;
}
import { TestBed } from '@angular/core/testing';
import { UserService } from './user.service';
describe('UserService', () => {
beforeEach(() => TestBed.configureTestingModule({}));
it('should be created', () => {
const service: UserService = TestBed.get(UserService);
expect(service).toBeTruthy();
});
});
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { User } from '../model/User';
@Injectable({
providedIn: 'root'
})
export class UserService {
apiURL = 'http://localhost:9000';
constructor(private http: HttpClient) {}
getGames() {
return this.http.get(`${this.apiURL}/list`);
}
saveGame(user: User) {
return this.http.post(`${this.apiURL}/games`, user);
}
}
......@@ -6,6 +6,8 @@
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://bootswatch.com/4/lux/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment