2017-06-29 12:54:02 -06:00
|
|
|
import * as React from "react";
|
2017-07-21 15:00:18 -06:00
|
|
|
import { WeekRowProps, DayProps, DAYS } from "./interfaces";
|
2017-06-29 12:54:02 -06:00
|
|
|
import { toggleDay } from "./actions";
|
2019-04-02 13:59:37 -06:00
|
|
|
import { t } from "../../i18next_wrapper";
|
|
|
|
|
2017-06-29 12:54:02 -06:00
|
|
|
export function WeekRow({ index, dispatch, week }: WeekRowProps) {
|
|
|
|
return <div className="week-row">
|
|
|
|
<label className="week-label">{t("Week")} {index + 1}</label>
|
2020-04-23 13:12:04 -06:00
|
|
|
{DAYS.map(function (day, i) {
|
|
|
|
const id = `${index}-${day}`;
|
|
|
|
return <Day day={i + 1}
|
|
|
|
week={index}
|
|
|
|
dispatch={dispatch}
|
|
|
|
id={id}
|
|
|
|
key={id}
|
|
|
|
active={week.days[day]} />;
|
|
|
|
})}
|
2017-06-29 12:54:02 -06:00
|
|
|
</div>;
|
|
|
|
}
|
|
|
|
|
2017-08-28 05:49:13 -06:00
|
|
|
const select = (dispatch: Function, day: number, week: number) => () =>
|
2017-06-29 12:54:02 -06:00
|
|
|
dispatch(toggleDay({ day, week }));
|
|
|
|
|
|
|
|
function Day({ day, id, dispatch, week, active }: DayProps) {
|
|
|
|
return <div className="day-selector-wrapper">
|
|
|
|
<input type="checkbox"
|
|
|
|
id={id}
|
|
|
|
className="day"
|
2020-02-28 09:34:28 -07:00
|
|
|
name="day"
|
2017-06-29 12:54:02 -06:00
|
|
|
onClick={select(dispatch, day, week)}
|
|
|
|
checked={active}
|
2017-08-23 16:26:09 -06:00
|
|
|
readOnly={true} />
|
2017-06-29 12:54:02 -06:00
|
|
|
<label className="day-label left-most" htmlFor={id}>
|
2017-07-21 15:29:28 -06:00
|
|
|
{(week * 7) + day}
|
2017-06-29 12:54:02 -06:00
|
|
|
</label>
|
|
|
|
</div>;
|
|
|
|
}
|