#666 Extend station name field to support more languages

railmapgen · Nov 30, 2024 · 4d474ef · 4d474ef
1 parent 3d38543
commit 4d474ef
Show file tree

Hide file tree

Showing 40 changed files with 319 additions and 207 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
         "@railmapgen/rmg-components": "^10.1.2",
         "@railmapgen/rmg-palette-resources": "^2.2.4",
         "@railmapgen/rmg-runtime": "^10.3.2",
-        "@railmapgen/rmg-translate": "^3.2.1",
+        "@railmapgen/rmg-translate": "^3.2.3",
         "@railmapgen/svg-assets": "^4.0.3",
         "@reduxjs/toolkit": "^2.3.0",
         "ag-grid-community": "^32.3.0",
@@ -59,5 +59,5 @@
         "lint:fix": "eslint ./src --fix",
         "preview": "vite preview"
     },
-    "version": "5.16.21"
+    "version": "5.17.0-0"
 }
diff --git a/src/components/ag-grid/station-ag-grid.tsx b/src/components/ag-grid/station-ag-grid.tsx
@@ -3,13 +3,14 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { AgGridReact } from 'ag-grid-react';
 import { useRootDispatch, useRootSelector } from '../../redux';
 import { ColDef, SelectionChangedEvent } from 'ag-grid-community';
-import { Name, RmgStyle, SidePanelMode, StationInfo, StationTransfer } from '../../constants/constants';
+import { RmgStyle, SidePanelMode, StationInfo, StationTransfer } from '../../constants/constants';
 import { useTranslation } from 'react-i18next';
 import { HStack } from '@chakra-ui/react';
 import { setIsShareTrackEnabled, setSelectedStation, setSidePanelMode } from '../../redux/app/app-slice';
 import { getRowSpanForColine } from '../../redux/param/coline-action';
 import GzmtrStationCode from './gzmtr-station-code';
 import { MonoColour } from '@railmapgen/rmg-palette-resources';
