myheats

Leaderboard.js (11128B)

---

 import { supabase } from './supabaseClient'
 import { Fragment, useEffect, useState, useRef } from 'react'
 import Select from 'react-select'
 
 import { defaultsSet } from './Heats.js'
 
 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
 }
 
 function rankByHeat(rankingComp) {
   return function(a, b) {
     // rank by chosen heat or ranking comparator
     for (const r of rankingComp) {
       switch(r.value) {
         case 'start':
           // rank by start number
           return b.nr < a.nr
         case 'best':
           if (b.bestHeat - a.bestHeat !== 0) {
             // rank by best heat first
             return b.bestHeat - a.bestHeat
           }
           // rank by least worst heat for identical best heats
           return b.worstHeat - a.worstHeat
         case 'worst':
           // rank by worst heat
           return b.worstHeat - a.worstHeat
         case 'total':
           // rank by total sum across heats
           return b.sum - a.sum
         default:
           // rank by heat totals
           if (b.heats.find(h => h.heatId === r.value)?.summary - a.heats.find(h => h.heatId === r.value)?.summary !== 0) {
             return b.heats.find(h => h.heatId === r.value)?.summary - a.heats.find(h => h.heatId === r.value)?.summary
           }
       }
     }
   }
 }
 
 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());
 
   if (defaultsSet(formJson)) {
     alert('Check data of the new heat, seems like the defaults')
     return
   }
 
   // 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('Failed to create new heat. Verify that you are signed in.')
     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()
 }
 
 function NewHeatForm(leaderboard, rankingComp, selectHeatRef, selectRankRef) {
   return (
     <div className='newHeatForm'>
       <h2>New Heat from Leaderboard</h2>
       <p>
         Create new heat from the sorted leaderboard above.
       </p>
       <p>
         Includes favorite "top N" athletes in the next 🔥 heat.
       </p>
       <form method='post' onSubmit={e => newHeatFromLeaderboard(
           e,
           leaderboard,
           rankingComp,
           selectHeatRef,
           selectRankRef
         )}>
         <table>
           <tbody>
             <tr>
               <th>New heat name: *</th>
               <td>
                 <input type='text' name='name' defaultValue='Name' />
               </td>
             </tr>
             <tr>
               <th>Location:</th>
               <td>
                 <input type='text' name='location' defaultValue='Location' />
               </td>
             </tr>
             <tr>
               <th>Planned start:</th>
               <td>
                 <input
                   type='time'
                   name='planned_start' />
               </td>
             </tr>
             <tr>
               <th>Include top N:</th>
               <td>
                 <input type='number' name='size' defaultValue='10' />
               </td>
             </tr>
             <tr>
               <td>(<i>* required</i>)</td>
               <td>
                 <button type='submit'>➕ 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>
       <div className='Leaderboard'>
         <header>
           <div>
             Heats to display:
             <Select
               closeMenuOnSelect={false}
               isMulti
               options={heatOpts}
               onChange={h => setHeatSelection(h)}
               ref={selectHeatRef}
             />
             Rank by (in this order):
             <Select
               closeMenuOnSelect={false}
               isMulti
               options={rankOpts}
               onChange={h => setRankingComp(h)}
               ref={selectRankRef}
             />
           </div>
           <h1>Leaderboard <button disabled={!loading}>{loading ? '🔄 loading' : ''}</button></h1>
         </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>
               <th colSpan={heatSelection.length * 2}>Heat Scores & Sum</th>
               <th colSpan={3}>Summary (all heats)</th>
             </tr>
             <tr>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               {heatSelection.map(h => (
                 <th key={h.value} colSpan={2}>{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}>
                   <td data-title={'Scores ' + h.label} className='right'>{i.heats.find(heat => heat.heatId === h.value)?.scores?.map(s => s.score).join(" / ")}</td>
                   <td data-title='Sum' className='right'>{i.heats.find(heat => heat.heatId === h.value)?.summary}</td>
                 </Fragment>
               ))}
               <td data-title='👍 Best' className='right'>{i.bestHeat}</td>
               <td data-title='👎 Worst' className='right'>{i.worstHeat}</td>
               <td data-title='Total' className='right'>{i.sum}</td>
             </tr>
           ))}
           </tbody>
         </table>
       </div>
       {session ? <NewHeatForm
         leaderboard={leaderboard}
         rankingComp={rankingComp}
         selectHeatRef={selectHeatRef}
         selectRankRef={selectRankRef}
       /> : ''}
     </div>
   )
 }
 
 export default Leaderboard