cs2/simpleadmin-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Notifications page: switches before the text on phones, one Coming later tag

Browse source
This commit is contained in:
Astra 2026-10-03 14:14:16 +01:00
parent 5863639e1a
commit 3c0655b512
3 changed files with 13 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

12
internal/web/assets/admin.js
View file

@ -556,10 +556,12 @@ async function notifications() {
// The count row is only worth showing when there's a device besides this one. // The count row is only worth showing when there's a device besides this one.
const total = d.devices.length; const total = d.devices.length;
const others = total - (here ? 1 : 0); const others = total - (here ? 1 : 0);
const row = (label, help, control) => `<div class="setting"> const row = (label, help, control, cls = "") => `<div class="setting${cls}">
<div><b>${label}</b>${help ? `<p>${help}</p>` : ""}</div> <div><b>${label}</b>${help ? `<p>${help}</p>` : ""}</div>
<div class="control">${control}</div> <div class="control">${control}</div>
</div>`; </div>`;
// A row whose control is one switch: on phones the switch goes before the text.
const toggle = (label, help, sw) => row(label, help, sw, " toggle");
let device; let device;
if (!d.available) device = row("This device", "Notifications aren't set up on the panel. Its log says why.", '<span class="tag red">Unavailable</span>'); if (!d.available) device = row("This device", "Notifications aren't set up on the panel. Its log says why.", '<span class="tag red">Unavailable</span>');
@ -582,16 +584,14 @@ async function notifications() {
<section class="panel"> <section class="panel">
<div class="panel-head"><div><h2>Quiet hours</h2><p>Nothing is sent between these times, in your timezone (${esc(browserTimezone())}).</p></div></div> <div class="panel-head"><div><h2>Quiet hours</h2><p>Nothing is sent between these times, in your timezone (${esc(browserTimezone())}).</p></div></div>
${row("Quiet hours", "", `<button class="switch" type="button" role="switch" aria-checked="${p.quiet.enabled}" aria-label="Quiet hours" data-notif="quiet" ${dis}></button>`)} ${toggle("Quiet hours", "", `<button class="switch" type="button" role="switch" aria-checked="${p.quiet.enabled}" aria-label="Quiet hours" data-notif="quiet" ${dis}></button>`)}
${row("From and until", "", `<div class="quiet-times"><input class="input" type="time" id="quiet-start" value="${esc(p.quiet.start)}" aria-label="Quiet from" data-notif-time ${dis}><span class="muted">to</span><input class="input" type="time" id="quiet-end" value="${esc(p.quiet.end)}" aria-label="Quiet until" data-notif-time ${dis}></div>`)} ${row("From and until", "", `<div class="quiet-times"><input class="input" type="time" id="quiet-start" value="${esc(p.quiet.start)}" aria-label="Quiet from" data-notif-time ${dis}><span class="muted">to</span><input class="input" type="time" id="quiet-end" value="${esc(p.quiet.end)}" aria-label="Quiet until" data-notif-time ${dis}></div>`)}
</section> </section>
<section class="panel"> <section class="panel">
<div class="panel-head"><div><h2>What to send</h2><p>For all your devices.</p></div></div> <div class="panel-head"><div><h2>What to send</h2><p>For all your devices.</p></div></div>
${d.types.map((t) => row(esc(t.label), t.help ? esc(t.help) : "", ${d.types.map((t) => toggle(esc(t.label) + (t.ready ? "" : ' <span class="tag">Coming later</span>'), t.help ? esc(t.help) : "",
t.ready `<button class="switch" type="button" role="switch" aria-checked="${t.ready && p.types.includes(t.key)}" aria-label="${esc(t.label)}" ${t.ready ? `data-ntype="${esc(t.key)}" ${dis}` : "disabled"}></button>`)).join("")}
? `<button class="switch" type="button" role="switch" aria-checked="${p.types.includes(t.key)}" aria-label="${esc(t.label)}" data-ntype="${esc(t.key)}" ${dis}></button>`
: `<span class="tag">Coming later</span><button class="switch" type="button" role="switch" aria-checked="false" aria-label="${esc(t.label)}" disabled></button>`)).join("")}
</section> </section>
</div>`; </div>`;
} }

7
internal/web/assets/styles.css
View file

@ -676,11 +676,11 @@ td.num, th.num { text-align: right; white-space: nowrap; }
.setting p { margin: 2px 0 0; color: var(--muted); font-size: 14px; } .setting p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.setting .control { display: flex; justify-content: flex-end; } .setting .control { display: flex; justify-content: flex-end; }
.setting code { font: 13px ui-monospace, "Cascadia Mono", Menlo, monospace; color: var(--faint); } .setting code { font: 13px ui-monospace, "Cascadia Mono", Menlo, monospace; color: var(--faint); }
.setting .control .tag + .switch { margin-left: 10px; } .setting b .tag { margin-left: 6px; vertical-align: 1px; }
/* Notifications page. */ /* Notifications page. */
.quiet-times { display: flex; align-items: center; gap: 8px; } .quiet-times { display: flex; align-items: center; gap: 8px; }
.quiet-times .input { width: 120px; } .quiet-times .input { width: 136px; min-width: 0; }
.savebar { .savebar {
position: sticky; position: sticky;
@ -846,6 +846,9 @@ dialog::backdrop { background: rgba(5, 6, 9, 0.65); }
.live-map { font-size: 42px; } .live-map { font-size: 42px; }
.setting { grid-template-columns: 1fr; gap: 10px; } .setting { grid-template-columns: 1fr; gap: 10px; }
.setting .control { justify-content: flex-start; } .setting .control { justify-content: flex-start; }
.setting.toggle { grid-template-columns: auto minmax(0, 1fr); gap: 14px; }
.setting.toggle .control { order: -1; }
.quiet-times .input { flex: 1; width: auto; }
.action-grid { grid-template-columns: repeat(2, 1fr); } .action-grid { grid-template-columns: repeat(2, 1fr); }
.hide-sm { display: none; } .hide-sm { display: none; }
th, td { padding-left: 12px; padding-right: 12px; } th, td { padding-left: 12px; padding-right: 12px; }

4
internal/web/notify.go
View file

@ -41,8 +41,8 @@ var notifyTypes = []notifyType{
{Key: "silence", Label: "Silence added", Ready: true}, {Key: "silence", Label: "Silence added", Ready: true},
{Key: "unsilence", Label: "Silence lifted", Ready: true}, {Key: "unsilence", Label: "Silence lifted", Ready: true},
{Key: "server", Label: "Server down and back up", Help: "When the panel loses the game server for 30 seconds, and when it's back.", Ready: true}, {Key: "server", Label: "Server down and back up", Help: "When the panel loses the game server for 30 seconds, and when it's back.", Ready: true},
{Key: "livescore", Label: "Live score", Help: "An updating scoreboard while people are playing. Coming later."}, {Key: "livescore", Label: "Live score", Help: "An updating scoreboard while people are playing."},
{Key: "calladmin", Label: "Admin called", Help: "A player asks for an admin in game. Needs a server plugin, coming later."}, {Key: "calladmin", Label: "Admin called", Help: "A player asks for an admin in game. Needs a server plugin."},
} }
// readyTypes are the keys that can be switched on, which is also everyone's default. // readyTypes are the keys that can be switched on, which is also everyone's default.