Adrien/carrramba-encore-rate
1
0
Fork 0
Code Issues 1 Pull Requests 1 Projects Releases Wiki Activity

♻️ Replace methods called to render Component with small Components

Browse Source
This commit is contained in:
Adrien
2023-01-28 16:22:32 +01:00
parent e141aa15e5
commit 29ba26e80b
3 changed files with 141 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/stopsManager.tsx
View File

@@ -45,9 +45,7 @@ const StopAreaRepr: Component = (props) => {
const { getLine } = useContext(BusinessDataContext);
const [lineReprs] = createResource(props.stop, fetchLinesRepr);
async function fetchLinesRepr(stop) {
const fetchLinesRepr = async (stop: Stop) => {
const lineIds = new Set(stop.lines);
const stops = stop.stops;
for (const stop of stops) {
@@ -81,6 +79,8 @@ const StopAreaRepr: Component = (props) => {
return reprs;
}
const [lineReprs] = createResource(props.stop, fetchLinesRepr);
return (
<HStack height="100%">
{props.stop.name}
@@ -128,7 +128,7 @@ const Map: Component = (props) => {
/* TODO: Avoid to clear all layers... */
stopsLayerGroup.clearLayers();
for (const stop of Object.values(getStops())) {
for (const stop of props.stops) {
const markers = setMarker(stop);
addMarkers(stop.id, markers);
for (const marker of markers) {
@@ -145,8 +145,6 @@ const Map: Component = (props) => {
return <div ref={mapDiv} id='main-map' style={{ width: "100%", height: "100%" }} />;
}
export const StopsManager: Component = (props) => {
export const StopsManager: Component = () => {
const [minCharactersNb, setMinCharactersNb] = createSignal<number>(4);
@@ -172,21 +170,21 @@ export const StopsManager: Component = () => {
<VStack h="100%">
<InputGroup w="50%" h="5%">
<InputLeftAddon>🚉 🚏</InputLeftAddon>
<Input onInput={_onStopNameInput} readOnly={_inProgress()} placeholder="Stop name..." />
<Input onInput={onStopNameInput} readOnly={inProgress()} placeholder="Stop name..." />
</InputGroup>
<Progress size="xs" w="50%" indeterminate={_inProgress()}>
<Progress size="xs" w="50%" indeterminate={inProgress()}>
<ProgressIndicator striped animated />
</Progress>
<Box w="100%" h="40%" borderWidth="1px" borderColor="var(--idfm-black)" borderRadius="$lg" overflow="scroll" marginBottom="2px">
<List width="100%" height="100%">
{() => {
const items = [];
for (const stop of Object.values(getStops()).sort((x, y) => x.name.localeCompare(y.name))) {
for (const stop of foundStops().sort((x, y) => x.name.localeCompare(y.name))) {
items.push(
<ListItem h="10%" borderWidth="1px" mb="0px" color="var(--idfm-black)" borderRadius="$lg">
<Button fullWidth="true" color="var(--idfm-black)" bg="white" onClick={() => {
console.log(`${stop.id} clicked !!!`);
setDisplayedStop(stop);
setDisplayedStops([stop]);
}}>
<Box w="100%" h="100%">
<Show when={stop.stops !== undefined} fallback={<StopRepr stop={stop} />}>
@@ -201,7 +199,7 @@ export const StopsManager: Component = () => {
</List>
</Box>
<Box borderWidth="1px" borderColor="var(--idfm-black)" borderRadius="$lg" h="55%" w="100%" overflow="scroll">
<Map />
<Map stops={foundStops()} />
</Box>
</VStack>
);