72626a6c42
* Rename logo and add 32x32 version * Set timer icon if a timer is running * Do not query activities on initialization * Show timer in bubble if timed activity exists * Pass timed activity to App * Code cleanup * Show timer view and stop timer * Make hours optional * Use booked seconds instead of hours * Add type submit to form button * Define colors as sass variables⎄ * Style timer view * Show start timer submit label * Update view layouts and content * Update version and changelog * Dyanically set iframe height * Reduce h1 font size * Add svg webpack loader * Parse empty string (TimeInputParser) * Forward ref in Popup component * Start time on current day only, format buttons * Improve styling * Set standard height as iframe default height, validate form * Upgrade packages to supress react warning * Show activity form in popup after timer was stoped * Use stop-watch icon in timer view * Fix empty description * Close TimerView if timer stopped for current service * Style timerview * Improve timer view styling * qw/setting-time-tracking-hh-mm (#24) * Format duration depending on settingTimeTrackingHHMM * Fix formatDuation without second argument * Fix time format after updating bubble * Add tests for formatDuration
46 lines
1.5 KiB
JavaScript
46 lines
1.5 KiB
JavaScript
import React from "react"
|
|
import PropTypes from "prop-types"
|
|
import Timer from "components/shared/Timer"
|
|
import { parseISO } from "date-fns"
|
|
import StopWatch from "components/shared/StopWatch"
|
|
|
|
export default function TimerView({ timedActivity, onStopTimer }) {
|
|
const handleStopTimer = () => {
|
|
onStopTimer(timedActivity)
|
|
}
|
|
|
|
return (
|
|
<div className="moco-bx-timer-view">
|
|
<p>
|
|
<span className="moco-bx-single-line text-secondary">{timedActivity.customer_name}</span>
|
|
<br />
|
|
<span className="moco-bx-single-line">{timedActivity.assignment_name}</span>
|
|
<br />
|
|
<span className="moco-bx-single-line">{timedActivity.task_name}</span>
|
|
</p>
|
|
<h2>{timedActivity.description}</h2>
|
|
<Timer
|
|
className="timer text-red"
|
|
startedAt={parseISO(timedActivity.timer_started_at)}
|
|
offset={timedActivity.seconds}
|
|
style={{ fontSize: "36px", display: "inline-block" }}
|
|
/>
|
|
<button className="moco-bx-btn btn-stop-timer" onClick={handleStopTimer}>
|
|
<StopWatch />
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
TimerView.propTypes = {
|
|
timedActivity: PropTypes.shape({
|
|
customer_name: PropTypes.string.isRequired,
|
|
assignment_name: PropTypes.string.isRequired,
|
|
task_name: PropTypes.string.isRequired,
|
|
description: PropTypes.string,
|
|
timer_started_at: PropTypes.string.isRequired,
|
|
seconds: PropTypes.number.isRequired,
|
|
}).isRequired,
|
|
onStopTimer: PropTypes.func.isRequired,
|
|
}
|