Nyanlabs/SFood
Nyanlabs/SFood
4
0
Fork 0
mirror of https://github.com/BZmHackTeam/BezpiecznaZywnosc synced 2024-12-22 22:46:59 +01:00
Code Issues Projects Releases Packages Wiki Activity

Prototype pre-release

Browse source
This commit is contained in:
Jakub Cywka 2023-10-22 07:42:59 +02:00
parent bfc51a7620
commit 4b3396438d
5 changed files with 37 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/Nyanlabs.SFood.UI/sfood/src/components/AddWarningButton/AddWarningButton.tsx
View file

@ -1,9 +1,7 @@
import { IonButton, IonContent, IonHeader, IonInput, IonItem, IonLabel, IonModal, IonPage, IonTitle, IonToolbar, useIonRouter } from "@ionic/react"; import { IonButton, useIonRouter } from "@ionic/react";
import styles from "./AddWarningButton.module.css"; import styles from "./AddWarningButton.module.css";
import { FormEventHandler, useState } from "react";
const AddWarningButton: React.FC = () => { const AddWarningButton: React.FC = () => {
const { push } = useIonRouter(); const { push } = useIonRouter();
@ -12,11 +10,9 @@ const AddWarningButton: React.FC = () => {
}; };
return ( return (
<>
<IonButton onClick={sendReport} 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>
</>
); );
}; };

0
src/Nyanlabs.SFood.UI/sfood/src/components/WarningsList/WarningsList.module.css Normal file
View file

4
src/Nyanlabs.SFood.UI/sfood/src/components/WarningsList/WarningsList.tsx
View file

@ -2,6 +2,8 @@ import { IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonInfinit
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import styles from "./WarningsList.module.css";
const WarningsList: React.FC = () => { const WarningsList: React.FC = () => {
const [dataset, setDataset] = useState<any[]>([]); const [dataset, setDataset] = useState<any[]>([]);
const [warningsContent, setWarningsContent] = useState<any[]>([]); const [warningsContent, setWarningsContent] = useState<any[]>([]);
@ -92,7 +94,7 @@ const WarningsList: React.FC = () => {
<> <>
<IonList lines="full"> <IonList lines="full">
{warningsContent.map((warningContent, key) => ( {warningsContent.map((warningContent, key) => (
<IonItem onClick={() => openModal(warningContent)} button key={key}> <IonItem detail onClick={() => openModal(warningContent)} button key={key}>
<IonLabel> <IonLabel>
{warningContent.col7.val} {warningContent.col7.val}
</IonLabel> </IonLabel>

3
src/Nyanlabs.SFood.UI/sfood/src/pages/Report.module.css Normal file
View file

@ -0,0 +1,3 @@
.datetime {
margin-left: 20px;
}

41
src/Nyanlabs.SFood.UI/sfood/src/pages/Report.tsx
View file

@ -1,6 +1,8 @@
import { IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonInput, IonItem, IonLabel, IonPage, IonProgressBar, IonTitle, IonToolbar } from '@ionic/react'; import { IonAccordion, IonAccordionGroup, IonBackButton, IonButton, IonButtons, IonContent, IonDatetime, IonDatetimeButton, IonHeader, IonInput, IonItem, IonLabel, IonList, IonNote, IonPage, IonProgressBar, IonTitle, IonToolbar } from '@ionic/react';
import { FormEventHandler, useState } from 'react'; import { FormEventHandler, useState } from 'react';
import styles from "./Report.module.css";
const IncidentForm: React.FC = () => { const IncidentForm: React.FC = () => {
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
name: '', name: '',
@ -8,7 +10,8 @@ const IncidentForm: React.FC = () => {
producer: '', producer: '',
submitterAddress: '', submitterAddress: '',
description: '', description: '',
location: '' location: '',
date: ''
}); });
const handleSubmit: FormEventHandler<HTMLFormElement> = async (e) => { const handleSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
@ -33,7 +36,6 @@ const handleSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
} }
}; };
const handleInputChange = (fieldName: any, value: any) => { const handleInputChange = (fieldName: any, value: any) => {
setFormData({ setFormData({
...formData, ...formData,
@ -41,12 +43,19 @@ const handleInputChange = (fieldName: any, value: any) => {
}); });
}; };
function handleDateChange(event: any) {
setFormData(previousFormData => ({
...previousFormData,
date: event.detail.value.substring(0, 10)
}));
};
return ( return (
<IonPage> <IonPage>
<IonHeader> <IonHeader>
<IonToolbar> <IonToolbar>
<IonButtons slot="start"> <IonButtons slot="start">
<IonBackButton></IonBackButton> <IonBackButton text="Powrót" />
</IonButtons> </IonButtons>
<IonTitle> <IonTitle>
Zgłoszenie Zgłoszenie
@ -54,16 +63,18 @@ const handleInputChange = (fieldName: any, value: any) => {
</IonToolbar> </IonToolbar>
</IonHeader> </IonHeader>
<IonContent fullscreen> <IonContent fullscreen>
<IonProgressBar value={0}></IonProgressBar> <IonList lines="full">
<form onSubmit={handleSubmit}> <IonAccordionGroup>
<IonItem> <IonAccordion>
<IonLabel position="floating">Imię</IonLabel> <IonItem slot="header">
<IonInput <IonLabel>Data</IonLabel>
type="text" <IonNote slot="end">
value={formData.name} {formData.date.replaceAll("-", ".")}
onIonChange={(e) => handleInputChange('name', e.detail.value)} </IonNote>
/>
</IonItem> </IonItem>
<IonDatetime locale="pl-PL" onIonChange={handleDateChange} className={styles.datetime} slot="content" presentation="date" min="2023-10-15" max="2023-10-22" />
</IonAccordion>
</IonAccordionGroup>
<IonItem> <IonItem>
<IonLabel position="floating">Nazwa produktu</IonLabel> <IonLabel position="floating">Nazwa produktu</IonLabel>
@ -110,10 +121,10 @@ const handleInputChange = (fieldName: any, value: any) => {
/> />
</IonItem> </IonItem>
<IonButton expand="full" type="submit"> <IonButton onClick={(e) => handleSubmit(e as any)} type="submit">
Wyślij Wyślij
</IonButton> </IonButton>
</form> </IonList>
</IonContent> </IonContent>
</IonPage> </IonPage>
); );