Prototype pre-release

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

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 { FormEventHandler, useState } from "react";
const AddWarningButton: React.FC = () => {
const { push } = useIonRouter();
@ -12,11 +10,9 @@ const AddWarningButton: React.FC = () => {
};
return (
<>
<IonButton onClick={sendReport} className={styles.addWarningButton} color="success">
Wyślij własne zgłoszenie
</IonButton>
</>
<IonButton onClick={sendReport} className={styles.addWarningButton} color="success">
Wyślij własne zgłoszenie
</IonButton>
);
};

View file

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

View file

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

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 styles from "./Report.module.css";
const IncidentForm: React.FC = () => {
const [formData, setFormData] = useState({
name: '',
@ -8,7 +10,8 @@ const IncidentForm: React.FC = () => {
producer: '',
submitterAddress: '',
description: '',
location: ''
location: '',
date: ''
});
const handleSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
@ -33,7 +36,6 @@ const handleSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
}
};
const handleInputChange = (fieldName: any, value: any) => {
setFormData({
...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 (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonBackButton></IonBackButton>
<IonBackButton text="Powrót" />
</IonButtons>
<IonTitle>
Zgłoszenie
@ -54,16 +63,18 @@ const handleInputChange = (fieldName: any, value: any) => {
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonProgressBar value={0}></IonProgressBar>
<form onSubmit={handleSubmit}>
<IonItem>
<IonLabel position="floating">Imię</IonLabel>
<IonInput
type="text"
value={formData.name}
onIonChange={(e) => handleInputChange('name', e.detail.value)}
/>
</IonItem>
<IonList lines="full">
<IonAccordionGroup>
<IonAccordion>
<IonItem slot="header">
<IonLabel>Data</IonLabel>
<IonNote slot="end">
{formData.date.replaceAll("-", ".")}
</IonNote>
</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>
<IonLabel position="floating">Nazwa produktu</IonLabel>
@ -110,10 +121,10 @@ const handleInputChange = (fieldName: any, value: any) => {
/>
</IonItem>
<IonButton expand="full" type="submit">
<IonButton onClick={(e) => handleSubmit(e as any)} type="submit">
Wyślij
</IonButton>
</form>
</IonList>
</IonContent>
</IonPage>
);