github.com/stampzilla/stampzilla-go@v2.0.0-rc9+incompatible/nodes/stampzilla-magicmirror/web/src/routes/home/Forecast.js (about)

     1  import React from 'react'
     2  import { connect } from 'react-redux'
     3  import moment from 'moment'
     4  import Moment from 'react-moment'
     5  
     6  import { loadForecast } from '../../ducks/forecast'
     7  
     8  const calendarStrings = {
     9    lastDay: '[Yesterday]',
    10    sameDay: '[Today]',
    11    nextDay: '[Tomorrow]',
    12    lastWeek: '[last] dddd [at] LT',
    13    nextWeek: 'dddd',
    14    sameElse: 'L'
    15  }
    16  
    17  const iconMap = {
    18    Sun: 'sunny',
    19    LightCloud: 'cloudy',
    20    PartlyCloud: 'cloudy',
    21    Cloud: 'cloudy',
    22    LightRainSun: 'rainy',
    23    LightRainThunderSun: 'rainy',
    24    SleetSun: 'rainy',
    25    SnowSun: 'snowy',
    26    LightRain: 'rainy',
    27    Rain: 'rainy',
    28    RainThunder: 'stormy',
    29    Sleet: 'rainy',
    30    Snow: 'rainy',
    31    SnowThunder: 'stormy',
    32    Fog: 'cloudy',
    33    SleetSunThunder: 'stormy',
    34    SnowSunThunder: 'stormy',
    35    LightRainThunder: 'stormy',
    36    SleetThunder: 'stormy',
    37    DrizzleThunderSun: 'stormy',
    38    RainThunderSun: 'stormy',
    39    LightSleetThunderSun: 'stormy',
    40    HeavySleetThunderSun: 'stormy',
    41    LightSnowThunderSun: 'stormy',
    42    HeavySnowThunderSun: 'stormy',
    43    DrizzleThunder: 'stormy',
    44    LightSleetThunder: 'stormy',
    45    HeavySleetThunder: 'stormy',
    46    LightSnowThunder: 'stormy',
    47    HeavySnowThunder: 'stormy',
    48    DrizzleSun: 'rainy',
    49    RainSun: 'rainy',
    50    LightSleetSun: 'cloudy',
    51    HeavySleetSun: 'cloudy',
    52    LightSnowSun: 'snowy',
    53    HeavysnowSun: 'snowy',
    54    Drizzle: 'rainy',
    55    LightSleet: 'cloudy',
    56    HeavySleet: 'cloudy',
    57    LightSnow: 'snowy',
    58    HeavySnow: 'snowy'
    59  }
    60  
    61  const textMap = {
    62    Sun: 'Sunny',
    63    LightCloud: 'Light clouds',
    64    PartlyCloud: 'Partly cloudy',
    65    Cloud: 'Cloudy',
    66    LightRainSun: 'Light rain',
    67    LightRainThunderSun: 'Light rain, sun and thunder',
    68    SleetSun: 'Sleet and sun',
    69    SnowSun: 'Snow and sun',
    70    LightRain: 'Light rain',
    71    Rain: 'Rain',
    72    RainThunder: 'Rain and thunder',
    73    Sleet: 'Sleet',
    74    Snow: 'Snow',
    75    SnowThunder: 'Snow and thunder',
    76    Fog: 'Foggy',
    77    SleetSunThunder: 'Sleet, sun and thunder',
    78    SnowSunThunder: 'Snow, sun and thunder',
    79    LightRainThunder: 'Light rain and thunder',
    80    SleetThunder: 'Sleet and thunder',
    81    DrizzleThunderSun: 'Drizzle, sun and thunder',
    82    RainThunderSun: 'Rain, sun and thunder',
    83    LightSleetThunderSun: 'Light sleet, sun and thunder',
    84    HeavySleetThunderSun: 'Heavy sleet, sun and thunder',
    85    LightSnowThunderSun: 'Light snow,  sun and thunder',
    86    HeavySnowThunderSun: 'Heavy snow, sun and thunder',
    87    DrizzleThunder: 'Drizzle and thunder',
    88    LightSleetThunder: 'Light sleet and thunder',
    89    HeavySleetThunder: 'Heavy sleet and thunder',
    90    LightSnowThunder: 'Light snow and thunder',
    91    HeavySnowThunder: 'Heavy snow and thunder',
    92    DrizzleSun: 'Drizzle and sun',
    93    RainSun: 'Rain and sun',
    94    LightSleetSun: 'Light sleet and sun',
    95    HeavySleetSun: 'Heavy sleet and sun',
    96    LightSnowSun: 'Light snow and sun',
    97    HeavysnowSun: 'Heavy snow and sun',
    98    Drizzle: 'Drizzle',
    99    LightSleet: 'Light sleet',
   100    HeavySleet: 'Heavy sleet',
   101    LightSnow: 'Light snow',
   102    HeavySnow: 'Heavy snow'
   103  }
   104  
   105  const unitMap = {
   106    celsius: 'C',
   107    farenheight: 'F',
   108    kelvin: 'K'
   109  }
   110  
   111  class Forecast extends React.Component {
   112    componentDidMount() {
   113      const { dispatch } = this.props
   114  
   115      this.forecastInterval = setInterval(
   116        () => dispatch(loadForecast()),
   117        60 * 60 * 1000
   118      )
   119      dispatch(loadForecast())
   120    }
   121  
   122    render() {
   123      const { forecasts } = this.props
   124      return (
   125        <React.Fragment>
   126          {forecasts &&
   127            forecasts
   128              .filter(
   129                forecast => moment().diff(moment(forecast.from), 'date') < 0
   130              )
   131              .map(forecast => (
   132                <div className="forecast" key={forecast.from}>
   133                  <strong>
   134                    <Moment calendar={calendarStrings}>{forecast.from}</Moment>
   135                  </strong>
   136                  <div className="weather">
   137                    <div className="weathericon">
   138                      <div className={iconMap[forecast.icon]} />
   139                    </div>
   140                    <div className="weathervalues">
   141                      {forecast.temperature && (
   142                        <div>
   143                          {forecast.temperature.value}&deg;
   144                          {unitMap[forecast.temperature.unit]}{' '}
   145                          {textMap[forecast.icon]}
   146                        </div>
   147                      )}
   148                      {forecast.rain && <small>{forecast.rain}</small>}
   149                      {forecast.windSpeed && (
   150                        <small>{forecast.windSpeed.mps} m/s</small>
   151                      )}
   152                      {forecast.pressure && (
   153                        <small>
   154                          {forecast.pressure.value} {forecast.pressure.unit}
   155                        </small>
   156                      )}
   157                    </div>
   158                  </div>
   159                </div>
   160              ))}
   161        </React.Fragment>
   162      )
   163    }
   164  }
   165  
   166  //<div className="cloudy"></div>
   167  //<div className="rainy"></div>
   168  //<div className="snowy"></div>
   169  //<div className="rainbow"></div>
   170  //<div className="starry"></div>
   171  //<div className="stormy"></div>
   172  
   173  const mapStateToProps = state => ({
   174    forecasts: state.getIn(['forecast', 'forecast']),
   175    current: state.getIn(['forecast', 'current'])
   176  })
   177  
   178  export default connect(mapStateToProps)(Forecast)