dabus/Weather.js at frontend · Hsiii/dabus · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View,Image, Button, ScrollView,TouchableOpacity, TouchableHighlight,Dimensions, } from 'react-native';
import { useState,useEffect, useRef } from 'react';
import { Icon } from 'react-native';
import Ionicons from '@expo/vector-icons/Ionicons';
import { AntDesign } from '@expo/vector-icons';
import { SelectList } from 'react-native-dropdown-select-list'
import { MaterialIcons } from '@expo/vector-icons';
import {useData, useDataDispatch} from './DataContext.js'

import { getWeather, cancelWeather } from './open-weather-map.js';

const screenWidth = Dimensions.get('window').width;
const screenHeight = Dimensions.get('window').height;


const Weather = () => {
  const {settings: {color}} = useData();

    const [weather, setWeather] = useState(initWeatherState);

    async function fetchWeather(city, unit) {
      try {
        const weather = await getWeather(city, unit);
        setWeather({ ...weather });
      } catch (err) {
        console.error('Error getting weather', err);
        setWeather({...initWeatherState});
      }
    }

    useEffect(() => {
      fetchWeather('Hsinchu', 'metric');
      console.log(weather)
    }, []);
    const path = './images/w-'+weather.group+'.png'

    return (
        <View style={styles.container}>
            <View style={styles.left}>

              < Image style={{
                // zIndex:-1,
                position : "absolute",
                width:170,
                height:110,
                top:screenHeight*0.03,
                // backgroundColor:'red',
                left:190,
                // opacity:0.8
                }}
                source={require('./images/w-clouds.png')}
                />
                {/* can not change image as i need */}
                {/* <Text>{path} </Text> */}

                {/* <Text style={styles.location}>
                  {weather.description}
                </Text> */}

                <View style = {{flexDirection: "row",marginLeft:40,marginTop:20 }}>
                  <MaterialIcons name="location-on" size={24} color={color} />

                  <View >
                      <Text style={{fontSize:20,marginLeft:10 , color:color}}>
                          {weather.city}
                      </Text>
                  </View>
                </View>


                <View style={styles.degree}>
                    <Text style={{fontSize:60, marginLeft:30,marginTop:20,color:color}}>
                        {weather.temp.toFixed(0) + ' C'}
                    </Text>
                </View>

            </View>
            <View style={styles.right}>

                <View style={styles.last_update}>

                </View>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    input: {
      height: 40,
      width: 180,
      margin: 12,
      borderWidth: 1,
      padding: 10,
    },
    left:{

    },
    right:{

    },
    location:{

    },
    degree:{

    },
    weather_icon:{

    },
    last_update:{

    }
  });

const initWeatherState = {
    city: 'na',
    code: -1,
    group: 'na',
    description: 'N/A',
    temp: NaN,
};

export default Weather;