Skip to content

Commit 0e5cbb9

Browse files
samuelcolvinsamuelcolvin
committed
fixing sam's comments
1 parent 6b10f6d commit 0e5cbb9

File tree

9 files changed

+113
-122
lines changed

9 files changed

+113
-122
lines changed

‎src/components/appointments/Appointments.js‎

Lines changed: 19 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,46 @@
11
import React, { Component } from 'react'
22
import {Link, Route} from 'react-router-dom'
3-
import ReactTooltip from 'react-tooltip'
43
import {colour_contrast, group_by} from '../../utils'
54
import {If, Bull} from '../shared/Tools'
6-
import {CalendarCheck, CalendarPlus, CalendarTimes} from '../shared/Svgs'
75
import AptModal from './AptModal'
86

97
const LS_KEY = '_tcs_user_data_'
10-
// matches value in appointments.scss
11-
const NARROW = 750
128

139
const group_appointments = apts => {
1410
// group appointments by month then day
15-
return group_by(apts, a => a.start.match(/\d{4}-\d{2}/)[0])
11+
return group_by(apts, a => a.start.substr(0, 7))
1612
.map(apts_ => ({
1713
date: apts_[0].start,
18-
appointments: group_by(apts_, a => a.start.match(/\d{4}-\d{2}-\d{2}/)[0])
14+
appointments: group_by(apts_, a => a.start.substr(0, 10))
1915
}))
2016
}
2117

