41 lines
1.2 KiB
JavaScript
41 lines
1.2 KiB
JavaScript
import React from "react"
|
|
import PropTypes from "prop-types"
|
|
import Timer from "components/shared/Timer"
|
|
import { parseISO } from "date-fns"
|
|
|
|
export default function TimerView({ timedActivity, onStopTimer }) {
|
|
const handleStopTimer = () => {
|
|
onStopTimer(timedActivity)
|
|
}
|
|
|
|
return (
|
|
<div className="moco-bx-timer-view">
|
|
<h3>
|
|
{timedActivity.customer_name}:<br />
|
|
{timedActivity.assignment_name}
|
|
</h3>
|
|
<h3>{timedActivity.task_name}</h3>
|
|
<br />
|
|
<Timer
|
|
startedAt={parseISO(timedActivity.timer_started_at)}
|
|
offset={timedActivity.seconds}
|
|
style={{ color: "red", fontSize: "60px", display: "inline-block" }}
|
|
/>
|
|
<button className="moco-bx-btn btn-stop-timer" onClick={handleStopTimer}>
|
|
Timer Stoppen
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
TimerView.propTypes = {
|
|
timedActivity: PropTypes.shape({
|
|
customer_name: PropTypes.string.isRequired,
|
|
assignment_name: PropTypes.string.isRequired,
|
|
task_name: PropTypes.string.isRequired,
|
|
timer_started_at: PropTypes.string.isRequired,
|
|
seconds: PropTypes.number.isRequired,
|
|
}).isRequired,
|
|
onStopTimer: PropTypes.func.isRequired,
|
|
}
|