Client: fix #2
This commit is contained in:
parent
747f0ad3f6
commit
0ad091c48a
@ -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;
|
||||||
|
@ -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"
|
||||||
|
@ -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)
|
||||||
}
|
}
|
||||||
|
@ -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 = {
|
||||||
|
Loading…
Reference in New Issue
Block a user