2218
const Apt = ({apt, props, appointment_attendees}) => {
2319
const full = apt.attendees_max === apt.attendees_count
24-
const narrow = window.innerWidth < NARROW
25-
const colour = full ? '#CCC' : apt.service_colour
26-
let Icon, tip
20+
let status
2721
const spaces_ctx = {spaces: apt.attendees_max - apt.attendees_count}
2822
if (appointment_attendees && appointment_attendees[apt.id] !== undefined) {
29-
Icon = CalendarCheck
30-
tip = props.config.get_text(full ? 'no_spaces_attending' : 'spaces_attending', spaces_ctx)
23+
status = props.config.get_text(full ? 'no_spaces_attending' : 'spaces_attending', spaces_ctx)
3124
} else {
32-
Icon = full ? CalendarTimes : CalendarPlus
33-
tip = props.config.get_text(full ? 'no_spaces' : 'spaces', spaces_ctx)
25+
status = props.config.get_text(full ? 'no_spaces' : 'spaces', spaces_ctx)
3426
}
3527
return (
3628
<Link to={props.root.url(`appointment/${apt.link}`)} className="tcs-item">
37-
<div className={`tcs-apt ${colour_contrast(colour)}`} style={{background: colour}} data-tip={tip}>
38-
<div>
39-
<Icon/>
40-
<span>{props.config.date_fns.format(apt.start, 'HH:mm')}</span>
41-
<span>{apt.topic}</span>
42-
{narrow && <br/>}
43-
<span>({apt.service_name})</span>
29+
<div className={`tcs-apt ${colour_contrast(apt.service_colour)}`} style={{background: apt.service_colour}}>
30+
<div style={{fontWeight: 700, marginRight: 10}}>
31+
{props.config.date_fns.format(apt.start, 'HH:mm')}
32+
</div>
33+
<div className="tcs-truncate">
34+
{apt.topic}<Bull/>{apt.service_name}
35+
</div>
36+
<div className="tcs-right" style={{fontWeight: 700}}>
37+
{props.config.format_money(apt.price)}
38+
</div>
39+
<div className="tcs-truncate" style={{gridColumn: 2}}>
40+
{status}
4441
</div>
4542
<div className="tcs-right">
46-
<span>{props.config.format_time_diff(apt.finish, apt.start)}</span>
47-
{narrow ? <br/> :<Bull/>}
48-
<span>{props.config.format_money(apt.price)}</span>
43+
{props.config.format_duration(apt.finish, apt.start)}
4944
</div>
5045
</div>
5146
</Link>
@@ -57,9 +52,8 @@ const AptDayGroup = ({appointments, props, appointment_attendees}) => {
5752
return (
5853
<div className="tcs-apt-group-day">
5954
<div className="tcs-day">
60-
{props.config.date_fns.format(first_apt.start, 'Do')}
61-
<br/>
6255
{props.config.date_fns.format(first_apt.start, 'ddd')}
56+
<div className="tcs-day-no">{props.config.date_fns.format(first_apt.start, 'd')}</div>
6357
</div>
6458
<div>
6559
{appointments.map(apt => (
@@ -114,7 +108,6 @@ class Appointments extends Component {
114108
appointments,
115109
more_pages: appointments.count > appointments.results.length + on_previous_pages,
116110
})
117-
ReactTooltip.rebuild()
118111
}
119112

120113
signin () {
@@ -182,7 +175,6 @@ class Appointments extends Component {
182175
</div>
183176
))}
184177

185-
<ReactTooltip effect="solid"/>
186178
<If v={this.state.page > 1 || this.state.more_pages}>
187179
<div className="tcs-pagination">
188180
<Link

‎src/components/appointments/AptModal.js‎

Lines changed: 34 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,40 @@
11
import React, { Component } from 'react'
2-
import {If, DetailGrid, Detail, DisplayExtraAttrs} from '../shared/Tools'
3-
import {Tick} from '../shared/Svgs'
2+
import {If, IfElse, DisplayExtraAttrs} from '../shared/Tools'
3+
import {Tick, CalendarPlus, CalendarTimes} from '../shared/Svgs'
44
import Modal from '../shared/Modal'
55

66
const get_attendees = (appointment_attendees, apt_id) => (appointment_attendees && appointment_attendees[apt_id]) || []
77
const NEW_STUDENT_ID = 999999999
8+
const DATE_FMT = 'MMM Do h:m a'
89

9-
const AptDetails = ({apt, spaces_available, props}) => (
10-
<div className="tcs-modal-flex">
11-
<div className="tcs-extra">
12-
<div className="tcs-price">
13-
{props.config.format_money(apt.price)}
14-
<div className="tcs-label">{props.config.get_text('price')}</div>
10+
11+
const AptDetails = ({apt, spaces_available, attending, props}) => {
12+
const c = props.config
13+
const CalendarIcon = spaces_available ? CalendarPlus : CalendarTimes
14+
return (
15+
<div>
16+
<div className={`tcs-apt-details ${spaces_available ? 'tcs-bookable' : ''}`}>
17+
<div>
18+
<CalendarIcon/>
19+
</div>
20+
<div className="tcs-price">
21+
{c.format_money(apt.price)}
22+
</div>
23+
<div>
24+
{c.get_text(spaces_available === 0 ? 'no_spaces' : 'spaces', {spaces: spaces_available})}
25+
</div>
26+
<IfElse v={apt.start.substr(0, 10) === apt.finish.substr(0, 10)}>
27+
<div>
28+
{c.date_fns.format(apt.start, DATE_FMT)} &bull; {c.format_duration(apt.finish, apt.start)}
29+
</div>
30+
<div>
31+
{c.date_fns.format(apt.start, DATE_FMT)} - {c.date_fns.format(apt.finish, DATE_FMT)}
32+
</div>
33+
</IfElse>
1534
</div>
1635
</div>
17-
<div className="tcs-content">
18-
<DetailGrid>
19-
<Detail label="job" config={props.config}>{apt.service_name}</Detail>
20-
{apt.attendees_max && <Detail label="spaces_available" config={props.config}>{spaces_available}</Detail>}
21-
<Detail label="start" config={props.config} className="tcs-new-line">
22-
{props.config.format_datetime(apt.start)}
23-
</Detail>
24-
<Detail label="finish" config={props.config}>{props.config.format_datetime(apt.finish)}</Detail>
25-
{apt.location && <Detail label="location" config={props.config}>{apt.location}</Detail>}
26-
</DetailGrid>
27-
</div>
28-
</div>
29-
)
36+
)
37+
}
3038

3139
const AddExisting = ({students, book, booking_allowed, get_text}) => (
3240
students && students.length > 0 &&
@@ -171,15 +179,18 @@ class AptModal extends Component {
171179
const title = (
172180
<span>
173181
<span className="tcs-circle" style={{background: apt.service_colour}}/>
174-
{apt.topic}
182+
{apt.topic} &bull; {apt.service_name}
175183
</span>
176184
)
177185
const students = this.get_students()
178186
const spaces_available = apt.attendees_max - apt.attendees_count - this.state.extra_attendees
179187
const booking_allowed = this.state.booking_allowed && spaces_available > 0
180188
return (
181189
<Modal history={this.props.history} title={title} last_url={this.props.last_url} flex={false}>
182-
<AptDetails apt={apt} spaces_available={spaces_available} props={this.props}/>
190+
<AptDetails apt={apt}
191+
spaces_available={spaces_available}
192+
attending={Boolean(this.state.display_data && this.state.attendees)}
193+
props={this.props}/>
183194
<div>
184195
<DisplayExtraAttrs extra_attributes={apt.service_extra_attributes}/>
185196
<div className="tcs-book">

‎src/components/shared/Tools.js‎

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -46,19 +46,6 @@ export class AnimateLink extends Component {
4646
}
4747
}
4848

49-
export const DetailGrid = ({children}) => (
50-
<div className="tcs-details">
51-
{children}
52-
</div>
53-
)
54-
55-
export const Detail = ({label, children,config, className}) => (
56-
<div className={`tcs-detail ${className || ''}`}>
57-
<div className="tcs-label">{config.get_text(label)}</div>
58-
<div className="tcs-value">{children}</div>
59-
</div>
60-
)
61-
6249
export const DisplayExtraAttrs = ({extra_attributes}) => (
6350
<div>
6451
{extra_attributes && extra_attributes.map((attr, i) => (
@@ -74,4 +61,4 @@ export const DisplayExtraAttrs = ({extra_attributes}) => (
7461
</div>
7562
)
7663

77-
export const Bull = () => <span className="tcs-bull">&bull;</span>
64+
export const Bull = ({style}) => <span className="tcs-bull" style={style}>&bull;</span>

‎src/formatting.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,7 @@ export function format_date (ts) {
2525
return this.date_fns.format(new Date(ts), this.format.date)
2626
}
2727

28-
export function format_datetime (ts) {
29-
return this.date_fns.format(new Date(ts), this.format.datetime)
30-
}
31-
32-
export function format_time_diff (ts1, ts2) {
28+
export function format_duration (ts1, ts2) {
3329
const d1 = new Date(ts1)
3430
const d2 = new Date(ts2)
3531
let minutes = Math.round((d1 - d2) / 60000)

‎src/index.js‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import './main.scss'
77
import App from './components/App'
88
import {BrowserRouter, HashRouter} from 'react-router-dom'
99
import {auto_url_root, get_company_options} from './utils'
10-
import {format_date, format_datetime, format_money, format_time_diff, get_text} from './formatting'
10+
import {format_money, format_duration, get_text} from './formatting'
1111

1212
const raven_config = {
1313
release: process.env.REACT_APP_RELEASE,
@@ -53,14 +53,14 @@ const STRINGS = {
5353
book_appointment_button: 'Book Lesson',
5454
add_to_lesson: 'Add to Lesson',
5555
diff_minutes: '{minutes} mins',
56-
diff_1hour: '1 hr',
57-
diff_1hour_minutes: '1 hr {minutes} mins',
58-
diff_hours: '{hours} hrs',
59-
diff_hours_minutes: '{hours} hrs {minutes} mins',
56+
diff_1hour: '1 hour',
57+
diff_1hour_minutes: '1 hour {minutes} mins',
58+
diff_hours: '{hours} hours',
59+
diff_hours_minutes: '{hours} hours {minutes} mins',
6060
spaces: '{spaces} spaces available',
6161
no_spaces: 'No spaces available',
62-
spaces_attending: 'Already attending, {spaces} more spaces available',
63-
no_spaces_attending: 'Already attending, no more spaces available',
62+
spaces_attending: "You're already attending, {spaces} more spaces available",
63+
no_spaces_attending: "You're already attending, no more spaces available",
6464
add_existing_students: 'Add your existing Students to the lesson',
6565
add_new_student: 'Add a new Student to the lesson',
6666
appointment_not_found: 'Appointment not Found',
@@ -151,9 +151,7 @@ window.socket = async function (public_key, config) {
151151
date: 'DD/MM/YYYY'
152152
}
153153
config.date_fns = {format}
154-
config.format_date = (config.date_format || format_date).bind(config)
155-
config.format_datetime = (config.format_datetime || format_datetime).bind(config)
156-
config.format_time_diff = (config.format_time_diff || format_time_diff).bind(config)
154+
config.format_duration = (config.format_duration || format_duration).bind(config)
157155
config.format_money = (config.format_money || format_money).bind(config)
158156

159157
const el = document.querySelector(config.element)

‎src/styles/appointments.scss‎

Lines changed: 35 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -21,34 +21,26 @@
2121
font-size: 18px;
2222
margin-right: 12px;
2323
padding-right: 12px;
24+
.tcs-day-no {
25+
font-size: 26px;
26+
}
2427
@media(max-width: $window-small) {
2528
margin-right: 6px;
2629
padding-right: 6px;
2730
}
2831
}
2932
.tcs-apt {
3033
margin: 0 0 8px;
31-
padding: 8px 6px 8px 10px;
34+
padding: 6px 6px 6px 10px;
3235
border-radius: $border-radius;
3336
display: grid;
34-
grid-template-columns: auto auto;
37+
// grid-template-columns: 50px 2fr 1fr;
38+
grid-template-columns: auto 1fr auto;
3539
color: black;
3640
vertical-align: top;
37-
.tcs-svg {
38-
margin-right: 5px;
39-
@media(max-width: $window-small) {
40-
display: none;
41-
}
42-
}
43-
span {
44-
margin-right: 5px;
45-
}
4641
&.dark {
4742
color: white;
4843
}
49-
.tcs-right {
50-
text-align: right;
51-
}
5244
}
5345
.tcs-item:last-child .tcs-apt {
5446
margin-bottom: 0;
@@ -70,14 +62,35 @@ $circle-size: 22px;
7062
font-size: 14px;
7163
}
7264

73-
.tcs-price {
74-
font-size: 30px;
75-
.tcs-label {
76-
font-size: 14px;
77-
color: $label-colour;
65+
$colour-positive: #83aa68;
66+
.tcs-apt-details {
67+
margin: 0 auto;
68+
max-width: 400px;
69+
min-height: 100px;
70+
background: #AAA;
71+
color: #fff;
72+
border-radius: 6px;
73+
padding: 8px;
74+
text-align: center;
75+
font-size: 18px;
76+
&.tcs-bookable {
77+
background: #83aa68;
78+
}
79+
> div {
80+
padding-bottom: 4px;
81+
}
82+
.tcs-price {
83+
font-size: 28px;
84+
font-weight: 700;
85+
}
86+
.tcs-svg {
87+
fill: white;
88+
width: 30px;
89+
height: 30px;
7890
}
7991
}
8092

93+
8194
.tcs-signout {
8295
color: $brand-colour;
8396
cursor: pointer;
@@ -94,6 +107,8 @@ $student-border-radius: 5px;
94107
$student-border-colour: #D8D8D8;
95108
.tcs-book {
96109
padding-top: 10px;
110+
margin: 0 auto;
111+
max-width: 600px;
97112
.tcs-book-existing {
98113
margin-bottom: 15px;
99114
}
@@ -122,7 +137,7 @@ $student-border-colour: #D8D8D8;
122137
height: $student-height;
123138
}
124139
.tcs-already-added {
125-
background: #12a012;
140+
background: $colour-positive;
126141
color: white;
127142
text-align: center;
128143
padding: 8px 12px;

‎src/styles/modal.scss‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -45,13 +45,10 @@
4545
font-size: 29px;
4646
font-weight: 400;
4747
height: 39px;
48-
white-space: nowrap;
49-
overflow: hidden;
50-
text-overflow: ellipsis;
5148
width: calc(100% - 40px);
5249
@media(max-width: $window-small) {
53-
font-size: 26px;
54-
height: 35px;
50+
font-size: 22px;
51+
height: 31px;
5552
}
5653
}
5754
.tcs-close {

‎src/styles/shared.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,16 @@
11
@import '../conf';
22

3+
.tcs-right {
4+
text-align: right;
5+
}
6+
7+
.tcs-truncate {
8+
white-space: nowrap;
9+
overflow: hidden;
10+
text-overflow: ellipsis;
11+
padding-right: 3px;
12+
}
13+
314
svg.tcs-svg {
415
width: $svg-size;
516
height: $svg-size;

0 commit comments

Comments
 (0)