Some other minor changes

This commit is contained in:
Jakub Cywka 2023-10-22 03:18:30 +02:00
parent a5ef74d60c
commit bfc51a7620
4 changed files with 16 additions and 127 deletions

View file

@ -21,7 +21,7 @@ import '@ionic/react/css/display.css';
/* Theme variables */
import './theme/variables.css';
import Submit from './pages/Submit';
import Submit from './pages/Report';
setupIonicReact();
@ -35,7 +35,7 @@ const App: React.FC = () => (
<Route exact path="/">
<Redirect to="/home" />
</Route>
<Route exact path="/submit">
<Route exact path="/report">
<Submit />
</Route>
</IonRouterOutlet>

View file

@ -1,133 +1,21 @@
import { IonButton, IonContent, IonHeader, IonInput, IonItem, IonLabel, IonModal, IonPage, IonTitle, IonToolbar } from "@ionic/react";
import { IonButton, IonContent, IonHeader, IonInput, IonItem, IonLabel, IonModal, IonPage, IonTitle, IonToolbar, useIonRouter } from "@ionic/react";
import styles from "./AddWarningButton.module.css";
import { FormEventHandler, useState } from "react";
const AddWarningButton: React.FC = () => {
const [shouldOpenModal, setShouldOpenModal] = useState(false);
const { push } = useIonRouter();
function openModal() {
setShouldOpenModal(true);
};
const [formData, setFormData] = useState({
name: '',
productName: '',
producer: '',
submitterAddress: '',
description: '',
location: ''
});
const handleSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
e.preventDefault();
try {
const response = await fetch('/api/incident/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(formData),
});
if (response.ok) {
console.log('Form submitted successfully.');
} else {
console.error('Form submission failed.');
}
} catch (error) {
console.error('Error:', error);
}
};
const handleInputChange = (fieldName: any, value: any) => {
setFormData({
...formData,
[fieldName]: value,
});
function sendReport() {
push("/report");
};
return (
<>
<IonButton onClick={openModal} className={styles.addWarningButton} color="success">
<IonButton onClick={sendReport} className={styles.addWarningButton} color="success">
Wyślij własne zgłoszenie
</IonButton>
<IonModal isOpen={shouldOpenModal}>
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>
Zgłoszenie
</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">
Zgłoszenie
</IonTitle>
</IonToolbar>
</IonHeader>
<form onSubmit={handleSubmit}>
<IonItem>
<IonLabel position="floating">Imię</IonLabel>
<IonInput
type="text"
value={formData.name}
onIonChange={(e) => handleInputChange('name', e.detail.value)}
/>
</IonItem>
<IonItem>
<IonLabel position="floating">Nazwa produktu</IonLabel>
<IonInput
type="text"
value={formData.productName}
onIonChange={(e) => handleInputChange('productName', e.detail.value)}
/>
</IonItem>
<IonItem>
<IonLabel position="floating">Producent</IonLabel>
<IonInput
type="text"
value={formData.producer}
onIonChange={(e) => handleInputChange('producer', e.detail.value)}
/>
</IonItem>
<IonItem>
<IonLabel position="floating">Lokalizacja</IonLabel>
<IonInput
type="text"
value={formData.location}
onIonChange={(e) => handleInputChange('location', e.detail.value)}
/>
</IonItem>
<IonItem>
<IonLabel position="floating">Opis</IonLabel>
<IonInput
type="text"
value={formData.description}
onIonChange={(e) => handleInputChange('description', e.detail.value)}
/>
</IonItem>
<IonItem>
<IonLabel position="floating">Adres e-mail</IonLabel>
<IonInput
type="text"
value={formData.submitterAddress}
onIonChange={(e) => handleInputChange('submitterAddress', e.detail.value)}
/>
</IonItem>
<IonButton expand="full" type="submit">
Wyślij
</IonButton>
</form>
</IonContent>
</IonPage>
</IonModal>
</>
);
};

View file

@ -1,4 +1,4 @@
import { IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonInfiniteScroll, IonInfiniteScrollContent, IonItem, IonLabel, IonList, IonModal, IonTitle, IonToolbar } from "@ionic/react";
import { IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonInfiniteScroll, IonInfiniteScrollContent, IonItem, IonLabel, IonList, IonModal, IonTitle, IonToolbar, useIonRouter } from "@ionic/react";
import { useEffect, useRef, useState } from "react";

View file

@ -1,4 +1,4 @@
import { IonButton, IonContent, IonHeader, IonInput, IonItem, IonLabel, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import { IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonInput, IonItem, IonLabel, IonPage, IonProgressBar, IonTitle, IonToolbar } from '@ionic/react';
import { FormEventHandler, useState } from 'react';
const IncidentForm: React.FC = () => {
@ -45,15 +45,16 @@ const handleInputChange = (fieldName: any, value: any) => {
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Bezpieczna żywnosc</IonTitle>
<IonButtons slot="start">
<IonBackButton></IonBackButton>
</IonButtons>
<IonTitle>
Zgłoszenie
</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Bezpieczna żywnosc</IonTitle>
</IonToolbar>
</IonHeader>
<IonProgressBar value={0}></IonProgressBar>
<form onSubmit={handleSubmit}>
<IonItem>
<IonLabel position="floating">Imię</IonLabel>