mirror of
https://github.com/BZmHackTeam/BezpiecznaZywnosc
synced 2024-12-22 14:46:58 +01:00
Some other minor changes
This commit is contained in:
Jakub Cywka
parent
a5ef74d60c
commit
bfc51a7620
4 changed files with 16 additions and 127 deletions
|
|
@ -21,7 +21,7 @@ import '@ionic/react/css/display.css';
|
||||||
|
|
||||||
/* Theme variables */
|
/* Theme variables */
|
||||||
import './theme/variables.css';
|
import './theme/variables.css';
|
||||||
import Submit from './pages/Submit';
|
import Submit from './pages/Report';
|
||||||
|
|
||||||
setupIonicReact();
|
setupIonicReact();
|
||||||
|
|
||||||
|
|
@ -35,7 +35,7 @@ const App: React.FC = () => (
|
||||||
<Route exact path="/">
|
<Route exact path="/">
|
||||||
<Redirect to="/home" />
|
<Redirect to="/home" />
|
||||||
</Route>
|
</Route>
|
||||||
<Route exact path="/submit">
|
<Route exact path="/report">
|
||||||
<Submit />
|
<Submit />
|
||||||
</Route>
|
</Route>
|
||||||
</IonRouterOutlet>
|
</IonRouterOutlet>
|
||||||
|
|
|
||||||
|
|
@ -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 styles from "./AddWarningButton.module.css";
|
||||||
|
|
||||||
import { FormEventHandler, useState } from "react";
|
import { FormEventHandler, useState } from "react";
|
||||||
|
|
||||||
const AddWarningButton: React.FC = () => {
|
const AddWarningButton: React.FC = () => {
|
||||||
const [shouldOpenModal, setShouldOpenModal] = useState(false);
|
const { push } = useIonRouter();
|
||||||
|
|
||||||
function openModal() {
|
function sendReport() {
|
||||||
setShouldOpenModal(true);
|
push("/report");
|
||||||
};
|
|
||||||
|
|
||||||
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,
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<IonButton onClick={openModal} className={styles.addWarningButton} color="success">
|
<IonButton onClick={sendReport} className={styles.addWarningButton} color="success">
|
||||||
Wyślij własne zgłoszenie
|
Wyślij własne zgłoszenie
|
||||||
</IonButton>
|
</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>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -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";
|
import { useEffect, useRef, useState } from "react";
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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';
|
import { FormEventHandler, useState } from 'react';
|
||||||
|
|
||||||
const IncidentForm: React.FC = () => {
|
const IncidentForm: React.FC = () => {
|
||||||
|
|
@ -45,15 +45,16 @@ const handleInputChange = (fieldName: any, value: any) => {
|
||||||
<IonPage>
|
<IonPage>
|
||||||
<IonHeader>
|
<IonHeader>
|
||||||
<IonToolbar>
|
<IonToolbar>
|
||||||
<IonTitle>Bezpieczna żywnosc</IonTitle>
|
<IonButtons slot="start">
|
||||||
|
<IonBackButton></IonBackButton>
|
||||||
|
</IonButtons>
|
||||||
|
<IonTitle>
|
||||||
|
Zgłoszenie
|
||||||
|
</IonTitle>
|
||||||
</IonToolbar>
|
</IonToolbar>
|
||||||
</IonHeader>
|
</IonHeader>
|
||||||
<IonContent fullscreen>
|
<IonContent fullscreen>
|
||||||
<IonHeader collapse="condense">
|
<IonProgressBar value={0}></IonProgressBar>
|
||||||
<IonToolbar>
|
|
||||||
<IonTitle size="large">Bezpieczna żywnosc</IonTitle>
|
|
||||||
</IonToolbar>
|
|
||||||
</IonHeader>
|
|
||||||
<form onSubmit={handleSubmit}>
|
<form onSubmit={handleSubmit}>
|
||||||
<IonItem>
|
<IonItem>
|
||||||
<IonLabel position="floating">Imię</IonLabel>
|
<IonLabel position="floating">Imię</IonLabel>
|
||||||
Loading…
Reference in a new issue