rentgen/options.tsx

138 lines
5.8 KiB
TypeScript
Raw Normal View History

2022-04-24 22:11:33 +02:00
import React, { Fragment } from 'react';
2022-01-23 21:42:49 +01:00
import './options.scss';
2021-11-07 09:17:19 +01:00
export default function Options({
2022-01-23 21:42:49 +01:00
minValueLength,
setMinValueLength,
cookiesOnly,
setCookiesOnly,
cookiesOrOriginOnly,
setCookiesOrOriginOnly,
2022-01-24 12:50:54 +01:00
warningDataDialogAck,
setWarningDataDialogAck,
2022-04-15 13:58:29 +02:00
detailsVisibility,
setDetailsVisibility,
2022-04-24 22:11:33 +02:00
setStolenDataView,
removeCookies,
removeRequests,
}: {
2022-01-23 21:42:49 +01:00
minValueLength: number;
setMinValueLength: (n: number) => void;
cookiesOnly: boolean;
setCookiesOnly: (b: boolean) => void;
cookiesOrOriginOnly: boolean;
setCookiesOrOriginOnly: (b: boolean) => void;
2022-01-24 12:50:54 +01:00
warningDataDialogAck: boolean;
setWarningDataDialogAck: (b: boolean) => void;
2022-04-15 13:58:29 +02:00
detailsVisibility: boolean;
setDetailsVisibility: (b: boolean) => void;
2022-04-24 22:11:33 +02:00
setStolenDataView: (b: boolean) => void;
removeCookies: () => void;
removeRequests: () => void;
2021-11-07 09:17:19 +01:00
}) {
2022-01-23 21:42:49 +01:00
return (
2022-04-24 22:11:33 +02:00
<Fragment>
<nav>
<button onClick={() => setStolenDataView(true)}>
<img src="/assets/icons/short_left.svg" width="20" height="20" />
<span>Wróć do szczegółów</span>
</button>
</nav>
<div className="options-container">
<span>Interfejs</span>
<fieldset>
<div className="input-container">
<input
type="checkbox"
id="detailsVisibility"
checked={detailsVisibility}
onChange={(e) => {
setDetailsVisibility(e.target.checked);
localStorage.setItem(
'detailsVisibility',
e.target.checked as unknown as string
);
}}
/>
<label className="label-checkbox" htmlFor="detailsVisibility">
Wyświetlaj szczegóły pozyskanych danych
</label>
</div>
<div className="input-container">
<input
type="checkbox"
id="warningDataDialogAck"
checked={warningDataDialogAck}
onChange={(e) => {
setWarningDataDialogAck(e.target.checked);
localStorage.setItem(
'warningDataDialogAck',
e.target.checked as unknown as string
);
}}
/>
<label className="label-checkbox" htmlFor="warningDataDialogAck">
Wyświetlaj komunikat o pozyskiwanych danych
</label>
</div>
</fieldset>
<span>Ustawienia zaawansowane</span>
<fieldset>
<div className="input-container">
<label htmlFor="minValueLength">
Pokazuj tylko wartości o długości co najmniej{' '}
</label>
<input
type="number"
id="minValueLength"
2022-07-06 19:03:15 +02:00
min={1}
2022-04-24 22:11:33 +02:00
value={minValueLength}
onChange={(e) => {
setMinValueLength(parseInt(e.target.value));
localStorage.setItem('minValueLength', e.target.value);
}}
/>
</div>
<div className="input-container">
<input
type="checkbox"
id="cookiesOnly"
checked={cookiesOnly}
onChange={(e) => setCookiesOnly(e.target.checked)}
/>
<label className="label-checkbox" htmlFor="cookiesOnly">
Pokazuj tylko dane z cookiesów
</label>
</div>
<div className="input-container">
<input
type="checkbox"
id="cookiesOrOriginOnly"
checked={cookiesOrOriginOnly}
onChange={(e) => setCookiesOrOriginOnly(e.target.checked)}
/>
<label className="label-checkbox" htmlFor="cookiesOrOriginOnly">
Pokazuj tylko dane z cookiesów lub z częścią historii przeglądania
</label>
</div>
</fieldset>
<span>Narzędzia deweloperskie</span>
<div className="buttons">
<div className="button-container">
<button onClick={() => removeRequests()}>
<img src="/assets/icons/trash_full.svg" width="20" height="20" />
<span>Wyczyść historię wtyczki</span>
</button>
</div>
<div className="button-container">
<button onClick={() => removeCookies()}>
<img src="/assets/icons/cookie.svg" width="20" height="20" />
<span>Wyczyść ciasteczka</span>
</button>
</div>
</div>
2022-04-24 22:11:33 +02:00
</div>
</Fragment>
2022-01-23 21:42:49 +01:00
);
2021-11-07 09:17:19 +01:00
}