+import { Translation } from '@railmapgen/rmg-translate';
 
 interface StationAgGridProps {
     branchIndex: number;
@@ -59,22 +60,22 @@ export default function StationAgGrid(props: StationAgGridProps) {
             },
             {
                 headerName: t('Chinese name'),
-                field: 'name',
+                field: 'localisedName',
                 valueFormatter: ({ value, data }) =>
-                    value[0] +
-                    (style === RmgStyle.GZMTR && data?.secondaryName && data?.secondaryName[0]
-                        ? ` (${data.secondaryName[0]})`
+                    value.zh +
+                    (style === RmgStyle.GZMTR && data?.localisedSecondaryName?.zh
+                        ? ` (${data.localisedSecondaryName.zh})`
                         : ''),
             },
             {
                 headerName: t('English name'),
-                field: 'name',
-                cellRenderer: ({ value, data }: { value: Name; data: RowDataType }) => (
+                field: 'localisedName',
+                cellRenderer: ({ value, data }: { value: Translation; data: RowDataType }) => (
                     <RmgMultiLineString
                         text={
-                            value[1] +
-                            (style === RmgStyle.GZMTR && data.secondaryName && data.secondaryName[1]
-                                ? ` (${data.secondaryName[1]})`
+                            value.en +
+                            (style === RmgStyle.GZMTR && data.localisedSecondaryName?.en
+                                ? ` (${data.localisedSecondaryName.en})`
                                 : '')
                         }
                     />

diff --git a/src/components/modal/add-station-modal.test.tsx b/src/components/modal/add-station-modal.test.tsx
@@ -9,43 +9,43 @@ import { vi } from 'vitest';
 
 const mockStationList = {
     linestart: {
-        name: ['路綫左端', 'LEFT END'],
+        localisedName: { en: 'LEFT END' },
         parents: [],
         children: ['stn1', 'stn5'],
         branch: { left: [], right: [BranchStyle.through, 'stn5'] },
     },
     stn1: {
-        name: ['車站1', 'Station 1'],
+        localisedName: { zh: '車站1', en: 'Station 1' },
         parents: ['linestart'],
         children: ['stn2'],
         branch: { left: [], right: [] },
     },
     stn2: {
-        name: ['車站2', 'Station 2'],
+        localisedName: { zh: '車站2', en: 'Station 2' },
         parents: ['stn1', 'stn5'],
         children: ['stn3'],
         branch: { left: [BranchStyle.through, 'stn5'], right: [] },
     },
     stn3: {
-        name: ['車站3', 'Station 3'],
+        localisedName: { zh: '車站3', en: 'Station 3' },
         parents: ['stn2'],
         children: ['stn4'],
         branch: { left: [], right: [] },
     },
     stn4: {
-        name: ['車站4', 'Station 4'],
+        localisedName: { zh: '車站4', en: 'Station 4' },
         parents: ['stn3'],
         children: ['lineend'],
         branch: { left: [], right: [] },
     },
     stn5: {
-        name: ['車站5', 'Station 5'],
+        localisedName: { zh: '車站5', en: 'Station 5' },
         parents: ['linestart'],
         children: ['stn2'],
         branch: { left: [], right: [] },
     },
     lineend: {
-        name: ['路綫右端', 'RIGHT END'],
+        localisedName: { en: 'RIGHT END' },
         parents: ['stn4'],
         children: [],
         branch: { left: [], right: [] },

diff --git a/src/components/modal/add-station-modal.tsx b/src/components/modal/add-station-modal.tsx
@@ -56,7 +56,7 @@ export default function AddStationModal(props: AddStationModalProps) {
         return stationIdList.reduce(
             (acc, cur) => ({
                 ...acc,
-                [cur]: stationList[cur]?.name.join(' - '),
+                [cur]: stationList[cur]?.localisedName.zh + '/' + stationList[cur]?.localisedName.en,
             }),
             { '': t('AddStationModal.pleaseSelect') }
         );

diff --git a/src/components/modal/download-modal.tsx b/src/components/modal/download-modal.tsx
@@ -150,7 +150,7 @@ export default function DownloadModal(props: DownloadModalProps) {
             // (but not for gzmtr and have no idea why)
             document.body.appendChild(elem);
 
-            const filename = `rmg.${stnId}.${stationList[stnId].name[0]}.${stationList[stnId].name[1]}`.replaceAll(
+            const filename = `rmg.${stnId}.${stationList[stnId].localisedName.en}`.replaceAll(
                 /\\|\/|\||\*|:|\?|<|>|"/g,
                 '_'
             ); // forbidden characters on windows \ / : * ? " < > |

diff --git a/src/components/modal/new-branch-modal.test.tsx b/src/components/modal/new-branch-modal.test.tsx
@@ -9,39 +9,39 @@ import { vi } from 'vitest';
 
 const mockStationList = {
     linestart: {
-        name: ['路綫左端', 'LEFT END'],
+        localisedName: { en: 'LEFT END' },
         parents: [],
         children: ['stn1', 'stn5'],
         branch: { right: [BranchStyle.through, 'stn5'] },
     },
     stn1: {
-        name: ['車站1', 'Station 1'],
+        localisedName: { zh: '車站1', en: 'Station 1' },
         parents: ['linestart'],
         children: ['stn2'],
     },
     stn2: {
-        name: ['車站2', 'Station 2'],
+        localisedName: { zh: '車站2', en: 'Station 2' },
         parents: ['stn1', 'stn5'],
         children: ['stn3'],
         branch: { left: [BranchStyle.through, 'stn5'] },
     },
     stn3: {
-        name: ['車站3', 'Station 3'],
+        localisedName: { zh: '車站3', en: 'Station 3' },
         parents: ['stn2'],
         children: ['stn4'],
     },
     stn4: {
-        name: ['車站4', 'Station 4'],
+        localisedName: { zh: '車站4', en: 'Station 4' },
         parents: ['stn3'],
         children: ['lineend'],
     },
     stn5: {
-        name: ['車站5', 'Station 5'],
+        localisedName: { zh: '車站5', en: 'Station 5' },
         parents: ['linestart'],
         children: ['stn2'],
     },
     lineend: {
-        name: ['路綫右端', 'RIGHT END'],
+        localisedName: { en: 'RIGHT END' },
         parents: ['stn4'],
         children: [],
     },

diff --git a/src/components/modal/new-branch-modal.tsx b/src/components/modal/new-branch-modal.tsx
@@ -54,7 +54,7 @@ export default function NewBranchModal(props: NewBranchModalProps) {
                         ? `(${t('LEFT END')})`
                         : cur === 'lineend'
                           ? `(${t('RIGHT END')})`
-                          : stationList[cur]?.name.join(' - '),
+                          : stationList[cur]?.localisedName.zh + '/' + stationList[cur]?.localisedName.en,
             }),
             { '': t('Please select...') }
         );

diff --git a/src/components/side-panel/branch-side-panel/coline-section.tsx b/src/components/side-panel/branch-side-panel/coline-section.tsx
@@ -25,7 +25,7 @@ export default function ColineSection() {
     const possibleCombinations = dispatch(getPossibleCombinations(selectedBranch));
 
     const getStationPairDisplayName = (pair: [string, string]) => {
-        return pair.map(id => stationList[id].name.join(' - ')).join(' ~ ');
+        return pair.map(id => stationList[id].localisedName.zh + '/' + stationList[id].localisedName.en).join(' ~ ');
     };
 
     const routeOptions = possibleCombinations.reduce<Record<string, string>>(

diff --git a/src/components/side-panel/branch-side-panel/connect-disconnect-card.test.tsx b/src/components/side-panel/branch-side-panel/connect-disconnect-card.test.tsx
@@ -18,49 +18,49 @@ const mockStationList = {
         parents: [],
         children: ['stn1'],
         branch: { left: [], right: [] },
-        name: ['LINE START', 'LINE START'],
+        localisedName: { en: 'LINE START' },
     },
     stn1: {
         parents: ['linestart'],
         children: ['stn2', 'stn3'],
         branch: { left: [], right: [BranchStyle.through, 'stn3'] },
-        name: ['Station 1', 'Station 1'],
+        localisedName: { zh: 'Station 1', en: 'Station 1' },
     },
     stn2: {
         parents: ['stn1'],
         children: ['stn4'],
         branch: { left: [], right: [] },
-        name: ['Station 2', 'Station 2'],
+        localisedName: { zh: 'Station 2', en: 'Station 2' },
     },
     stn3: {
         parents: ['stn1'],
         children: ['stn4'],
         branch: { left: [], right: [] },
-        name: ['Station 3', 'Station 3'],
+        localisedName: { zh: 'Station 3', en: 'Station 3' },
     },
     stn4: {
         parents: ['stn2', 'stn3'],
         children: ['stn6', 'stn5'],
         branch: { left: [BranchStyle.through, 'stn3'], right: [BranchStyle.through, 'stn6'] },
-        name: ['Station 4', 'Station 4'],
+        localisedName: { zh: 'Station 4', en: 'Station 4' },
     },
     stn5: {
         parents: ['stn4'],
         children: ['lineend'],
         branch: { left: [], right: [] },
-        name: ['Station 5', 'Station 5'],
+        localisedName: { zh: 'Station 5', en: 'Station 5' },
     },
     stn6: {
         parents: ['stn4'],
         children: ['lineend'],
         branch: { left: [], right: [] },
-        name: ['Station 6', 'Station 6'],
+        localisedName: { zh: 'Station 6', en: 'Station 6' },
     },
     lineend: {
         parents: ['stn6', 'stn5'],
         children: [],
         branch: { left: [BranchStyle.through, 'stn6'], right: [] },
-        name: ['LINE END', 'LINE END'],
+        localisedName: { en: 'LINE END' },
     },
 } as any as StationDict;
 

diff --git a/src/components/side-panel/branch-side-panel/connect-disconnect-card.tsx b/src/components/side-panel/branch-side-panel/connect-disconnect-card.tsx
@@ -44,7 +44,7 @@ export default function ConnectDisconnectCard(props: ConnectDisconnectCardProps)
     const options = possibleStations.reduce(
         (acc, cur) => ({
             ...acc,
-            [cur]: stn_list[cur]?.name.join(' - '),
+            [cur]: stn_list[cur]?.localisedName.zh + '/' + stn_list[cur]?.localisedName.en,
         }),
         { '': t('Please select...') }
     );
@@ -71,7 +71,10 @@ export default function ConnectDisconnectCard(props: ConnectDisconnectCardProps)
         <RmgCard direction="column">
             <Flex alignItems="center">
                 <RmgLabel label={t('Station name')} flex={1}>
-                    <RmgDebouncedInput defaultValue={branchEndInfo.name.join(' ')} isDisabled={true} />
+                    <RmgDebouncedInput
+                        defaultValue={branchEndInfo.localisedName.zh + '/' + branchEndInfo.localisedName.en}
+                        isDisabled={true}
+                    />
                 </RmgLabel>
 
                 {isEditing ? (

diff --git a/src/components/side-panel/side-panel.tsx b/src/components/side-panel/side-panel.tsx
@@ -18,11 +18,11 @@ export default function SidePanel() {
     const dispatch = useDispatch();
 
     const { sidePanelMode, selectedStation, paletteAppClipInput } = useRootSelector(state => state.app);
-    const name = useRootSelector(state => state.param.stn_list[selectedStation]?.name);
+    const name = useRootSelector(state => state.param.stn_list[selectedStation]?.localisedName);
 
     const mode: Record<SidePanelMode, { header: ReactNode; body?: ReactNode; footer?: ReactNode }> = {
         STATION: {
-            header: <RmgMultiLineString text={name?.join(' - ') || ''} />,
+            header: <RmgMultiLineString text={name?.zh + '/' + name?.en || ''} />,
             body: <StationSidePanel />,
             footer: <StationSidePanelFooter />,
         },

diff --git a/src/components/side-panel/station-side-panel/branch-section.tsx b/src/components/side-panel/station-side-panel/branch-section.tsx
@@ -24,7 +24,10 @@ export default function BranchSection() {
 
     const getFirstStationOptions = (direction: Direction) => {
         return (direction === Direction.left ? parents : children).reduce<Record<string, string>>(
-            (acc, cur) => ({ ...acc, [cur]: stationList[cur].name.join(' ') }),
+            (acc, cur) => ({
+                ...acc,
+                [cur]: stationList[cur].localisedName.zh + '/' + stationList[cur].localisedName.en,
+            }),
             {}
         );
     };