Showing
4 changed files
with
113 additions
and
42 deletions
1 | import React from "react"; | 1 | import React from "react"; |
2 | import {Table} from "react-bootstrap"; | 2 | import {Table} from "react-bootstrap"; |
3 | import { Card } from "components/Card/Card.jsx"; | 3 | import { Card } from "components/Card/Card.jsx"; |
4 | - | ||
5 | import { tdArray } from "variables/Variables.jsx"; | 4 | import { tdArray } from "variables/Variables.jsx"; |
6 | 5 | ||
7 | -const thArray = ['유저ID', '대여 시각', '반납 시각', '대여 시간', '이동 거리', '대여 금액']; | 6 | +const UserDataKey = { |
7 | + user_id: '유저ID', | ||
8 | + rent_datetime: '대여 시각', | ||
9 | + return_datetime: '반납 시각', | ||
10 | + rental_time: '대여 시간', | ||
11 | + rental_distance: '이동 거리', | ||
12 | + rental_fee: '대여 금액', | ||
13 | +}; | ||
8 | 14 | ||
9 | -const KickboardHistoryTable = (props) => { | 15 | +class KickboardHistoryTable extends React.Component { |
10 | - const {kbId} = props; | 16 | + constructor(props) { |
17 | + super(props); | ||
18 | + this.state = { | ||
19 | + data: [] | ||
20 | + }; | ||
21 | + } | ||
22 | + | ||
23 | + componentDidMount() { | ||
24 | + fetch(`http://1.201.143.67:5901/kickboard/rent/${this.props.kbId}`) | ||
25 | + .then(r => r.json()) | ||
26 | + .then(d => { | ||
27 | + if(d.data && d.data.length) this.setState({data: d.data}); | ||
28 | + }) | ||
29 | + .catch(err => console.log(err)); | ||
30 | + } | ||
11 | 31 | ||
12 | - // category="Here is a subtitle for this table" | 32 | + render() { |
13 | return ( | 33 | return ( |
14 | <Card | 34 | <Card |
15 | - title={`${kbId}번 킥보드 사용자 히스토리`} | 35 | + title={`${this.props.kbId}번 킥보드 사용자 히스토리`} |
16 | ctTableFullWidth | 36 | ctTableFullWidth |
17 | ctTableResponsive | 37 | ctTableResponsive |
18 | content={ | 38 | content={ |
19 | <Table striped hover> | 39 | <Table striped hover> |
20 | <thead> | 40 | <thead> |
21 | <tr> | 41 | <tr> |
22 | - {thArray.map((prop, key) => { | 42 | + {Object.values(UserDataKey).map((prop, key) => { |
23 | return <th key={key}>{prop}</th>; | 43 | return <th key={key}>{prop}</th>; |
24 | })} | 44 | })} |
25 | </tr> | 45 | </tr> |
26 | </thead> | 46 | </thead> |
27 | <tbody> | 47 | <tbody> |
28 | - {tdArray.map((prop, key) => { | 48 | + {this.state.data.map((data, idx) => ( |
29 | - return ( | 49 | + <tr key={idx}> |
30 | - <tr key={key}> | 50 | + <td>{data.user_id}</td> |
31 | - {prop.map((prop, key) => { | 51 | + <td>{data.rent_datetime}</td> |
32 | - return <td key={key}>{prop}</td>; | 52 | + <td>{data.return_datetime}</td> |
33 | - })} | 53 | + <td>{data.rental_time}</td> |
54 | + <td>{data.rental_distance}</td> | ||
55 | + <td>{data.rental_fee}</td> | ||
34 | </tr> | 56 | </tr> |
35 | - ); | 57 | + ))} |
36 | - })} | ||
37 | </tbody> | 58 | </tbody> |
38 | </Table> | 59 | </Table> |
39 | } | 60 | } |
40 | /> | 61 | /> |
41 | ) | 62 | ) |
63 | + } | ||
42 | }; | 64 | }; |
43 | 65 | ||
44 | export default KickboardHistoryTable; | 66 | export default KickboardHistoryTable; | ... | ... |
1 | -import React from "react"; | 1 | +import React, {useState, useEffect} from "react"; |
2 | import { Card } from "components/Card/Card.jsx"; | 2 | import { Card } from "components/Card/Card.jsx"; |
3 | import {Col, Row} from "react-bootstrap"; | 3 | import {Col, Row} from "react-bootstrap"; |
4 | import styled from "styled-components" | 4 | import styled from "styled-components" |
... | @@ -15,7 +15,7 @@ const KickboardButton = styled.div` | ... | @@ -15,7 +15,7 @@ const KickboardButton = styled.div` |
15 | box-shadow: none; | 15 | box-shadow: none; |
16 | margin: 0 auto; | 16 | margin: 0 auto; |
17 | text-align: center; | 17 | text-align: center; |
18 | - margin-bottom: 10px; | 18 | + margin-bottom: 20px; |
19 | 19 | ||
20 | &:hover { | 20 | &:hover { |
21 | background-color: #565656; | 21 | background-color: #565656; |
... | @@ -29,31 +29,72 @@ const KickboardDataList = styled.ul` | ... | @@ -29,31 +29,72 @@ const KickboardDataList = styled.ul` |
29 | `; | 29 | `; |
30 | 30 | ||
31 | const KickboardData = styled.li` | 31 | const KickboardData = styled.li` |
32 | - padding: 3px 0; | 32 | + padding: 5px 0; |
33 | `; | 33 | `; |
34 | 34 | ||
35 | const kickboardDataKey = { | 35 | const kickboardDataKey = { |
36 | - a: '배터리', | 36 | + battery: '배터리', |
37 | - b: '킥보드 위치', | 37 | + coordinates: '킥보드 위치', |
38 | - c: '킥보드 상태', | 38 | + states: '킥보드 상태', |
39 | - d: '킥보드 자세 여부', | 39 | + is_good_posture: '킥보드 자세 상태', |
40 | - e: '총 누적 이동 거리', | 40 | + total_driven_distance: '총 누적 이동 거리', |
41 | - f: '총 누적 대여 시간', | 41 | + total_driven_time: '총 누적 대여 시간', |
42 | - g: '신호 양호 여부', | 42 | + is_good_gps_signal: 'GPS 신호 양호 여부', |
43 | - h: '현재 네트워크 연결 여부', | 43 | + connected: '현재 네트워크 연결 여부', |
44 | - i: '최근 gps 업데이트 시각', | 44 | + updated_coordinates_datetime: '최근 gps 업데이트 시각', |
45 | - j: '최근 연결 업데이트 시각', | 45 | + connection_updated_datetime: '최근 연결 업데이트 시각', |
46 | - k: '모델명', | 46 | + model_name: '모델명', |
47 | - l: '최근 업데이트 시각', | 47 | + updated_datetime: '최근 업데이트 시각', |
48 | }; | 48 | }; |
49 | 49 | ||
50 | -const KickboardStatusCard = (props) => { | 50 | +// "serial_number":"000165", |
51 | - const {kbId} = props; | 51 | +// "coordinates":{"x":126.64504,"y":37.39101}, |
52 | +// "states":"{}", | ||
53 | +// "model_name":"MA01", | ||
54 | +// "is_good_gps_signal":true, | ||
55 | +// "updated_coordinates_datetime":"2020-04-19T15:27:39.427Z", | ||
56 | +// "connection_updated_datetime":"2020-04-18T12:43:00.393Z", | ||
57 | +// "is_good_posture":true, | ||
58 | +// "connected":true, | ||
59 | +// "total_driven_distance":3534, | ||
60 | +// "total_driven_time":162636, | ||
61 | +// "updated_datetime":"2020-06-12T10:00:28.715Z", | ||
62 | +// "battery":72 | ||
63 | + | ||
64 | +function makeTimestampToString(stamp) { | ||
65 | + if (!stamp) return ''; | ||
66 | + const date = stamp.split('T')[0]; | ||
67 | + const time = stamp.split('T')[1].split('.')[0]; | ||
68 | + | ||
69 | + return `${date} ${time}`; | ||
70 | +} | ||
71 | + | ||
72 | +class KickboardStatusCard extends React.Component { | ||
73 | + constructor(props) { | ||
74 | + super(props); | ||
75 | + this.state = { | ||
76 | + data: {} | ||
77 | + }; | ||
78 | + } | ||
79 | + | ||
80 | + componentDidMount() { | ||
81 | + fetch(`http://1.201.143.67:5901/kickboard/${this.props.kbId}`) | ||
82 | + .then(r => r.json()) | ||
83 | + .then(d => { | ||
84 | + if(d.data && d.data.length) this.setState({data: d.data[0]}); | ||
85 | + }) | ||
86 | + .catch(err => console.log(err)); | ||
87 | + } | ||
88 | + | ||
89 | + render() { | ||
52 | const getStats = `마지막 업데이트 ${moment().format("YYYY/MM/DD hh:mm")}`; | 90 | const getStats = `마지막 업데이트 ${moment().format("YYYY/MM/DD hh:mm")}`; |
91 | + const { battery, coordinates, states, is_good_posture, total_driven_distance, | ||
92 | + total_driven_time, is_good_gps_signal, connected, updated_coordinates_datetime, | ||
93 | + connection_updated_datetime, model_name, updated_datetime } = this.state.data; | ||
53 | 94 | ||
54 | return ( | 95 | return ( |
55 | <Card | 96 | <Card |
56 | - title={`${kbId}번 킥보드`} | 97 | + title={`${this.props.kbId}번 킥보드`} |
57 | stats={getStats} | 98 | stats={getStats} |
58 | statsIcon="fa fa-history" | 99 | statsIcon="fa fa-history" |
59 | content={ | 100 | content={ |
... | @@ -68,16 +109,24 @@ const KickboardStatusCard = (props) => { | ... | @@ -68,16 +109,24 @@ const KickboardStatusCard = (props) => { |
68 | <KickboardButton>운행 종료하기</KickboardButton> | 109 | <KickboardButton>운행 종료하기</KickboardButton> |
69 | </Col> | 110 | </Col> |
70 | <KickboardDataList> | 111 | <KickboardDataList> |
71 | - { | 112 | + <KickboardData>{kickboardDataKey.battery} : {battery}%</KickboardData> |
72 | - Object.keys(kickboardDataKey).map(key => { | 113 | + <KickboardData>{kickboardDataKey.coordinates} : {JSON.stringify(coordinates)}</KickboardData> |
73 | - return <KickboardData>{kickboardDataKey[key]} : {key}</KickboardData> | 114 | + <KickboardData>{kickboardDataKey.states} : {states}</KickboardData> |
74 | - }) | 115 | + <KickboardData>{kickboardDataKey.is_good_posture} : {is_good_posture ? '양호' : '불량'}</KickboardData> |
75 | - } | 116 | + <KickboardData>{kickboardDataKey.total_driven_distance} : {total_driven_distance}</KickboardData> |
117 | + <KickboardData>{kickboardDataKey.total_driven_time} : {total_driven_time}분</KickboardData> | ||
118 | + <KickboardData>{kickboardDataKey.is_good_gps_signal} : {is_good_gps_signal ? '양호' : '불량'}</KickboardData> | ||
119 | + <KickboardData>{kickboardDataKey.connected} : {connected ? '연결됨' : '연결되지 않음'}</KickboardData> | ||
120 | + <KickboardData>{kickboardDataKey.updated_coordinates_datetime} : {makeTimestampToString(updated_coordinates_datetime)}</KickboardData> | ||
121 | + <KickboardData>{kickboardDataKey.connection_updated_datetime} : {makeTimestampToString(connection_updated_datetime)}</KickboardData> | ||
122 | + <KickboardData>{kickboardDataKey.model_name} : {model_name}</KickboardData> | ||
123 | + <KickboardData>{kickboardDataKey.updated_datetime} : {makeTimestampToString(updated_datetime)}</KickboardData> | ||
76 | </KickboardDataList> | 124 | </KickboardDataList> |
77 | </Row> | 125 | </Row> |
78 | } | 126 | } |
79 | /> | 127 | /> |
80 | ); | 128 | ); |
129 | + } | ||
81 | }; | 130 | }; |
82 | 131 | ||
83 | export default KickboardStatusCard; | 132 | export default KickboardStatusCard; |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -24,14 +24,14 @@ class Sidebar extends Component { | ... | @@ -24,14 +24,14 @@ class Sidebar extends Component { |
24 | } | 24 | } |
25 | render() { | 25 | render() { |
26 | const sidebarBackground = { | 26 | const sidebarBackground = { |
27 | - backgroundImage: "url(" + this.props.image + ")" | 27 | + backgroundColor: 'rgb(217,94,45)' |
28 | }; | 28 | }; |
29 | + | ||
30 | + console.log(this.props.color); | ||
29 | return ( | 31 | return ( |
30 | <div | 32 | <div |
31 | id="sidebar" | 33 | id="sidebar" |
32 | className="sidebar" | 34 | className="sidebar" |
33 | - data-color={this.props.color} | ||
34 | - data-image={this.props.image} | ||
35 | > | 35 | > |
36 | {this.props.hasImage ? ( | 36 | {this.props.hasImage ? ( |
37 | <div className="sidebar-background" style={sidebarBackground} /> | 37 | <div className="sidebar-background" style={sidebarBackground} /> | ... | ... |
... | @@ -7,7 +7,7 @@ import KickboardHistoryTable from '../components/Kickboard/KickboardHistoryTable | ... | @@ -7,7 +7,7 @@ import KickboardHistoryTable from '../components/Kickboard/KickboardHistoryTable |
7 | import SearchButton from '../components/Kickboard/SearchButton'; | 7 | import SearchButton from '../components/Kickboard/SearchButton'; |
8 | 8 | ||
9 | const Kickboard = () => { | 9 | const Kickboard = () => { |
10 | - const [kbId, setKbId] = useState('000000'); | 10 | + const [kbId, setKbId] = useState('000165'); |
11 | 11 | ||
12 | // 여기 API 요청 | 12 | // 여기 API 요청 |
13 | return ( | 13 | return ( | ... | ... |
-
Please register or login to post a comment