Site
/
schedule
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix rendering of schedule tracks, use CSS classes from the old template

This commit is contained in:
Vencislav Atanasov 2024-09-21 23:14:13 +03:00
parent 27f248ef7d
commit b53de67c6f
1 changed files with 84 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
src/Schedule.jsx
View File

@ -5,6 +5,8 @@ import { Fragment } from 'react';
import useScheduleTable from './hooks/useScheduleTable.js'; import useScheduleTable from './hooks/useScheduleTable.js';
import Event from './Event.jsx'; import Event from './Event.jsx';
import defaultSpeaker from './assets/default-speaker.png'; import defaultSpeaker from './assets/default-speaker.png';
import './Schedule.scss';
import { langs } from './constants.js';
export default function Schedule({ export default function Schedule({
conferenceId, conferenceId,
@ -32,83 +34,92 @@ export default function Schedule({
return (<> return (<>
{isLoading && <>Loading... <progress value={loadingProgress} /></>} {isLoading && <>Loading... <progress value={loadingProgress} /></>}
{halls && <table border="1"> <div className="schedule">
<thead> {halls && <table style={{
<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',
textAlign: 'center', 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 && <>
/&#8288;{speakers[speakerId].organisation}&#8288;/
</>}
</Fragment>).filter(item => !!item)})
</>}
</p>
{event.abstract && <p>
{event.abstract}
</p>}
<p style={{
textAlign: 'right',
}}> }}>
<strong> <thead>
<a href={event.feedback_url}>Submit feedback</a> <tr>
</strong> {header.map(hall => <th key={hall.id}>{hall.name}</th>)}
</p> </tr>
<hr /> </thead>
</section>)} <tbody>
{speakers && <> {rows.map(row => <tr key={row.id}>
<div> {row.cells.map(cell => <td key={cell.id} {...cell.attributes}>
{Object.entries(speakers).map(([speakerId, speaker]) => <div key={speakerId}> <Event {...cell.event} />
<a href={'#'.concat(getSpeakerName(speaker))}> </td>)}
<img width="100" height="100" src={defaultSpeaker} alt={getSpeakerName(speaker)} /> </tr>)}
</a> </tbody>
</div>)} <tfoot>
</div> <tr>
{Object.entries(speakers).map(([speakerId, speaker]) => <div key={speakerId} id={getSpeakerName(speaker)}> {header.map(hall => <th key={hall.id}>{hall.name}</th>)}
<img width="100" height="100" src={defaultSpeaker} alt={getSpeakerName(speaker)}/> </tr>
<h3>{getSpeakerName(speaker)}</h3> </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 && <>
/&#8288;{speakers[speakerId].organisation}&#8288;/
</>}
</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> <div>
{speaker.twitter && <a href={'https://twitter.com/'.concat(speaker.twitter)}> {Object.entries(speakers).map(([speakerId, speaker]) => <div key={speakerId}>
twitter <a href={'#'.concat(getSpeakerName(speaker))}>
</a>} <img width="100" height="100" src={defaultSpeaker} alt={getSpeakerName(speaker)} />
{speaker.github && <a href={'https://github.com/'.concat(speaker.github)}> </a>
github </div>)}
</a>}
</div> </div>
<p>{speaker.biography}</p> {Object.entries(speakers).map(([speakerId, speaker]) => <div key={speakerId} id={getSpeakerName(speaker)}>
</div>)} <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>
</>); </>);
} }