File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
2023-02-17
2023-02-21
File name
Commit message
Commit date
import React from "react";
import Table from "../../component/Table.jsx";
import Button from "../../component/Button.jsx";
import SubTitle from "../../component/SubTitle.jsx";
import ContentTitle from "../../component/ContentTitle.jsx";
import Modal from "../../component/Modal.jsx";
import { useNavigate } from "react-router";
export default function EquipmentManagementSelect() {
const navigate = useNavigate();
const thead1 = [
"",
"",
"",
"",
"",
"",
];
const key1 = [
"text",
"date",
"text1",
"text4",
"temp",
"text2",
"text3",];
const content1 = [
{
text: "댁내온도가 최근",
date: (
<select style={{
width: "100%"
}}>
<option value="">1일</option>
<option value="">3일</option>
<option value="">일주일</option>
<option value="">한달</option>
</select>
),
text1: "평균 온도가",
text4: (
<select style={{
width: "100%"
}}>
<option value="">영상</option>
<option value="">영하</option>
</select>
),
temp: (
<select style={{
width: "100%"
}}>
<option value="">5℃</option>
<option value="">10℃</option>
<option value="">15℃</option>
<option value="">20℃</option>
<option value="">25℃</option>
<option value="">30℃</option>
<option value="">35℃</option>
<option value="">40℃</option>
<option value="">45℃</option>
<option value="">50℃</option>
<option value="">55℃</option>
</select>
),
text2: (
<select style={{
width: "100%"
}}>
<option value="">이하</option>
<option value="">이상</option>
</select>
),
text3: "일 경우 위험알림으로 지정합니다.",
},
];
const thead2 = [
"",
"",
"",
"",
];
const key2 = [
"text",
"date",
"text1",
"text2",];
const content2 = [
{
text: "미복약 횟수가 최근",
date: (
<select style={{
width: "100%"
}}>
<option value="">1일</option>
<option value="">3일</option>
<option value="">일주일</option>
<option value="">한달</option>
</select>
),
text1: (
<select style={{
width: "100%"
}}>
<option value="">3회</option>
<option value="">6회</option>
<option value="">9회</option>
<option value="">12회</option>
<option value="">15회</option>
<option value="">21회 이상</option>
</select>
),
text2: "일 경우 위험알림으로 지정합니다.",
},
];
const thead3 = [
"",
"",
"",
"",
"",
"",
];
const key3 = [
"text",
"date",
"text1",
"text4",
"temp",
"text2",
"text3",];
const content3 = [
{
text: "배터리 잔량이 최근",
date: (
<select style={{
width: "100%"
}}>
<option value="">1일</option>
<option value="">3일</option>
<option value="">일주일</option>
<option value="">한달</option>
</select>
),
text4: (
<select style={{
width: "100%"
}}>
<option value="">10%</option>
<option value="">20%</option>
<option value="">30%</option>
<option value="">40%</option>
<option value="">50%</option>
</select>
),
text3: "이하일 경우 위험알림으로 지정합니다.",
},
];
const data = [
{
id: 1,
title: "온도 관리",
description: (
<Table
className={"protector-user"}
head={thead1}
contents={content1}
contentKey={key1}
/>
),
},
{
id: 2,
title: "복약 관리",
description: (
<Table
className={"caregiver-user"}
head={thead2}
contents={content2}
contentKey={key2}
/>
),
},
{
id: 3,
title: "배터리 관리",
description: (
<Table
className={"caregiver-user"}
head={thead3}
contents={content3}
contentKey={key3}
/>
),
},
];
const [index, setIndex] = React.useState(1);
return (
<main>
<ContentTitle contentTitle={"위험 기준 관리 "} />
<div className="tab-container">
<ul className="tab-menu">
{data.map((item) => (
<li
key={item.id}
className={index === item.id ? "active" : null}
onClick={() => setIndex(item.id)}
>
{item.title}
</li>
))}
</ul>
<div className="content-wrap">
<SubTitle
className="margin-bottom"
explanation={"지정한 기준에 따라 메인 화면에 위험 알림 대상자 수를 표시하여 줍니다."}
color={"#333333"}
/>
<div className="btn-wrap flex-end margin-bottom ">
<Button
className={"btn-small green-btn"}
btnName={"저장"}
/>
</div>
<ul className="tab-content">
{data
.filter((item) => index === item.id)
.map((item) => (
<li>{item.description}</li>
))}
</ul>
</div>
</div>
</main>
);
}