forked/topola-viewer
1
0
Fork 0
mirror of https://github.com/PeWu/topola-viewer.git synced 2026-07-31 08:01:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add configurable place display and shortening (#294)

Browse Source 
* Add configurable place display and shortening

* Fix prettier formatting stuff

* Move place shortening logic to Chart
This commit is contained in:
Rokas
2026-06-04 21:33:08 +03:00
committed by GitHub
parent 1fc83bc77e
commit 059c9d9413
12 changed files with 269 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/sidepanel/config/config.tsx
View File

@@ -1,9 +1,12 @@
import {ParsedQuery} from 'query-string';
import {FormattedMessage} from 'react-intl';
import {Checkbox, Form, Header, Item} from 'semantic-ui-react';
import {Checkbox, Form, Header, Input, Item} from 'semantic-ui-react';
import {GedcomData} from '../../util/gedcom_util';
import {DEFAULT_PLACE_DISPLAY_COUNT, PlaceDisplay} from '../../util/place_util';
import {SourceHead} from '../head/head';
export {PlaceDisplay};
export enum ChartColors {
NO_COLOR,
COLOR_BY_SEX,
@@ -24,12 +27,16 @@ export interface Config {
color: ChartColors;
id: Ids;
sex: Sex;
place: PlaceDisplay;
placeCount: number;
}
export const DEFALUT_CONFIG: Config = {
color: ChartColors.COLOR_BY_GENERATION,
id: Ids.SHOW,
sex: Sex.SHOW,
place: PlaceDisplay.FULL,
placeCount: DEFAULT_PLACE_DISPLAY_COUNT,
};
const COLOR_ARG = new Map<string, ChartColors>([
@@ -54,16 +61,27 @@ const SEX_ARG = new Map<string, Sex>([
const SEX_ARG_INVERSE = new Map<Sex, string>();
SEX_ARG.forEach((v, k) => SEX_ARG_INVERSE.set(v, k));
const PLACE_ARG = new Map<string, PlaceDisplay>([
['f', PlaceDisplay.FULL],
['s', PlaceDisplay.SHORT],
['h', PlaceDisplay.HIDE],
]);
const PLACE_ARG_INVERSE = new Map<PlaceDisplay, string>();
PLACE_ARG.forEach((v, k) => PLACE_ARG_INVERSE.set(v, k));
export function argsToConfig(args: ParsedQuery<unknown>): Config {
const getParam = (name: string) => {
const value = args[name];
return typeof value === 'string' ? value : undefined;
};
const placeCount = parseInt(getParam('pn') ?? '', 10);
return {
color: COLOR_ARG.get(getParam('c') ?? '') ?? DEFALUT_CONFIG.color,
id: ID_ARG.get(getParam('i') ?? '') ?? DEFALUT_CONFIG.id,
sex: SEX_ARG.get(getParam('s') ?? '') ?? DEFALUT_CONFIG.sex,
place: PLACE_ARG.get(getParam('p') ?? '') ?? DEFALUT_CONFIG.place,
placeCount: placeCount >= 1 ? placeCount : DEFALUT_CONFIG.placeCount,
};
}
@@ -81,6 +99,16 @@ export function configToArgs(config: Config): ParsedQuery {
if (sex) {
result.s = sex;
}
const place = PLACE_ARG_INVERSE.get(config.place);
if (place && config.place !== PlaceDisplay.FULL) {
result.p = place;
}
if (
config.place === PlaceDisplay.SHORT &&
config.placeCount !== DEFALUT_CONFIG.placeCount
) {
result.pn = String(config.placeCount);
}
return result;
}
@@ -252,6 +280,83 @@ export function ConfigPanel(props: {
</Form.Field>
</Item.Content>
</Item>
<Item>
<Item.Content>
<Header sub>
<FormattedMessage id="config.places" defaultMessage="Places" />
</Header>
<Form.Field className="no-margin">
<Checkbox
radio
label={
<FormattedMessage
tagName="label"
id="config.places.FULL"
defaultMessage="full"
/>
}
name="checkboxRadioGroup"
value="full"
checked={props.config.place === PlaceDisplay.FULL}
onClick={() =>
props.onChange({...props.config, place: PlaceDisplay.FULL})
}
/>
</Form.Field>
<Form.Field className="no-margin">
<Checkbox
radio
label={
<FormattedMessage
tagName="label"
id="config.places.SHORT"
defaultMessage="short"
/>
}
name="checkboxRadioGroup"
value="short"
checked={props.config.place === PlaceDisplay.SHORT}
onClick={() =>
props.onChange({...props.config, place: PlaceDisplay.SHORT})
}
/>
{props.config.place === PlaceDisplay.SHORT && (
<Input
type="number"
min={1}
max={10}
size="mini"
style={{width: '4em', marginLeft: '1.5em'}}
value={props.config.placeCount}
onChange={(_e, {value}) => {
const n = parseInt(value, 10);
if (n >= 1) {
props.onChange({...props.config, placeCount: n});
}
}}
/>
)}
</Form.Field>
<Form.Field className="no-margin">
<Checkbox
radio
label={
<FormattedMessage
tagName="label"
id="config.places.HIDE"
defaultMessage="hide"
/>
}
name="checkboxRadioGroup"
value="hide"
checked={props.config.place === PlaceDisplay.HIDE}
onClick={() =>
props.onChange({...props.config, place: PlaceDisplay.HIDE})
}
/>
</Form.Field>
</Item.Content>
</Item>
</Item.Group>
</Form>
</>