diff --git a/mock/db.json b/mock/db.json new file mode 100644 index 0000000..0838572 --- /dev/null +++ b/mock/db.json @@ -0,0 +1,12 @@ +{ + "cadastro-van":[ + { + "id": 1, + "placa": "DBE2356", + "marca": "Fiat", + "modelo": "Ducatto", + "numPassageiros": 14, + "alugado" : false + } + ] +} \ No newline at end of file diff --git a/package.json b/package.json index ad7c9c5..b9cf076 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ }, "scripts": { "start": "react-scripts start", + "start:mock": "json-server --port 8080 --watch ./mock/db.json", "build": "react-scripts build", "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)'", "eject": "react-scripts eject" diff --git a/src/App.tsx b/src/App.tsx index 5b3a726..ce21495 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,6 +6,7 @@ import { } from '@ionic/react'; import { IonReactRouter } from '@ionic/react-router'; import Cadastro from './pages/Cadastro'; +import Vans from './pages/Vans'; import MainPages from './pages/MainPages'; /* Core CSS required for Ionic components to work properly */ @@ -36,6 +37,7 @@ const App: React.FC = () => ( + diff --git a/src/models/van.model.ts b/src/models/van.model.ts new file mode 100644 index 0000000..38ca95c --- /dev/null +++ b/src/models/van.model.ts @@ -0,0 +1,7 @@ +export type Van = { + id: number; + placa: string; + modelo: string; + numPassageiros: number; + alugado: boolean +} \ No newline at end of file diff --git a/src/pages/Vans.css b/src/pages/Vans.css new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/Vans.tsx b/src/pages/Vans.tsx new file mode 100644 index 0000000..844e39c --- /dev/null +++ b/src/pages/Vans.tsx @@ -0,0 +1,155 @@ +import { + IonIcon, + IonItem, + IonLabel, + IonInput, + IonBackButton, + IonButton, + IonButtons, + IonCardTitle, + IonCol, + IonContent, + IonGrid, + IonHeader, + IonPage, + IonRow, + IonToolbar, + IonTitle, + IonList, + IonRadioGroup, + IonListHeader, + IonRadio +} from "@ionic/react"; +import { arrowBack } from "ionicons/icons"; +import React, { useState } from "react"; +//import { Van } from "../models/van.model"; +import "./Vans.css"; + +const Vans: React.FC = () => { + // const van: Van; + + const [placa, setPlaca] = useState(""); + const [marca, setMarca] = useState(""); + const [modelo, setModelo] = useState(""); + const [numPassageiros, setNumPassageiros] = useState(""); + const [tipoSelecionado, setTipoSelecionado] = useState("Não"); + + const placaChangeHandle = (event: any) => { + setPlaca(event.target.value); + }; + + const marcaChangeHandle = (event: any) => { + setMarca(event.target.value); + }; + + const modeloChangeHandle = (event: any) => { + setModelo(event.target.value); + }; + + const numPassageirosChangeHandle = (event: any) => { + setNumPassageiros(event.target.value); + }; + + const tipoSelecionadoChangeHandle = (event: any) => { + setTipoSelecionado(event.target.value); + }; + + return ( + + + + + + + Return + + + + + + +
+ Cadastro da Veículo + + + Placa * + setPlaca(e.detail.value!)} + > + + + + Marca * + + + + + Modelo * + + + + + + Digite o número total de passageiros * + + + + + + + + Veículo Alugado ? + + + + Sim + + + + + Não + + + + + + + Salvar + +
+
+
+ ); +}; + +export default Vans;