2020-1-capstone-design1 / Wico_Project1

Go to a project
Toggle navigation Toggle navigation pinning
조민지
6013bad4 1 parent 49be43f7

feat: 킥보드 페이지 API 연동

Inline Side-by-side
Showing 4 changed files with 136 additions and 65 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 +};
14 +
15 +class KickboardHistoryTable extends React.Component {
16 + constructor(props) {
17 + super(props);
18 + this.state = {
19 + data: []
20 + };
21 + }
8 22
9 -const KickboardHistoryTable = (props) => { 23 + componentDidMount() {
10 - const {kbId} = props; 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 - })} 58 + </tbody>
37 - </tbody> 59 + </Table>
38 - </Table> 60 + }
39 - } 61 + />
40 - /> 62 + )
41 - ) 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 - const getStats = `마지막 업데이트 ${moment().format("YYYY/MM/DD hh:mm")}`; 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
53 63
54 - return ( 64 +function makeTimestampToString(stamp) {
55 - <Card 65 + if (!stamp) return '';
56 - title={`${kbId}번 킥보드`} 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() {
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;
94 +
95 + return (
96 + <Card
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 (
......