Client: fix #2

This commit is contained in:
Sam 2018-06-04 19:29:26 +02:00
parent 747f0ad3f6
commit 0ad091c48a
4 changed files with 29 additions and 17 deletions

View File

@ -165,6 +165,10 @@ input, textarea {
color: lightgrey; color: lightgrey;
} }
.img-disabled {
opacity: .4;
}
.record-logo { .record-logo {
margin-right: 5px; margin-right: 5px;
max-width: 25px; max-width: 25px;

View File

@ -24,7 +24,7 @@ export default function RecordsCard (props) {
</div> </div>
<div className="card-body"> <div className="card-body">
{Object.keys(recordsBySport).length === 0 {Object.keys(recordsBySport).length === 0
? 'No records.' ? 'No records'
: (Object.keys(recordsBySport).map(sportLabel => ( : (Object.keys(recordsBySport).map(sportLabel => (
<table <table
className="table table-borderless record-table" className="table table-borderless record-table"

View File

@ -7,10 +7,14 @@ import { Link } from 'react-router-dom'
import { getMonthActivities } from '../../actions/activities' import { getMonthActivities } from '../../actions/activities'
const getStartAndEndMonth = date => ({ const getStartAndEndMonth = date => {
start: dateFns.startOfMonth(date), const monthStart = dateFns.startOfMonth(date)
end: dateFns.endOfMonth(date), const monthEnd = dateFns.endOfMonth(date)
}) return {
start: dateFns.startOfWeek(monthStart),
end: dateFns.endOfWeek(monthEnd),
}
}
class Calendar extends React.Component { class Calendar extends React.Component {
@ -19,13 +23,13 @@ class Calendar extends React.Component {
const calendarDate = new Date() const calendarDate = new Date()
this.state = { this.state = {
currentMonth: calendarDate, currentMonth: calendarDate,
monthStart: getStartAndEndMonth(calendarDate).start, startDate: getStartAndEndMonth(calendarDate).start,
monthEnd: getStartAndEndMonth(calendarDate).end, endDate: getStartAndEndMonth(calendarDate).end,
} }
} }
componentDidMount() { componentDidMount() {
this.props.loadMonthActivities(this.state.monthStart, this.state.monthEnd) this.props.loadMonthActivities(this.state.startDate, this.state.endDate)
} }
renderHeader() { renderHeader() {
@ -56,7 +60,7 @@ class Calendar extends React.Component {
renderDays() { renderDays() {
const dateFormat = 'ddd' const dateFormat = 'ddd'
const days = [] const days = []
const startDate = dateFns.startOfWeek(this.state.currentMonth) const { startDate } = this.state
for (let i = 0; i < 7; i++) { for (let i = 0; i < 7; i++) {
days.push( days.push(
@ -78,10 +82,8 @@ class Calendar extends React.Component {
} }
renderCells() { renderCells() {
const { monthStart, monthEnd } = this.state const { currentMonth, startDate, endDate } = this.state
const { sports } = this.props const { sports } = this.props
const startDate = dateFns.startOfWeek(monthStart)
const endDate = dateFns.endOfWeek(monthEnd)
const dateFormat = 'D' const dateFormat = 'D'
const rows = [] const rows = []
@ -94,13 +96,19 @@ class Calendar extends React.Component {
for (let i = 0; i < 7; i++) { for (let i = 0; i < 7; i++) {
formattedDate = dateFns.format(day, dateFormat) formattedDate = dateFns.format(day, dateFormat)
const dayActivities = this.filterActivities(day) const dayActivities = this.filterActivities(day)
const isDisabled = dateFns.isSameMonth(day, currentMonth)
? ''
: 'disabled'
days.push( days.push(
<div className="col cell" key={day} > <div
className={`col cell img-${isDisabled}`}
key={day}
>
<span className="number">{formattedDate}</span> <span className="number">{formattedDate}</span>
{dayActivities.map(act => ( {dayActivities.map(act => (
<Link key={act.id} to={`/activities/${act.id}`}> <Link key={act.id} to={`/activities/${act.id}`}>
<img <img
className="activity-sport" className={`activity-sport ${isDisabled}`}
src={sports src={sports
.filter(s => s.id === act.sport_id) .filter(s => s.id === act.sport_id)
.map(s => s.img)} .map(s => s.img)}
@ -126,8 +134,8 @@ class Calendar extends React.Component {
const { start, end } = getStartAndEndMonth(calendarDate) const { start, end } = getStartAndEndMonth(calendarDate)
this.setState({ this.setState({
currentMonth: calendarDate, currentMonth: calendarDate,
monthStart: start, startDate: start,
monthEnd: end, endDate: end,
}) })
this.props.loadMonthActivities(start, end) this.props.loadMonthActivities(start, end)
} }

View File

@ -17,7 +17,7 @@ export default class MpwoApi {
}${ }${
data.order ? `&order=${data.order}` : '' data.order ? `&order=${data.order}` : ''
}${ }${
data.per_page ? `$per_page=${data.per_page}` : '' data.per_page ? `&per_page=${data.per_page}` : ''
}` }`
} }
const params = { const params = {