| <!doctype html> |
| <html lang="sw"><head> |
| <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"> |
| <title>FUTBOL PICKS</title> |
| <link rel="stylesheet" href="styles.css"> |
| </head><body> |
| <header id="nav"></header> |
| <main> |
| <h1 data-t="freeTitle"></h1> |
| <div class="card"> |
| <div class="grid2"> |
| <div><label data-t="comp"></label><select id="comp"></select></div> |
| <div><label data-t="market"></label><select id="market"></select></div> |
| </div> |
| </div> |
| <div class="card stats" id="stats"></div> |
| <div id="list"></div> |
| <p class="disclaimer" data-t="disclaimer"></p> |
| </main> |
|
|
| <script type="module"> |
| import { sb, t, esc, fmtDate, renderNav, currentProfile } from "./common.js"; |
| const $ = id => document.getElementById(id); |
| const { profile } = await currentProfile(); |
| renderNav("picks", profile); |
| |
| const { data, error } = await sb.from("predictions") |
| .select("*, matches(*)") |
| .eq("published", true) |
| .order("published_at", { ascending: false }); |
| |
| if (error) $("list").innerHTML = `<p class="err">${esc(error.message)}</p>`; |
| const rows = data || []; |
| |
| const fill = (sel, values) => |
| sel.innerHTML = `<option value="">${t("all")}</option>` + values.map(v => `<option>${esc(v)}</option>`).join(""); |
| fill($("comp"), [...new Set(rows.map(r => r.matches.competition))]); |
| fill($("market"), [...new Set(rows.map(r => r.market))]); |
| |
| const badge = r => `<span class="badge s-${r.result}">${t(r.result)}</span>`; |
| |
| function render() { |
| const c = $("comp").value, m = $("market").value; |
| const shown = rows.filter(r => (!c || r.matches.competition === c) && (!m || r.market === m)); |
| |
| const won = shown.filter(r => r.result === "won").length; |
| const lost = shown.filter(r => r.result === "lost").length; |
| const settled = won + lost; |
| const rate = settled ? ((won / settled) * 100).toFixed(1) + "%" : "—"; |
| $("stats").innerHTML = ` |
| <div><span class="meta">${t("winRate")}</span><b>${rate}</b></div> |
| <div><span class="meta">${t("record")}</span><b>${won}W · ${lost}L</b></div> |
| <div><span class="meta">${t("settled")}</span><b>${settled}</b></div>`; |
| |
| $("list").innerHTML = shown.length ? shown.map(r => ` |
| <div class="card pick"> |
| <div class="meta">${esc(r.matches.competition)}${r.matches.country ? " · " + esc(r.matches.country) : ""}</div> |
| <div class="teams">${esc(r.matches.home_team)} vs ${esc(r.matches.away_team)}</div> |
| <div class="meta">${t("kickoff")}: ${fmtDate(r.matches.kickoff_at)}</div> |
| <div class="row" style="margin:.5rem 0"> |
| <span class="meta">${t("market")}: ${esc(r.market)}</span> |
| <span class="sel">${t("pick")}: ${esc(r.selection)}</span> |
| ${badge(r)} |
| </div> |
| ${r.explanation ? `<div class="meta"><b>${t("explain")}:</b> ${esc(r.explanation)}</div>` : ""} |
| </div>`).join("") |
| : `<p class="meta">${t("empty")}</p>`; |
| } |
| |
| $("comp").onchange = render; |
| $("market").onchange = render; |
| render(); |
| </script> |
| </body></html> |
|
|
