139 lines
3.7 KiB
JavaScript
139 lines
3.7 KiB
JavaScript
import { useState } from "react";
|
|
import {
|
|
StyleSheet,
|
|
Platform,
|
|
KeyboardAvoidingView,
|
|
ScrollView,
|
|
} from "react-native";
|
|
import { TextInput, Button, Snackbar } from "react-native-paper";
|
|
import { addLocation } from "@/api/locations";
|
|
|
|
export default function FormScreen() {
|
|
const [formData, setFormData] = useState({
|
|
name: "",
|
|
description: "",
|
|
image: "",
|
|
area: 0,
|
|
population: 0,
|
|
});
|
|
const [message, setMessage] = useState("");
|
|
const [visible, setVisible] = useState(false);
|
|
|
|
const handleAddLocation = () => {
|
|
if (
|
|
formData.name &&
|
|
formData.description &&
|
|
formData.image &&
|
|
formData.area &&
|
|
formData.population
|
|
) {
|
|
const newLocation = {
|
|
id: Date.now(),
|
|
name: formData.name,
|
|
description: formData.description,
|
|
image: formData.image,
|
|
area: parseFloat(formData.area),
|
|
population: parseInt(formData.population),
|
|
};
|
|
|
|
addLocation(newLocation);
|
|
|
|
setFormData({
|
|
name: "",
|
|
description: "",
|
|
image: "",
|
|
area: 0,
|
|
population: 0,
|
|
});
|
|
if(addLocation != null) {
|
|
setMessage("Lokalizacja została dodana!");
|
|
setVisible(true);
|
|
} else {
|
|
setMessage("Wystąpił błąd podczas dodawania lokalizacji!");
|
|
setVisible(true);
|
|
}
|
|
} else {
|
|
setMessage("Wypełnij wszystkie pola!");
|
|
setVisible(true);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<KeyboardAvoidingView
|
|
style={{ flex: 1 }}
|
|
behavior={Platform.OS === "ios" ? "padding" : "height"}
|
|
>
|
|
<ScrollView contentContainerStyle={styles.container}>
|
|
<Snackbar
|
|
visible={visible}
|
|
onDismiss={() => setVisible(false)}
|
|
duration={3000}
|
|
>
|
|
{message}
|
|
</Snackbar>
|
|
<TextInput
|
|
mode="outlined"
|
|
label="Nazwa"
|
|
placeholder="Wpisz nazwę"
|
|
style={{ margin: 10, width: "100%" }}
|
|
value={formData.name}
|
|
onChangeText={(e) => setFormData({ ...formData, name: e })}
|
|
/>
|
|
<TextInput
|
|
mode="outlined"
|
|
label="Opis"
|
|
placeholder="Wpisz opis"
|
|
style={{ margin: 10, width: "100%" }}
|
|
multiline={true}
|
|
value={formData.description}
|
|
onChangeText={(e) => setFormData({ ...formData, description: e })}
|
|
/>
|
|
<TextInput
|
|
mode="outlined"
|
|
label="Link do zdjęcia"
|
|
placeholder="Wpisz link do zdjęcia"
|
|
multiline={true}
|
|
style={{ margin: 10, width: "100%" }}
|
|
value={formData.image}
|
|
onChangeText={(e) => setFormData({ ...formData, image: e })}
|
|
/>
|
|
<TextInput
|
|
mode="outlined"
|
|
label="Powierzchnia"
|
|
placeholder="Wpisz powierzchnię"
|
|
style={{ margin: 10, width: "100%" }}
|
|
value={formData.area}
|
|
keyboardType="numeric"
|
|
onChangeText={(e) => setFormData({ ...formData, area: e })}
|
|
/>
|
|
<TextInput
|
|
mode="outlined"
|
|
label="Ludność"
|
|
placeholder="Wpisz liczbę ludności"
|
|
style={{ margin: 10, width: "100%" }}
|
|
value={formData.population}
|
|
keyboardType="numeric"
|
|
onChangeText={(e) => setFormData({ ...formData, population: e })}
|
|
/>
|
|
<Button
|
|
style={{ margin: 10, width: "100%" }}
|
|
icon="plus-circle-outline"
|
|
mode={"contained"}
|
|
onPress={handleAddLocation}
|
|
>
|
|
Dodaj
|
|
</Button>
|
|
</ScrollView>
|
|
</KeyboardAvoidingView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: "#25292e",
|
|
justifyContent: "flex-start",
|
|
alignItems: "center",
|
|
},
|
|
});
|