clindelof
/
fleet-management
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

seperate fuel purchase modal into class of it own. 

begin stubbing out api
master
Christopher Lindelof 2024-08-27 13:13:13 -04:00
parent 2863bdb149
commit 9a9886db53
5 changed files with 98 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
back-end/app/dependencies.py Normal file
View File

3
back-end/app/main.py
View File

@ -1,7 +1,10 @@
from fastapi import FastAPI from fastapi import FastAPI
from routers import vehicleInformation
app = FastAPI() app = FastAPI()
app.include_router(vehicleInformation.router)
@app.get("/") @app.get("/")
async def root(): async def root():
return {"message": "Hello World!"} return {"message": "Hello World!"}

0
back-end/app/routers/__init__.py Normal file
View File

9
back-end/app/routers/vehicleInformation.py Normal file
View File

@ -0,0 +1,9 @@
from fastapi import APIRouter
router = APIRouter(
prefix="/vehicle"
)
@router.get('/{vehicleId}/vin')
async def get_vehicle_vin(vehicleId: str):
return ""

148
front-end/src/components/FleetManager-Components/FuelPurchases.js
View File

@ -9,7 +9,7 @@ export default class FuelPurchases extends Component {
this.state = { this.state = {
expanded: false, expanded: false,
showModal: true showModal: true,
} }
} }
@ -43,68 +43,92 @@ export default class FuelPurchases extends Component {
{ {
(this.state.showModal) (this.state.showModal)
? ( ? <FuelPurchaseModal setShowModal={this.setShowModal} /> : null
<>
<div
className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none"
>
<div className="relative w-auto my-6 mx-auto min-w-1/2 max-w-3xl">
{/*content*/}
<div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
{/*header*/}
<div className="flex items-start justify-between p-5 border-b border-solid border-blueGray-200 rounded-t">
<h3 className="text-3xl font-semibold">
Add Fuel Purchase
</h3>
<button
className="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
onClick={() => this.setShowModal(false)}
>
<span className="bg-transparent text-black opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none">
<FontAwesomeIcon icon={faClose} />
</span>
</button>
</div>
{/*body*/}
<div className="relative p-6 flex-auto">
<div className="flex flex-col">
<input type="date"/>
<div>Date</div>
</div>
<div className="flex flex-col">
<input type="number" step="0.001" className="border" />
Fuel Purchased
</div>
<div className="flex flex-col">
<input type="number" step="0.01" className="border" />
Total Cost
</div>
</div>
{/*footer*/}
<div className="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b">
<button
className="text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
type="button"
onClick={() => this.setShowModal(false)}
>
Close
</button>
<button
className="bg-emerald-500 text-white active:bg-emerald-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
type="button"
onClick={() => this.setShowModal(false)}
>
Add
</button>
</div>
</div>
</div>
</div>
<div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
</>
) : null
} }
</> </>
) )
} }
} }
class FuelPurchaseModal extends Component {
constructor(props) {
super(props)
this.state = {
date: '',
amount: 0.000,
cost: 0.00
}
}
handleChange = (event) => {
this.setState({
[event.target.id]: event.target.value
})
}
render() {
return (
<>
<div
className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none"
>
<div className="relative w-auto my-6 mx-auto min-w-1/2 max-w-3xl">
{/*content*/}
<div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
{/*header*/}
<div className="flex items-start justify-between p-5 border-b border-solid border-blueGray-200 rounded-t">
<h3 className="text-3xl font-semibold">
Add Fuel Purchase
</h3>
<button
className="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
onClick={() => this.setShowModal(false)}
>
<span className="bg-transparent text-black opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none">
<FontAwesomeIcon icon={faClose} />
</span>
</button>
</div>
{/*body*/}
<div className="relative p-6 flex-auto">
<div className="flex flex-col">
<input className="border" id="date" type="date" value={this.state.date} onChange={this.handleChange}/>
<div>Date</div>
</div>
<div className="flex flex-col">
<input id="amount" type="number" step="0.001" className="border" value={this.state.amount} onChange={this.handleChange}/>
Fuel Purchased
</div>
<div className="flex flex-col">
<input id="cost" type="number" step="0.01" className="border" value={this.state.cost} onChange={this.handleChange}/>
Total Cost
</div>
</div>
{/*footer*/}
<div className="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b">
<button
className="text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
type="button"
onClick={() => this.props.setShowModal(false)}
>
Close
</button>
<button
className="bg-emerald-500 text-white active:bg-emerald-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
type="button"
onClick={() => this.props.setShowModal(false)}
>
Add
</button>
</div>
</div>
</div>
</div>
<div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
</>
)
}
}