index.html (3856B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 <html lang="en"> 4 <head> 5 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 6 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 7 <title>Langener Stadtmeisterschaft 2020</title> 8 9 <style> 10 h1 { 11 text-align: center; 12 } 13 </style> 14 </head> 15 <body> 16 <div class="container"> 17 <h1>Langener Stadtmeisterschaft 2020</h1> 18 19 <h2>Teilnehmerliste</h2> 20 21 <table class="table table-responsive"> 22 <thead> 23 <tr> 24 <th>Name</th> 25 <th>Verein</th> 26 <th>DWZ</th> 27 <th>Attr.</th> 28 </tr> 29 </thead> 30 <tbody> 31 </tbody> 32 </table> 33 34 <h2>Anmeldeformular</h2> 35 36 <form> 37 <div class="form-group"> 38 <label for="email">Email Adresse</label> 39 <input type="email" class="form-control" name="email" required="true" aria-describedby="emailHelp" placeholder="email@example.com"> 40 <small id="emailHelp" class="form-text text-muted">Ihre Email Adresse wird nicht veröffentlicht</small> 41 </div> 42 <div class="form-group"> 43 <label for="name">Name</label> 44 <input type="text" class="form-control" name="name" required="true" placeholder="Name, Vorname" /> 45 </div> 46 <div class="form-group"> 47 <label for="birth_year">Geburtsjahr</label> 48 <input type="number" class="form-control" name="birth_year" required="true" placeholder="1648" /> 49 </div> 50 <div class="form-group"> 51 <label for="gender">Geschlecht</label> 52 <select class="form-control" name="gender"> 53 <option value="MALE">Männlich</option> 54 <option value="FIMALE">Weiblich</option> 55 <option value="OTHER">Divers</option> 56 </select> 57 </div> 58 <div class="form-group"> 59 <label for="club">Verein</label> 60 <input type="text" class="form-control" name="club" placeholder="SK Langen" /> 61 </div> 62 <div class="form-group"> 63 <label for="dwz">DWZ</label> 64 <input type="number" class="form-control" name="dwz" value="0" /> 65 </div> 66 <button type="submit" class="btn btn-primary">Teilnehmen</button> 67 </form> 68 </div> 69 70 <script defer> 71 const table = document.querySelector('table tbody') 72 73 fetch('/players?no_cache=' + Date.now()) 74 .then(res => res.json()) 75 .then(players => { 76 table.innerHTML = '' 77 players.forEach(player => { 78 const tr = document.createElement('tr'); 79 [ 'name', 'club', 'dwz', 'attr' ].forEach(key => { 80 const td = document.createElement('td') 81 td.innerText = player[key] 82 tr.appendChild(td) 83 }) 84 table.appendChild(tr) 85 }) 86 }) 87 88 const form = document.querySelector('form') 89 form.addEventListener('submit', e => { 90 e.preventDefault() 91 const data = Object.fromEntries(new FormData(form)) 92 93 fetch('/players', { 94 method: 'POST', 95 body: JSON.stringify(data), 96 headers: { 'content-type': 'application/json' } 97 }) 98 .then(res => { 99 if (!res.ok) { 100 throw res 101 } 102 return res.json() 103 }) 104 .then(res => { 105 alert('Ihre Teilnahme wurde erfolgreich erfasst!\nBitte haben Sie Geduld, bis sie bearbeitet wurde.') 106 form.reset() 107 }) 108 .catch(err => err.json().then(errors => { 109 Array.from(form.elements) 110 .filter(e => errors.errors.hasOwnProperty(e.name)) 111 .forEach(e => { 112 e.setCustomValidity(errors.errors[e.name].message) 113 e.checkValidity(); 114 e.addEventListener('change', () => e.setCustomValidity('')) 115 }); 116 })) 117 }) 118 119 </script> 120 </body> 121 </html>