Estrutura inicial para cadastro das vans

mock/db.json

@@ -0,0 +1,12 @@
+{
+  "cadastro-van":[
+    {
+      "id": 1,
+      "placa": "DBE2356",
+      "marca": "Fiat",
+      "modelo": "Ducatto",
+      "numPassageiros": 14,
+      "alugado" : false
+    }
+  ]
+}

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"

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 = () => (
         <IonRouterOutlet>
           <Route exact path="/mainpages" component={MainPages}></Route>
           <Route exact path="/cadastro" component={Cadastro}></Route>
+          <Route exact path="/cadastro-van" component={Vans}></Route>
           <Route exact path="/">
             <Redirect to="/cadastro" />
           </Route>

src/models/van.model.ts

@@ -0,0 +1,7 @@
+export type Van = {
+  id: number;
+  placa: string;
+  modelo: string;
+  numPassageiros: number;
+  alugado: boolean
+}

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<string>("");
+  const [marca, setMarca] = useState<string>("");
+  const [modelo, setModelo] = useState<string>("");
+  const [numPassageiros, setNumPassageiros] = useState("");
+  const [tipoSelecionado, setTipoSelecionado] = useState<string>("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 (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle></IonTitle>
+          <IonButtons slot='start'>
+            <IonBackButton
+              text={""}
+              icon={arrowBack}
+              defaultHref='cadastro-van'
+            >
+              Return
+            </IonBackButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonContent className='ion-padding'>
+        <form className='ion-padding'>
+          <IonCardTitle>Cadastro da Veículo</IonCardTitle>
+
+          <IonItem>
+            <IonLabel position='floating'>Placa *</IonLabel>
+            <IonInput
+              type='text'
+              required
+              value={placa}
+              placeholder='Digite a placa do Veículo'
+              onIonChange={placaChangeHandle}
+              //onIonChange={e => setPlaca(e.detail.value!)}
+            ></IonInput>
+          </IonItem>
+
+          <IonItem>
+            <IonLabel position='floating'>Marca *</IonLabel>
+            <IonInput
+              type='text'
+              required
+              value={marca}
+              placeholder='Digite a Marca do Veículo'
+              onIonChange={marcaChangeHandle}
+            ></IonInput>
+          </IonItem>
+
+          <IonItem>
+            <IonLabel position='floating'>Modelo *</IonLabel>
+            <IonInput
+              type='text'
+              required
+              value={modelo}
+              placeholder='Digite o Modelo do Veículo'
+              onIonChange={modeloChangeHandle}
+            ></IonInput>
+          </IonItem>
+
+          <IonItem>
+            <IonLabel position='floating'>
+              Digite o número total de passageiros *
+            </IonLabel>
+            <IonInput
+              type='number'
+              required
+              value={numPassageiros}
+              placeholder='Digite o número total de passageiros'
+              onIonChange={numPassageirosChangeHandle}
+            ></IonInput>
+          </IonItem>
+
+          <IonList>
+            <IonRadioGroup
+              value={tipoSelecionado}
+              onIonChange={tipoSelecionadoChangeHandle}
+            >
+              <IonListHeader>
+                <IonLabel>Veículo Alugado ?</IonLabel>
+              </IonListHeader>
+
+              <IonItem>
+                <IonLabel>Sim</IonLabel>
+                <IonRadio slot='start' value='Sim'></IonRadio>
+              </IonItem>
+
+              <IonItem>
+                <IonLabel>Não</IonLabel>
+                <IonRadio slot='start' value='Não'></IonRadio>
+              </IonItem>
+            </IonRadioGroup>
+          </IonList>
+
+          <IonButton className='ion-margin-top' type='submit' expand='block'>
+            Salvar
+          </IonButton>
+        </form>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Vans;