Fix rendering of schedule tracks, use CSS classes from the old template
This commit is contained in:
Vencislav Atanasov
parent
27f248ef7d
commit
b53de67c6f
157
src/Schedule.jsx
157
src/Schedule.jsx
|
|
@ -5,6 +5,8 @@ import { Fragment } from 'react';
|
|||
import useScheduleTable from './hooks/useScheduleTable.js';
|
||||
import Event from './Event.jsx';
|
||||
import defaultSpeaker from './assets/default-speaker.png';
|
||||
import './Schedule.scss';
|
||||
import { langs } from './constants.js';
|
||||
|
||||
export default function Schedule({
|
||||
conferenceId,
|
||||
|
|
@ -32,83 +34,92 @@ export default function Schedule({
|
|||
|
||||
return (<>
|
||||
{isLoading && <>Loading... <progress value={loadingProgress} /></>}
|
||||
{halls && <table border="1">
|
||||
<thead>
|
||||
<tr>
|
||||
{header.map(hall => <th key={hall.id}>{hall.name}</th>)}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map(row => <tr key={row.id}>
|
||||
{row.cells.map(cell => <td key={cell.id} {...cell.attributes}>
|
||||
<Event {...cell.event} />
|
||||
</td>)}
|
||||
</tr>)}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
{header.map(hall => <th key={hall.id}>{hall.name}</th>)}
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>}
|
||||
{tracks && Object.entries(tracks).filter(([, track]) =>
|
||||
!isTrackHidden(track)
|
||||
).map(([trackId, track]) => <div key={trackId} style={{
|
||||
width: '100%',
|
||||
border: '1px solid black',
|
||||
<div className="schedule">
|
||||
{halls && <table style={{
|
||||
textAlign: 'center',
|
||||
margin: '4px 0',
|
||||
padding: '4px 0',
|
||||
}}>{track.name[lang]}
|
||||
</div>)}
|
||||
{events && tracks && Object.entries(events).map(([eventId, event]) => <section key={eventId} id={'lecture-'.concat(eventId)}>
|
||||
<p>
|
||||
<strong>{event.title}</strong>
|
||||
{event.participant_user_ids && !isTrackHidden(tracks[event.track_id]) && speakers && <>
|
||||
({event.participant_user_ids.map(speakerId => speakers[speakerId] && <Fragment key={speakerId}>
|
||||
<a key={speakerId} href={'#'.concat(getSpeakerName(speakers[speakerId]))}>
|
||||
{getSpeakerName(speakers[speakerId])}
|
||||
</a>
|
||||
{speakers[speakerId].organisation && <>
|
||||
/⁠{speakers[speakerId].organisation}⁠/
|
||||
</>}
|
||||
</Fragment>).filter(item => !!item)})
|
||||
</>}
|
||||
</p>
|
||||
{event.abstract && <p>
|
||||
{event.abstract}
|
||||
</p>}
|
||||
<p style={{
|
||||
textAlign: 'right',
|
||||
}}>
|
||||
<strong>
|
||||
<a href={event.feedback_url}>Submit feedback</a>
|
||||
</strong>
|
||||
</p>
|
||||
<hr />
|
||||
</section>)}
|
||||
{speakers && <>
|
||||
<div>
|
||||
{Object.entries(speakers).map(([speakerId, speaker]) => <div key={speakerId}>
|
||||
<a href={'#'.concat(getSpeakerName(speaker))}>
|
||||
<img width="100" height="100" src={defaultSpeaker} alt={getSpeakerName(speaker)} />
|
||||
</a>
|
||||
</div>)}
|
||||
</div>
|
||||
{Object.entries(speakers).map(([speakerId, speaker]) => <div key={speakerId} id={getSpeakerName(speaker)}>
|
||||
<img width="100" height="100" src={defaultSpeaker} alt={getSpeakerName(speaker)}/>
|
||||
<h3>{getSpeakerName(speaker)}</h3>
|
||||
<thead>
|
||||
<tr>
|
||||
{header.map(hall => <th key={hall.id}>{hall.name}</th>)}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map(row => <tr key={row.id}>
|
||||
{row.cells.map(cell => <td key={cell.id} {...cell.attributes}>
|
||||
<Event {...cell.event} />
|
||||
</td>)}
|
||||
</tr>)}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
{header.map(hall => <th key={hall.id}>{hall.name}</th>)}
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>}
|
||||
<div className="separator"/>
|
||||
{tracks && <table style={{
|
||||
textAlign: 'center',
|
||||
}}>
|
||||
<tbody>
|
||||
{Object.entries(tracks).filter(([, track]) =>
|
||||
!isTrackHidden(track)
|
||||
).map(([trackId, track]) => <tr key={trackId}>
|
||||
<td className={track.css_class}>{track.name[lang]}</td>
|
||||
</tr>)}
|
||||
{Object.entries(langs).map(([code, name]) => <tr key={code}>
|
||||
<td className={'schedule-'.concat(code)}>{name}</td>
|
||||
</tr>)}
|
||||
</tbody>
|
||||
</table>}
|
||||
{events && tracks && Object.entries(events).map(([eventId, event]) => <section key={eventId} id={'lecture-'.concat(eventId)}>
|
||||
<p>
|
||||
<strong>{event.title}</strong>
|
||||
{event.participant_user_ids && !isTrackHidden(tracks[event.track_id]) && speakers && <>
|
||||
({event.participant_user_ids.map(speakerId => speakers[speakerId] && <Fragment key={speakerId}>
|
||||
<a key={speakerId} href={'#'.concat(getSpeakerName(speakers[speakerId]))}>
|
||||
{getSpeakerName(speakers[speakerId])}
|
||||
</a>
|
||||
{speakers[speakerId].organisation && <>
|
||||
/⁠{speakers[speakerId].organisation}⁠/
|
||||
</>}
|
||||
</Fragment>).filter(item => !!item)})
|
||||
</>}
|
||||
</p>
|
||||
{event.abstract && <p>
|
||||
{event.abstract}
|
||||
</p>}
|
||||
<p style={{
|
||||
textAlign: 'right',
|
||||
}}>
|
||||
<strong>
|
||||
<a href={event.feedback_url}>Submit feedback</a>
|
||||
</strong>
|
||||
</p>
|
||||
<hr />
|
||||
</section>)}
|
||||
{speakers && <>
|
||||
<div>
|
||||
{speaker.twitter && <a href={'https://twitter.com/'.concat(speaker.twitter)}>
|
||||
twitter
|
||||
</a>}
|
||||
{speaker.github && <a href={'https://github.com/'.concat(speaker.github)}>
|
||||
github
|
||||
</a>}
|
||||
{Object.entries(speakers).map(([speakerId, speaker]) => <div key={speakerId}>
|
||||
<a href={'#'.concat(getSpeakerName(speaker))}>
|
||||
<img width="100" height="100" src={defaultSpeaker} alt={getSpeakerName(speaker)} />
|
||||
</a>
|
||||
</div>)}
|
||||
</div>
|
||||
<p>{speaker.biography}</p>
|
||||
</div>)}
|
||||
</>}
|
||||
{Object.entries(speakers).map(([speakerId, speaker]) => <div key={speakerId} id={getSpeakerName(speaker)}>
|
||||
<img width="100" height="100" src={defaultSpeaker} alt={getSpeakerName(speaker)}/>
|
||||
<h3>{getSpeakerName(speaker)}</h3>
|
||||
<div>
|
||||
{speaker.twitter && <a href={'https://twitter.com/'.concat(speaker.twitter)}>
|
||||
twitter
|
||||
</a>}
|
||||
{speaker.github && <a href={'https://github.com/'.concat(speaker.github)}>
|
||||
github
|
||||
</a>}
|
||||
</div>
|
||||
<p>{speaker.biography}</p>
|
||||
</div>)}
|
||||
</>}
|
||||
</div>
|
||||
</>);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue