Skip to content
Snippets Groups Projects
Commit a445b731 authored by Leander Tolksdorf's avatar Leander Tolksdorf
Browse files

Remove deprecated components

parent c272a80c
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
client/src/pages/CreateLogEntry.tsx deleted 100644 → 0
+ 0
− 86
View file @ c272a80c
import React from "react";
import { useParams } from "react-router-dom";
import { useFormik } from "formik";
import * as Yup from "yup";
import { Col, Form, Row, Button } from "react-bootstrap";
function VehicleInfo() {
const { vehicleId } = useParams();
return (
<div>
<h3>ID: {vehicleId}</h3>
</div>
);
}
const CreateLogEntry = () => {
const formik = useFormik({
initialValues: {
firstName: "",
lastName: "",
email: "",
},
validationSchema: Yup.object({
firstName: Yup.string()
.max(15, "Must be 15 characters or less")
.required("Required"),
lastName: Yup.string()
.max(20, "Must be 20 characters or less")
.required("Required"),
email: Yup.string().email("Invalid email address").required("Required"),
}),
onSubmit: async (values) => {
console.log(values);
const response = await fetch("/api/logEntry", {
method: "POST",
credentials: "same-origin",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(values), // body data type must match "Content-Type" header
});
console.log(response.json());
},
});
return (
<div>
<VehicleInfo />
<Form onSubmit={formik.handleSubmit}>
<Row className="mb-3">
<Form.Group as={Col} controlId="firstName">
<Form.Label>First Name</Form.Label>
<Form.Control type="text" {...formik.getFieldProps("firstName")} />
{formik.touched.firstName && formik.errors.firstName ? (
<div>{formik.errors.firstName}</div>
) : null}
</Form.Group>
</Row>
<Row className="mb-3">
<Form.Group as={Col} controlId="lastName">
<Form.Label>Last Name</Form.Label>
<Form.Control type="text" {...formik.getFieldProps("lastName")} />
{formik.touched.lastName && formik.errors.lastName ? (
<div>{formik.errors.lastName}</div>
) : null}
</Form.Group>
</Row>
<Row className="mb-3">
<Form.Group as={Col} controlId="email">
<Form.Label>Email Address</Form.Label>
<Form.Control type="email" {...formik.getFieldProps("email")} />
{formik.touched.email && formik.errors.email ? (
<div>{formik.errors.email}</div>
) : null}
</Form.Group>
</Row>
<Button variant="primary" type="submit">
Submit
</Button>
</Form>
</div>
);
};
export default CreateLogEntry;
client/src/pages/VehicleTypes.tsx deleted 100644 → 0
+ 0
− 180
View file @ c272a80c
import React, { useState, useEffect } from "react";
import Modal from "react-bootstrap/Modal";
import Button from "react-bootstrap/Button";
import Table from "react-bootstrap/Table";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTrash, faPlus } from "@fortawesome/free-solid-svg-icons";
function VehicleTypes() {
const [vehicleTypes, setVehicleTypes] = useState<
{ id: number; name: string; seats: number; image: string }[]
>([]);
const [add, setAdd] = useState(false);
const [removeId, setRemoveId] = useState<number | null>(null);
useEffect(() => {
reloadData();
});
const reloadData = () => {
fetch("/api/vehicleType", {
method: "GET",
credentials: "same-origin",
headers: {
"Content-Type": "application/json",
},
})
.then((response) => response.json())
.then((data) => setVehicleTypes(data))
.catch((e) => console.log("Error while loading vehicle type\n:", e));
};
const addType = (type: any) => {
fetch("/api/vehicleType", {
method: "POST",
credentials: "same-origin",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(type),
}).then(() => reloadData());
};
const removeType = () => {
fetch("/api/vehicleType/" + removeId, {
method: "DELETE",
credentials: "same-origin",
headers: {
"Content-Type": "application/json",
},
}).then(() => {
reloadData();
setRemoveId(null);
});
};
const getRemoveDialog = () => {
return (
<div className={"modalWrapper"}>
<Modal.Dialog>
<Modal.Header
closeButton
onClick={() => {
setRemoveId(null);
}}
>
<Modal.Title>Remove Vehicle Type</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>
Remove VehicleType "
{/* {vehicleTypes.find((x) => x.id == removeId).name}"? */}
</p>
</Modal.Body>
<Modal.Footer>
<Button
variant="secondary"
onClick={() => {
setRemoveId(null);
}}
>
Close
</Button>
<Button
variant="danger"
onClick={() => {
removeType();
}}
>
Delete
</Button>
</Modal.Footer>
</Modal.Dialog>
</div>
);
};
const getAddDialog = () => {
return (
<div className={"modalWrapper"}>
<Modal.Dialog>
<Modal.Header
closeButton
onClick={() => {
setAdd(false);
}}
>
<Modal.Title>New Vehicle Type</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>Add VehicleType?</p>
TODO
</Modal.Body>
<Modal.Footer>
<Button
variant="secondary"
onClick={() => {
setAdd(false);
}}
>
Close
</Button>
<Button
variant="primary"
onClick={() => {
addType({ name: "ABC", seats: 2 });
}}
>
Add
</Button>
</Modal.Footer>
</Modal.Dialog>
</div>
);
};
return (
<div>
<div className={"menuBarTable"}>
<Button size="sm" variant="dark" title="Add Type">
<FontAwesomeIcon
className={"text-center"}
onClick={() => {
setAdd(true);
}}
icon={faPlus}
/>
</Button>
</div>
<Table striped bordered hover variant="dark">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Seats</th>
<th> </th>
</tr>
</thead>
<tbody>
{vehicleTypes.map((t) => (
<tr key={t.id}>
<td>{t.id}</td>
<td>{t.name}</td>
<td>{t.seats}</td>
<td className={"text-center"}>
<FontAwesomeIcon
className={"text-danger text-center iconHover"}
onClick={() => {
setRemoveId(t.id);
}}
title="Remove"
icon={faTrash}
/>
</td>
</tr>
))}
</tbody>
</Table>
{removeId != null && getRemoveDialog()}
{add && getAddDialog()}
</div>
);
}
export default VehicleTypes;
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