KickboardStatusCard.jsx
4.21 KB
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
import React, {useState, useEffect} from "react";
import { Card } from "components/Card/Card.jsx";
import {Col, Row} from "react-bootstrap";
import styled from "styled-components"
import moment from "moment";
// border: 1px solid #E3E3E3;
const KickboardButton = styled.div`
font-size: 15px;
background-color: #e7e7e7;
border-radius: 4px;
color: #565656;
padding: 8px 12px;
height: 40px;
box-shadow: none;
margin: 0 auto;
text-align: center;
margin-bottom: 20px;
&:hover {
background-color: #565656;
color: white;
cursor: pointer;
}
`;
const KickboardDataList = styled.ul`
font-size: 16px;
`;
const KickboardData = styled.li`
padding: 5px 0;
`;
const kickboardDataKey = {
battery: '배터리',
coordinates: '킥보드 위치',
states: '킥보드 상태',
is_good_posture: '킥보드 자세 상태',
total_driven_distance: '총 누적 이동 거리',
total_driven_time: '총 누적 대여 시간',
is_good_gps_signal: 'GPS 신호 양호 여부',
connected: '현재 네트워크 연결 여부',
updated_coordinates_datetime: '최근 gps 업데이트 시각',
connection_updated_datetime: '최근 연결 업데이트 시각',
model_name: '모델명',
updated_datetime: '최근 업데이트 시각',
};
// "serial_number":"000165",
// "coordinates":{"x":126.64504,"y":37.39101},
// "states":"{}",
// "model_name":"MA01",
// "is_good_gps_signal":true,
// "updated_coordinates_datetime":"2020-04-19T15:27:39.427Z",
// "connection_updated_datetime":"2020-04-18T12:43:00.393Z",
// "is_good_posture":true,
// "connected":true,
// "total_driven_distance":3534,
// "total_driven_time":162636,
// "updated_datetime":"2020-06-12T10:00:28.715Z",
// "battery":72
function timestampToString(stamp) {
if (!stamp) return '';
const date = stamp.split('T')[0];
const time = stamp.split('T')[1].split('.')[0];
return `${date} ${time}`;
}
const KickboardStatusCard = (props) => {
const {kbId, kbData} = props;
const { battery, coordinates, states, is_good_posture, total_driven_distance,
total_driven_time, is_good_gps_signal, connected, updated_coordinates_datetime,
connection_updated_datetime, model_name, updated_datetime } = kbData;
const getStats = `마지막 업데이트 ${moment().format("YYYY/MM/DD hh:mm")}`;
return (
<Card
title={`${kbId}번 킥보드`}
stats={getStats}
statsIcon="fa fa-history"
content={
<Row>
<Col md={4} sm={4} xs={4}>
<KickboardButton>경적 울리기</KickboardButton>
</Col>
<Col md={4} sm={4} xs={4}>
<KickboardButton>반납하기</KickboardButton>
</Col>
<Col md={4} sm={4} xs={4}>
<KickboardButton>운행 종료하기</KickboardButton>
</Col>
<KickboardDataList>
<KickboardData>{kickboardDataKey.battery} : {battery}%</KickboardData>
<KickboardData>{kickboardDataKey.coordinates} : {JSON.stringify(coordinates)}</KickboardData>
<KickboardData>{kickboardDataKey.states} : {states}</KickboardData>
<KickboardData>{kickboardDataKey.is_good_posture} : {is_good_posture ? '양호' : '불량'}</KickboardData>
<KickboardData>{kickboardDataKey.total_driven_distance} : {total_driven_distance}</KickboardData>
<KickboardData>{kickboardDataKey.total_driven_time} : {total_driven_time}분</KickboardData>
<KickboardData>{kickboardDataKey.is_good_gps_signal} : {is_good_gps_signal ? '양호' : '불량'}</KickboardData>
<KickboardData>{kickboardDataKey.connected} : {connected ? '연결됨' : '연결되지 않음'}</KickboardData>
<KickboardData>{kickboardDataKey.updated_coordinates_datetime} : {timestampToString(updated_coordinates_datetime)}</KickboardData>
<KickboardData>{kickboardDataKey.connection_updated_datetime} : {timestampToString(connection_updated_datetime)}</KickboardData>
<KickboardData>{kickboardDataKey.model_name} : {model_name}</KickboardData>
<KickboardData>{kickboardDataKey.updated_datetime} : {timestampToString(updated_datetime)}</KickboardData>
</KickboardDataList>
</Row>
}
/>
);
};
export default KickboardStatusCard;