view.html (5345B)
1 <!DOCTYPE html> 2 <html lang="fr"> 3 <head> 4 <meta charset="utf-8" /> 5 <meta name="viewport" content="width=device-width"> 6 <title>Planification JDR</title> 7 <link rel="stylesheet" type="text/css" href="style.css" /> 8 <script> 9 var val_class=["val0","val1","val2","val3","val4","val5"]; 10 var val_text=["?","−−","−","0","+","++"]; 11 12 window.onerror = function(msg, url, line) { 13 var item = document.createElement("li"); 14 item.appendChild(document.createTextNode(url + "@" + line + ": " + msg)); 15 document.getElementById("error-log").appendChild(item); 16 document.getElementById("error-div").style = "display:block"; 17 item.scrollIntoView(); 18 } 19 20 function pathname_to_topic(str) { 21 var components = str.split("/"); 22 var fileName = components[components.length - 1]; 23 var lastDotIndex = fileName.lastIndexOf("-"); 24 return lastDotIndex !== -1 ? fileName.substring(0, lastDotIndex) : ""; 25 } 26 27 var topic=pathname_to_topic(window.location.pathname); 28 29 function append_cell(line, type, cl, text) { 30 var elt = document.createElement(type); 31 elt.className = cl; 32 elt.appendChild(document.createTextNode(text)); 33 line.appendChild(elt); 34 } 35 36 function set_table(data) { 37 var holder = document.getElementById("pref-table"); 38 while (holder.childNodes.length > 0) { 39 holder.removeChild(holder.childNodes[0]); 40 } 41 var line = document.createElement("tr"); 42 43 append_cell(line, "th", "", "Date"); 44 for (const name in data[1]) { 45 var elt = document.createElement("th"); 46 var link = document.createElement("a"); 47 link.href = (topic ? topic + "-" : "") + "edit.html"; 48 link.onclick = function() { localStorage.setItem("subject" + (topic ? "-" + topic : ""), name); }; 49 link.appendChild(document.createTextNode(name)); 50 elt.appendChild(link); 51 line.appendChild(elt); 52 } 53 holder.appendChild(line); 54 55 for (const name of data[0]) { 56 line = document.createElement("tr"); 57 append_cell(line, "td", "date", name); 58 for (const [tmp, prefs] of Object.entries(data[1])) { 59 var v = prefs[name] || 0; 60 append_cell(line, "td", val_class[v], val_text[v]); 61 } 62 holder.appendChild(line); 63 } 64 } 65 66 async function reload_table(){ 67 document.getElementById("reload-spinner").style = "display:inline"; 68 const response = await fetch((topic || "all") + ".json", { cache: "no-cache" }); 69 const data = await response.json(); 70 set_table(data); 71 document.getElementById("reload-spinner").style = "display:none"; 72 } 73 74 async function create_subject(name){ 75 document.getElementById("create-spinner").style = "display:inline"; 76 const response = await fetch("do/new-subject", { 77 method: "POST", 78 cache: "no-store", 79 headers: { "Content-Type": "application/x-www-form-urlencoded" }, 80 body: (topic ? "topic=" + encodeURIComponent(topic) + "&" : "") + "name=" + encodeURIComponent(name), 81 }); 82 if (response.ok) { 83 reload_table(); 84 document.getElementById("create-spinner").style = "display:none"; 85 } 86 87 return false; 88 } 89 90 function new_subject(){ 91 create_subject(document.getElementById("new-subject").value); 92 document.getElementById("new-subject").value = ""; 93 return false; 94 } 95 </script> 96 </head> 97 <body onload="reload_table()"> 98 <h1>Planification JDR</h1> 99 <p>Bienvenue sur la page d'organisation des soirés JdR. Cette page présente la vue d'ensemble des préférences. Les préférences peuvent être changées colonne par colonne, en suivant le lien en en-tête de la table. Une nouvelle colonne peut être créée au moyen du formulaire ci-dessous.</p> 100 <form onsubmit="return new_subject()"> 101 <p>Nouveau pseudo : 102 <input type="text" name="name" id="new-subject" placeholder="XXX"> 103 <input type="submit" name="submit" value="Créer"> 104 <img id="create-spinner" class="spinner" src="spinner.svg" style="display: none"> 105 </p> 106 </form> 107 <table style="margin: 1em"> 108 <tr><td colspan="2" style="text-align: left"><strong>Symboles des préférences :</strong></td></tr> 109 <tr> 110 <td class="val5">++</td> 111 <td style="text-align: left">j'ai très envie de jouer ce soir-là, je vais m'ennuyer autrement</td> 112 </tr> 113 <tr> 114 <td class="val4">+</td> 115 <td style="text-align: left">j'aimerais bien jouer ce soir-là</td> 116 </tr> 117 <tr> 118 <td class="val3">0</td> 119 <td style="text-align: left">je veux bien jouer mais ça ne me dérange pas de ne pas jouer</td> 120 </tr> 121 <tr> 122 <td class="val2">−</td> 123 <td style="text-align: left">je peux jouer ce soir-là mais ça ne m'arrange pas vraiment</td> 124 </tr> 125 <tr> 126 <td class="val1">−−</td> 127 <td style="text-align: left">je ne suis pas du tout disponible ce soir-là</td> 128 </tr> 129 <tr> 130 <td class="val0">?</td> 131 <td style="text-align: left">je ne veux pas me prononcer</td> 132 </tr> 133 </table> 134 <p><input name="test" value="Recharger" type="button" onclick="reload_table()"> <img id="reload-spinner" class="spinner" src="spinner.svg" style="display: none"></p> 135 <table id="pref-table"> 136 <tr><th>Chargement</th></tr> 137 <tr><td><img src="spinner.svg" style="display: inline; width: 5em; height: 5em"></td></tr> 138 </table> 139 <div id="error-div" style="display:none"> 140 <p>Error log:</p> 141 <ul id="error-log"><ul> 142 </div> 143 </body> 144 </html>