myheats

Leaderboard.jsx (10353B)

---

 import { supabase } from './supabaseClient'
 import { exportLeaderboardToCSV, rankByHeat, getScores } from './utils'
 import { Fragment, useEffect, useState, useRef } from 'react'
 import Select from 'react-select'
 
 export async function getStartlistForHeats(heatIds) {
   return supabase.rpc('distinct_startlist', { 'heat_ids': heatIds })
 }
 
 async function getScoreForHeatAndAthlete(heatId, athleteId) {
   return supabase.from('scores').select(`
   id,
   athlete,
   judge,
   score
   `)
   .eq('heat', heatId)
   .eq('athlete', athleteId)
 }
 
 async function getScoreSummary(heatIds) {
   const startListWithScores = []
 
   const startlist = await getStartlistForHeats(heatIds)
 
   if (startlist.error !== null) {
     // fail silently & return empty startlist in case of errors
     return []
   }
 
   for (const i of startlist.data) {
     i.heats = []
 
     for (const h of heatIds) {
       const scores = await getScoreForHeatAndAthlete(h, i.athlete)
   
       const summary = await supabase.from('score_summary').select('score_summary')
       .eq('heat_id', h)
       .eq('athlete_id', i.athlete)
 
       if (summary.error === null) {
         // add heat results of athlete to startlist entry
         i.heats.push({
           heatId: h,
           scores: scores.data,
           summary: summary.data.length > 0 ? summary.data[0].score_summary : 0
         })
       }
       // else don't push any heats (fail silently)
 
       // find best/worst heat
       i.bestHeat = Math.max(...i.heats.map(h => h.summary))
       i.worstHeat = Math.min(...i.heats.map(h => h.summary))
 
       // sum up all totals across heats
       i.sum = i.heats.map(h => h.summary).reduce((a, b) => a + b, 0).toFixed(1)
     }
 
     startListWithScores.push(i)
   }
 
   return startListWithScores
 }
 
 async function newHeatFromLeaderboard(e, {leaderboard, rankingComp, selectHeatRef, selectRankRef}) {
   e.preventDefault()
 
   if (leaderboard.length === 0) {
     alert("Cannot create new heat from empty leaderboard. Select heats to display.")
     return
   }
 
   // Read the form data
   const formData = new FormData(e.target);
   const formJson = Object.fromEntries(formData.entries());
 
   // create new heat
   const { data, error } = await supabase
     .from('heats')
     .insert({
       name: formJson.name,
       location: formJson.location,
       // planned_start is an empty string if unset
       // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time
       planned_start: formJson.planned_start === '' ? null : formJson.planned_start
     })
     .select()
 
   if (error !== null) {
     alert(error.message)
     return
   }
 
   const sortedBoard = leaderboard.sort(rankByHeat(rankingComp))
   for (let i = 0; i < formJson.size && i < sortedBoard.length; i++ ) {
     // add top N athletes from current leaderboard to new heat
     await supabase
       .from('startlist')
       .insert({ heat: data[0].id, athlete: sortedBoard[i].athlete })
   }
 
   // clear values in selects to refresh list of heats
   selectHeatRef.current.clearValue()
   selectRankRef.current.clearValue()
   alert('Created new heat "' + formJson.name + '" with top ' + formJson.size + ' athletes')
 
   // todo: put heatOpts and rankOptions in state/useEffect again
   window.location.reload()
 }
 
 // export leaderboard with current ranking
 function ExportForm({leaderboard, heatSelection, rankingComp}) {
   return (
     <div className='exportForm'>
       <form method='post' onSubmit={e => exportLeaderboardToCSV(
         e,
         leaderboard,
         heatSelection,
         rankingComp)}>
         <button type='submit'>&#9663; export</button>
       </form>
     </div>
   )
 }
 
 function NewHeatForm(leaderboard, rankingComp, selectHeatRef, selectRankRef) {
   return (
     <div className='newHeatForm'>
       <h2>New Heat from top N</h2>
       <p>
         Create new heat with top N athletes from the sorted leaderboard (<i>* required</i>).
       </p>
       <form method='post' onSubmit={e => newHeatFromLeaderboard(
           e,
           leaderboard,
           rankingComp,
           selectHeatRef,
           selectRankRef
         )}>
         <table>
           <thead>
             <tr>
               <th>New heat name *</th>
               <th>Location</th>
               <th>Planned start</th>
               <th>Include top N</th>
               <td></td>
             </tr>
           </thead>
           <tbody>
             <tr>
               <td data-title='New heat name *'>
                 <input type='text' name='name' />
               </td>
               <td data-title='Location'>
                 <input type='text' name='location' />
               </td>
               <td data-title='Planned start'>
                 <input
                   type='time'
                   name='planned_start' />
               </td>
               <td data-title='Include top N'>
                 <input type='number' name='size' />
               </td>
               <td>
                 <button type='submit'>&#43; new</button>
               </td>
             </tr>
           </tbody>
         </table>
       </form>
     </div>
   )
 }
 
 function Leaderboard({session}) {
   const [loading, setLoading] = useState(false)
   const [leaderboard, setLeaderboard] = useState([])
   const [heatSelection, setHeatSelection] = useState([])
   const [heats, setHeats] = useState([])
   const [rankingComp, setRankingComp] = useState([])
 
   const selectHeatRef = useRef();
   const selectRankRef = useRef();
 
   // add options to select or rank by heat
   const heatOpts = heats.map(h => {
     return {
       value: h.id,
       label: h.name
     }
   })
 
   // add static ranking options
   const rankOptions = [
     {
       value: 'start',
       label: 'Start Nr.'
     }, {
       value: 'best',
       label: 'Best Heat'
     }, {
       value: 'worst',
       label: 'Worst Heat'
     }, {
       value: 'total',
       label: 'Total Sum (all heats)'
     }
   ]
 
   // add dynamic options to rank by best/worst heat
   const heatOptions = heatOpts.map(h => {
     return {
       value: h.value,
       label: "Sum " + h.label
     }
   })
 
   const rankOpts = [
     {
       label: "Overall",
       options: rankOptions
     },
     {
       label: "Heat Sum",
       options: heatOptions
     }
   ]
 
   useEffect(() => {
     (async () => {
       setLoading(true)
 
       // load initial list of heats
       const heatList = await supabase.from('heats').select()
       setHeats(heatList.data)
       setLoading(false)
     })();
   }, []);
 
   useEffect(() => {
     (async () => {
       setLoading(true)
 
       // reload entire leaderboard when heat selection is changed
       const scoreSummary = await getScoreSummary(heatSelection.map(h => h.value))
       setLeaderboard(scoreSummary)
       setLoading(false)
     })();
   }, [heatSelection]);
 
   useEffect(() => {
     // subscribe to scoring from judges and
     const channel = supabase.channel('scores')
     channel.on(
       'postgres_changes',
       {
         event: '*',
         table: 'scores',
       },
       async (payload) => {
         setLoading(true)
 
         // todo: reload only required scores
         const scoreSummary = await getScoreSummary(heatSelection.map(h => h.value))
         setLeaderboard(scoreSummary)
         setLoading(false)
       }
     ).subscribe()
 
     // remove subscription
     return function cleanup() {
       supabase.removeChannel(channel)
     }
   }, [heatSelection]);
 
   return (
     <div>
       <button disabled={!loading}>{loading ? '↺ loading' : ''}</button>
       <div className='Leaderboard'>
         <header>
           <table>
             <thead>
               <tr>
                 <th>Heats to display</th>
                 <th>Rank by</th>
               </tr>
             </thead>
             <tbody>
               <tr>
                 <td data-title='Heats to display'>
                   <Select
                     closeMenuOnSelect={false}
                     isMulti
                     options={heatOpts}
                     onChange={h => setHeatSelection(h)}
                     ref={selectHeatRef}
                   />
                 </td>
                 <td data-title='Rank by'>
                   <Select
                     closeMenuOnSelect={false}
                     isMulti
                     options={rankOpts}
                     onChange={h => setRankingComp(h)}
                     ref={selectRankRef}
                   />
                 </td>
               </tr>
             </tbody>
           </table>
         </header>
         <table className='leaderboard'>
           <thead>
             <tr>
               <th>Rank</th>
               <th>Start Nr.</th>
               <th>Firstname</th>
               <th>Lastname</th>
               <th>Birthday</th>
               <th>School</th>
               {heatSelection.map(h => (
                 <th key={h.value}>{h.label}</th>
               ))}
               <th>Best</th>
               <th>Worst</th>
               <th>Total</th>
             </tr>
           </thead>
           <tbody>
           {leaderboard.sort(rankByHeat(rankingComp)).map(i => (
             <tr key={i.id}>
               <td></td>
               <td data-title='Start Nr.'>{i.nr}</td>
               <td data-title='Firstname'>{i.firstname}</td>
               <td data-title='Lastname'>{i.lastname}</td>
               <td data-title='Birthday'>{i.birthday}</td>
               <td data-title='School'>{i.school}</td>
               {heatSelection.map(h => (
                 <Fragment key={h.value}>
                   {/* list all scores from the judges seperated with '+' signs, show sum on right side */}
                   <td className='right' data-title={h.label}>{getScores(i, h)} = {i.heats.find(heat => heat.heatId === h.value)?.summary}</td>
                 </Fragment>
               ))}
               <td className='right' data-title='Best'>{i.bestHeat}</td>
               <td className='right' data-title='Worst'>{i.worstHeat}</td>
               <td className='right' data-title='Total'>{i.sum}</td>
             </tr>
           ))}
           </tbody>
         </table>
       </div>
       <ExportForm
         leaderboard={leaderboard}
         heatSelection={heatSelection}
         rankingComp={rankingComp} />
       {session ? <NewHeatForm
         leaderboard={leaderboard}
         rankingComp={rankingComp}
         selectHeatRef={selectHeatRef}
         selectRankRef={selectRankRef}
       /> : ''}
     </div>
   )
 }
 
 export default Leaderboard