download work in pdf and image
import React, { useEffect,useState,useRef } from 'react'
import { FiArrowLeft } from "react-icons/fi";
import { useNavigate } from "react-router-dom";
import maincss from './Style/main.module.css';
import download from '../assets/download.jpg';
import El from '../assets/Ellipse 1614.png';
import share from '../assets/share.jpg';
// import { Spinner } from 'react-bootstrap';
import CircularProgress from '@mui/material/CircularProgress';
import Variables from '../global.ts'
import { toPng } from 'html-to-image';
import html2canvas from "html2canvas";
import jsPdf from "jspdf";
// import Modal from 'react-bootstrap/Modal';
import Modal from '@mui/material/Modal';
// import Button from 'react-bootstrap/Button';
import Button from '@mui/material/Button';
import Box from '@mui/material/Box';
import { ToastContainer, toast } from 'react-toastify';
import { AiFillCloseCircle} from "react-icons/ai";
import Typography from '@mui/material/Typography';
const style = {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: '80vw',
bgcolor: 'background.paper',
border: '2px solid #000',
boxShadow: 24,
pt: 2,
px: 4,
pb: 3,
};
export default function Main() {
const navigate = useNavigate();
const url = window.location.href
var regex = /[?&]([^=#]+)=([^&#]*)/g,
params = {},
match;
while (match = regex.exec(url)) {
params[match[1]] = match[2];
}
if (params.key1) {
if((params.key1).length>30){
console.log(params.key1,params.key);
Variables.set_authToken('Token ' + params.key1);
Variables.set_patientSlug(params.key2);
localStorage.setItem('token', params.key1);
localStorage.setItem('patient_slug', params.key2);
}
else{
localStorage.setItem('token', params.key2);
localStorage.setItem('patient_slug', params.key1);
}
Variables.set_Base_Url(params.key3)
}
useEffect(() => {
localStorage.setItem('token', 'dcab2d32c2dd58daa63136eaec0ce5e7f77fb251');
localStorage.setItem('patient_slug', 'iwE6ncUipKeP4GdueS3ueSzI');
window.scrollTo(0, 0)
}, []);
const [loading,setLoading] = useState(true)
const [Details,setDetails] = useState([])
const elementRef = useRef([]);
const itemRef = useRef([]);
const itemRef1 = useRef([]);
// const DispRef=useRef([]);
elementRef.current=[];
// DispRef.current=[];
const [show, setShow] = useState(false);
const [Service,SetService] = useState([])
const [Servicevalue,setServicevalue]=useState();
const [subServicevalue,setsubServicevalue]=useState();
const [activeIndex, setActiveIndex] = useState(0);
const wellnessEcardDetailsAsync = async () => {
try {
let response = await fetch(Variables.get_Base_Url()+'/api/hospital-app/discount_card/wellness_ecard/', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
Authorization: 'Token ' + localStorage.getItem('token'),
},
body: JSON.stringify({"patient_slug":localStorage.getItem('patient_slug')})
});
let json = await response.json();
setLoading(false);
console.log(json)
if(json.SUCCESS){
setDetails(json.ecards_list);
}
else{
setLoading(false);
}
} catch (error) {
console.error(error);
}
finally{
setLoading(false);
}
};
const getDiscountcardService = async () => {
try {
let response = await fetch(Variables.get_Base_Url()+'/api/hospital-app/discount_card/get_discount_card_services/', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
Authorization:'Token ' + localStorage.getItem('token'),
},
body: JSON.stringify({"patient_slug":localStorage.getItem('patient_slug')})
});
let json = await response.json();
setLoading(false);
console.log(json)
if(json.SUCCESS){
SetService(json.discount_card_services);
console.log(json.discount_card_services);//
console.log(Object.keys(json.discount_card_services));
setShow(true);
}
} catch (error) {
console.error(error);
}
};
useEffect(() => {
wellnessEcardDetailsAsync();
}, [])
const downloadCard=(index,enno)=>{
console.log(elementRef.current[index]);
html2canvas( elementRef.current[index]
).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const imgWidth = 190;
const pageHeight = 290;
const imgHeight = (canvas.height * imgWidth) / canvas.width;
let heightLeft = imgHeight;
const doc = new jsPdf('pt', 'mm');
let position = 0;
doc.addImage(imgData, 'PNG', 10, 50, imgWidth, imgHeight + 25);
heightLeft -= pageHeight;
// while (heightLeft >= 0) {
// position = heightLeft - imgHeight;
// doc.addPage();
// doc.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight + 25);
// heightLeft -= pageHeight;
// }
doc.save(enno+'.pdf');
});
/* console.log('download button clicked',index,containerid);
DispRef.current[index].style.display="block";
console.log(enno);
console.log(elementRef.current[index]);*/
/*working..*/
/*alert('download button clicked');
alert(index);
alert(enno);
console.log(elementRef.current[index]);
elementRef.current[index].style.borderRadius="0px";
toPng(elementRef.current[index], { cacheBust: false })
.then((dataUrl) => {
const link = document.createElement("a");
link.download = enno+".png";
link.href = dataUrl;
link.click();
// DispRef.current[index].style.display="none";
elementRef.current[index].style.borderRadius="14.5207px 14.5207px 0px 0px";
})
.catch((err) => {
console.log(err);
});*/
/*end of working*/
/* toPng(elementRef.current[index], { cacheBust: false })
.then((dataUrl) => {
const link = document.createElement("a");
link.download = enno+".png";
link.href = dataUrl;
link.click();
DispRef.current[index].style.display="none";
elementRef.current[index].style.borderRadius="14.5207px 14.5207px 0px 0px";
})
.catch((err) => {
console.log(err);
});*/
}
const popUpHandler=(event,index)=>{
// console.log("popUpHandler called");
console.log(event.target.parentElement.id);
console.log(event.target.id);
if(event.target.parentElement.id||event.target.id){
console.log("pop called");
getDiscountcardService();
}
}
const showServices=(index)=>{
console.log(itemRef.current[index]);
console.log(itemRef.current[index].className);
if(itemRef.current[index])
{
if(itemRef1.current[index]){
itemRef1.current[index].style.display="block";
console.log(itemRef1.current[index].childNodes);
}
}
}
const handleContinue=(e)=>{
// console.log("handle continue clicked");
setsubServicevalue('');
console.log("service",Servicevalue);
console.log("subservice",subServicevalue);
if(Servicevalue===undefined||subServicevalue===undefined){
console.log('please select category');
toast.warning("Please select Service!", { draggable: false })
return;
}
/*this condtion has to check*/
if(subServicevalue===''||subServicevalue===undefined){
console.log('please select sub category');
toast.warning("Please select sub Service!", { draggable: false })
return;
}
if(subServicevalue!=undefined&&subServicevalue!=undefined){
navigate('/discount_card/provider_list');
localStorage.setItem('service',Servicevalue);
localStorage.setItem('subservice',subServicevalue);
}
}
return (
<div >
<ToastContainer />
<div style={{display:'flex', padding: 20}}>
<div>
<a href="https://www.abcdefghijklmnopqrstuvwxyz.com" style={{color:'black'}}> <FiArrowLeft style={{ height: 25, width: 25, marginRight: 20 }}></FiArrowLeft></a>
{/* <FiArrowLeft onClick={() => navigate('/discount_card')} style={{ height: 25, width: 25, marginRight: 20 }}></FiArrowLeft> */}
</div>
<div><span style={{ fontSize: 18, fontWeight: 'bold', }}>Discount E-Cards</span></div>
</div>
{Details.length===0 && setLoading==true?<div style={{display:'flex',justifyContent:'center',padding:30,backgroundColor:'white'}}>
{/* <Spinner animation="border" /> */}
<Box sx={{ display: 'flex' }}>
<CircularProgress />
</Box>
</div>:<>
{Details.map((info,index)=> {
return(
// `container${info.member_name}`
<div key={info.member_name}>
<div className={maincss.container} ref={el=>{elementRef.current[index]=el}}
onClick={(e)=>{
// e.stopPropagation()
popUpHandler(e,index)}} id={`container${index}`}
>
{/* <div className={maincss.wellnesscard}>WELLNESS Card</div>
<div className="item2" ><img style={{ height:18,}} src={logo}></img></div> */}
<div className={maincss.member} >Member Name</div>
<div className={maincss.memberdetails}>{info.member_name}</div>
<div className={maincss.member}>ENROLLMENT</div>
<div className={maincss.memberdetails}>{info.enrollment_number}</div>
<div className={maincss.member}>DATE OF BIRTH</div>
<div className={maincss.memberdetails}>{info.date_of_birth}</div>
<div className={maincss.member}>GENDER</div>
<div className={maincss.memberdetails}>{info.gender}</div>
<div className={maincss.member}>RELATIONSHIP</div>
<div className={maincss.memberdetails}>{info.relationship}</div>
<div className={maincss.member}>VALIDAITY</div>
<div className={maincss.memberdetails} style={{fontSize:'.6em'}}>{info.validity}</div>
<div className={maincss.member} >SERVICE NAME</div>
<div className={maincss.memberdetails} style={{fontSize:'.6em'}}>{info.service_name}</div>
{/* <div style={{height:'4vh',borderRadius: '0px 0px 14.5207px 14.5207px',display:'none',pointerEvents: 'none' }} id={`Disp${index}`} ref={el=>{DispRef.current[index]=el} } >
</div> */}
</div>
<div className={maincss.downloadsharesection}>
<div className={maincss.member} style={{borderTop:'1px solid rgba(0, 112, 113, 0.2)',width:'50vw', marginLeft:'25vw'}} id={`D${index}`}><img src={download} style={{ height:25}} onClick={()=>downloadCard(index,info.enrollment_number)}/></div>
</div>
{/* <div className={maincss.downloadsharesection}>
<div className={maincss.member} style={{borderTop:'1px solid rgba(0, 112, 113, 0.2)',width:'50vw'}} id={`D${index}`}><img src={download} style={{ height:25}} onClick={()=>downloadCard(index,info.enrollment_number)}/></div>
<div className={maincss.member} style={{borderTop:'1px solid rgba(0, 112, 113, 0.2)',borderLeft:'1px solid rgba(0, 112, 113, 0.2)'}}><img src={share} style={{ height:25}}/></div>
</div> */}
</div>
)})}
<Modal
open={show}
size='lg'
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<div style={{display:'flex',justifyContent:"flex-end"}}>
<AiFillCloseCircle onClick={()=>{setShow(false)}} style={{ height: 30, width: 30,backgroundColor:'none'}}></AiFillCloseCircle>
</div>
<Typography style={{fontFamily: 'Manrope',
fontStyle: 'normal',
fontWeight: '500',
fontSize: '18px',
lineHeight: '24px',
color: '#202020',}}>
Of which feature would you like to view the discounts?</Typography>
<div >
{Service?Object.keys(Service).map((e,index)=>
<div style={{display:'flex',alignItems:'flex-start'}} key={e} >
{/* ref={el=>{itemRef.current[index]=el}} */}
<div style={{padding:'.3vh'}} >
<input type="radio" name='Serviceradio' id={`Serviceradio${index}`}
ref={el=>{itemRef.current[index]=el}} className={e}
onChange={()=>{setServicevalue(e);
if(Service[Object.keys(Service)[index]].length===1){
console.log("length is",Service[Object.keys(Service)[index]].length);
setsubServicevalue(e)
}
else{
setsubServicevalue('');
}
showServices(index)
}}/></div>
<div > {e} </div>
{/* display:'none' */}
{/* border:'1px solid red',backgroundColor:'blue' */}
{/* {(Service[Object.keys(Service)[index]].length)>1&&'hello'} */}
{(Service[Object.keys(Service)[index]].length)>1?
<div style={{marginTop:'2vh',display:'none',marginLeft:'-15vw'}}
ref={el=>{itemRef1.current[index]=el}} id={`${e}`} >
<div>{Service[Object.keys(Service)[index]].map(el=>
<div style={{display:'flex',marginTop:'1vh',marginRight:'5vw',}} key={el}>
<div><input type="radio" name='Serviceradio' className='Childradio' id={`${el}`}
onChange={()=>{setServicevalue(e);setsubServicevalue(el);showServices(index)}}
/></div>
<div>{el}</div>
</div>
)}
</div>
</div>
:''}
</div>
):''
}
</div>
<Button style={{background: '#007071',
borderRadius: '10px',margin:'auto',width: '70vw',
height: '48px'}} onClick={handleContinue}>
Continue
</Button>
</Box>
</Modal>
</>}
</div>
)
}
Comments
Post a Comment