From b53de67c6f19a6e719aa95130292bc3f1202aabb Mon Sep 17 00:00:00 2001
From: Vencislav Atanasov <git@6bez10.info>
Date: Sat, 21 Sep 2024 23:14:13 +0300
Subject: [PATCH] Fix rendering of schedule tracks, use CSS classes from the
 old template

---
 src/Schedule.jsx | 157 +++++++++++++++++++++++++----------------------
 1 file changed, 84 insertions(+), 73 deletions(-)

diff --git a/src/Schedule.jsx b/src/Schedule.jsx
index a692817..3b6ca16 100644
--- a/src/Schedule.jsx
+++ b/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 && <>
-                            /&#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>
-                {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 && <>
+                                /&#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>
-                    {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>
     </>);
 }