sanguu(박상현)
2 years ago
9 changed files with 698 additions and 268 deletions
@ -0,0 +1,420 @@
|
||||
import { |
||||
Card, |
||||
CardBody, |
||||
Col, |
||||
FormGroup, |
||||
Label, |
||||
Row, |
||||
Button, |
||||
InputGroupAddon, |
||||
InputGroup, |
||||
Input, |
||||
Table |
||||
} from 'reactstrap'; |
||||
import { |
||||
Search, |
||||
Compass, |
||||
Sun, |
||||
CloudLightning, |
||||
Cloud, |
||||
CloudRain, |
||||
CloudDrizzle, |
||||
CloudSnow, |
||||
Navigation2 |
||||
} from 'react-feather'; |
||||
import { mapTypeChangeAction } from '../../../../modules/control/map/actions/controlMapActions'; |
||||
export function TodayWeather({ todayData }) { |
||||
todayData?.fcstTime?.sort([compareFunction]); |
||||
const dayres = todayData?.filter(dayData => { |
||||
switch (dayData?.fcstTime) { |
||||
case "0200": |
||||
case "0500": |
||||
case "0500": |
||||
case "0800": |
||||
case "1100": |
||||
case "1400": |
||||
case "1700": |
||||
case "2000": |
||||
case "2300": |
||||
return { ...dayData?.todayData } |
||||
} |
||||
}); |
||||
|
||||
|
||||
// 배열.reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, 초깃값);
|
||||
const groupValues = dayres.reduce((acc, current) => { |
||||
acc[current.fcstTime] = acc[current.fcstTime] || []; |
||||
acc[current.fcstTime].push({ category: current.category, fcstValue: current.fcstValue }); |
||||
return acc; |
||||
}, {}); |
||||
// 위에서 만든 객체를 key로 돌려서 새로운 객체 return
|
||||
const groups = Object.keys(groupValues).map((key) => { |
||||
return { fcstTime: key, category: groupValues[key] }; |
||||
}); |
||||
|
||||
return ( |
||||
<> |
||||
{dayres.length > 0 ? ( |
||||
|
||||
<Table responsive> |
||||
<thead> |
||||
<tr> |
||||
<th>시각</th> |
||||
<th>날씨</th> |
||||
<th>기온</th> |
||||
<th>풍향</th> |
||||
<th>풍속</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
{groups.map((i) => { |
||||
return ( |
||||
<tr> |
||||
<td>{i.fcstTime.substring(0, 2)}시</td> |
||||
{i.category[4].fcstValue == "0" ? |
||||
<td> |
||||
{i.category[3].fcstValue == "1" ? <Sun /> : <Cloud />} |
||||
</td> |
||||
: <td> |
||||
{i.category[4].fcstValue == "3" ? <CloudSnow /> : <CloudRain />} |
||||
</td> |
||||
} |
||||
<td>{i.category[0].fcstValue}℃</td> |
||||
<td> |
||||
<Navigation2 style={{ transform: `rotate(${i.category[1]?.fcstValue}deg)` }} /> |
||||
</td> |
||||
<td>{i.category[2].fcstValue}</td> |
||||
</tr> |
||||
) |
||||
})} |
||||
</tbody> |
||||
</Table> |
||||
) : |
||||
null} |
||||
</> |
||||
) |
||||
} |
||||
|
||||
|
||||
export function TomorrowWeahter({ tomorrowData }) { |
||||
tomorrowData?.fcstTime?.sort([compareFunction]); |
||||
const dayres = tomorrowData?.filter(dayData => { |
||||
switch (dayData?.fcstTime) { |
||||
case "0200": |
||||
case "0500": |
||||
case "0500": |
||||
case "0800": |
||||
case "1100": |
||||
case "1400": |
||||
case "1700": |
||||
case "2000": |
||||
case "2300": |
||||
return { ...dayData?.tomorrowData } |
||||
} |
||||
}); |
||||
return ( |
||||
<Table responsive> |
||||
<thead> |
||||
<tr> |
||||
<th>시각</th> |
||||
<th>날씨</th> |
||||
<th>기온</th> |
||||
<th>풍향</th> |
||||
<th>풍속</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
<tr> |
||||
<td>{dayres[0]?.fcstTime.substring(0, 2)}시</td> |
||||
{dayres[3].fcstValue != "0" ? |
||||
<td> |
||||
{dayres[3].fcstValue == "1" ? <Sun /> : <Cloud />} |
||||
</td> |
||||
: <td> |
||||
{dayres[4].fcstValue == "3" ? <CloudSnow /> : <CloudRain />} |
||||
</td> |
||||
} |
||||
<td>{dayres[0].fcstValue}℃</td> |
||||
<td> |
||||
<Navigation2 style={{ transform: `rotate(${dayres[1]?.fcstValue}deg)` }} /> |
||||
</td> |
||||
<td>{dayres[2].fcstValue}</td> |
||||
</tr> |
||||
<tr> |
||||
<td>{dayres[5].fcstTime.substring(0, 2)}시</td> |
||||
{dayres[8].fcstValue != "0" ? |
||||
<td> |
||||
{dayres[8].fcstValue == "1" ? <Sun /> : <Cloud />} |
||||
</td> |
||||
: <td> |
||||
{dayres[9].fcstValue == "3" ? <CloudSnow /> : <CloudRain />} |
||||
</td> |
||||
} |
||||
<td>{dayres[5].fcstValue}℃</td> |
||||
<td> |
||||
<Navigation2 style={{ transform: `rotate(${dayres[6]?.fcstValue}deg)` }} /> |
||||
</td> |
||||
<td>{dayres[7].fcstValue}</td> |
||||
</tr> |
||||
<tr> |
||||
<td>{dayres[10].fcstTime.substring(0, 2)}시</td> |
||||
{dayres[13].fcstValue != "0" ? |
||||
<td> |
||||
{dayres[13].fcstValue == "1" ? <Sun /> : <Cloud />} |
||||
</td> |
||||
: <td> |
||||
{dayres[14].fcstValue == "3" ? <CloudSnow /> : <CloudRain />} |
||||
</td> |
||||
} |
||||
<td>{dayres[10].fcstValue}℃</td> |
||||
<td> |
||||
<Navigation2 style={{ transform: `rotate(${dayres[11]?.fcstValue}deg)` }} /> |
||||
</td> |
||||
<td>{dayres[12].fcstValue}</td> |
||||
</tr> |
||||
<tr> |
||||
<td>{dayres[15].fcstTime.substring(0, 2)}시</td> |
||||
{dayres[18].fcstValue != "0" ? |
||||
<td> |
||||
{dayres[18].fcstValue == "1" ? <Sun /> : <Cloud />} |
||||
</td> |
||||
: <td> |
||||
{dayres[19].fcstValue == "3" ? <CloudSnow /> : <CloudRain />} |
||||
</td> |
||||
} |
||||
<td>{dayres[15].fcstValue}℃</td> |
||||
<td> |
||||
<Navigation2 style={{ transform: `rotate(${dayres[16]?.fcstValue}deg)` }} /> |
||||
</td> |
||||
<td>{dayres[17].fcstValue}</td> |
||||
</tr> |
||||
<tr> |
||||
<td>{dayres[20].fcstTime.substring(0, 2)}시</td> |
||||
{dayres[23].fcstValue != "0" ? |
||||
<td> |
||||
{dayres[23].fcstValue == "1" ? <Sun /> : <Cloud />} |
||||
</td> |
||||
: <td> |
||||
{dayres[24].fcstValue == "3" ? <CloudSnow /> : <CloudRain />} |
||||
</td> |
||||
} |
||||
<td>{dayres[20].fcstValue}℃</td> |
||||
<td> |
||||
<Navigation2 style={{ transform: `rotate(${dayres[21]?.fcstValue}deg)` }} /> |
||||
</td> |
||||
<td>{dayres[22].fcstValue}</td> |
||||
</tr> |
||||
<tr> |
||||
<td>{dayres[25].fcstTime.substring(0, 2)}시</td> |
||||
{dayres[28].fcstValue != "0" ? |
||||
<td> |
||||
{dayres[28].fcstValue == "1" ? <Sun /> : <Cloud />} |
||||
</td> |
||||
: <td> |
||||
{dayres[29].fcstValue == "3" ? <CloudSnow /> : <CloudRain />} |
||||
</td> |
||||
} |
||||
<td>{dayres[25].fcstValue}℃</td> |
||||
<td> |
||||
<Navigation2 style={{ transform: `rotate(${dayres[26]?.fcstValue}deg)` }} /> |
||||
</td> |
||||
<td>{dayres[27].fcstValue}</td> |
||||
</tr> |
||||
<tr> |
||||
<td>{dayres[30].fcstTime.substring(0, 2)}시</td> |
||||
{dayres[33].fcstValue != "0" ? |
||||
<td> |
||||
{dayres[33].fcstValue == "1" ? <Sun /> : <Cloud />} |
||||
</td> |
||||
: <td> |
||||
{dayres[34].fcstValue == "3" ? <CloudSnow /> : <CloudRain />} |
||||
</td> |
||||
} |
||||
<td>{dayres[30].fcstValue}℃</td> |
||||
<td> |
||||
<Navigation2 style={{ transform: `rotate(${dayres[31]?.fcstValue}deg)` }} /> |
||||
</td> |
||||
<td>{dayres[32].fcstValue}</td> |
||||
</tr> |
||||
<tr> |
||||
<td>{dayres[35].fcstTime.substring(0, 2)}시</td> |
||||
{dayres[38].fcstValue != "0" ? |
||||
<td> |
||||
{dayres[38].fcstValue == "1" ? <Sun /> : <Cloud />} |
||||
</td> |
||||
: <td> |
||||
{dayres[39].fcstValue == "3" ? <CloudSnow /> : <CloudRain />} |
||||
</td> |
||||
} |
||||
<td>{dayres[35].fcstValue}℃</td> |
||||
<td> |
||||
<Navigation2 style={{ transform: `rotate(${dayres[36]?.fcstValue}deg)` }} /> |
||||
</td> |
||||
<td>{dayres[37].fcstValue}</td> |
||||
</tr> |
||||
</tbody> |
||||
</Table> |
||||
) |
||||
} |
||||
export function AfterTomorrowWeahter({ afterData }) { |
||||
afterData?.fcstTime?.sort([compareFunction]); |
||||
const dayres = afterData?.filter(dayData => { |
||||
switch (dayData?.fcstTime) { |
||||
case "0200": |
||||
case "0500": |
||||
case "0500": |
||||
case "0800": |
||||
case "1100": |
||||
case "1400": |
||||
case "1700": |
||||
case "2000": |
||||
case "2300": |
||||
return { ...dayData?.afterData } |
||||
} |
||||
}); |
||||
console.log(dayres); |
||||
|
||||
return ( |
||||
<Table responsive> |
||||
<thead> |
||||
<tr> |
||||
<th>시각</th> |
||||
<th>날씨</th> |
||||
<th>기온</th> |
||||
<th>풍향</th> |
||||
<th>풍속</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
<tr> |
||||
<td>{dayres[0].fcstTime.substring(0, 2)}시</td> |
||||
{dayres[3].fcstValue != "0" ? |
||||
<td> |
||||
{dayres[3].fcstValue == "1" ? <Sun /> : <Cloud />} |
||||
</td> |
||||
: <td> |
||||
{dayres[4].fcstValue == "3" ? <CloudSnow /> : <CloudRain />} |
||||
</td> |
||||
} |
||||
<td>{dayres[0].fcstValue}℃</td> |
||||
<td> |
||||
<Navigation2 style={{ transform: `rotate(${dayres[1]?.fcstValue}deg)` }} /> |
||||
</td> |
||||
<td>{dayres[2].fcstValue}</td> |
||||
</tr> |
||||
<tr> |
||||
<td>{dayres[5].fcstTime.substring(0, 2)}시</td> |
||||
{dayres[8].fcstValue != "0" ? |
||||
<td> |
||||
{dayres[8].fcstValue == "1" ? <Sun /> : <Cloud />} |
||||
</td> |
||||
: <td> |
||||
{dayres[9].fcstValue == "3" ? <CloudSnow /> : <CloudRain />} |
||||
</td> |
||||
} |
||||
<td>{dayres[5].fcstValue}℃</td> |
||||
<td> |
||||
<Navigation2 style={{ transform: `rotate(${dayres[6]?.fcstValue}deg)` }} /> |
||||
</td> |
||||
<td>{dayres[7].fcstValue}</td> |
||||
</tr> |
||||
<tr> |
||||
<td>{dayres[10].fcstTime.substring(0, 2)}시</td> |
||||
{dayres[13].fcstValue != "0" ? |
||||
<td> |
||||
{dayres[13].fcstValue == "1" ? <Sun /> : <Cloud />} |
||||
</td> |
||||
: <td> |
||||
{dayres[14].fcstValue == "3" ? <CloudSnow /> : <CloudRain />} |
||||
</td> |
||||
} |
||||
<td>{dayres[10].fcstValue}℃</td> |
||||
<td> |
||||
<Navigation2 style={{ transform: `rotate(${dayres[11]?.fcstValue}deg)` }} /> |
||||
</td> |
||||
<td>{dayres[12].fcstValue}</td> |
||||
</tr> |
||||
<tr> |
||||
<td>{dayres[15].fcstTime.substring(0, 2)}시</td> |
||||
{dayres[18].fcstValue != "0" ? |
||||
<td> |
||||
{dayres[18].fcstValue == "1" ? <Sun /> : <Cloud />} |
||||
</td> |
||||
: <td> |
||||
{dayres[19].fcstValue == "3" ? <CloudSnow /> : <CloudRain />} |
||||
</td> |
||||
} |
||||
<td>{dayres[15].fcstValue}℃</td> |
||||
<td> |
||||
<Navigation2 style={{ transform: `rotate(${dayres[16]?.fcstValue}deg)` }} /> |
||||
</td> |
||||
<td>{dayres[17].fcstValue}</td> |
||||
</tr> |
||||
<tr> |
||||
<td>{dayres[20].fcstTime.substring(0, 2)}시</td> |
||||
{dayres[23].fcstValue != "0" ? |
||||
<td> |
||||
{dayres[23].fcstValue == "1" ? <Sun /> : <Cloud />} |
||||
</td> |
||||
: <td> |
||||
{dayres[24].fcstValue == "3" ? <CloudSnow /> : <CloudRain />} |
||||
</td> |
||||
} |
||||
<td>{dayres[20].fcstValue}℃</td> |
||||
<td> |
||||
<Navigation2 style={{ transform: `rotate(${dayres[21]?.fcstValue}deg)` }} /> |
||||
</td> |
||||
<td>{dayres[22].fcstValue}</td> |
||||
</tr> |
||||
<tr> |
||||
<td>{dayres[25].fcstTime.substring(0, 2)}시</td> |
||||
{dayres[28].fcstValue != "0" ? |
||||
<td> |
||||
{dayres[28].fcstValue == "1" ? <Sun /> : <Cloud />} |
||||
</td> |
||||
: <td> |
||||
{dayres[29].fcstValue == "3" ? <CloudSnow /> : <CloudRain />} |
||||
</td> |
||||
} |
||||
<td>{dayres[25].fcstValue}℃</td> |
||||
<td> |
||||
<Navigation2 style={{ transform: `rotate(${dayres[26]?.fcstValue}deg)` }} /> |
||||
</td> |
||||
<td>{dayres[27].fcstValue}</td> |
||||
</tr> |
||||
<tr> |
||||
<td>{dayres[30].fcstTime.substring(0, 2)}시</td> |
||||
{dayres[33].fcstValue != "0" ? |
||||
<td> |
||||
{dayres[33].fcstValue == "1" ? <Sun /> : <Cloud />} |
||||
</td> |
||||
: <td> |
||||
{dayres[34].fcstValue == "3" ? <CloudSnow /> : <CloudRain />} |
||||
</td> |
||||
} |
||||
<td>{dayres[30].fcstValue}℃</td> |
||||
<td> |
||||
<Navigation2 style={{ transform: `rotate(${dayres[31]?.fcstValue}deg)` }} /> |
||||
</td> |
||||
<td>{dayres[32].fcstValue}</td> |
||||
</tr> |
||||
<tr> |
||||
<td>{dayres[35].fcstTime.substring(0, 2)}시</td> |
||||
{dayres[38].fcstValue != "0" ? |
||||
<td> |
||||
{dayres[38].fcstValue == "1" ? <Sun /> : <Cloud />} |
||||
</td> |
||||
: <td> |
||||
{dayres[39].fcstValue == "3" ? <CloudSnow /> : <CloudRain />} |
||||
</td> |
||||
} |
||||
<td>{dayres[35].fcstValue}℃</td> |
||||
<td> |
||||
<Navigation2 style={{ transform: `rotate(${dayres[36]?.fcstValue}deg)` }} /> |
||||
</td> |
||||
<td>{dayres[37].fcstValue}</td> |
||||
</tr> |
||||
</tbody> |
||||
</Table> |
||||
) |
||||
} |
Loading…
Reference in new issue