init addScreen and change locations

2025-04-13 09:04:31 +02:00
parent ccf7ff2955
commit 6e8a235ed4
8 changed files with 169 additions and 96 deletions
--- a/app/(tabs)/_layout.tsx
+++ b/app/(tabs)/_layout.tsx
@@ -5,6 +5,7 @@ import { useTheme } from 'react-native-paper';

 export default function TabLayout() {
  const theme = useTheme();
+  
  return (
    <Tabs  screenOptions ={{ 
      tabBarInactiveTintColor: theme.colors.primary,
@@ -23,7 +24,7 @@ export default function TabLayout() {
      <Tabs.Screen name="index" options={{ title: 'Home',tabBarIcon: ({ color, focused }) => (
            <Ionicons name={focused ? 'home-sharp' : 'home-outline'} color={color} size={24} />
          ), }} />
-      <Tabs.Screen name="formScreen" options={{title: 'Create/Edit'  ,tabBarIcon: ({ color, focused }) => (
+      <Tabs.Screen name="addLocation" options={{title: 'Create'  ,tabBarIcon: ({ color, focused }) => (
            <Ionicons name={focused ? 'add-circle-sharp' : 'add-circle-outline'} color={color} size={24} />
          ),}} />
    </Tabs>
--- a/app/(tabs)/addLocation.jsx
+++ b/app/(tabs)/addLocation.jsx
@@ -0,0 +1,111 @@
+import { useState } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { TextInput,  Button } from 'react-native-paper';
+import { locations } from '@/data/locations';
+
+
+export default function FormScreen() {
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+    image: '',
+    area: '',
+    population: '',
+  });
+
+  const [location, setLocation] = useState(locations.sort((a, b) => b.id - a.id));
+
+  const addLocation = () => {
+    console.log(formData);
+    if(formData.name && formData.description && formData.image && formData.area && formData.population) {
+      const newLocation = {
+        id: locations.length > 0 ? locations[0].id + 1 : 0,
+        name: formData.name,
+        description: formData.description,
+        image: formData.image,
+        area: formData.area,
+        population: formData.population,
+      };
+
+      setLocation([newLocation, ...location]);
+      
+      locations.push(newLocation);
+
+      setFormData({
+        name: '',
+        description: '',
+        image: '',
+        area: '',
+        population: '',
+      });
+    }
+    }
+
+  
+
+  return (
+    <View style={styles.container}>
+        <TextInput
+          mode="outlined"
+          label="Nazwa"
+          placeholder="Wpisz nazwa"
+          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"
+          style={{ margin: 10, width: '100%', borderRadius:10}}
+          value={formData.image}
+          onChangeText={e => setFormData({ ...formData, image: e })}
+          />
+        <TextInput
+          mode="outlined"
+          label="Powierzchnia"
+          placeholder="Wpisz powierzchnie"
+          style={{ margin: 10, width: '100%' }}
+          value={formData.area}
+          onChangeText={e => setFormData({ ...formData, area: e })}
+        />
+        <TextInput
+          mode="outlined"
+          label="Ludność"
+          placeholder='Wpisz liczbę ludności'
+          style={{ margin: 10, width: '100%' }}
+          value={formData.population}
+          onChangeText={e => setFormData({ ...formData, population: e })}
+        />
+        
+          <Button 
+          style={{ margin: 10, width: '100%' }}
+          icon="plus-circle-outline"
+          mode={'contained'}
+          onPress={addLocation}
+          >Dodaj</Button>
+      </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#25292e',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    color: '#fff',
+  },
+});
--- a/app/(tabs)/formScreen.tsx
+++ b/app/(tabs)/formScreen.tsx
@@ -1,21 +0,0 @@
-import { Text, View, StyleSheet } from 'react-native';
-
-export default function FormScreen() {
-  return (
-    <View style={styles.container}>
-      <Text style={styles.text}>Form</Text>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#25292e',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  text: {
-    color: '#fff',
-  },
-});
--- a/app/(tabs)/index.tsx
+++ b/app/(tabs)/index.tsx
@@ -1,22 +1,22 @@
 import { View, StyleSheet, FlatList } from 'react-native';
 import { useTheme, Card, Text, Button} from 'react-native-paper';
 import { Link } from 'expo-router';
-
-import { Locations } from '@/constants/Locations';
+import { locations } from '@/data/locations';

 export default function Index() {
 const theme = useTheme();
+  console.log(locations);
  return (
    <View style={[styles.container, {backgroundColor: theme.colors.background}]}>
      <FlatList 
-        data={Locations}
+        data={locations}
        keyExtractor={(item) => item.name}
        renderItem={({ item }) => (
          <Card style={{ margin: 10}}>
            <Card.Cover style={{ marginBottom:10 }} source={{ uri: item.image }} />
            <Card.Content style={{ marginBottom:10 }}>
              <Text variant="titleLarge">{item.name}</Text>
-              <Text variant="bodyMedium">{item.description}</Text>
+              <Text variant="bodyMedium">{item.description.split('.')[0]}...</Text>
            </Card.Content>
            <Card.Actions>
            <Link href={`/location/${item.id}`} asChild>
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -3,11 +3,12 @@ import { useColorScheme } from 'react-native';
 import { PaperProvider} from 'react-native-paper';
 import { MD3LightTheme, MD3DarkTheme } from 'react-native-paper';

-const colorScheme = useColorScheme();
-const theme = colorScheme === 'dark' ? MD3DarkTheme :
-MD3LightTheme;

 export default function RootLayout() {
+  const colorScheme = useColorScheme();
+  const theme = colorScheme === 'dark' ? MD3DarkTheme :
+  MD3LightTheme;
+
  return (
    <PaperProvider theme={theme} >
        <Stack screenOptions={{
--- a/app/location/[id].js
+++ b/app/location/[id].js
@@ -1,11 +1,11 @@
 import { View, ScrollView, StyleSheet } from 'react-native';
 import { Text, Card } from 'react-native-paper';
 import { useLocalSearchParams } from 'expo-router';
-import { Locations } from '@/constants/Locations';
+import { locations } from '@/data/locations';

 export default function Location() {
  const { id } = useLocalSearchParams();
-  const location = Locations.find(loc => loc.id == id);
+  const location = locations.find(loc => loc.id == id);

  if (!location) {
    return (
@@ -14,6 +14,7 @@ export default function Location() {
      </View>
    );
  }
+
  return (
    <View style={styles.container}>
    <ScrollView>
@@ -27,7 +28,7 @@ export default function Location() {
            Opis:
          </Text>
          <Text variant="bodyMedium">
-            {location.longDescription}
+            {location.description}
          </Text>
        </Card.Content>

@@ -41,12 +42,6 @@ export default function Location() {
          <Text variant="bodyMedium" style={{marginBottom: 10}}>
            Ludność: {location.population} osób
            </Text>
-          <Text variant="bodyMedium" style={{marginBottom: 10}}>
-            Gęstość zaludnienia: {location.density} osób/km²
-            </Text>
-          <Text variant="bodyMedium" style={{marginBottom: 10}}>
-            Wysokość nad poziomem morza: {location.elevation} m n.p.m.
-            </Text>
        </Card.Content>
      </Card>
    </ScrollView></View>
--- a/constants/Locations.js
+++ b/constants/Locations.js
@@ -1,58 +0,0 @@
-export const Locations = [
-    {
-        "id": 1,
-        "name": "Warszawa",
-        "description": "Stolica Polski, położona w centralnej części kraju.",
-        "longDescription": "Warszawa jest największym miastem w Polsce, znanym z bogatej historii, kultury i architektury. Warto zobaczyć Zamek Królewski, Stare Miasto oraz Muzeum Powstania Warszawskiego. Miasto oferuje wiele atrakcji turystycznych, w tym parki, muzea i teatry. Warszawa jest również ważnym ośrodkiem gospodarczym i kulturalnym.",
-        "image": "https://www.niesamowitapolska.eu/images/mazowieckie/warszawa/38607734_m.jpg",
-        "area": 517.24,
-        "population": 1790658,
-        "density": 3460,
-        "elevation": 100
-    },
-    {
-        "id": 2,
-        "name": "Kielce",
-        "description": "Stolica województwa świętokrzyskiego, położona w centralnej Polsce.",
-        "longDescription": "Kielce to miasto w centralnej Polsce, znane z pięknych krajobrazów i bogatej historii. Warto odwiedzić Kielecki Park Etnograficzny, Muzeum Zabawek oraz Katedrę Wniebowzięcia Najświętszej Maryi Panny. Kielce są również znane z licznych festiwali i wydarzeń kulturalnych. Miasto oferuje wiele atrakcji turystycznych, w tym parki, muzea i teatry.", 
-        "image": "https://as2.ftcdn.net/jpg/05/42/90/67/1000_F_542906717_cf5i6HeCJsPluuH5tqq5MbsSdfpopmtT.webp",
-        "area": 109.4,
-        "population": 196000,
-        "density": 1790,
-        "elevation": 350
-    },
-    {
-        "id": 3,
-        "name": "Kraków",
-        "description": "Miasto położone w południowej Polsce, znane z bogatej historii i kultury.",
-        "longDescription": "Kraków to jedno z najstarszych i najpiękniejszych miast w Polsce, znane z bogatej historii, kultury i architektury. Warto zobaczyć Wawel, Stare Miasto oraz Sukiennice. Kraków jest również znany z licznych festiwali, wydarzeń kulturalnych oraz tradycji kulinarnych. Miasto oferuje wiele atrakcji turystycznych, w tym parki, muzea i teatry.",
-        "image": "https://nawakacje.eu/wp-content/uploads/2020/12/krakow-atrakcje.jpg",
-        "area": 326.85,
-        "population": 779115,
-        "density": 2380,
-        "elevation": 219
-    },
-    {
-        "id": 4,
-        "name": "Wrocław",
-        "description": "Miasto w zachodniej Polsce, znane z pięknych mostów i architektury.",
-        "longDescription": "Wrocław to miasto w zachodniej Polsce, znane z pięknych mostów, architektury i bogatej historii. Warto odwiedzić Ostrów Tumski, Rynek oraz Halę Stulecia. Wrocław jest również znany z licznych festiwali, wydarzeń kulturalnych oraz tradycji kulinarnych. Miasto oferuje wiele atrakcji turystycznych, w tym parki, muzea i teatry.",
-        "image": "https://backend.triverna.pl/blog/wp-content/uploads/2023/10/Wroclaw-z-lotu-ptaka-1.jpeg",
-        "area": 292.82,
-        "population": 640000,
-        "density": 2180,
-        "elevation": 120
-    },
-    {
-        "id": 5,
-        "name": "Poznań",
-        "description": "Miasto w zachodniej Polsce, znane z tradycji piwowarskich.",
-        "longDescription": "Poznań to miasto w zachodniej Polsce, znane z tradycji piwowarskich, bogatej historii i kultury. Warto odwiedzić Stary Rynek, Katedrę Poznańską oraz Ostrów Tumski. Poznań jest również znany z licznych festiwali, wydarzeń kulturalnych oraz tradycji kulinarnych. Miasto oferuje wiele atrakcji turystycznych, w tym parki, muzea i teatry.",
-        "image":"https://wycieczkoteka.pl/images/2024/11/07/poznan-co-zwiedzic.jpg",
-        "area": 262.82,
-        "population": 535802,
-        "density": 2030,
-        "elevation": 60
-
-    }
-    ]   
--- a/data/locations.js
+++ b/data/locations.js
@@ -0,0 +1,44 @@
+export const locations = [
+    {
+        "id": 1,
+        "name": "Warszawa",
+        "description": "Stolica Polski, położona w centralnej części kraju. Warszawa jest największym miastem w Polsce, znanym z bogatej historii, kultury i architektury. Warto zobaczyć Zamek Królewski, Stare Miasto oraz Muzeum Powstania Warszawskiego. Miasto oferuje wiele atrakcji turystycznych, w tym parki, muzea i teatry. Warszawa jest również ważnym ośrodkiem gospodarczym i kulturalnym.",
+        "image": "https://www.niesamowitapolska.eu/images/mazowieckie/warszawa/38607734_m.jpg",
+        "area": 517.24,
+        "population": 1790658,
+    },
+    {
+        "id": 2,
+        "name": "Kielce",
+        "description": "Stolica województwa świętokrzyskiego, położona w centralnej Polsce. Kielce to miasto w centralnej Polsce, znane z pięknych krajobrazów i bogatej historii. Warto odwiedzić Kielecki Park Etnograficzny, Muzeum Zabawek oraz Katedrę Wniebowzięcia Najświętszej Maryi Panny. Kielce są również znane z licznych festiwali i wydarzeń kulturalnych. Miasto oferuje wiele atrakcji turystycznych, w tym parki, muzea i teatry.",
+        "image": "https://as2.ftcdn.net/jpg/05/42/90/67/1000_F_542906717_cf5i6HeCJsPluuH5tqq5MbsSdfpopmtT.webp",
+        "area": 109.4,
+        "population": 196000,
+    },
+    {
+        "id": 3,
+        "name": "Kraków",
+        "description": "Miasto położone w południowej Polsce, znane z bogatej historii i kultury. Kraków to jedno z najstarszych i najpiękniejszych miast w Polsce, znane z bogatej historii, kultury i architektury. Warto zobaczyć Wawel, Stare Miasto oraz Sukiennice. Kraków jest również znany z licznych festiwali, wydarzeń kulturalnych oraz tradycji kulinarnych. Miasto oferuje wiele atrakcji turystycznych, w tym parki, muzea i teatry.",
+        "image": "https://nawakacje.eu/wp-content/uploads/2020/12/krakow-atrakcje.jpg",
+        "area": 326.85,
+        "population": 779115,
+    },
+    {
+        "id": 4,
+        "name": "Wrocław",
+        "description": "Miasto w zachodniej Polsce, znane z pięknych mostów i architektury. Wrocław to miasto w zachodniej Polsce, znane z pięknych mostów, architektury i bogatej historii. Warto odwiedzić Ostrów Tumski, Rynek oraz Halę Stulecia. Wrocław jest również znany z licznych festiwali, wydarzeń kulturalnych oraz tradycji kulinarnych. Miasto oferuje wiele atrakcji turystycznych, w tym parki, muzea i teatry.",
+        "image": "https://backend.triverna.pl/blog/wp-content/uploads/2023/10/Wroclaw-z-lotu-ptaka-1.jpeg",
+        "area": 292.82,
+        "population": 640000,
+    },
+    {
+        "id": 5,
+        "name": "Poznań",
+        "description": "Miasto w zachodniej Polsce, znane z tradycji piwowarskich. Poznań to miasto w zachodniej Polsce, znane z tradycji piwowarskich, bogatej historii i kultury. Warto odwiedzić Stary Rynek, Katedrę Poznańską oraz Ostrów Tumski. Poznań jest również znany z licznych festiwali, wydarzeń kulturalnych oraz tradycji kulinarnych. Miasto oferuje wiele atrakcji turystycznych, w tym parki, muzea i teatry.",
+        "image":"https://wycieczkoteka.pl/images/2024/11/07/poznan-co-zwiedzic.jpg",
+        "area": 262.82,
+        "population": 535802,
+
+    }
+]  
+