myheats

Live heats, scoring and leaderboard for sport events
git clone https://git.in0rdr.ch/myheats.git
Log | Files | Refs | Pull requests | README | LICENSE

Settings.jsx (4172B)

      1 import { lazy, useEffect, useState } from 'react'
      2 const Auth = lazy(() => import('./Auth'))
      3 
      4 const api_uri = import.meta.env.VITE_API_URI
      5 const api_port = import.meta.env.VITE_API_PORT
      6 
      7 async function updateSetting(e, session) {
      8   e.preventDefault()
      9 
     10   // Read the form data
     11   const formData = new FormData(e.target);
     12   const formJson = Object.fromEntries(formData.entries());
     13   console.log(formJson)
     14 
     15   // Add setting
     16   try {
     17     const res = await fetch(`${api_uri}:${api_port}/v1/leaderboard/updateSetting`, {
     18       method: 'POST',
     19       headers: {
     20               'Content-Type': 'application/json',
     21               'Authorization': `Bearer ${session.auth.token}`,
     22       },
     23       body: JSON.stringify({
     24         "name": formJson.name === '' ? null : formJson.name,
     25         "value": formJson.value === '' ? null : formJson.value,
     26       }),
     27     })
     28     const { data, error } = await res.json()
     29     if (error) {
     30       alert('Failed to add setting: ' + error)
     31     }
     32     window.location.reload()
     33   } catch (error) {
     34     console.error('Failed to add setting: ' + error)
     35   }
     36 }
     37 
     38 async function deleteSetting(e, name, session) {
     39   e.preventDefault()
     40 
     41   if (window.confirm('Do you really want to delete setting "' + name + '"?')) {
     42     const { data, error } = await removeSetting(name, session)
     43     if (error === undefined) {
     44       window.location.reload()
     45     } else {
     46       console.error(error)
     47     }
     48   }
     49 }
     50 
     51 export async function removeSetting(name, session) {
     52   const res = await fetch(`${api_uri}:${api_port}/v1/leaderboard/removeSetting`, {
     53     method: 'POST',
     54     headers: {
     55             'Content-Type': 'application/json',
     56             'Authorization': `Bearer ${session.auth.token}`,
     57     },
     58     body: JSON.stringify({
     59       "name": name
     60     }),
     61   })
     62   return await res.json()
     63 }
     64 
     65 
     66 function SettingsForm({session}) {
     67   const [loading, setLoading] = useState(false)
     68   const [settings, setSettings] = useState([])
     69 
     70   useEffect(() => {
     71     (async () => {
     72       setLoading(true)
     73       const res = await fetch(`${api_uri}:${api_port}/v1/leaderboard/allSettings`, {
     74         headers: {
     75                 'Content-Type': 'application/json',
     76                 'Authorization': `Bearer ${session.auth.token}`,
     77         }
     78       })
     79       if (res.status !== 204) {
     80         const { data, error } = await res.json()
     81         if (error) {
     82           console.error(error)
     83         } else {
     84           setSettings(data)
     85         }
     86       }
     87       setLoading(false)
     88     })();
     89   }, [])
     90 
     91   return (
     92     <div className='Settings'>
     93       <button disabled={!loading} className='loading'>↺ loading</button>
     94       <form method='post' onSubmit={e => updateSetting(e, session)}>
     95         <table>
     96           <thead>
     97             <tr>
     98               <th></th>
     99               <th>Setting *</th>
    100               <th>Value *</th>
    101               <th>New/delete</th>
    102             </tr>
    103           </thead>
    104           <tbody>
    105             {settings.map(s => (
    106               <tr key={s.name} data-name={s.name}>
    107                 <td></td>
    108                 <td data-title='Setting'>
    109                   {s.name}
    110                 </td>
    111                 <td data-title='Value'>
    112                   {s.value}
    113                 </td>
    114                 <td>
    115                   <button onClick={e => deleteSetting(e, s.name, session)}>&ndash; del</button>
    116                 </td>
    117               </tr>
    118             ))}
    119             <tr className='input'>
    120               <td className='right'><i>* required</i></td>
    121               <td data-title='Setting *'>
    122                 <input type='text' name='name' />
    123               </td>
    124               <td data-title='Value *'>
    125                 <input type='text' name='value' />
    126               </td>
    127               <td>
    128                 <button type='submit'>&#43; new</button>
    129               </td>
    130             </tr>
    131           </tbody>
    132           <tfoot>
    133             <tr>
    134               <td></td>
    135               <td></td>
    136               <td></td>
    137               <td>
    138               </td>
    139             </tr>
    140           </tfoot>
    141         </table>
    142       </form>
    143     </div>
    144   )
    145 }
    146 
    147 function Settings({session}) {
    148   return (
    149     <div>
    150       {!session.auth ? <Auth /> : <SettingsForm session={session} />}
    151     </div>
    152   )
    153 }
    154 
    155 export default Settings