vue cityDetails

iut-expo-starter/.expo/packager-info.json

@@ -1,6 +1,6 @@
 {
-  "expoServerPort": 19000,
-  "packagerPort": 19000,
+  "expoServerPort": null,
+  "packagerPort": null,
   "packagerPid": null,
   "expoServerNgrokUrl": null,
   "packagerNgrokUrl": null,

iut-expo-starter/screens/CityDetails.tsx

@@ -31,13 +31,38 @@ export default function CityDetails({route}){
                     <Text style={styles.petitTemp}>Ressenti {meteo?.temperatureFeelsLike}°C</Text>
                 </View>
             </View>
-            <Text style={styles.title}>{meteo?.at}</Text>
-            <Text style={styles.title}>{meteo?.humidity}</Text>
-            <Text style={styles.title}>{meteo?.pressure}</Text>
-            <Text style={styles.title}>{meteo?.visibility}</Text>
-            <Text style={styles.title}>{meteo?.visibility}</Text>
-            <Text style={styles.title}>{meteo?.weatherDescription}</Text>
-            <Text style={styles.title}>{meteo?.windSpeed}</Text>
+            <View style={styles.boxes}>
+                <View style={styles.leftBox}>
+                <View style={styles.imageEtTexte}>
+                    <Image style={styles.imageHumidity} source={require('../assets/humidity.png')}/>
+                    <Text style={styles.text}>HUMIDITY</Text>
+                </View>
+                <Text style={styles.humidityText}>{meteo?.humidity}%</Text>
+                </View>
+                <View style={styles.rightBox}>
+                    <View style={styles.imageEtTexte}>
+                        <Image style={styles.imageHumidity} source={require('../assets/wind.png')}/>
+                        <Text style={styles.text}>WIND SPEED</Text>
+                    </View>
+                    <Text style={styles.humidityText}>{meteo?.windSpeed} km/h</Text>
+                </View>
+            </View>
+            <View style={styles.boxes}>
+                <View style={styles.leftBox}>
+                <View style={styles.imageEtTexte}>
+                    <Image style={styles.imageHumidity} source={require('../assets/pressure.png')}/>
+                    <Text style={styles.text}>PRESSURE</Text>
+                </View>
+                <Text style={styles.humidityText}>{meteo?.pressure} hPa</Text>
+                </View>
+                <View style={styles.rightBox}>
+                    <View style={styles.imageEtTexte}>
+                        <Image style={styles.imageHumidity} source={require('../assets/visibility.png')}/>
+                        <Text style={styles.text}>VISIBILITY</Text>
+                    </View>
+                    <Text style={styles.humidityText}>{meteo?.visibility} km</Text>
+                </View>
+            </View>
         </View>
     )
 }
@@ -93,5 +118,52 @@ const styles = StyleSheet.create({
         width: 40,
         marginRight: 7,
         marginTop: 15
+    },
+    imageHumidity: {
+        height: 20,
+        width: 20,
+        marginLeft: 10
+    },
+    leftBox: {
+        alignSelf: "flex-start",
+        margin: 25,
+        marginTop: 10,
+        marginBottom: 5,
+        height: 90,
+        width: 150,
+        flexDirection: "column",
+        backgroundColor: "powderblue",
+        borderRadius: 20
+    },
+    rightBox: {
+        alignSelf: "flex-start",
+        marginRight: 25,
+        marginTop: 10,
+        marginBottom: 5,
+        height: 90,
+        width: 150,
+        flexDirection: "column",
+        backgroundColor: "powderblue",
+        borderRadius: 20
+    },
+    humidityText: {
+        marginTop: 13,
+        fontWeight: "bold",
+        fontSize: 20,
+        alignSelf: "center"
+    },
+    text: {
+        fontWeight: "normal",
+        fontStyle: 'italic',
+        fontSize: 10,
+        alignSelf: "center",
+        marginLeft: 7
+    },
+    imageEtTexte: {
+        flexDirection: "row",
+        marginTop: 13
+    },
+    boxes: {
+        flexDirection: "row"
     }
   });