73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
import * as React from "react";
|
|
import { LogsFilterMenuProps, LogsState } from "../interfaces";
|
|
import { Slider } from "@blueprintjs/core";
|
|
import { Filters } from "../interfaces";
|
|
import { startCase } from "lodash";
|
|
import { MESSAGE_TYPES, MessageType } from "../../sequences/interfaces";
|
|
import { t } from "../../i18next_wrapper";
|
|
|
|
const MENU_ORDER: string[] = [
|
|
MessageType.success,
|
|
MessageType.busy,
|
|
MessageType.warn,
|
|
MessageType.error,
|
|
MessageType.info,
|
|
MessageType.fun,
|
|
MessageType.debug,
|
|
MessageType.assertion,
|
|
];
|
|
|
|
const REVERSE_MENU_ORDER = MENU_ORDER.slice().reverse();
|
|
|
|
/** Order the log filter sort menu, adding unknown types last. */
|
|
const menuSort = (a: string, b: string) =>
|
|
REVERSE_MENU_ORDER.indexOf(b) - REVERSE_MENU_ORDER.indexOf(a);
|
|
|
|
/** Get log filter keys from LogsState. */
|
|
export const filterStateKeys =
|
|
(state: LogsState) =>
|
|
Object.keys(state)
|
|
.filter(key => !["autoscroll", "markdown", "searchTerm"].includes(key));
|
|
|
|
export const LogsFilterMenu = (props: LogsFilterMenuProps) => {
|
|
/** Filter level 0: logs hidden. */
|
|
const btnColor = (x: keyof Filters) => props.state[x] != 0
|
|
? "green" : "red";
|
|
/** Set the filter level to the same value for all log message types. */
|
|
const setAll = (level: number) => () => {
|
|
MESSAGE_TYPES.map((x: keyof Filters) => props.setFilterLevel(x)(level));
|
|
};
|
|
return <div className={"logs-settings-menu"}>
|
|
<fieldset>
|
|
<label>
|
|
{t("Presets:")}
|
|
</label>
|
|
<button className={`fb-button gray`}
|
|
title={t("show all")}
|
|
onClick={setAll(3)}>
|
|
{t("max")}
|
|
</button>
|
|
<button className={`fb-button gray`}
|
|
title={t("default")}
|
|
onClick={setAll(1)}>
|
|
{t("normal")}
|
|
</button>
|
|
</fieldset>
|
|
{filterStateKeys(props.state).sort(menuSort)
|
|
.map((logType: keyof Filters) =>
|
|
<fieldset key={logType}>
|
|
<label>
|
|
<div className={`saucer ${logType}`} />
|
|
{t(startCase(logType))}
|
|
</label>
|
|
<button
|
|
className={"fb-button fb-toggle-button " + btnColor(logType)}
|
|
title={t("toggle logs")}
|
|
onClick={props.toggle(logType)} />
|
|
<Slider min={0} max={3} stepSize={1}
|
|
onChange={props.setFilterLevel(logType)}
|
|
value={props.state[logType] as number} />
|
|
</fieldset>)}
|
|
</div>;
|
|
};
|