finshed the backend, pay attention to reverse()

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "python.analysis.extraPaths": [
+        "./service/api"
+    ]
+}

ghi/app/src/App.js

@@ -1,6 +1,10 @@
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import MainPage from './MainPage';
 import Nav from './Nav';
+import ModelList from './ModelList';
+import ModelForm from './ModelForm';
+import AutomobileForm from './AutomobileForm';
+import AutomobileList from './AutomobileList';
 
 function App() {
   return (
@@ -9,6 +13,14 @@ function App() {
       <div className="container">
         <Routes>
           <Route path="/" element={<MainPage />} />
+          <Route path="models">
+            <Route index element={<ModelList />}/>
+            <Route path="new" element={<ModelForm />}/>
+          </Route>
+          <Route path="automobiles">
+            <Route index element={<AutomobileList />}/>
+            <Route path="new" element={<AutomobileForm />} />
+          </Route>
         </Routes>
       </div>
     </BrowserRouter>

ghi/app/src/AutomobileForm.js

@@ -0,0 +1,128 @@
+import { useState, useEffect } from "react";
+
+function AutomobileForm() {
+    const [models, setModels] = useState([]);
+
+    const fetchData = async () => {
+        const modelUrl = 'http://localhost:8100/api/models/';
+        const response = await fetch(modelUrl);
+        if (response.ok) {
+            const data = await response.json();
+            setModels(data.models)
+        }
+    }
+
+    const [color, setColor] = useState('');
+    const [year, setYear] = useState('');
+    const [vin, setVin] = useState('');
+    const [model, setModel] = useState('');
+
+    const handleColor = (event) => {
+        setColor(event.target.value);
+    }
+    const handleYear = (event) => {
+        setYear(event.target.value);
+    }
+    const handleVin = (event) => {
+        setVin(event.target.value);
+    }
+    const handleModelChange = (event) => {
+        setModel(event.target.value);
+    }
+
+    const handleSubmit = async (event) => {
+        event.preventDefault();
+
+        let data = {};
+
+        data.color = color;
+        data.year = year;
+        data.vin = vin;
+        data.model_id = model;
+
+        const url = 'http://localhost:8100/api/automobiles/';
+        const fetchConfig = {
+            method: "post",
+            body: JSON.stringify(data),
+            Headers: {
+                'Content-Type': 'application/json',
+            },
+        }
+
+        const response = await fetch(url, fetchConfig);
+        if (response.ok) {
+            setModels([]);
+            setColor('');
+            setYear('');
+            setVin('');
+        }
+    }
+
+    useEffect(() => {
+        fetchData();
+      }, []);
+
+
+    return (
+        <div className="row">
+        <div className="offset-3 col-6">
+          <div className="shadow p-4 mt-4">
+            <h1>Add a new vehicle</h1>
+            <form id="create-conference-form" onSubmit={handleSubmit}>
+              <div className="mb-3">
+                <select required name="model_id" id="model_id" className="form-select" onChange={handleModelChange} value={model}>
+                    <option value="">Choose a model</option>
+                    {models.map(model => {
+                      return (
+                          <option value={model.id} key={model.id}>
+                              {model.name}
+                          </option>
+                      );
+                    })}
+                </select>
+              </div>
+              <div className="form-floating mb-3">
+                <input 
+                  placeholder="" 
+                  required type="text" 
+                  name="color" 
+                  id="color" 
+                  className="form-control"
+                  onChange={handleColor}
+                  value={color}
+              />
+                <label htmlFor="color">Color</label>
+              </div>
+              <div className="form-floating mb-3">
+                <input 
+                  placeholder="" 
+                  required type="text" 
+                  name="year" 
+                  id="year" 
+                  className="form-control"
+                  onChange={handleYear}
+                  value={year}
+              />
+                <label htmlFor="year">Year</label>
+              </div>
+              <div className="form-floating mb-3">
+                <input 
+                  placeholder="" 
+                  required type="text" 
+                  name="vin" 
+                  id="vin" 
+                  className="form-control"
+                  onChange={handleVin}
+                  value={vin}
+              />
+                <label htmlFor="vin">VIN</label>
+              </div>
+              <button className="btn btn-primary">Create</button>
+            </form>
+          </div>
+        </div>
+      </div>
+    );
+}
+
+export default AutomobileForm;

ghi/app/src/AutomobileList.js

@@ -0,0 +1,151 @@
+import React from 'react';
+
+
+class AutomobileList extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            autos: []
+        }
+    }
+
+    async componentDidMount() {
+        // const url = "http://localhost:8100/api/automobiles/"
+        const url = "http://localhost:8100/api/automobiles/"
+        const response = await fetch(url)
+        if (response.ok) {
+            const data = await response.json();
+            this.setState({
+                autos: data.autos
+            })
+        }
+    }
+
+    render() {
+      return (
+        <div>
+          <h1>Automobiles</h1>
+          <table className="table table-striped table-hover">
+            <thead>
+              <tr>
+                <th>VIN</th>
+                <th>Color</th>
+                <th>Year</th>
+                <th>Model</th>
+                <th>Manufacturer</th>
+              </tr>
+            </thead>
+            <tbody>
+              {this.state.autos.map(auto => {
+                return (
+                  <tr key={auto.vin}>
+                    <td>{auto.vin}</td>
+                    <td>{auto.color}</td>
+                    <td>{auto.year}</td>
+                    <td>{auto.model.name}</td>
+                    <td>{auto.model.manufacturer.name}</td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+      )
+    }
+}
+  export default AutomobileList;
+
+// import React from "react";
+
+// class AutomobileList extends React.Component {
+//     constructor (props) {
+//         super(props)
+//         this.state = {
+//             autos: []
+//         }
+//     }
+
+//     async componentDinMount() {
+//         const url = 'http://localhost:8100/api/automobiles/';
+//         const response = await fetch(url);
+//         console.log(response)
+//         if (response.ok) {
+//             const data = await response.json();
+//             console.log(data);
+//             this.setState({
+//                 autos: data.autos
+//             })
+//         }
+//     }
+
+//     render() {
+//         return (
+//             <div>
+//                 <h1>Automobile List</h1>
+//                 <table className="table table-dark table-striped">
+//                     <thead>
+//                         <tr>
+//                             <th>VIN</th>
+//                             <th>Color</th>
+//                             <th>Year</th>
+//                             <th>Model</th>
+//                             <th>Manufacturer</th>
+//                         </tr>
+//                     </thead>
+//                     <tbody>
+//                         {this.state.autos.map(auto => {
+//                             console.log(auto)
+//                             return (
+//                                 <tr key={auto.href}>
+//                                     <td>{auto.vin}</td>
+//                                     <td>{auto.color}</td>
+//                                     <td>{auto.year}</td>
+//                                     <td>{auto.model.name}</td>
+//                                     <td>{auto.model.manufacturer.name}</td>
+//                                 </tr>
+//                             )
+//                         })}
+//                     </tbody>
+//                 </table>
+//             </div>
+//         )
+//     }
+// }
+
+// export default AutomobileList;
+
+// function AutomobileList(props) {
+//     if (!props.autos || !Array.isArray(props.autos)) {
+//         return null;
+//       }
+//     return (
+//         <>
+//           <table className="table table-dark table-striped">
+//             <thead>
+//                 <tr>
+//                     <th>VIN</th>
+//                     <th>Color</th>
+//                     <th>Year</th>
+//                     <th>Model</th>
+//                     <th>Manufacturer</th>
+//                 </tr>
+//             </thead>
+//             <tbody>
+//             {props.autos.map(auto => {
+//                 return (
+//                     <tr key={auto.vin}>
+//                         <td>{auto.vin}</td>
+//                         <td>{auto.color}</td>
+//                         <td>{auto.year}</td>
+//                         <td>{auto.model}</td>
+//                         <td>{auto.manufacturer}</td>
+//                     </tr>
+//                 );
+//             })}
+//             </tbody>
+//           </table>
+
+//         </>
+//     );
+// }
+