Nyanlabs/SFood
Nyanlabs/SFood
4
0
Fork 0
mirror of https://github.com/BZmHackTeam/BezpiecznaZywnosc synced 2024-11-09 20:44:15 +01:00
Code Issues Projects Releases Packages Wiki Activity

Form minimum working draft & rework docker

Browse source
This commit is contained in:
femsci 2023-10-21 22:18:14 +02:00
parent a8173436ff
commit 6f7d70ec8d
Signed by: femsci
GPG key ID: 08F7911F0E650C67
5 changed files with 129 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
dev.Caddyfile
View file

@ -1,6 +1,6 @@
http://localhost { http://localhost {
reverse_proxy /api/* http://sfood_api:80 reverse_proxy /api/* http://sfood_api:80
reverse_proxy http://sfood_ui:80 reverse_proxy http://sfood_ui:44420
} }
http://localhost:44420 { http://localhost:44420 {

3
dev.Dockerfile
View file

@ -29,4 +29,5 @@ FROM base AS ui
RUN apk add npm RUN apk add npm
USER $USERNAME USER $USERNAME
ENTRYPOINT [ "dotnet", "watch", "--project", "./src/Nyanlabs.SFood.UI", "run", "--", "--urls", "http://0.0.0.0:80" ] WORKDIR /source/src/Nyanlabs.SFood.UI/sfood
ENTRYPOINT [ "npm", "start" ]

5
src/Nyanlabs.SFood.UI/sfood/index.html
View file

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>BezpiecznaZywnosc</title> <title>Bezpieczna Żywność</title>
<base href="/" /> <base href="/" />
@ -18,9 +18,8 @@
<link rel="shortcut icon" type="image/png" href="/favicon.png" /> <link rel="shortcut icon" type="image/png" href="/favicon.png" />
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="Ionic App" /> <meta name="apple-mobile-web-app-title" content="Bezpieczna Żywność" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head> </head>
<body> <body>

4
src/Nyanlabs.SFood.UI/sfood/src/App.tsx
View file

@ -21,6 +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';
setupIonicReact(); setupIonicReact();
@ -34,6 +35,9 @@ const App: React.FC = () => (
<Route exact path="/"> <Route exact path="/">
<Redirect to="/home" /> <Redirect to="/home" />
</Route> </Route>
<Route exact path="/submit">
<Submit />
</Route>
</IonRouterOutlet> </IonRouterOutlet>
</IonReactRouter> </IonReactRouter>
</IonApp> </IonApp>

120
src/Nyanlabs.SFood.UI/sfood/src/pages/Submit.tsx Normal file
View file

@ -0,0 +1,120 @@
import { IonButton, IonContent, IonHeader, IonInput, IonItem, IonLabel, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import { FormEventHandler, useState } from 'react';
const IncidentForm: React.FC = () => {
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 (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Bezpieczna żywnosc</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Bezpieczna żywnosc</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>
);
};
export default IncidentForm;