WrenchBoard/WrenchBoardMainSite
2
0
Fork 0
Code Issues Pull Requests 1 Releases Activity

current job list overflow fixed and count down added #10

Merged
ameye merged 1 commits from job-listing into master 2023-06-27 22:44:54 +00:00
Conversation 0 Commits 1 Files Changed 4
+100 -30
4 changed files with 100 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Services/JobsData.js
+2 -2
View File
@@ -16,8 +16,8 @@ async function JobsData() {
});
}
*/
let response = await Axios.post(process.env.REACT_APP_AUX_ENDPOINT + "/startjoblist", callData);
return response.data.result_list;
let response = await Axios.post(process.env.REACT_APP_AUX_ENDPOINT+'/startjoblist', callData);
return await response;
}
export default JobsData;
src/assets/css/main.css
+2 -1
View File
@@ -2319,7 +2319,7 @@ p {
4.APPIE SERVOCE css
===========================*/
.appie-service-area {
background: #eef1f6;
background: #fbf4fe;
position: relative;
background-position: 92% 100%;
background-repeat: no-repeat;
@@ -3008,6 +3008,7 @@ p {
position: relative;
overflow: hidden;
z-index: 15;
background-color: #fbf4fe;
}
.appie-traffic-area .traffic-thumb {
position: absolute;
src/components/Helper/CountDownTimer.js
+72
View File
@@ -0,0 +1,72 @@
import React, { useEffect, useState } from 'react';
const CountDownTimer = ({ targetDate, aboutToExpire=false }) => {
const calculateTimeLeft = () => {
const difference = +new Date(targetDate) - +new Date();
let timeLeft = {};
if (difference > 0) {
timeLeft = {
days: Math.floor(difference / (1000 * 60 * 60 * 24)),
hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
minutes: Math.floor((difference / 1000 / 60) % 60),
seconds: Math.floor((difference / 1000) % 60)
};
}
return timeLeft;
};
const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
useEffect(() => {
const timer = setInterval(() => {
setTimeLeft(calculateTimeLeft());
}, 1000);
return () => clearTimeout(timer);
},[]);
const formatTime = (value) => {
return value.toString().padStart(2, '0');
};
const { days, hours, minutes, seconds } = timeLeft;
const newHours = hours+days*24
if (!days && !hours && !minutes && !seconds) {
return <span>{targetDate}</span>;
}
return (
<div>
<div>{formatTime(newHours)} : {formatTime(minutes)} : {formatTime(seconds)}</div>
<div>Hrs Min Sec</div>
{/* <span className='d-flex flex-column count-timer'>
<span>{formatTime(days)}</span>
<span>day(s)</span>
</span> */}
{/* <span className='d-flex flex-column count-timer'>
<span>{formatTime(newHours)}</span>
<span>hr(s)</span>
</span>
<span className='p-3'>:</span>
<span className='d-flex flex-column count-timer'>
<span>{formatTime(minutes)}</span>
<span>min(s)</span>
</span>
<span className='p-3'>:</span>
<span className='d-flex flex-column count-timer'>
<span>{formatTime(seconds)}</span>
<span>sec(s)</span>
</span> */}
</div>
);
};
export default CountDownTimer;
{/* <span>{days && <span>{formatTime(days)} days </span>}</span> */}
{/* <span>{hours && <span>{formatTime(hours)} hours </span>}</span> */}
{/* <span>{minutes && <span>{formatTime(minutes)} minutes </span>}</span> */}
{/* <span>{seconds && <span>{formatTime(seconds)} seconds </span>}</span> */}
src/components/HomeOne/RecentJobsOne.js
+24 -27
View File
@@ -4,6 +4,7 @@ import blogTwo from '../../assets/images/blog-2.jpg';
import blogThree from '../../assets/images/blog-3.jpg';
import JobsData from '../../Services/JobsData';
import getConfig from './../../Config/config'
import CountDownTimer from '../Helper/CountDownTimer';
class RecentJobsOne extends Component {
@@ -15,12 +16,15 @@ class RecentJobsOne extends Component {
async componentDidMount(){
// debugger;
const response = await JobsData();
this.setState({jobsDataResults:response});
JobsData().then(res => {
this.setState({jobsDataResults:res.data.result_list});
}).catch(err => {
console.log('startjoblist error', err)
})
}
titleLen(title){
let maxl = 58;
let maxl = 45;
title.replace('/', ' ');
title.replace('www.', '');
title.replace('.com', '');
@@ -62,12 +66,11 @@ titleLen(title){
return (<div className="col-lg-3 col-md-6">
<div
className="appie-single-service mt-30 wow animated fadeInUp boxBorder"
className="appie-single-service mt-30 wow animated fadeInUp boxBorder d-flex align-items-center"
data-wow-duration="3000ms"
data-wow-delay="200ms"
>
<div className="content">
<div className="content d-flex flex-column justify-content-between align-items-center" style={{height: '260px'}}>
<div className="titleBox">
<h3 className="title">
<a href={dashUrl}>
@@ -75,31 +78,25 @@ titleLen(title){
</a>
</h3>
</div>
<div><hr /></div>
<div className="blog-meta">
<ul>
<li className="expire">
<a href={dashUrl}><span className='font_red'> Expires : {postDt} </span></a>
</li>
</ul>
<div className='p-0 container-fluid'>
<div><hr /></div>
<div className="blog-meta">
<ul>
<li className="expire">
{/* <a href={dashUrl}><span className='font_red'> Expires : {postDt} </span></a> */}
<a href={dashUrl}><span className='font_red'> Expires : <CountDownTimer targetDate={postDt}/> </span></a>
</li>
</ul>
</div>
<div className='lmoreTxt'>
<a href={dashUrl}>
Learn More <i className="fal fa-arrow-right" />
</a>
</div>
</div>
<div className='lmoreTxt'>
<a href={dashUrl}>
Learn More <i className="fal fa-arrow-right" />
</a>
</div>
</div>
</div>
</div>)