cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-31 11:59:10 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

refactor(settings): polish settings UI

Browse Source
This commit is contained in:
Carlos Valente
2026-08-01 17:09:48 +02:00
committed by Carlos Valente
parent f0c284b708
commit 24be49ef66
49 changed files with 1946 additions and 1268 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/log/Log.tsx
+20 -4
View File
@@ -4,12 +4,14 @@ import { IoClose } from 'react-icons/io5';
import Button from '../../common/components/buttons/Button';
import { clearLogs, useLogData } from '../../common/stores/logger';
import { cx } from '../../common/utils/styleUtils';
import * as Panel from '../app-settings/panel-utils/PanelUtils';
import style from './Log.module.scss';
export default function Log() {
const { logs: logData } = useLogData();
const isExtracted = window.location.pathname.includes('/log');
const [showClient, setShowClient] = useState(true);
const [showServer, setShowServer] = useState(true);
@@ -50,11 +52,14 @@ export default function Log() {
}, []);
return (
<>
<div className={cx([style.container, isExtracted && style.extracted])}>
<Panel.InlineElements className={style.buttonBar}>
<span className={style.filterLabel}>Filter by</span>
<Button
variant={showUser ? 'primary' : 'subtle'}
size='small'
aria-pressed={showUser}
aria-label={`${showUser ? 'Hide' : 'Show'} ${LogOrigin.User} events`}
onClick={() => setShowUser((s) => !s)}
onAuxClick={() => disableOthers(LogOrigin.User)}
onContextMenu={(e) => e.preventDefault()}
@@ -64,6 +69,8 @@ export default function Log() {
<Button
variant={showClient ? 'primary' : 'subtle'}
size='small'
aria-pressed={showClient}
aria-label={`${showClient ? 'Hide' : 'Show'} ${LogOrigin.Client} events`}
onClick={() => setShowClient((s) => !s)}
onAuxClick={() => disableOthers(LogOrigin.Client)}
onContextMenu={(e) => e.preventDefault()}
@@ -73,6 +80,8 @@ export default function Log() {
<Button
variant={showServer ? 'primary' : 'subtle'}
size='small'
aria-pressed={showServer}
aria-label={`${showServer ? 'Hide' : 'Show'} ${LogOrigin.Server} events`}
onClick={() => setShowServer((s) => !s)}
onAuxClick={() => disableOthers(LogOrigin.Server)}
onContextMenu={(e) => e.preventDefault()}
@@ -82,6 +91,8 @@ export default function Log() {
<Button
variant={showPlayback ? 'primary' : 'subtle'}
size='small'
aria-pressed={showPlayback}
aria-label={`${showPlayback ? 'Hide' : 'Show'} ${LogOrigin.Playback} events`}
onClick={() => setShowPlayback((s) => !s)}
onAuxClick={() => disableOthers(LogOrigin.Playback)}
onContextMenu={(e) => e.preventDefault()}
@@ -91,6 +102,8 @@ export default function Log() {
<Button
variant={showRx ? 'primary' : 'subtle'}
size='small'
aria-pressed={showRx}
aria-label={`${showRx ? 'Hide' : 'Show'} ${LogOrigin.Rx} events`}
onClick={() => setShowRx((s) => !s)}
onAuxClick={() => disableOthers(LogOrigin.Rx)}
onContextMenu={(e) => e.preventDefault()}
@@ -100,6 +113,8 @@ export default function Log() {
<Button
variant={showTx ? 'primary' : 'subtle'}
size='small'
aria-pressed={showTx}
aria-label={`${showTx ? 'Hide' : 'Show'} ${LogOrigin.Tx} events`}
onClick={() => setShowTx((s) => !s)}
onAuxClick={() => disableOthers(LogOrigin.Tx)}
onContextMenu={(e) => e.preventDefault()}
@@ -110,15 +125,16 @@ export default function Log() {
<IoClose /> Clear
</Button>
</Panel.InlineElements>
<ul className={style.log}>
<ul className={style.log} aria-label='Event log entries'>
{filteredData.length === 0 && <li className={style.empty}>No events match the selected filters.</li>}
{filteredData.map((logEntry) => (
<li key={logEntry.id} className={`${style.logEntry} ${style[logEntry.level]} `}>
<li key={logEntry.id} className={`${style.logEntry} ${style[logEntry.level]}`}>
<span className={style.time}>{logEntry.time}</span>
<span className={style.origin}>{logEntry.origin}</span>
<span className={style.msg}>{logEntry.text}</span>
</li>
))}
</ul>
</>
</div>
);
}