rrr
Never
import React, {useEffect, useState} from "react"; import { Modal, ModalBody, Row, Col } from "react-bootstrap"; import "bootstrap/dist/css/bootstrap.min.css"; import phoneIcon from "./../../assets/img/phone_icon.svg"; import image from "./../../assets/img/image.png"; import emailUserProfileIcon from "./../../assets/img/email_userprofile.svg"; import polygonYellowIcon from "./../../assets/img/Polygon_yellow.svg"; import polygonRedIcon from "./../../assets/img/Polygon_red.svg"; import "./../../assets/css/Profile.css"; import TruckIcon from "./../../assets/img/truck_icon.svg"; import LocationTracker from "../LocationTracking/LocationTracker"; import Autocomplete from '@mui/material/Autocomplete'; import { TextField } from "@mui/material"; import { useAppData } from "../../context/AppDataContext"; const SettingsPage = ({ show, setShowModel, selectedItem }) => { const handleClose = () => { setShowModel(false); }; const [openTracker, setOpenTracker] = useState(false); const handleCloseTracker = () => setOpenTracker(false); const handleOpenTracker = () => setOpenTracker(true); const [shipmentOptions, setShipmentOptions] = useState([]) const appData = useAppData(); const [value, setValue] = React.useState(''); const [shipmentDetails, setShipmentDetails] = useState([]); const [indexTracker, setIndexTracker] = useState(''); const [check, setCheck] = useState(false); console.log("appData inside profile page", appData); useEffect(() => { setShipmentDetails(appData.shipmentDataResponse); },[shipmentDetails]); useEffect(() => { const tempShipmentOptions = appData.shipmentDataResponse.map((d, i) => { return { id: i + 1, label: d?.additionalInformation?.lastReportedTracker, }; }); setShipmentOptions ([ ...tempShipmentOptions, { id: 0, label: ''} ]); }, [shipmentDetails]); useEffect(() =>{ setCheck(true); }, [indexTracker]); return ( <Modal show={show} onHide={handleClose} backdrop="static" keyboard={false} dialogClassName="modal-width" contentClassName="modal-height" centered style={{ fontFamily: "arial" }} > {selectedItem === "settings" && ( <> <Modal.Header closeButton style={{ border: "none" }} className="me-2 mt-1" > <Modal.Title className="ms-3 mt-1 modalTitle" // style={{ fontSize: "18px", fontWeight: "600" }} > Settings </Modal.Title> </Modal.Header> <ModalBody> <div className="ms-3 radio-group "> <div className="row " style={{ marginBottom: "30px" }}> <p style={{ marginBottom: "12px", padding: "0 8px" }}> Temperature </p> <div className="leftlabel"> <input type="radio" id="celsius" name="temperature" value="celsius" checked /> <label for="celsius"> Celsius</label> </div> <div className="rightlabel"> <input type="radio" id="fahrenheit" name="temperature" value="fahrenheit" /> <label for="fahrenheit"> Fahrenheit</label> </div> </div> </div> <div className="ms-3 my-3 radio-group "> <div className="row" style={{ marginBottom: "30px" }}> <p style={{ marginBottom: "12px", padding: "0 8px" }}> Date Format </p> <div className="leftlabel"> <input type="radio" id="date" name="date" value="date" checked /> <label for="date"> MM/DD/YYYY</label> </div> <div className="rightlabel"> <input type="radio" id="date" name="date" value="date" /> <label for="date">DD/MM/YYYY</label> </div> </div> </div> <div className="ms-3 mt-3 radio-group " style={{ marginBottom: "30px" }} > <div className="row"> <p style={{ marginBottom: "12px", padding: "0 8px" }}> Time Format </p> <div className="leftlabel"> <input type="radio" id="time" name="time" value="time" checked /> <label for="time"> 12 hours(AM/PM)</label> </div> <div className="rightlabel"> <input type="radio" id="time" name="time" value="time" /> <label for="time"> 24 hours</label> </div> </div> </div> </ModalBody> </> )} {selectedItem === "viewprofile" && ( <> <Modal.Header closeButton style={{ border: "none" }} className="me-2 mt-1 " > <Modal.Title className="ms-3 mt-1 modalTitle" > My Profile </Modal.Title> </Modal.Header> <ModalBody> <div className="d-flex flex-column justify-content-center align-items-center"> <img src={image} style={{ width: "150px", height: "150px" }} alt="profile pic" /> <div style={{ width: "270px" }}> <div> <div className=" d-flex justify-content-between"> <div style={{ color: "#353535", fontSize: "24px" }}> Satyanarayan Adi </div> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" > <path id="edit-svgrepo-com_2_" data-name="edit-svgrepo-com(2)" d="M20.959,2.7a2.974,2.974,0,0,0-4.207,0L15.087,4.365,7.248,12.2a.992.992,0,0,0-.261.461L6,16.63a.992.992,0,0,0,1.2,1.2l3.966-.991a.992.992,0,0,0,.461-.261L19.406,8.8l1.723-1.723a2.974,2.974,0,0,0,0-4.207Zm-2.8,1.4a.991.991,0,0,1,1.4,0l.17.17a.992.992,0,0,1,0,1.4L18.719,6.682l-1.542-1.6Zm-2.38,2.38,1.542,1.6-6.9,6.9-2.1.524.524-2.1ZM3.983,7.947a.992.992,0,0,1,.991-.991H9.932a.991.991,0,0,0,0-1.983H4.974A2.974,2.974,0,0,0,2,7.947V18.854a2.974,2.974,0,0,0,2.974,2.974H15.881a2.974,2.974,0,0,0,2.974-2.974V13.9a.991.991,0,1,0-1.983,0v4.957a.991.991,0,0,1-.991.991H4.974a.991.991,0,0,1-.991-.991Z" transform="translate(-2 -1.828)" fill-rule="#cdcdcd" /> </svg> </div> <span style={{ fontSize: "14px", marginTop: "-100px", color: "#424242", }} > Super Admin </span> </div> <div className="mt-3 inputphone"> <img alt={"phone-icon"} src={phoneIcon} /> <span>949-020-9492</span> </div> <div className="mt-3 inputemail"> <img alt={"email-user-profile-icon"} src={emailUserProfileIcon} /> <span>satyanarayan.adi@ltts.com</span> </div> {/* Live tracking order */} <div> <Autocomplete disablePortal id="combo-box-demo" options={shipmentOptions} getOptionLabel={(option) => { return option.label || ''}} value={value} onChange={(event, newValue) => { console.log("newValue", newValue); setValue(newValue); console.log("value", value); shipmentDetails.forEach((data, i) => { console.log("data inside autocomplete", data); console.log("value?.label", newValue?.label); console.log("data.additionalInformation.lastReportedTracker inside auto", data.additionalInformation.lastReportedTracker); if(data.additionalInformation?.lastReportedTracker === newValue?.label) { console.log("index inside auto complete", i); setIndexTracker(i); } }) }} sx={{ width: 180 }} renderInput={(params) => <TextField {...params} label="Serial Number" />} /> </div> { check && ( <div className="mt-3 inputemail trackdetails" style={{cursor: 'pointer'}} onClick={handleOpenTracker}> <img src={TruckIcon} className="imageMargin" style={{marginRight: '12px'}} /> <span>Track My Order</span> </div> )} <LocationTracker show={openTracker} onHide={handleCloseTracker} indexTracker={indexTracker} /> </div> </div> </ModalBody> </> )} {selectedItem === "help" && ( <> <Modal.Header closeButton style={{ border: "none" }} className="me-2 " > <Modal.Title className=" " style={{ fontSize: "18px", fontWeight: "600" }} > What to expect </Modal.Title> </Modal.Header> <ModalBody className="p-1 m-2"> <div className="pe-5" style={{ fontSize: "14px", color: "#424242" }} > Based on the current device configuration, the next report will include location at the time the report is sent and two condition measurements. </div> <Row className="mt-1"> <Col></Col> <Col className="text-end" xs={8} style={{ color: "#FFC300", fontSize: "12px", }} > Location locked and reported <br></br> along with last two sensor samples </Col> </Row> <div className="mt-4"> <hr style={{ margin: "-8px 0px", width: "95%" }}></hr> <span> <img alt={'yellow-icon'}src={polygonYellowIcon} style={{ display: " block", margin: "-6px 0px 30px auto" }} /> </span> </div> <Row xs={2} md={3} style={{ marginTop: "-8%", position: "relative", width: "380px", fontSize: "12px", }} > <Col>0 min</Col> <Col>15 min</Col> <Col className="text-end pe-0">30 min</Col> <Col></Col> <Col style={{ color: "#B9B9B9", fontSize: "11px" }}> Sensor Sample </Col> <Col className="text-end pe-0" style={{ color: "#B9B9B9", fontSize: "11px" }} > Sensor Sample </Col> </Row> <div className="pe-5 mt-2" style={{ fontSize: "14px", color: "#424242" }} > When a breach warning is detected on any of the sensors, a report will be sent as soon as connection can be established. The sampling interval increases, but report interval remain the same. </div> <Row className="mt-2"> <Col xs={4} style={{ color: "#FF455A", fontSize: "12px" }}> Breach reported w/location </Col> <Col xs={8} style={{ color: "#FF455A", fontSize: "12px", textAlign: "right", }} > Location locked and reported <br></br>along with last two sensor samples </Col> </Row> <div className="mt-4"> <hr style={{ margin: "-9px 0px", width: "95%" }}></hr> <span> <img alt={"red-icon"} src={polygonRedIcon} style={{ display: " block", margin: "-6px 0px 30px auto" }} /> </span> </div> <Row xs={7} style={{ marginTop: "-7%", fontSize: "12px" }}> <Col>0 min</Col> <Col className="p-0">5 min</Col> <Col className="p-0">10 min</Col> <Col className="p-0">15 min</Col> <Col className="p-0">20 min</Col> <Col className="p-0">25 min</Col> <Col className="p-0">30 min</Col> </Row> <Row> <Col style={{ color: "#B9B9B9", fontSize: "11px" }}> Breach detected </Col> <Col style={{ color: "#B9B9B9", fontSize: "11px", textAlign: "right", }} > Sensor Sample every 5 minutes </Col> </Row> <div className="mt-1 pe-5"> <span style={{ fontWeight: "600" }}>Note:</span> <div style={{ fontSize: "12px", color: "#424242", fontFamily: "italic", }} > clearing a breach will be reported immediately regardless of expected report time. </div> </div> </ModalBody> </> )} </Modal> ); }; export default SettingsPage;
Raw Text
-
Untitled
10 min ago
-
Untitled
14 min ago
-
ddsd dsfd fsdfs fdssddfsdf
14 min ago
-
Untitled
16 min ago
-
CP😏 VIDEOS R@PED😈 LITTLE GIRL 🍼👧
33 min ago
-
Adult Telegram Channels
35 min ago
-
sdfsdfdsfsdfsd
49 min ago
-
dsfgbsdfgbnsdf
54 min ago
-
fddfsdsf dsf dfsdf dfsdsf dfs ddsf dfsdfsdf
1 hour ago
-
Pedomom son...... dad....daughter
1 hour ago