From 8e299e692f4a6301994332c5c08dafe49ee70ebd Mon Sep 17 00:00:00 2001 From: a-limyr Date: Thu, 14 Mar 2024 14:41:30 +0100 Subject: [PATCH 01/43] First pass migration of material ui from version 0 to 5 --- package-lock.json | 374 ++++-------------- package.json | 2 +- .../Dialogs/AddStopPlaceSuggestionListItem.js | 2 +- src/components/Dialogs/AltNamesDialog.js | 6 +- .../Dialogs/CompassBearingDialog.js | 2 +- src/components/Dialogs/CoordinatesDialog.js | 2 +- src/components/Dialogs/DialogHeader.js | 4 +- src/components/Dialogs/EditAltName.js | 12 +- src/components/Dialogs/KeyValuesDialog.js | 14 +- src/components/Dialogs/Loader.js | 2 +- src/components/Dialogs/NewAltName.js | 8 +- src/components/Dialogs/SaveDialog.js | 2 +- src/components/Dialogs/ScrollableQuayItem.js | 2 +- .../Dialogs/TerminateStopPlaceDialog.js | 7 +- .../AdjacentStopConnection.js | 6 +- .../EditParentStopPage/EditParentGeneral.js | 8 +- .../EditParentStopPage/ParentStopDetails.js | 12 +- .../EditParentStopPage/StopPlaceList.js | 8 +- .../StopPlaceListChildItem.js | 2 +- .../EditParentStopPage/StopPlaceListItem.js | 8 +- .../StopPlaceListItemDetails.js | 6 +- .../StopPlaceListItemQuayItem.js | 2 +- src/components/EditStopPage/AcceptChanges.js | 4 +- .../EditStopPage/AcessibilityQuayTab.js | 2 +- .../EditStopPage/AcessibilityStopTab.js | 2 +- .../EditStopPage/AddTagAutoComplete.js | 4 +- src/components/EditStopPage/AddTagDialog.js | 4 +- .../EditStopPage/BoardingPositionItem.tsx | 9 +- .../EditStopPage/ColumnFilterPopover.js | 6 +- .../EditStopPage/CreateKeyValuePair.js | 4 +- .../EditStopPage/EditKeyValuePair.js | 4 +- .../EditStopPage/EditQuayAdditional.js | 3 +- .../EditStopPage/EditStopAdditional.js | 3 +- .../EditStopPage/EditStopBoxTabs.js | 2 +- .../EditStopPage/EditStopGeneral.js | 15 +- .../EditStopPage/FacilitiesQuayTab.js | 14 +- .../EditStopPage/FacilitiesStopTab.js | 14 +- .../EditStopPage/InformationBanner.js | 4 +- src/components/EditStopPage/Item.js | 2 +- src/components/EditStopPage/ItemHeader.js | 8 +- src/components/EditStopPage/MakeExpandable.js | 6 +- .../EditStopPage/ModalitiesMenuItems.js | 6 +- src/components/EditStopPage/ModalityFilter.js | 2 +- .../EditStopPage/NewStopPlaceInfo.js | 4 +- src/components/EditStopPage/ParkingItem.js | 8 +- .../ParkingItemPayAndRideExpandedFields.js | 10 +- src/components/EditStopPage/QuayItem.js | 14 +- .../RechargingAvailablePopover.js | 6 +- .../EditStopPage/StepFreePopover.js | 4 +- .../EditStopPage/StopPlaceDetails.js | 18 +- src/components/EditStopPage/TagItem.js | 4 +- src/components/EditStopPage/TagsDialog.js | 6 +- src/components/EditStopPage/ToolTipIcon.js | 2 +- .../EditStopPage/VersionsPopover.js | 4 +- .../EditStopPage/WeightingPopover.js | 4 +- .../EditStopPage/WheelChairPopover.js | 6 +- .../EditGroupOfStopPlaces.js | 8 +- .../GroupOfStopPlacesDetails.js | 4 +- .../GroupOfStopPlacesList.js | 8 +- src/components/Header.js | 24 +- src/components/MainPage/CreateNewStop.js | 2 +- src/components/MainPage/FavoritePopover.js | 8 +- src/components/MainPage/GroupResultInfo.js | 2 +- src/components/MainPage/HasExpiredInfo.js | 2 +- src/components/MainPage/ModalityIconSvg.js | 2 +- .../MainPage/ParentStopPlaceResultInfo.js | 2 +- src/components/MainPage/SearchBox.js | 22 +- .../MainPage/SearchBoxEditActions.js | 6 +- .../MainPage/SearchBoxGeoWarning.js | 2 +- src/components/MainPage/SearchMenuItem.js | 4 +- .../MainPage/StopPlaceResultInfo.js | 2 +- .../MainPage/TopographicalFilter.js | 2 +- .../ReportPage/AdvancedReportFilters.js | 8 +- .../ReportPage/GeneralReportFilters.js | 8 +- src/components/ReportPage/ReportPageFooter.js | 6 +- .../ReportPage/ShowMoreMenuFooter.js | 2 +- src/components/ReportPage/TagFilterTray.js | 2 +- .../ReportPage/TagSuggestionPopover.js | 12 +- src/config/themes/default/defaultTheme.js | 6 +- src/containers/App.js | 6 +- src/containers/ReportPage.js | 10 +- src/models/columnTransformers.js | 6 +- src/static/icons/ParkingIcon.js | 2 +- src/static/icons/TransportSign.js | 2 +- .../icons/accessibility/NoWheelChair.js | 2 +- src/static/icons/accessibility/Stairs.js | 2 +- src/static/icons/accessibility/StepFree.js | 2 +- src/static/icons/facilities/BikeParking.js | 2 +- src/static/icons/facilities/BusShelter.js | 2 +- src/static/icons/facilities/Enclosed.js | 2 +- src/static/icons/facilities/Heated.js | 2 +- src/static/icons/facilities/NoBusShelter.js | 2 +- .../icons/facilities/NoTicketMachine.js | 2 +- src/static/icons/facilities/TicketMachine.js | 2 +- src/static/icons/facilities/WaitingRoom.js | 2 +- src/static/icons/spinner.js | 2 +- 96 files changed, 344 insertions(+), 549 deletions(-) diff --git a/package-lock.json b/package-lock.json index bb84eed52..9b9a98577 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "@mui/icons-material": "5.15.12", "@mui/lab": "5.0.0-alpha.167", "@mui/material": "5.15.12", + "@mui/x-date-pickers": "6.19.6", "@reduxjs/toolkit": "2.2.1", "@sentry/react": "7.106.0", "@sentry/tracing": "7.106.0", @@ -30,7 +31,6 @@ "leaflet": "1.9.4", "lint-staged": "15.2.2", "lodash.debounce": "4.0.8", - "material-ui": "0.20.0", "moment": "2.30.1", "oidc-client-ts": "3.0.1", "prop-types": "15.8.1", @@ -4865,6 +4865,71 @@ } } }, + "node_modules/@mui/x-date-pickers": { + "version": "6.19.6", + "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-6.19.6.tgz", + "integrity": "sha512-QW9AFcPi0vLpkUhmquhhyhLaBvB0AZJuu3NTrE173qNKx3Z3n51aCLY9bc7c6i4ltZMMsVRHlvzQjsve04TC8A==", + "dependencies": { + "@babel/runtime": "^7.23.2", + "@mui/base": "^5.0.0-beta.22", + "@mui/utils": "^5.14.16", + "@types/react-transition-group": "^4.4.8", + "clsx": "^2.0.0", + "prop-types": "^15.8.1", + "react-transition-group": "^4.4.5" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@emotion/react": "^11.9.0", + "@emotion/styled": "^11.8.1", + "@mui/material": "^5.8.6", + "@mui/system": "^5.8.0", + "date-fns": "^2.25.0 || ^3.2.0", + "date-fns-jalali": "^2.13.0-0", + "dayjs": "^1.10.7", + "luxon": "^3.0.2", + "moment": "^2.29.4", + "moment-hijri": "^2.1.2", + "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "date-fns": { + "optional": true + }, + "date-fns-jalali": { + "optional": true + }, + "dayjs": { + "optional": true + }, + "luxon": { + "optional": true + }, + "moment": { + "optional": true + }, + "moment-hijri": { + "optional": true + }, + "moment-jalaali": { + "optional": true + } + } + }, "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": { "version": "5.1.1-v1", "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz", @@ -7506,7 +7571,8 @@ "node_modules/asap": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", - "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==" + "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==", + "dev": true }, "node_modules/ast-types": { "version": "0.13.4", @@ -7893,27 +7959,6 @@ "babel-plugin-transform-react-remove-prop-types": "^0.4.24" } }, - "node_modules/babel-runtime": { - "version": "6.26.0", - "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz", - "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==", - "dependencies": { - "core-js": "^2.4.0", - "regenerator-runtime": "^0.11.0" - } - }, - "node_modules/babel-runtime/node_modules/core-js": { - "version": "2.6.12", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz", - "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==", - "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.", - "hasInstallScript": true - }, - "node_modules/babel-runtime/node_modules/regenerator-runtime": { - "version": "0.11.1", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz", - "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==" - }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -8087,11 +8132,6 @@ "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==", "dev": true }, - "node_modules/bowser": { - "version": "1.9.4", - "resolved": "https://registry.npmjs.org/bowser/-/bowser-1.9.4.tgz", - "integrity": "sha512-9IdMmj2KjigRq6oWhmwv1W36pDuA4STQZ8q6YO9um+x07xgYNCD3Oou+WP/3L1HNz7iqythGet3/p4wvc8AAwQ==" - }, "node_modules/boxen": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/boxen/-/boxen-5.1.2.tgz", @@ -8497,11 +8537,6 @@ "node": ">= 10" } }, - "node_modules/chain-function": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/chain-function/-/chain-function-1.0.1.tgz", - "integrity": "sha512-SxltgMwL9uCko5/ZCLiyG2B7R9fY4pDZUw7hJ4MhirdjBLosoDqkWABi3XMucddHdLiFJMb7PD2MZifZriuMTg==" - }, "node_modules/chalk": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", @@ -8518,11 +8553,6 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, - "node_modules/change-emitter": { - "version": "0.1.6", - "resolved": "https://registry.npmjs.org/change-emitter/-/change-emitter-0.1.6.tgz", - "integrity": "sha512-YXzt1cQ4a2jqazhcuSWEOc1K2q8g9H6eWNsyZgi640LDzRWVQ2eDe+Y/kVdftH+vYdPF2rgDb3dLdpxE1jvAxw==" - }, "node_modules/char-regex": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz", @@ -9523,15 +9553,6 @@ "postcss": "^8.4" } }, - "node_modules/css-in-js-utils": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz", - "integrity": "sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==", - "dependencies": { - "hyphenate-style-name": "^1.0.2", - "isobject": "^3.0.1" - } - }, "node_modules/css-loader": { "version": "6.8.1", "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.8.1.tgz", @@ -10636,6 +10657,8 @@ "version": "0.1.13", "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz", "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==", + "dev": true, + "optional": true, "dependencies": { "iconv-lite": "^0.6.2" } @@ -10644,6 +10667,8 @@ "version": "0.6.3", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", + "dev": true, + "optional": true, "dependencies": { "safer-buffer": ">= 2.1.2 < 3.0.0" }, @@ -12039,26 +12064,6 @@ "bser": "2.1.1" } }, - "node_modules/fbjs": { - "version": "0.8.18", - "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.18.tgz", - "integrity": "sha512-EQaWFK+fEPSoibjNy8IxUtaFOMXcWsY0JaVrQoZR9zC8N2Ygf9iDITPWjUTVIax95b6I742JFLqASHfsag/vKA==", - "dependencies": { - "core-js": "^1.0.0", - "isomorphic-fetch": "^2.1.1", - "loose-envify": "^1.0.0", - "object-assign": "^4.1.0", - "promise": "^7.1.1", - "setimmediate": "^1.0.5", - "ua-parser-js": "^0.7.30" - } - }, - "node_modules/fbjs/node_modules/core-js": { - "version": "1.2.7", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz", - "integrity": "sha512-ZiPp9pZlgxpWRu0M+YWbm6+aQ84XEfH1JRXvfOc/fILWI0VKhLC2LX13X1NYq4fULzLMq7Hfh43CSo2/aIaUPA==", - "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js." - }, "node_modules/fecha": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/fecha/-/fecha-4.2.3.tgz", @@ -13721,11 +13726,6 @@ "url": "https://github.com/sponsors/typicode" } }, - "node_modules/hyphenate-style-name": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz", - "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==" - }, "node_modules/iconv-lite": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", @@ -13890,15 +13890,6 @@ "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==", "dev": true }, - "node_modules/inline-style-prefixer": { - "version": "3.0.8", - "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-3.0.8.tgz", - "integrity": "sha512-ne8XIyyqkRaNJ1JfL1NYzNdCNxq+MCBQhC8NgOQlzNm2vv3XxlP0VSLQUbSRCF6KPEoveCVEpayHoHzcMyZsMQ==", - "dependencies": { - "bowser": "^1.7.3", - "css-in-js-utils": "^2.0.0" - } - }, "node_modules/inquirer": { "version": "8.2.6", "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-8.2.6.tgz", @@ -13991,9 +13982,9 @@ } }, "node_modules/ip": { - "version": "1.1.8", - "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.8.tgz", - "integrity": "sha512-PuExPYUiu6qMBQb4l06ecm6T6ujzhmh+MeJcW9wa89PoAz5pvd4zPgN5WJV104mb6S2T1AwNIAaB70JNrLQWhg==", + "version": "1.1.9", + "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.9.tgz", + "integrity": "sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ==", "dev": true }, "node_modules/ip-regex": { @@ -14589,40 +14580,6 @@ "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==" }, - "node_modules/isobject": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", - "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/isomorphic-fetch": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz", - "integrity": "sha512-9c4TNAKYXM5PRyVcwUZrF3W09nQ+sO7+jydgs4ZGW9dhsLG2VOlISJABombdQqQRXCwuYG3sYV/puGf5rp0qmA==", - "dependencies": { - "node-fetch": "^1.0.1", - "whatwg-fetch": ">=0.10.0" - } - }, - "node_modules/isomorphic-fetch/node_modules/is-stream": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz", - "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/isomorphic-fetch/node_modules/node-fetch": { - "version": "1.7.3", - "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz", - "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==", - "dependencies": { - "encoding": "^0.1.11", - "is-stream": "^1.0.1" - } - }, "node_modules/istanbul-lib-coverage": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz", @@ -17550,11 +17507,6 @@ "node": ">=18" } }, - "node_modules/keycode": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.1.tgz", - "integrity": "sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg==" - }, "node_modules/keyv": { "version": "4.5.4", "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz", @@ -18057,7 +18009,8 @@ "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", - "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==" + "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", + "dev": true }, "node_modules/lodash.once": { "version": "4.1.1", @@ -18077,11 +18030,6 @@ "integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==", "dev": true }, - "node_modules/lodash.throttle": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz", - "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==" - }, "node_modules/lodash.union": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/lodash.union/-/lodash.union-4.6.0.tgz", @@ -18553,52 +18501,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/material-ui": { - "version": "0.20.0", - "resolved": "https://registry.npmjs.org/material-ui/-/material-ui-0.20.0.tgz", - "integrity": "sha512-wkHkeU1SaGfCrtwIzBOl5vynNNNzVGW27ql0Ue5HZLB4WyRQ3YohJBdKa5lBrH5JD/Cgae7IzrP7cVWDyKpeLQ==", - "dependencies": { - "babel-runtime": "^6.23.0", - "inline-style-prefixer": "^3.0.8", - "keycode": "^2.1.8", - "lodash.merge": "^4.6.0", - "lodash.throttle": "^4.1.1", - "prop-types": "^15.5.7", - "react-event-listener": "^0.5.1", - "react-transition-group": "^1.2.1", - "recompose": "^0.26.0", - "simple-assign": "^0.1.0", - "warning": "^3.0.0" - }, - "peerDependencies": { - "react": "^15.4.0 || ^16.0.0", - "react-dom": "^15.4.0 || ^16.0.0" - } - }, - "node_modules/material-ui/node_modules/dom-helpers": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz", - "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==", - "dependencies": { - "@babel/runtime": "^7.1.2" - } - }, - "node_modules/material-ui/node_modules/react-transition-group": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-1.2.1.tgz", - "integrity": "sha512-CWaL3laCmgAFdxdKbhhps+c0HRGF4c+hdM4H23+FI1QBNUyx/AMeIJGWorehPNSaKnQNOAxL7PQmqMu78CDj3Q==", - "dependencies": { - "chain-function": "^1.0.0", - "dom-helpers": "^3.2.0", - "loose-envify": "^1.3.1", - "prop-types": "^15.5.6", - "warning": "^3.0.0" - }, - "peerDependencies": { - "react": "^15.0.0 || ^16.0.0", - "react-dom": "^15.0.0 || ^16.0.0" - } - }, "node_modules/mdn-data": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz", @@ -21576,14 +21478,6 @@ "node": ">=0.4.0" } }, - "node_modules/promise": { - "version": "7.3.1", - "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", - "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", - "dependencies": { - "asap": "~2.0.3" - } - }, "node_modules/promise-breaker": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/promise-breaker/-/promise-breaker-6.0.0.tgz", @@ -22163,41 +22057,6 @@ "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==", "dev": true }, - "node_modules/react-event-listener": { - "version": "0.5.10", - "resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.5.10.tgz", - "integrity": "sha512-YZklRszh9hq3WP3bdNLjFwJcTCVe7qyTf5+LWNaHfZQaZrptsefDK2B5HHpOsEEaMHvjllUPr0+qIFVTSsurow==", - "dependencies": { - "@babel/runtime": "7.0.0-beta.42", - "fbjs": "^0.8.16", - "prop-types": "^15.6.0", - "warning": "^3.0.0" - }, - "peerDependencies": { - "react": "^15.3.0 || ^16.0.0" - } - }, - "node_modules/react-event-listener/node_modules/@babel/runtime": { - "version": "7.0.0-beta.42", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0-beta.42.tgz", - "integrity": "sha512-iOGRzUoONLOtmCvjUsZv3mZzgCT6ljHQY5fr1qG1QIiJQwtM7zbPWGGpa3QWETq+UqwWyJnoi5XZDZRwZDFciQ==", - "dependencies": { - "core-js": "^2.5.3", - "regenerator-runtime": "^0.11.1" - } - }, - "node_modules/react-event-listener/node_modules/core-js": { - "version": "2.6.12", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz", - "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==", - "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.", - "hasInstallScript": true - }, - "node_modules/react-event-listener/node_modules/regenerator-runtime": { - "version": "0.11.1", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz", - "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==" - }, "node_modules/react-fast-compare": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", @@ -22512,33 +22371,6 @@ "node": ">=8.10.0" } }, - "node_modules/recompose": { - "version": "0.26.0", - "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.26.0.tgz", - "integrity": "sha512-KwOu6ztO0mN5vy3+zDcc45lgnaUoaQse/a5yLVqtzTK13czSWnFGmXbQVmnoMgDkI5POd1EwIKSbjU1V7xdZog==", - "dependencies": { - "change-emitter": "^0.1.2", - "fbjs": "^0.8.1", - "hoist-non-react-statics": "^2.3.1", - "symbol-observable": "^1.0.4" - }, - "peerDependencies": { - "react": "^0.14.0 || ^15.0.0 || ^16.0.0" - } - }, - "node_modules/recompose/node_modules/hoist-non-react-statics": { - "version": "2.5.5", - "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz", - "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==" - }, - "node_modules/recompose/node_modules/symbol-observable": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz", - "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==", - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/recursive-readdir": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz", @@ -23262,7 +23094,8 @@ "node_modules/safer-buffer": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", - "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", + "dev": true }, "node_modules/sanitize.css": { "version": "13.0.0", @@ -23565,11 +23398,6 @@ "node": ">= 0.4" } }, - "node_modules/setimmediate": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", - "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==" - }, "node_modules/setprototypeof": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", @@ -23623,11 +23451,6 @@ "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz", "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==" }, - "node_modules/simple-assign": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/simple-assign/-/simple-assign-0.1.0.tgz", - "integrity": "sha512-otdSSQzuVsmDoe5MnSm4ZgHd5sl0ak6A1CTjW1R/DUHQ8xoZuU1NUzf9x6n9Dvp3nxpvW51WNMQ/7rQ9432xDg==" - }, "node_modules/simple-swizzle": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", @@ -23778,9 +23601,9 @@ "dev": true }, "node_modules/socks/node_modules/ip": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz", - "integrity": "sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.1.tgz", + "integrity": "sha512-lJUL9imLTNi1ZfXT+DU6rBBdbiKGBuay9B6xGSPVjUeQwaH1RIGqef8RZkUtHioLmSNpPR5M4HVKJGm1j8FWVQ==", "dev": true }, "node_modules/sort-any": { @@ -25523,28 +25346,6 @@ "node": ">=14.17" } }, - "node_modules/ua-parser-js": { - "version": "0.7.37", - "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.37.tgz", - "integrity": "sha512-xV8kqRKM+jhMvcHWUKthV9fNebIzrNy//2O9ZwWcfiBFR5f25XVZPLlEajk/sf3Ra15V92isyQqnIEXRDaZWEA==", - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/ua-parser-js" - }, - { - "type": "paypal", - "url": "https://paypal.me/faisalman" - }, - { - "type": "github", - "url": "https://github.com/sponsors/faisalman" - } - ], - "engines": { - "node": "*" - } - }, "node_modules/uc.micro": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz", @@ -25973,14 +25774,6 @@ "makeerror": "1.0.12" } }, - "node_modules/warning": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", - "integrity": "sha512-jMBt6pUrKn5I+OGgtQ4YZLdhIeJmObddh6CsibPxyQ5yPZm1XExSyzC1LCNX7BzhxWgiHmizBWJTHJIjMjTQYQ==", - "dependencies": { - "loose-envify": "^1.0.0" - } - }, "node_modules/watchpack": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", @@ -26419,7 +26212,8 @@ "node_modules/whatwg-fetch": { "version": "3.6.20", "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.20.tgz", - "integrity": "sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg==" + "integrity": "sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg==", + "dev": true }, "node_modules/whatwg-mimetype": { "version": "2.3.0", diff --git a/package.json b/package.json index 066f23d2c..d0138b723 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "@mui/icons-material": "5.15.12", "@mui/lab": "5.0.0-alpha.167", "@mui/material": "5.15.12", + "@mui/x-date-pickers": "6.19.6", "@reduxjs/toolkit": "2.2.1", "@sentry/react": "7.106.0", "@sentry/tracing": "7.106.0", @@ -40,7 +41,6 @@ "leaflet": "1.9.4", "lint-staged": "15.2.2", "lodash.debounce": "4.0.8", - "material-ui": "0.20.0", "moment": "2.30.1", "oidc-client-ts": "3.0.1", "prop-types": "15.8.1", diff --git a/src/components/Dialogs/AddStopPlaceSuggestionListItem.js b/src/components/Dialogs/AddStopPlaceSuggestionListItem.js index a9212ce79..53c79c5de 100644 --- a/src/components/Dialogs/AddStopPlaceSuggestionListItem.js +++ b/src/components/Dialogs/AddStopPlaceSuggestionListItem.js @@ -14,7 +14,7 @@ limitations under the Licence. */ import React, { Component } from "react"; import PropTypes from "prop-types"; -import Checkbox from "material-ui/Checkbox"; +import Checkbox from "@mui/material/Checkbox"; import ModalityIconImg from "../MainPage/ModalityIconImg"; import { injectIntl } from "react-intl"; import HasExpiredInfo from "../MainPage/HasExpiredInfo"; diff --git a/src/components/Dialogs/AltNamesDialog.js b/src/components/Dialogs/AltNamesDialog.js index 35f288e4a..fe18d4787 100644 --- a/src/components/Dialogs/AltNamesDialog.js +++ b/src/components/Dialogs/AltNamesDialog.js @@ -14,10 +14,10 @@ limitations under the Licence. */ import React from "react"; import { connect } from "react-redux"; -import MdDelete from "material-ui/svg-icons/action/delete"; +import MdDelete from "@mui/icons-material/Delete"; import * as altNameConfig from "../../config/altNamesConfig"; -import MdEdit from "material-ui/svg-icons/editor/mode-edit"; -import IconButton from "material-ui/IconButton"; +import MdEdit from "@mui/icons-material/ModeEdit"; +import IconButton from "@mui/material/IconButton"; import { StopPlaceActions } from "../../actions/"; import ConfirmDialog from "./ConfirmDialog"; import { getPrimaryColor } from "../../config/themeConfig"; diff --git a/src/components/Dialogs/CompassBearingDialog.js b/src/components/Dialogs/CompassBearingDialog.js index bee7e1c43..7ed96eccb 100644 --- a/src/components/Dialogs/CompassBearingDialog.js +++ b/src/components/Dialogs/CompassBearingDialog.js @@ -21,7 +21,7 @@ import { DialogContent, DialogTitle, } from "@mui/material"; -import { TextField } from "material-ui"; +import { TextField } from "@mui/material"; class CompassBearingDialog extends React.Component { constructor(props) { diff --git a/src/components/Dialogs/CoordinatesDialog.js b/src/components/Dialogs/CoordinatesDialog.js index 301bcb718..41e4dec77 100644 --- a/src/components/Dialogs/CoordinatesDialog.js +++ b/src/components/Dialogs/CoordinatesDialog.js @@ -21,7 +21,7 @@ import { DialogContent, DialogTitle, } from "@mui/material"; -import { TextField } from "material-ui"; +import { TextField } from "@mui/material"; import { extractCoordinates } from "../../utils/"; class CoordinatesDialog extends React.Component { diff --git a/src/components/Dialogs/DialogHeader.js b/src/components/Dialogs/DialogHeader.js index c69805aac..65254b9d5 100644 --- a/src/components/Dialogs/DialogHeader.js +++ b/src/components/Dialogs/DialogHeader.js @@ -14,8 +14,8 @@ limitations under the Licence. */ import React, { Component } from "react"; import PropTypes from "prop-types"; -import MdClose from "material-ui/svg-icons/navigation/close"; -import IconButton from "material-ui/IconButton"; +import MdClose from "@mui/icons-material/Close"; +import IconButton from "@mui/material/IconButton"; class DialogHeader extends Component { render() { diff --git a/src/components/Dialogs/EditAltName.js b/src/components/Dialogs/EditAltName.js index 29372deb7..416466b13 100644 --- a/src/components/Dialogs/EditAltName.js +++ b/src/components/Dialogs/EditAltName.js @@ -13,14 +13,14 @@ limitations under the Licence. */ import React, { Component } from "react"; -import FlatButton from "material-ui/FlatButton"; -import SelectField from "material-ui/SelectField"; -import MenuItem from "material-ui/MenuItem"; -import TextField from "material-ui/TextField"; +import FlatButton from "@mui/material/Button"; +import SelectField from "@mui/material/Select"; +import MenuItem from "@mui/material/MenuItem"; +import TextField from "@mui/material/TextField"; import * as altNameConfig from "../../config/altNamesConfig"; import { getIn } from "../../utils/"; -import MdClose from "material-ui/svg-icons/navigation/close"; -import IconButton from "material-ui/IconButton"; +import MdClose from "@mui/icons-material/Close"; +import IconButton from "@mui/material/IconButton"; class EditAltName extends Component { constructor(props) { diff --git a/src/components/Dialogs/KeyValuesDialog.js b/src/components/Dialogs/KeyValuesDialog.js index 2e8057678..1424cd81d 100644 --- a/src/components/Dialogs/KeyValuesDialog.js +++ b/src/components/Dialogs/KeyValuesDialog.js @@ -14,16 +14,16 @@ limitations under the Licence. */ import React from "react"; import { connect } from "react-redux"; -import MdEdit from "material-ui/svg-icons/editor/mode-edit"; -import MdRemove from "material-ui/svg-icons/action/delete"; +import MdEdit from "@mui/icons-material/ModeEdit"; +import MdRemove from "@mui/icons-material/Delete"; import { getPrimaryColor } from "../../config/themeConfig"; import EditKeyValuePair from "../EditStopPage/EditKeyValuePair"; import CreateKeyValuePair from "../EditStopPage/CreateKeyValuePair"; import { StopPlaceActions, UserActions } from "../../actions/"; -import FloatingActionButton from "material-ui/FloatingActionButton"; -import ContentAdd from "material-ui/svg-icons/content/add"; +import Fab from "@mui/material/Fab"; import { selectKeyValuesDataSource } from "../../reducers/selectors"; import DialogHeader from "./DialogHeader"; +import Add from "@mui/icons-material/Add"; class KeyValuesDialog extends React.Component { constructor(props) { @@ -197,13 +197,13 @@ class KeyValuesDialog extends React.Component { )} {!disabled && ( - - - + + )} { const loadingStyle = { diff --git a/src/components/Dialogs/NewAltName.js b/src/components/Dialogs/NewAltName.js index 7be8cbd6e..53fda9ab8 100644 --- a/src/components/Dialogs/NewAltName.js +++ b/src/components/Dialogs/NewAltName.js @@ -13,10 +13,10 @@ limitations under the Licence. */ import React, { Component } from "react"; -import FlatButton from "material-ui/FlatButton"; -import SelectField from "material-ui/SelectField"; -import MenuItem from "material-ui/MenuItem"; -import TextField from "material-ui/TextField"; +import FlatButton from "@mui/material/Button"; +import SelectField from "@mui/material/Select"; +import MenuItem from "@mui/material/MenuItem"; +import TextField from "@mui/material/TextField"; import * as altNameConfig from "../../config/altNamesConfig"; class NewAltName extends Component { diff --git a/src/components/Dialogs/SaveDialog.js b/src/components/Dialogs/SaveDialog.js index c4611bb2e..e03d53a65 100644 --- a/src/components/Dialogs/SaveDialog.js +++ b/src/components/Dialogs/SaveDialog.js @@ -23,7 +23,7 @@ import { DialogTitle, } from "@mui/material"; import { Cancel, Save } from "@mui/icons-material"; -import { TextField } from "material-ui"; +import { TextField } from "@mui/material"; class SaveDialog extends React.Component { constructor(props) { diff --git a/src/components/Dialogs/ScrollableQuayItem.js b/src/components/Dialogs/ScrollableQuayItem.js index 2f2c07c71..4ed38a86f 100644 --- a/src/components/Dialogs/ScrollableQuayItem.js +++ b/src/components/Dialogs/ScrollableQuayItem.js @@ -14,7 +14,7 @@ limitations under the Licence. */ import React from "react"; import Code from "../EditStopPage/Code"; -import Checkbox from "material-ui/Checkbox"; +import Checkbox from "@mui/material/Checkbox"; class ScrollableQuayItem extends React.Component { render() { diff --git a/src/components/Dialogs/TerminateStopPlaceDialog.js b/src/components/Dialogs/TerminateStopPlaceDialog.js index bc09606f3..141063cda 100644 --- a/src/components/Dialogs/TerminateStopPlaceDialog.js +++ b/src/components/Dialogs/TerminateStopPlaceDialog.js @@ -14,12 +14,11 @@ limitations under the Licence. */ import React from "react"; import PropTypes from "prop-types"; -import Checkbox from "material-ui/Checkbox"; -import TimePicker from "material-ui/TimePicker"; -import DatePicker from "material-ui/DatePicker"; +import Checkbox from "@mui/material/Checkbox"; +import {DatePicker, TimePicker} from "@mui/x-date-pickers/"; import { getEarliestFromDate } from "../../utils/saveDialogUtils"; import areIntlLocalesSupported from "intl-locales-supported"; -import TextField from "material-ui/TextField"; +import TextField from "@mui/material/TextField"; import helpers from "../../modelUtils/mapToQueryVariables"; import Spinner from "../../static/icons/spinner"; import { getStopPlaceSearchUrl } from "../../utils/shamash"; diff --git a/src/components/EditParentStopPage/AdjacentStopConnection.js b/src/components/EditParentStopPage/AdjacentStopConnection.js index 22654836a..367a39d3a 100644 --- a/src/components/EditParentStopPage/AdjacentStopConnection.js +++ b/src/components/EditParentStopPage/AdjacentStopConnection.js @@ -15,9 +15,9 @@ limitations under the Licence. */ import React, { Component } from "react"; import PropTypes from "prop-types"; import { injectIntl } from "react-intl"; -import EditorInsertLink from "material-ui/svg-icons/editor/insert-link"; -import MdDelete from "material-ui/svg-icons/action/delete"; -import IconButton from "material-ui/IconButton"; +import EditorInsertLink from "@mui/icons-material/InsertLink"; +import MdDelete from "@mui/icons-material/Delete"; +import IconButton from "@mui/material/IconButton"; class AdjacentStopConnection extends Component { handleRemoveAdjacentConnection = () => { diff --git a/src/components/EditParentStopPage/EditParentGeneral.js b/src/components/EditParentStopPage/EditParentGeneral.js index c78d6585c..c28892f34 100644 --- a/src/components/EditParentStopPage/EditParentGeneral.js +++ b/src/components/EditParentStopPage/EditParentGeneral.js @@ -15,12 +15,12 @@ limitations under the Licence. */ import React from "react"; import { connect } from "react-redux"; import { injectIntl } from "react-intl"; -import FlatButton from "material-ui/FlatButton"; +import FlatButton from "@mui/material/Button"; import ParentStopDetails from "./ParentStopDetails"; -import MdBack from "material-ui/svg-icons/navigation/arrow-back"; +import MdBack from "@mui/icons-material/ArrowBack"; import VersionsPopover from "../EditStopPage/VersionsPopover"; -import MdUndo from "material-ui/svg-icons/content/undo"; -import MdSave from "material-ui/svg-icons/content/save"; +import MdUndo from "@mui/icons-material/Undo"; +import MdSave from "@mui/icons-material/Save"; import ConfirmDialog from "../Dialogs/ConfirmDialog"; import { StopPlaceActions, UserActions } from "../../actions/"; import SaveDialog from "../Dialogs/SaveDialog"; diff --git a/src/components/EditParentStopPage/ParentStopDetails.js b/src/components/EditParentStopPage/ParentStopDetails.js index fa30b5038..afea844fc 100644 --- a/src/components/EditParentStopPage/ParentStopDetails.js +++ b/src/components/EditParentStopPage/ParentStopDetails.js @@ -15,15 +15,15 @@ limitations under the Licence. */ import React, { Component } from "react"; import { connect } from "react-redux"; import { injectIntl } from "react-intl"; -import MdWarning from "material-ui/svg-icons/alert/warning"; -import IconButton from "material-ui/IconButton"; -import MdLanguage from "material-ui/svg-icons/action/language"; +import MdWarning from "@mui/icons-material/Warning"; +import IconButton from "@mui/material/IconButton"; +import MdLanguage from "@mui/icons-material/Language"; import ImportedId from "../EditStopPage/ImportedId"; import { StopPlaceActions } from "../../actions/"; -import TextField from "material-ui/TextField"; -import Divider from "material-ui/Divider"; +import TextField from "@mui/material/TextField"; +import Divider from "@mui/material/Divider"; import StopPlaceList from "./StopPlaceList"; -import FlatButton from "material-ui/FlatButton"; +import FlatButton from "@mui/material/Button"; import CoordinatesDialog from "../Dialogs/CoordinatesDialog"; import AddStopPlaceToParent from "../Dialogs/AddStopPlaceToParent"; import TagsDialog from "../EditStopPage/TagsDialog"; diff --git a/src/components/EditParentStopPage/StopPlaceList.js b/src/components/EditParentStopPage/StopPlaceList.js index e77aa2cb9..ef0c63f67 100644 --- a/src/components/EditParentStopPage/StopPlaceList.js +++ b/src/components/EditParentStopPage/StopPlaceList.js @@ -15,8 +15,8 @@ limitations under the Licence. */ import React, { Component } from "react"; import PropTypes from "prop-types"; import StopPlaceListItem from "./StopPlaceListItem"; -import FloatingActionButton from "material-ui/FloatingActionButton"; -import ContentAdd from "material-ui/svg-icons/content/add"; +import Fab from "@mui/material/Fab"; +import ContentAdd from "@mui/icons-material/Add"; import { injectIntl } from "react-intl"; import Loader from "../Dialogs/Loader"; import { StopPlaceActions, UserActions } from "../../actions/"; @@ -65,14 +65,14 @@ class StopPlaceList extends Component { {formatMessage({ id: "children_of_parent_stop_place" })} {isLoading ? : null} - - +
{ flexDirection="row" className={classes.boxFullWidth} > - + ( diff --git a/src/components/EditStopPage/VersionsPopover.js b/src/components/EditStopPage/VersionsPopover.js index 6a45bc8d2..41cd93e80 100644 --- a/src/components/EditStopPage/VersionsPopover.js +++ b/src/components/EditStopPage/VersionsPopover.js @@ -14,8 +14,8 @@ limitations under the Licence. */ import React, { Component } from "react"; import PropTypes from "prop-types"; -import Menu from "material-ui/Menu"; -import MenuItem from "material-ui/MenuItem"; +import Menu from "@mui/material/Menu"; +import MenuItem from "@mui/material/MenuItem"; import { sortVersions } from "../../utils"; import { Popover } from "@mui/material"; diff --git a/src/components/EditStopPage/WeightingPopover.js b/src/components/EditStopPage/WeightingPopover.js index 31441a54e..556f0a766 100644 --- a/src/components/EditStopPage/WeightingPopover.js +++ b/src/components/EditStopPage/WeightingPopover.js @@ -13,8 +13,8 @@ See the Licence for the specific language governing permissions and limitations under the Licence. */ import React from "react"; -import MenuItem from "material-ui/MenuItem"; -import MdTransfer from "material-ui/svg-icons/maps/transfer-within-a-station"; +import MenuItem from "@mui/material/MenuItem"; +import MdTransfer from "@mui/icons-material/TransferWithinAStation"; import weightTypes, { weightColors } from "../../models/weightTypes"; import { injectIntl } from "react-intl"; import { Popover } from "@mui/material"; diff --git a/src/components/EditStopPage/WheelChairPopover.js b/src/components/EditStopPage/WheelChairPopover.js index f1f06ae7b..1bcd75c83 100644 --- a/src/components/EditStopPage/WheelChairPopover.js +++ b/src/components/EditStopPage/WheelChairPopover.js @@ -13,9 +13,9 @@ See the Licence for the specific language governing permissions and limitations under the Licence. */ import React from "react"; -import MenuItem from "material-ui/MenuItem"; -import WheelChair from "material-ui/svg-icons/action/accessible"; -import IconButton from "material-ui/IconButton"; +import MenuItem from "@mui/material/MenuItem"; +import WheelChair from "@mui/icons-material/Accessible"; +import IconButton from "@mui/material/IconButton"; import accessibilityAssessments from "../../models/accessibilityAssessments"; import { Popover } from "@mui/material"; diff --git a/src/components/GroupOfStopPlaces/EditGroupOfStopPlaces.js b/src/components/GroupOfStopPlaces/EditGroupOfStopPlaces.js index e4b6784d6..431b78e78 100644 --- a/src/components/GroupOfStopPlaces/EditGroupOfStopPlaces.js +++ b/src/components/GroupOfStopPlaces/EditGroupOfStopPlaces.js @@ -13,12 +13,12 @@ limitations under the Licence. */ import React, { Component } from "react"; -import MdBack from "material-ui/svg-icons/navigation/arrow-back"; +import MdBack from "@mui/icons-material/ArrowBack"; import GroupOfStopPlaceDetails from "./GroupOfStopPlacesDetails"; import { injectIntl } from "react-intl"; -import FlatButton from "material-ui/FlatButton"; -import MdUndo from "material-ui/svg-icons/content/undo"; -import MdSave from "material-ui/svg-icons/content/save"; +import FlatButton from "@mui/material/Button"; +import MdUndo from "@mui/icons-material/Undo"; +import MdSave from "@mui/icons-material/Save"; import { connect } from "react-redux"; import SaveGroupDialog from "../Dialogs/SaveGroupDialog"; import mapHelper from "../../modelUtils/mapToQueryVariables"; diff --git a/src/components/GroupOfStopPlaces/GroupOfStopPlacesDetails.js b/src/components/GroupOfStopPlaces/GroupOfStopPlacesDetails.js index 4cec9e261..c7a95e0e4 100644 --- a/src/components/GroupOfStopPlaces/GroupOfStopPlacesDetails.js +++ b/src/components/GroupOfStopPlaces/GroupOfStopPlacesDetails.js @@ -1,6 +1,6 @@ import React, { Component } from "react"; -import TextField from "material-ui/TextField"; -import Divider from "material-ui/Divider"; +import TextField from "@mui/material/TextField"; +import Divider from "@mui/material/Divider"; import GroupOfStopPlacesList from "./GroupOfStopPlacesList"; import { StopPlacesGroupActions } from "../../actions/"; import { connect } from "react-redux"; diff --git a/src/components/GroupOfStopPlaces/GroupOfStopPlacesList.js b/src/components/GroupOfStopPlaces/GroupOfStopPlacesList.js index 71315353a..2801866d5 100644 --- a/src/components/GroupOfStopPlaces/GroupOfStopPlacesList.js +++ b/src/components/GroupOfStopPlaces/GroupOfStopPlacesList.js @@ -15,8 +15,8 @@ import React, { Component } from "react"; import StopPlaceListItem from "../EditParentStopPage/StopPlaceListItem"; import { injectIntl } from "react-intl"; -import FloatingActionButton from "material-ui/FloatingActionButton"; -import ContentAdd from "material-ui/svg-icons/content/add"; +import Fab from "@mui/material/Fab"; +import ContentAdd from "@mui/icons-material/Add"; import { connect } from "react-redux"; import StopPlacesGroupActions from "../../actions/StopPlacesGroupActions"; import AddMemberToGroup from "../Dialogs/AddMemberToGroup"; @@ -62,7 +62,7 @@ class GroupOfStopPlacesList extends Component {
{formatMessage({ id: "stop_places" })}
- { this.setState({ addStopPlaceOpen: true }); }} @@ -71,7 +71,7 @@ class GroupOfStopPlacesList extends Component { style={{ marginLeft: 20, marginBottom: 10 }} > - +
{stopPlaces.map((stopPlace, i) => ( diff --git a/src/components/Header.js b/src/components/Header.js index 62e598864..82cac874f 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -14,21 +14,21 @@ limitations under the Licence. */ import React from "react"; import { connect } from "react-redux"; -import AppBar from "material-ui/AppBar"; -import IconButton from "material-ui/IconButton"; -import IconMenu from "material-ui/IconMenu"; -import MenuItem from "material-ui/MenuItem"; -import MoreVertIcon from "material-ui/svg-icons/navigation/more-vert"; -import ArrowDropRight from "material-ui/svg-icons/navigation-arrow-drop-right"; +import AppBar from "@mui/material/AppBar"; +import IconButton from "@mui/material/IconButton"; +import IconMenu from "@mui/icons-material/Menu"; +import MenuItem from "@mui/material/MenuItem"; +import MoreVertIcon from "@mui/icons-material/MoreVert"; +import ArrowDropRight from "@mui/icons-material/ArrowRight"; import { getLogo } from "../config/themeConfig"; -import MdAccount from "material-ui/svg-icons/action/account-circle"; -import MdLanguage from "material-ui/svg-icons/action/language"; -import MdSettings from "material-ui/svg-icons/action/settings"; -import MdMap from "material-ui/svg-icons/maps/map"; +import MdAccount from "@mui/icons-material/AccountCircle"; +import MdLanguage from "@mui/icons-material/Language"; +import MdSettings from "@mui/icons-material/Settings"; +import MdMap from "@mui/icons-material/Map"; import { UserActions } from "../actions/"; import { getIn } from "../utils"; -import MdReport from "material-ui/svg-icons/content/report"; -import MdHelp from "material-ui/svg-icons/action/help"; +import MdReport from "@mui/icons-material/Report"; +import MdHelp from "@mui/icons-material/Help"; import { getTiamatEnv, getEnvColor } from "../config/themeConfig"; import ConfirmDialog from "./Dialogs/ConfirmDialog"; import { Button } from "@mui/material"; diff --git a/src/components/MainPage/CreateNewStop.js b/src/components/MainPage/CreateNewStop.js index 3ab67fa15..9b44f2867 100644 --- a/src/components/MainPage/CreateNewStop.js +++ b/src/components/MainPage/CreateNewStop.js @@ -13,7 +13,7 @@ See the Licence for the specific language governing permissions and limitations under the Licence. */ import React from "react"; -import IconButton from "material-ui/IconButton"; +import IconButton from "@mui/material/IconButton"; import { connect } from "react-redux"; import { UserActions } from "../../actions/"; import newStopIcon from "../../static/icons/new-stop-icon-2x.png"; diff --git a/src/components/MainPage/FavoritePopover.js b/src/components/MainPage/FavoritePopover.js index f9db12df6..22a18a073 100644 --- a/src/components/MainPage/FavoritePopover.js +++ b/src/components/MainPage/FavoritePopover.js @@ -14,11 +14,11 @@ limitations under the Licence. */ import React from "react"; import { connect } from "react-redux"; -import MenuItem from "material-ui/MenuItem"; -import FlatButton from "material-ui/FlatButton"; +import MenuItem from "@mui/material/MenuItem"; +import FlatButton from "@mui/material/Button"; import FavoriteManager from "../../singletons/FavoriteManager"; -import StarIcon from "material-ui/svg-icons/toggle/star"; -import MdDelete from "material-ui/svg-icons/action/delete"; +import StarIcon from "@mui/icons-material/Star"; +import MdDelete from "@mui/icons-material/Delete"; import { UserActions } from "../../actions/"; import { Popover } from "@mui/material"; diff --git a/src/components/MainPage/GroupResultInfo.js b/src/components/MainPage/GroupResultInfo.js index 8522d9ca4..dd35369d2 100644 --- a/src/components/MainPage/GroupResultInfo.js +++ b/src/components/MainPage/GroupResultInfo.js @@ -14,7 +14,7 @@ import React, { Component } from "react"; import PropTypes from "prop-types"; -import MdGroup from "material-ui/svg-icons/action/group-work"; +import MdGroup from "@mui/icons-material/GroupWork"; import CircularNumber from "./CircularNumber"; import { getPrimaryDarkerColor } from "../../config/themeConfig"; import StopPlaceLink from "../ReportPage/StopPlaceLink"; diff --git a/src/components/MainPage/HasExpiredInfo.js b/src/components/MainPage/HasExpiredInfo.js index 985bb12dd..77e86c726 100644 --- a/src/components/MainPage/HasExpiredInfo.js +++ b/src/components/MainPage/HasExpiredInfo.js @@ -14,7 +14,7 @@ limitations under the Licence. */ import React, { Component } from "react"; import { injectIntl } from "react-intl"; -import Warning from "material-ui/svg-icons/alert/warning"; +import Warning from "@mui/icons-material/Warning"; class HasExpiredInfo extends Component { render() { diff --git a/src/components/MainPage/ModalityIconSvg.js b/src/components/MainPage/ModalityIconSvg.js index 7b17e66cb..6a4379ee5 100644 --- a/src/components/MainPage/ModalityIconSvg.js +++ b/src/components/MainPage/ModalityIconSvg.js @@ -13,7 +13,7 @@ limitations under the Licence. */ import React from "react"; -import SvgIcon from "material-ui/SvgIcon"; +import SvgIcon from "@mui/material/SvgIcon"; import PropTypes from "prop-types"; import styles from "../../styles/menu.css"; import svgSprite from "../../static/icons/svg-sprite.svg"; diff --git a/src/components/MainPage/ParentStopPlaceResultInfo.js b/src/components/MainPage/ParentStopPlaceResultInfo.js index c02cadcfb..b11859fa6 100644 --- a/src/components/MainPage/ParentStopPlaceResultInfo.js +++ b/src/components/MainPage/ParentStopPlaceResultInfo.js @@ -19,7 +19,7 @@ import ModalityTray from "../ReportPage/ModalityIconTray"; import React, { Component } from "react"; import StopPlaceLink from "../ReportPage/StopPlaceLink"; import TagTray from "./TagTray"; -import WheelChair from "material-ui/svg-icons/action/accessible"; +import WheelChair from "@mui/icons-material/Accessible"; import { getIn } from "../../utils/"; import { getPrimaryDarkerColor } from "../../config/themeConfig"; import ModalityIconImg from "./ModalityIconImg"; diff --git a/src/components/MainPage/SearchBox.js b/src/components/MainPage/SearchBox.js index cf36957ec..c97b5c5a5 100644 --- a/src/components/MainPage/SearchBox.js +++ b/src/components/MainPage/SearchBox.js @@ -15,17 +15,17 @@ limitations under the Licence. */ import { connect } from "react-redux"; import React from "react"; import ReactDOM from "react-dom"; -import AutoComplete from "material-ui/AutoComplete"; -import IconButton from "material-ui/IconButton"; -import RaisedButton from "material-ui/RaisedButton"; -import FlatButton from "material-ui/FlatButton"; -import MdMore from "material-ui/svg-icons/navigation/expand-more"; +import AutoComplete from "@mui/material/Autocomplete"; +import IconButton from "@mui/material/IconButton"; +import RaisedButton from "@mui/material/Button"; +import FlatButton from "@mui/material/Button"; +import MdMore from "@mui/icons-material/ExpandMore"; import { StopPlaceActions, UserActions } from "../../actions/"; import SearchBoxDetails from "./SearchBoxDetails"; import NewStopPlace from "./CreateNewStop"; import { injectIntl } from "react-intl"; -import MenuItem from "material-ui/MenuItem"; -import SearchIcon from "material-ui/svg-icons/action/search"; +import MenuItem from "@mui/material/MenuItem"; +import SearchIcon from "@mui/icons-material/Search"; import FavoriteManager from "../../singletons/FavoriteManager"; import CoordinatesDialog from "../Dialogs/CoordinatesDialog"; import { @@ -36,15 +36,15 @@ import FavoritePopover from "./FavoritePopover"; import ModalityFilter from "../EditStopPage/ModalityFilter"; import FavoriteNameDialog from "../Dialogs/FavoriteNameDialog"; import TopographicalFilter from "./TopographicalFilter"; -import Divider from "material-ui/Divider"; +import Divider from "@mui/material/Divider"; import debounce from "lodash.debounce"; import { getIn } from "../../utils/"; import { getPrimaryDarkerColor } from "../../config/themeConfig"; -import MdLocationSearching from "material-ui/svg-icons/device/location-searching"; +import MdLocationSearching from "@mui/icons-material/LocationSearching"; import MdSpinner from "../../static/icons/spinner"; import { createSearchMenuItem } from "./SearchMenuItem"; -import Menu from "material-ui/Menu"; -import CheckBox from "material-ui/Checkbox"; +import Menu from "@mui/material/Menu"; +import CheckBox from "@mui/material/Checkbox"; import Routes from "../../routes/"; import { Entities } from "../../models/Entities"; import RoleParser from "../../roles/rolesParser"; diff --git a/src/components/MainPage/SearchBoxEditActions.js b/src/components/MainPage/SearchBoxEditActions.js index f97d01a79..5aa008bb3 100644 --- a/src/components/MainPage/SearchBoxEditActions.js +++ b/src/components/MainPage/SearchBoxEditActions.js @@ -13,9 +13,9 @@ See the Licence for the specific language governing permissions and limitations under the Licence. */ import React, { Component } from "react"; -import Edit from "material-ui/svg-icons/editor/mode-edit"; -import FlatButton from "material-ui/FlatButton"; -import MapsMyLocation from "material-ui/svg-icons/maps/my-location"; +import Edit from "@mui/icons-material/ModeEdit"; +import FlatButton from "@mui/material/Button"; +import MapsMyLocation from "@mui/icons-material/MyLocation"; class SearchBoxEditAction extends Component { render() { diff --git a/src/components/MainPage/SearchBoxGeoWarning.js b/src/components/MainPage/SearchBoxGeoWarning.js index df72a6bb8..707a22092 100644 --- a/src/components/MainPage/SearchBoxGeoWarning.js +++ b/src/components/MainPage/SearchBoxGeoWarning.js @@ -14,7 +14,7 @@ limitations under the Licence. */ import React, { Component } from "react"; import { FormattedMessage } from "react-intl"; -import Warning from "material-ui/svg-icons/alert/warning"; +import Warning from "@mui/icons-material/Warning"; class SearchBoxGeoWarning extends Component { render() { diff --git a/src/components/MainPage/SearchMenuItem.js b/src/components/MainPage/SearchMenuItem.js index 40d2dd573..870fea796 100644 --- a/src/components/MainPage/SearchMenuItem.js +++ b/src/components/MainPage/SearchMenuItem.js @@ -14,11 +14,11 @@ limitations under the Licence. */ import React from "react"; import ModalityIconImg from "./ModalityIconImg"; -import MenuItem from "material-ui/MenuItem"; +import MenuItem from "@mui/material/MenuItem"; import ModalityIconTray from "../ReportPage/ModalityIconTray"; import { hasExpired, isFuture } from "../../modelUtils/validBetween"; import { Entities } from "../../models/Entities"; -import MdGroup from "material-ui/svg-icons/action/group-work"; +import MdGroup from "@mui/icons-material/GroupWork"; export const createSearchMenuItem = (element, formatMessage) => { if (!element) return null; diff --git a/src/components/MainPage/StopPlaceResultInfo.js b/src/components/MainPage/StopPlaceResultInfo.js index 55a1a61a3..4af654e91 100644 --- a/src/components/MainPage/StopPlaceResultInfo.js +++ b/src/components/MainPage/StopPlaceResultInfo.js @@ -16,7 +16,7 @@ import React, { Component } from "react"; import HasExpiredInfo from "./HasExpiredInfo"; import ModalityIconImg from "./ModalityIconImg"; import CircularNumber from "./CircularNumber"; -import WheelChair from "material-ui/svg-icons/action/accessible"; +import WheelChair from "@mui/icons-material/Accessible"; import { getIn } from "../../utils/"; import TagTray from "./TagTray"; import { getPrimaryDarkerColor } from "../../config/themeConfig"; diff --git a/src/components/MainPage/TopographicalFilter.js b/src/components/MainPage/TopographicalFilter.js index 23f277112..354e95ccc 100644 --- a/src/components/MainPage/TopographicalFilter.js +++ b/src/components/MainPage/TopographicalFilter.js @@ -13,7 +13,7 @@ See the Licence for the specific language governing permissions and limitations under the Licence. */ import React from "react"; -import Chip from "material-ui/Chip"; +import Chip from "@mui/material/Chip"; class TopographicalFilter extends React.Component { renderChip(data) { diff --git a/src/components/ReportPage/AdvancedReportFilters.js b/src/components/ReportPage/AdvancedReportFilters.js index 3e45fc90e..56161fb5c 100644 --- a/src/components/ReportPage/AdvancedReportFilters.js +++ b/src/components/ReportPage/AdvancedReportFilters.js @@ -13,10 +13,10 @@ limitations under the Licence. */ import React, { Component } from "react"; -import Checkbox from "material-ui/Checkbox"; -import RaisedButton from "material-ui/RaisedButton"; -import Menu from "material-ui/Menu"; -import MenuItem from "material-ui/MenuItem"; +import Checkbox from "@mui/material/Checkbox"; +import RaisedButton from "@mui/material/Button"; +import Menu from "@mui/material/Menu"; +import MenuItem from "@mui/material/MenuItem"; import { Popover } from "@mui/material"; class AdvancedReportFilters extends Component { diff --git a/src/components/ReportPage/GeneralReportFilters.js b/src/components/ReportPage/GeneralReportFilters.js index d8a0eb0bf..15ecc3d64 100644 --- a/src/components/ReportPage/GeneralReportFilters.js +++ b/src/components/ReportPage/GeneralReportFilters.js @@ -13,10 +13,10 @@ limitations under the Licence. */ import React, { Component } from "react"; -import Checkbox from "material-ui/Checkbox"; -import RaisedButton from "material-ui/RaisedButton"; -import Menu from "material-ui/Menu"; -import MenuItem from "material-ui/MenuItem"; +import Checkbox from "@mui/material/Checkbox"; +import RaisedButton from "@mui/material/Button"; +import Menu from "@mui/material/Menu"; +import MenuItem from "@mui/material/MenuItem"; import { Popover } from "@mui/material"; class GeneralReportFilters extends Component { diff --git a/src/components/ReportPage/ReportPageFooter.js b/src/components/ReportPage/ReportPageFooter.js index 0a105b137..4c53460a2 100644 --- a/src/components/ReportPage/ReportPageFooter.js +++ b/src/components/ReportPage/ReportPageFooter.js @@ -13,14 +13,14 @@ See the Licence for the specific language governing permissions and limitations under the Licence. */ import React from "react"; -import RaisedButton from "material-ui/RaisedButton"; +import RaisedButton from "@mui/material/Button"; import { jsonArrayToCSV } from "../../utils/CSVHelper"; import { ColumnTransformersStopPlace, ColumnTransformersQuays, } from "../../models/columnTransformers"; -import Menu from "material-ui/Menu"; -import MenuItem from "material-ui/MenuItem"; +import Menu from "@mui/material/Menu"; +import MenuItem from "@mui/material/MenuItem"; import moment from "moment"; import { getDarkColor } from "../../config/themeConfig"; import { Popover } from "@mui/material"; diff --git a/src/components/ReportPage/ShowMoreMenuFooter.js b/src/components/ReportPage/ShowMoreMenuFooter.js index 5246fd724..097e88aad 100644 --- a/src/components/ReportPage/ShowMoreMenuFooter.js +++ b/src/components/ReportPage/ShowMoreMenuFooter.js @@ -13,7 +13,7 @@ limitations under the Licence. */ import React, { Component } from "react"; -import FlatButton from "material-ui/FlatButton"; +import FlatButton from "@mui/material/Button"; class ShowMoreMenuFooter extends Component { render() { diff --git a/src/components/ReportPage/TagFilterTray.js b/src/components/ReportPage/TagFilterTray.js index 5e86a8a1b..13200fe41 100644 --- a/src/components/ReportPage/TagFilterTray.js +++ b/src/components/ReportPage/TagFilterTray.js @@ -13,7 +13,7 @@ limitations under the Licence. */ import React, { Component } from "react"; -import Chip from "material-ui/Chip"; +import Chip from "@mui/material/Chip"; import TagSuggestionPopover from "./TagSuggestionPopover"; class TagFilterTray extends Component { diff --git a/src/components/ReportPage/TagSuggestionPopover.js b/src/components/ReportPage/TagSuggestionPopover.js index be130da4e..4b02173f7 100644 --- a/src/components/ReportPage/TagSuggestionPopover.js +++ b/src/components/ReportPage/TagSuggestionPopover.js @@ -13,15 +13,15 @@ limitations under the Licence. */ import React, { Component } from "react"; -import FlatButton from "material-ui/FlatButton"; +import FlatButton from "@mui/material/Button"; import { getTagsByName } from "../../actions/TiamatActions"; -import MenuItem from "material-ui/MenuItem"; -import Menu from "material-ui/Menu"; -import Checkbox from "material-ui/Checkbox"; +import MenuItem from "@mui/material/MenuItem"; +import Menu from "@mui/material/Menu"; +import Checkbox from "@mui/material/Checkbox"; import ShowMoreMenuFooter from "./ShowMoreMenuFooter"; import { injectIntl } from "react-intl"; -import TextField from "material-ui/TextField"; -import MdAdd from "material-ui/svg-icons/content/add"; +import TextField from "@mui/material/TextField"; +import MdAdd from "@mui/icons-material/Add"; import { connect } from "react-redux"; import { Popover } from "@mui/material"; diff --git a/src/config/themes/default/defaultTheme.js b/src/config/themes/default/defaultTheme.js index 4f331c1c9..3fa1ce847 100644 --- a/src/config/themes/default/defaultTheme.js +++ b/src/config/themes/default/defaultTheme.js @@ -12,7 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the Licence for the specific language governing permissions and limitations under the Licence. */ -import { fade } from "material-ui/utils/colorManipulator"; +import { lighten } from "@mui/material/styles/"; import { getTiamatEnv } from "../../themeConfig"; export const primary = "#5AC39A"; @@ -54,9 +54,9 @@ export const getV0Theme = () => ({ alternateTextColor: white, canvasColor: white, borderColor: grey300, - disabledColor: fade(darkBlack, 0.3), + disabledColor: lighten(darkBlack, 0.3), pickerHeaderColor: primary, - clockCircleColor: fade(darkBlack, 0.07), + clockCircleColor: lighten(darkBlack, 0.07), shadowColor: fullBlack, }, datePicker: { diff --git a/src/containers/App.js b/src/containers/App.js index d81fbb368..c9e4d1c64 100644 --- a/src/containers/App.js +++ b/src/containers/App.js @@ -13,14 +13,12 @@ See the Licence for the specific language governing permissions and limitations under the Licence. */ import React, { useEffect } from "react"; -import getMuiTheme from "material-ui/styles/getMuiTheme"; import { ThemeProvider, createTheme, - adaptV4Theme, StyledEngineProvider, } from "@mui/material/styles"; -import { MuiThemeProvider as V0MuiThemeProvider } from "material-ui"; + import { IntlProvider } from "react-intl"; import { useDispatch } from "react-redux"; import Header from "../components/Header"; @@ -34,7 +32,7 @@ import { Helmet } from "react-helmet"; import { useAuth } from "../auth/auth"; const muiThemeV0 = getMuiTheme(getV0Theme()); -const muiTheme = createTheme(adaptV4Theme(getTheme())); +const muiTheme = createTheme(getTheme()); const App = ({ children }) => { const auth = useAuth(); diff --git a/src/containers/ReportPage.js b/src/containers/ReportPage.js index 29f6f8caa..accee9aba 100644 --- a/src/containers/ReportPage.js +++ b/src/containers/ReportPage.js @@ -19,18 +19,18 @@ import ReportResultView from "../components/ReportPage/ReportResultView"; import ReportFilterBox from "../components/ReportPage/ReportFilterBox"; import ModalityFilter from "../components/EditStopPage/ModalityFilter"; import TopographicalFilter from "../components/MainPage/TopographicalFilter"; -import AutoComplete from "material-ui/AutoComplete"; +import AutoComplete from "@mui/material/Autocomplete"; import { findStopForReport, getParkingForMultipleStopPlaces, getTopographicPlaces, topographicalPlaceSearch, } from "../actions/TiamatActions"; -import MenuItem from "material-ui/MenuItem"; -import RaisedButton from "material-ui/RaisedButton"; -import TextField from "material-ui/TextField"; +import MenuItem from "@mui/material/MenuItem"; +import RaisedButton from "@mui/material/Button"; +import TextField from "@mui/material/TextField"; import MdSpinner from "../static/icons/spinner"; -import MdSearch from "material-ui/svg-icons/action/search"; +import MdSearch from "@mui/icons-material/Search"; import ColumnFilterPopover from "../components/EditStopPage/ColumnFilterPopover"; import { injectIntl } from "react-intl"; import { diff --git a/src/models/columnTransformers.js b/src/models/columnTransformers.js index d41105c88..f9c7daf66 100644 --- a/src/models/columnTransformers.js +++ b/src/models/columnTransformers.js @@ -19,9 +19,9 @@ import CarParkingIcon from "../static/icons/ParkingIcon"; import BikeParkingIcon from "../static/icons/facilities/BikeParking"; import { getIn, getInTransform } from "../utils/"; import accessibilityAssessments from "../models/accessibilityAssessments"; -import WheelChair from "material-ui/svg-icons/action/accessible"; -import MdCheck from "material-ui/svg-icons/action/check-circle"; -import MdNotChecked from "material-ui/svg-icons/action/highlight-off"; +import WheelChair from "@mui/icons-material/Accessible"; +import MdCheck from "@mui/icons-material/CheckCircle"; +import MdNotChecked from "@mui/icons-material/HighlightOff"; import StairsIcon from "../static/icons/accessibility/Stairs"; import ModalityIconTray from "../components/ReportPage/ModalityIconTray"; import { darkColor } from "../config/themes/default/defaultTheme"; diff --git a/src/static/icons/ParkingIcon.js b/src/static/icons/ParkingIcon.js index e0c6f9537..2aeddc466 100644 --- a/src/static/icons/ParkingIcon.js +++ b/src/static/icons/ParkingIcon.js @@ -13,7 +13,7 @@ See the Licence for the specific language governing permissions and limitations under the Licence. */ import React from "react"; -import SvgIcon from "material-ui/SvgIcon"; +import SvgIcon from "@mui/material/SvgIcon"; const ParkingIcon = (props) => ( { return ( diff --git a/src/static/icons/accessibility/NoWheelChair.js b/src/static/icons/accessibility/NoWheelChair.js index 7759c02de..38df394ff 100644 --- a/src/static/icons/accessibility/NoWheelChair.js +++ b/src/static/icons/accessibility/NoWheelChair.js @@ -13,7 +13,7 @@ See the Licence for the specific language governing permissions and limitations under the Licence. */ import React from "react"; -import SvgIcon from "material-ui/SvgIcon"; +import SvgIcon from "@mui/material/SvgIcon"; const NoWheelChair = (props) => ( diff --git a/src/static/icons/accessibility/Stairs.js b/src/static/icons/accessibility/Stairs.js index d0ee10a26..35c6a66ac 100644 --- a/src/static/icons/accessibility/Stairs.js +++ b/src/static/icons/accessibility/Stairs.js @@ -13,7 +13,7 @@ See the Licence for the specific language governing permissions and limitations under the Licence. */ import React from "react"; -import SvgIcon from "material-ui/SvgIcon"; +import SvgIcon from "@mui/material/SvgIcon"; const Stairs = (props) => ( diff --git a/src/static/icons/accessibility/StepFree.js b/src/static/icons/accessibility/StepFree.js index 1783adc83..212c71444 100644 --- a/src/static/icons/accessibility/StepFree.js +++ b/src/static/icons/accessibility/StepFree.js @@ -13,7 +13,7 @@ See the Licence for the specific language governing permissions and limitations under the Licence. */ import React from "react"; -import SvgIcon from "material-ui/SvgIcon"; +import SvgIcon from "@mui/material/SvgIcon"; const StepFree = (props) => ( diff --git a/src/static/icons/facilities/BikeParking.js b/src/static/icons/facilities/BikeParking.js index 5604c884b..a1d76efcc 100644 --- a/src/static/icons/facilities/BikeParking.js +++ b/src/static/icons/facilities/BikeParking.js @@ -13,7 +13,7 @@ See the Licence for the specific language governing permissions and limitations under the Licence. */ import React from "react"; -import SvgIcon from "material-ui/SvgIcon"; +import SvgIcon from "@mui/material/SvgIcon"; const BikeParking = (props) => ( ( ( ( ( ( diff --git a/src/static/icons/facilities/TicketMachine.js b/src/static/icons/facilities/TicketMachine.js index 766835c08..1d55ae207 100644 --- a/src/static/icons/facilities/TicketMachine.js +++ b/src/static/icons/facilities/TicketMachine.js @@ -13,7 +13,7 @@ See the Licence for the specific language governing permissions and limitations under the Licence. */ import React from "react"; -import SvgIcon from "material-ui/SvgIcon"; +import SvgIcon from "@mui/material/SvgIcon"; const TicketMachine = (props) => ( diff --git a/src/static/icons/facilities/WaitingRoom.js b/src/static/icons/facilities/WaitingRoom.js index 5f98795ff..3e8ea810d 100644 --- a/src/static/icons/facilities/WaitingRoom.js +++ b/src/static/icons/facilities/WaitingRoom.js @@ -13,7 +13,7 @@ See the Licence for the specific language governing permissions and limitations under the Licence. */ import React from "react"; -import SvgIcon from "material-ui/SvgIcon"; +import SvgIcon from "@mui/material/SvgIcon"; const WaitingRoom = (props) => ( ( From 753e425da2de2719c6637d02b7138e6d459b02f8 Mon Sep 17 00:00:00 2001 From: a-limyr Date: Mon, 18 Mar 2024 14:17:17 +0100 Subject: [PATCH 02/43] First pass migration of material ui from version 0 to 5 --- src/components/Dialogs/Loader.js | 4 +- .../EditStopPage/AddTagAutoComplete.js | 9 +- src/components/EditStopPage/TagsDialog.js | 6 +- src/components/Header.js | 470 +++++++++--------- src/components/MainPage/SearchBox.js | 65 +-- src/containers/App.js | 11 +- src/containers/ReportPage.js | 9 +- 7 files changed, 298 insertions(+), 276 deletions(-) diff --git a/src/components/Dialogs/Loader.js b/src/components/Dialogs/Loader.js index c02271094..523f2e3e2 100644 --- a/src/components/Dialogs/Loader.js +++ b/src/components/Dialogs/Loader.js @@ -13,7 +13,7 @@ See the Licence for the specific language governing permissions and limitations under the Licence. */ import React from "react"; -import RefreshIndicator from "@mui/material/RefreshIndicator"; +import CircularProgress from "@mui/material/CircularProgress"; const Loader = () => { const loadingStyle = { @@ -25,7 +25,7 @@ const Loader = () => { return (
- +
); }; diff --git a/src/components/EditStopPage/AddTagAutoComplete.js b/src/components/EditStopPage/AddTagAutoComplete.js index 48fd9978d..385f7d8b2 100644 --- a/src/components/EditStopPage/AddTagAutoComplete.js +++ b/src/components/EditStopPage/AddTagAutoComplete.js @@ -14,6 +14,7 @@ limitations under the Licence. */ import React, { Component } from "react"; import AutoComplete from "@mui/material/Autocomplete"; +import TextField from '@mui/material/TextField'; import debounce from "lodash.debounce"; import MenuItem from "@mui/material/MenuItem"; import { toCamelCase } from "../../utils/"; @@ -145,7 +146,7 @@ class AddTagAutoComplete extends Component { true} onUpdateInput={this.handleUpdate.bind(this)} + renderInput={(params) => ( + + )} /> ); } diff --git a/src/components/EditStopPage/TagsDialog.js b/src/components/EditStopPage/TagsDialog.js index 3555a6709..838115fac 100644 --- a/src/components/EditStopPage/TagsDialog.js +++ b/src/components/EditStopPage/TagsDialog.js @@ -17,7 +17,8 @@ import MdClose from "@mui/icons-material/Close"; import IconButton from "@mui/material/IconButton"; import TagItem from "./TagItem"; import AddTagDialog from "./AddTagDialog"; -import RefreshIndicator from "@mui/material/RefreshIndicator"; +import CircularProgress from "@mui/material/CircularProgress"; + class TagsDialog extends Component { constructor(props) { @@ -93,12 +94,13 @@ class TagsDialog extends Component {
{formatMessage({ id: "tags" })}
{isLoading && ( - + )}
diff --git a/src/components/Header.js b/src/components/Header.js index 82cac874f..d6d006331 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -15,11 +15,15 @@ limitations under the Licence. */ import React from "react"; import { connect } from "react-redux"; import AppBar from "@mui/material/AppBar"; +import Toolbar from "@mui/material/Toolbar"; +import Container from '@mui/material/Container'; import IconButton from "@mui/material/IconButton"; import IconMenu from "@mui/icons-material/Menu"; import MenuItem from "@mui/material/MenuItem"; import MoreVertIcon from "@mui/icons-material/MoreVert"; import ArrowDropRight from "@mui/icons-material/ArrowRight"; +import Typography from '@mui/material/Typography'; +import MenuIcon from '@mui/icons-material/Menu'; import { getLogo } from "../config/themeConfig"; import MdAccount from "@mui/icons-material/AccountCircle"; import MdLanguage from "@mui/icons-material/Language"; @@ -201,255 +205,255 @@ class Header extends React.Component { defaultTitle={formatMessage({ id: "_title" })} titleTemplate={`${formatMessage({ id: "_title" })} - %s`} /> - -
- {title} - {(tiamatEnv === "test" || tiamatEnv === "development") && ( - - {tiamatEnv} - - )} -
-
- {!this.props.auth.isAuthenticated && ( - - )} -
- - } - showMenuIconButton={true} - iconElementLeft={ - - this.handleConfirmChangeRoute( - this.goToMain.bind(this), - "GoToMain", - ) - } - /> - } - iconElementRight={ - - + + + + + this.handleConfirmChangeRoute( + this.goToMain.bind(this), + "GoToMain", + ) + } + /> - } - targetOrigin={{ horizontal: "right", vertical: "top" }} - anchorOrigin={{ horizontal: "right", vertical: "top" }} - > - } - primaryText={reportSite} - onClick={() => - this.handleConfirmChangeRoute( - this.goToReports.bind(this), - "GoToReports", - ) - } - style={{ fontSize: 12, padding: 0 }} - /> - } - leftIcon={} - style={{ fontSize: 12, padding: 0 }} - desktop={true} - multiple - menuItems={[ - - this.handleTogglePublicCodePrivateCodeOnStopPlaces( - !isPublicCodePrivateCodeOnStopPlacesEnabled, - ) - } - insetChildren - desktop={true} - multiple - checked={isPublicCodePrivateCodeOnStopPlacesEnabled} - primaryText={publicCodePrivateCodeSetting} - />, - ]} - /> - } - leftIcon={} - style={{ fontSize: 12, padding: 0 }} - desktop={true} - multiple - menuItems={[ - - this.handleToggleMultiPolylines(!isMultiPolylinesEnabled) - } - insetChildren - desktop={true} - multiple - checked={isMultiPolylinesEnabled} - primaryText={showPathLinks} - />, - - this.handleToggleCompassBearing(!isCompassBearingEnabled) - } - insetChildren - desktop={true} - multiple - checked={isCompassBearingEnabled} - primaryText={showCompassBearing} - />, - +
+
+ {title} + {(tiamatEnv === "test" || tiamatEnv === "development") && ( + + {tiamatEnv} + + )} +
+
+ + + +
+ {!this.props.auth.isAuthenticated && ( + + )} +
+ + + + + } + primaryText={reportSite} onClick={() => - this.handleToggleShowExpiredStops(!showExpiredStops) + this.handleConfirmChangeRoute( + this.goToReports.bind(this), + "GoToReports", + ) } - insetChildren + style={{fontSize: 12, padding: 0}} + /> + } + leftIcon={} + style={{fontSize: 12, padding: 0}} desktop={true} multiple - checked={showExpiredStops} - primaryText={expiredStopLabel} - />, - - this.handleToggleMultimodalEdges(!showMultimodalEdges) - } - insetChildren + menuItems={[ + + this.handleTogglePublicCodePrivateCodeOnStopPlaces( + !isPublicCodePrivateCodeOnStopPlacesEnabled, + ) + } + insetChildren + desktop={true} + multiple + checked={isPublicCodePrivateCodeOnStopPlacesEnabled} + primaryText={publicCodePrivateCodeSetting} + />, + ]} + /> + } + leftIcon={} + style={{fontSize: 12, padding: 0}} desktop={true} multiple - checked={showMultimodalEdges} - primaryText={showMultimodalEdgesLabel} - />, - } - insetChildren menuItems={[ this.handleToggleShowPublicCode(true)} - insetChildren - primaryText={showPublicCodeLabel} - checked={showPublicCode} + style={{fontSize: 12, padding: 0}} + onClick={() => + this.handleToggleMultiPolylines(!isMultiPolylinesEnabled) + } + insetChildren + desktop={true} + multiple + checked={isMultiPolylinesEnabled} + primaryText={showPathLinks} + />, + + this.handleToggleCompassBearing(!isCompassBearingEnabled) + } + insetChildren + desktop={true} + multiple + checked={isCompassBearingEnabled} + primaryText={showCompassBearing} />, this.handleToggleShowPublicCode(false)} - insetChildren - primaryText={showPrivateCodeLabel} - checked={!showPublicCode} + style={{fontSize: 12, padding: 0}} + onClick={() => + this.handleToggleShowExpiredStops(!showExpiredStops) + } + insetChildren + desktop={true} + multiple + checked={showExpiredStops} + primaryText={expiredStopLabel} + />, + + this.handleToggleMultimodalEdges(!showMultimodalEdges) + } + insetChildren + desktop={true} + multiple + checked={showMultimodalEdges} + primaryText={showMultimodalEdgesLabel} + />, + } + insetChildren + menuItems={[ + this.handleToggleShowPublicCode(true)} + insetChildren + primaryText={showPublicCodeLabel} + checked={showPublicCode} + />, + this.handleToggleShowPublicCode(false)} + insetChildren + primaryText={showPrivateCodeLabel} + checked={!showPublicCode} + />, + ]} + />, + + this.handleToggleShowFareZones(!showFareZones) + } + insetChildren + desktop={true} + multiple + checked={showFareZones} + primaryText={showFareZonesLabel} + />, + + this.handleToggleShowTariffZones(!showTariffZones) + } + insetChildren + desktop={true} + multiple + checked={showTariffZones} + primaryText={showTariffZonesLabel} />, ]} - />, - - this.handleToggleShowFareZones(!showFareZones) - } - insetChildren - desktop={true} - multiple - checked={showFareZones} - primaryText={showFareZonesLabel} - />, - - this.handleToggleShowTariffZones(!showTariffZones) - } - insetChildren - desktop={true} - multiple - checked={showTariffZones} - primaryText={showTariffZonesLabel} - />, - ]} - /> - } - leftIcon={} - style={{ fontSize: 12, padding: 0 }} - menuItems={[ - this.handleSetLanguage("nb")} - insetChildren - primaryText={norwegian} - checked={locale === "nb"} - />, - this.handleSetLanguage("en")} - insetChildren - primaryText={english} - checked={locale === "en"} - />, - this.handleSetLanguage("fr")} - insetChildren - primaryText={french} - checked={locale === "fr"} - />, - this.handleSetLanguage("sv")} - insetChildren - primaryText={swedish} - checked={locale === "sv"} - />, - ]} - /> - } - href="https://enturas.atlassian.net/wiki/spaces/PUBLIC/pages/1225523302/User+guide+national+stop+place+registry" - target="_blank" - primaryText={userGuide} - style={{ fontSize: 12, padding: 0 }} - /> - {this.props.auth.isAuthenticated && ( + /> + } + leftIcon={} + style={{fontSize: 12, padding: 0}} + menuItems={[ + this.handleSetLanguage("nb")} + insetChildren + primaryText={norwegian} + checked={locale === "nb"} + />, + this.handleSetLanguage("en")} + insetChildren + primaryText={english} + checked={locale === "en"} + />, + this.handleSetLanguage("fr")} + insetChildren + primaryText={french} + checked={locale === "fr"} + />, + this.handleSetLanguage("sv")} + insetChildren + primaryText={swedish} + checked={locale === "sv"} + />, + ]} + /> } - primaryText={`${logOut} ${username}`} - onClick={() => this.handleLogOut()} - style={{ fontSize: 12, padding: 0 }} + leftIcon={} + href="https://enturas.atlassian.net/wiki/spaces/PUBLIC/pages/1225523302/User+guide+national+stop+place+registry" + target="_blank" + primaryText={userGuide} + style={{fontSize: 12, padding: 0}} /> - )} - - } - /> + {this.props.auth.isAuthenticated && ( + } + primaryText={`${logOut} ${username}`} + onClick={() => this.handleLogOut()} + style={{fontSize: 12, padding: 0}} + /> + )} + + + + + { - this.setState({ - isConfirmDialogOpen: false, - }); - }} - handleConfirm={() => { - this.handleConfirm(); - }} + open={this.state.isConfirmDialogOpen} + handleClose={() => { + this.setState({ + isConfirmDialogOpen: false, + }); + }} + handleConfirm={() => { + this.handleConfirm(); + }} messagesById={{ title: "discard_changes_title", body: "discard_changes_body", diff --git a/src/components/MainPage/SearchBox.js b/src/components/MainPage/SearchBox.js index c97b5c5a5..9b98a97a4 100644 --- a/src/components/MainPage/SearchBox.js +++ b/src/components/MainPage/SearchBox.js @@ -15,9 +15,10 @@ limitations under the Licence. */ import { connect } from "react-redux"; import React from "react"; import ReactDOM from "react-dom"; -import AutoComplete from "@mui/material/Autocomplete"; +import Autocomplete from "@mui/material/Autocomplete"; import IconButton from "@mui/material/IconButton"; import RaisedButton from "@mui/material/Button"; +import CloseIcon from '@mui/icons-material/Close'; import FlatButton from "@mui/material/Button"; import MdMore from "@mui/icons-material/ExpandMore"; import { StopPlaceActions, UserActions } from "../../actions/"; @@ -48,7 +49,8 @@ import CheckBox from "@mui/material/Checkbox"; import Routes from "../../routes/"; import { Entities } from "../../models/Entities"; import RoleParser from "../../roles/rolesParser"; -import { Popover } from "@mui/material"; +import {Box, InputAdornment, Popover} from "@mui/material"; +import TextField from "@mui/material/TextField"; class SearchBox extends React.Component { constructor(props) { @@ -510,12 +512,12 @@ class SearchBox extends React.Component {
- ( + + )} /> )}
- - searchText !== ""} onUpdateInput={this.handleSearchUpdate.bind(this)} maxSearchResults={10} searchText={this.props.searchText} ref="searchText" onNewRequest={this.handleNewRequest.bind(this)} - listStyle={{ width: "auto" }} + + renderInput={(params) => ( + + + + + + + + )} /> -
- - clear - -
- + +
- + this.handleNewStop(false)} style={{ fontSize: "0.9em" }} diff --git a/src/containers/App.js b/src/containers/App.js index c9e4d1c64..dff263ed1 100644 --- a/src/containers/App.js +++ b/src/containers/App.js @@ -30,8 +30,9 @@ import configureLocalization from "../localization/localization"; import { UserActions } from "../actions"; import { Helmet } from "react-helmet"; import { useAuth } from "../auth/auth"; +import MuiThemeProvider from "@mui/material/styles/ThemeProvider" + -const muiThemeV0 = getMuiTheme(getV0Theme()); const muiTheme = createTheme(getTheme()); const App = ({ children }) => { @@ -69,15 +70,15 @@ const App = ({ children }) => { - - + +
{children}
- - + + ); diff --git a/src/containers/ReportPage.js b/src/containers/ReportPage.js index accee9aba..10c4339fd 100644 --- a/src/containers/ReportPage.js +++ b/src/containers/ReportPage.js @@ -425,8 +425,7 @@ class ReportPage extends React.Component { {formatMessage({ id: "filter_report_by_topography" })}
( + + )} /> Date: Mon, 25 Mar 2024 10:08:28 +0100 Subject: [PATCH 03/43] First pass migration of material ui from version 0 to 5 --- .../EditStopPage/ModalitiesMenuItems.js | 3 +- src/components/Header.js | 6 +- src/components/MainPage/FavoritePopover.js | 8 +- src/components/MainPage/SearchBox.js | 78 +++++++++++-------- src/config/themeConfig.js | 12 ++- src/config/themes/default/defaultTheme.js | 33 +++++--- src/containers/StopPlaces.js | 1 - src/reducers/userReducer.js | 3 +- 8 files changed, 91 insertions(+), 53 deletions(-) diff --git a/src/components/EditStopPage/ModalitiesMenuItems.js b/src/components/EditStopPage/ModalitiesMenuItems.js index de49588c9..62e1727d1 100644 --- a/src/components/EditStopPage/ModalitiesMenuItems.js +++ b/src/components/EditStopPage/ModalitiesMenuItems.js @@ -43,7 +43,8 @@ class ModalitiesMenuItems extends React.Component { const chosenStyle = { fontWeight: 600 }; return ( - + + {Object.keys(stopTypes).map((type, index) => { let isLegal = adHocStopPlaceTypes.indexOf(type) > -1 || diff --git a/src/components/Header.js b/src/components/Header.js index d6d006331..3901e624c 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -33,7 +33,7 @@ import { UserActions } from "../actions/"; import { getIn } from "../utils"; import MdReport from "@mui/icons-material/Report"; import MdHelp from "@mui/icons-material/Help"; -import { getTiamatEnv, getEnvColor } from "../config/themeConfig"; +import { getTiamatEnv} from "../config/themeConfig"; import ConfirmDialog from "./Dialogs/ConfirmDialog"; import { Button } from "@mui/material"; import { @@ -254,8 +254,8 @@ class Header extends React.Component { - + } primaryText={reportSite} @@ -439,7 +439,7 @@ class Header extends React.Component { style={{fontSize: 12, padding: 0}} /> )} - + diff --git a/src/components/MainPage/FavoritePopover.js b/src/components/MainPage/FavoritePopover.js index 22a18a073..b335cd94f 100644 --- a/src/components/MainPage/FavoritePopover.js +++ b/src/components/MainPage/FavoritePopover.js @@ -21,6 +21,7 @@ import StarIcon from "@mui/icons-material/Star"; import MdDelete from "@mui/icons-material/Delete"; import { UserActions } from "../../actions/"; import { Popover } from "@mui/material"; +import IconButton from "@mui/material/IconButton"; class FilterPopover extends React.Component { constructor(props) { @@ -63,12 +64,13 @@ class FilterPopover extends React.Component { return (
- } label={caption} labelStyle={{ fontSize: 12 }} - /> + > + + {caption.toUpperCase()} -1 && searchText.indexOf(")") > -1) { - return; + } else { this.props.dispatch(UserActions.setSearchText(searchText)); - this.debouncedSearch(searchText, dataSource, params, filter); + this.debouncedSearch(searchText, this.props.dataSource, this.props.params, this.props.filter); } } @@ -157,7 +156,8 @@ class SearchBox extends React.Component { dispatch(findTopographicalPlace(searchText)); } - handleNewRequest(result) { + handleNewRequest(event,result) { + debugger; if (typeof result.element !== "undefined") { this.props.dispatch(StopPlaceActions.setMarkerOnMap(result.element)); } @@ -250,9 +250,6 @@ class SearchBox extends React.Component { } handleClearSearch() { - this.refs.searchText.setState({ - searchText: "", - }); this.props.dispatch(UserActions.setSearchText("")); } @@ -371,7 +368,6 @@ class SearchBox extends React.Component { const { formatMessage, locale } = intl; const menuItems = this.getMenuItems(this.props); - const Loading = loading && !dataSource.length && [ { @@ -463,6 +459,11 @@ class SearchBox extends React.Component { border: "1px solid rgb(81, 30, 18)", }; + const filterOptions = createFilterOptions({ + matchFrom: 'start', + stringify: (option) => option.text, + }); + return (
- this.handleToggleFilter(false)} style={{ fontSize: 12 }} > {formatMessage({ id: "filters_less" })} - +
)} /> @@ -568,28 +569,37 @@ class SearchBox extends React.Component { searchText !== ""} - onUpdateInput={this.handleSearchUpdate.bind(this)} - maxSearchResults={10} - searchText={this.props.searchText} - ref="searchText" - onNewRequest={this.handleNewRequest.bind(this)} - + filterOptions={(x) => x} + onInputChange={this.handleSearchUpdate.bind(this)} + //maxSearchResults={10} + //inputValue={this.state.searchText} + onChange={this.handleNewRequest.bind(this)} + //getOptionLabel={(option) => `${option.text}` } + getOptionLabel={option.value} + //renderOption={(props, option) => ( + // + // {option.text}{option.value} + // + //)} renderInput={(params) => ( - - - + + + - - - + + + + )} /> diff --git a/src/config/themeConfig.js b/src/config/themeConfig.js index 646a1967c..dfec3120b 100644 --- a/src/config/themeConfig.js +++ b/src/config/themeConfig.js @@ -13,7 +13,7 @@ limitations under the Licence. */ import { getIn } from "../utils"; -import { getEnvColor as defaultEnvColor } from "./themes/default/defaultTheme"; +import {getEnvColor as defaultEnvColor} from "./themes/default/defaultTheme"; import { getV0Theme as getV0DefaultTheme, getTheme as getDefaultTheme, @@ -23,6 +23,7 @@ import { primary as defaultPrimary } from "./themes/default/defaultTheme"; import { primaryDarker as defaultPrimaryDarker, darkColor as defaultDarkColor, + headerColor as defaultBanner, } from "./themes/default/defaultTheme"; export const getTiamatEnv = () => { @@ -77,6 +78,15 @@ export const getPrimaryColor = () => { } }; +export const getHeaderColor = () => { + if (process.env.REACT_APP_THEME) { + return require("./themes/" + process.env.REACT_APP_THEME + "/index.js") + .primary; + } else { + return headerColor; + } +}; + export const getDarkColor = () => { if (process.env.REACT_APP_THEME) { return require("./themes/" + process.env.REACT_APP_THEME + "/index.js") diff --git a/src/config/themes/default/defaultTheme.js b/src/config/themes/default/defaultTheme.js index 3fa1ce847..8f3a13f38 100644 --- a/src/config/themes/default/defaultTheme.js +++ b/src/config/themes/default/defaultTheme.js @@ -27,6 +27,7 @@ const white = "#ffffff"; const darkBlack = "rgba(0, 0, 0, 0.87)"; const fullBlack = "rgba(0, 0, 0, 1)"; + export const getEnvColor = (env) => { let currentEnv = env || getTiamatEnv(); switch (currentEnv.toLowerCase()) { @@ -74,15 +75,29 @@ export const getV0Theme = () => ({ export const getTheme = () => ({ fontFamily: "Roboto, sans-serif", palette: { - primary: { - main: primary, - }, + primary1Color: primary, + primary2Color: cyan700, + primary3Color: grey400, + accent1Color: primary, + accent2Color: grey100, + accent3Color: grey500, + textColor: darkBlack, + alternateTextColor: white, + canvasColor: white, + borderColor: grey300, + disabledColor: lighten(darkBlack, 0.3), + pickerHeaderColor: primary, + clockCircleColor: lighten(darkBlack, 0.07), + shadowColor: fullBlack, + }, + datePicker: { + selectColor: primary, + selectTextColor: white, + }, + checkbox: { + checkedColor: primaryDarker, }, - overrides: { - MuiButton: { - containedPrimary: { - color: white, - }, - }, + appBar: { + color: darkColor, }, }); diff --git a/src/containers/StopPlaces.js b/src/containers/StopPlaces.js index e93aeea14..e4a98a7a9 100644 --- a/src/containers/StopPlaces.js +++ b/src/containers/StopPlaces.js @@ -61,7 +61,6 @@ class StopPlaces extends React.Component { handleLoadStopPlace(props, stopPlaceId, forceLoad) { const { activeSearchResult, dispatch } = props; - if (forceLoad || (!activeSearchResult && stopPlaceId)) { this.setState({ isLoading: true }); diff --git a/src/reducers/userReducer.js b/src/reducers/userReducer.js index 25b3ab5b9..7f3d01fc4 100644 --- a/src/reducers/userReducer.js +++ b/src/reducers/userReducer.js @@ -50,7 +50,6 @@ export const initialState = { keyValuesOrigin: null, lookupCoordinatesOpen: false, newStopIsMultiModal: false, - isCreatingNewStop: false, serverTimeDiff: 0, deleteStopDialogWarning: { warning: false, @@ -175,6 +174,8 @@ const userReducer = (state = initialState, action) => { }); case types.SET_SEARCH_TEXT: + + return Object.assign({}, state, { searchFilters: { ...state.searchFilters, From c1f50459f74892b3e96811da6de55984c81124ba Mon Sep 17 00:00:00 2001 From: a-limyr Date: Mon, 25 Mar 2024 13:12:18 +0100 Subject: [PATCH 04/43] Search box options styling first pass --- src/components/MainPage/SearchBox.js | 47 ++++++++++++++++++++--- src/components/MainPage/SearchMenuItem.js | 6 ++- 2 files changed, 46 insertions(+), 7 deletions(-) diff --git a/src/components/MainPage/SearchBox.js b/src/components/MainPage/SearchBox.js index e0350aa71..d56fc500d 100644 --- a/src/components/MainPage/SearchBox.js +++ b/src/components/MainPage/SearchBox.js @@ -25,7 +25,6 @@ import NewStopPlace from "./CreateNewStop"; import { injectIntl } from "react-intl"; import MenuItem from "@mui/material/MenuItem"; import SearchIcon from "@mui/icons-material/Search"; -import TravelExploreIcon from '@mui/icons-material/TravelExplore'; import FavoriteManager from "../../singletons/FavoriteManager"; import CoordinatesDialog from "../Dialogs/CoordinatesDialog"; import { @@ -36,7 +35,6 @@ import FavoritePopover from "./FavoritePopover"; import ModalityFilter from "../EditStopPage/ModalityFilter"; import FavoriteNameDialog from "../Dialogs/FavoriteNameDialog"; import TopographicalFilter from "./TopographicalFilter"; -import Divider from "@mui/material/Divider"; import debounce from "lodash.debounce"; import { getIn } from "../../utils/"; import { getPrimaryDarkerColor } from "../../config/themeConfig"; @@ -48,9 +46,13 @@ import CheckBox from "@mui/material/Checkbox"; import Routes from "../../routes/"; import { Entities } from "../../models/Entities"; import RoleParser from "../../roles/rolesParser"; -import {Box, Button, InputAdornment, Popover} from "@mui/material"; +import {Box, Button, Popover} from "@mui/material"; import TextField from "@mui/material/TextField"; -import AutoComplete from "@mui/material/Autocomplete"; +import ModalityIconImg from "./ModalityIconImg"; +import {topographicPlaceStyle} from "./SearchMenuItem"; +import ListItemIcon from "@mui/material/ListItemIcon"; +import ListItemText from "@mui/material/ListItemText"; +import Typography from "@mui/material/Typography"; class SearchBox extends React.Component { @@ -577,9 +579,42 @@ class SearchBox extends React.Component { onInputChange={this.handleSearchUpdate.bind(this)} //maxSearchResults={10} //inputValue={this.state.searchText} + //dataSource={ + // loading && !dataSource.length ? Loading : menuItems || [] + //} + renderOption={(props, option, { selected }) => ( +
  • + + + + + {option.text} + + {option.id} + + + + + + + +
    • + )} onChange={this.handleNewRequest.bind(this)} - //getOptionLabel={(option) => `${option.text}` } - getOptionLabel={option.value} + getOptionLabel={(option) => `${option.text}` } + //getOptionLabel={option.value} //renderOption={(props, option) => ( // // {option.text}{option.value} diff --git a/src/components/MainPage/SearchMenuItem.js b/src/components/MainPage/SearchMenuItem.js index 870fea796..7cdda1fe1 100644 --- a/src/components/MainPage/SearchMenuItem.js +++ b/src/components/MainPage/SearchMenuItem.js @@ -51,7 +51,7 @@ const getFutureOrExpiredLabel = (stopPlace) => { return null; }; -const topographicPlaceStyle = { +export const topographicPlaceStyle = { color: "grey", marginTop: -20, marginBottom: -10, @@ -177,6 +177,10 @@ const createStopPlaceMenuItem = (element, formatMessage) => { return { element: element, text: element.name, + stopPlaceType: element.stopPlaceType, + submode: element.submode, + id: element.id, + futureOrExpiredLabel: getFutureOrExpiredLabel(element), value: ( Date: Mon, 25 Mar 2024 14:58:35 +0100 Subject: [PATCH 05/43] Search box options styling first pass --- src/components/MainPage/SearchBox.js | 124 +++++++++++++--------- src/components/MainPage/SearchMenuItem.js | 2 + 2 files changed, 77 insertions(+), 49 deletions(-) diff --git a/src/components/MainPage/SearchBox.js b/src/components/MainPage/SearchBox.js index d56fc500d..ceffc5052 100644 --- a/src/components/MainPage/SearchBox.js +++ b/src/components/MainPage/SearchBox.js @@ -462,8 +462,8 @@ class SearchBox extends React.Component { }; const filterOptions = createFilterOptions({ - matchFrom: 'start', - stringify: (option) => option.text, + matchFrom: 'any', + stringify: (option) => option.text, }); return ( @@ -575,7 +575,9 @@ class SearchBox extends React.Component { //openOnFocus freeSolo options={menuItems} - filterOptions={(x) => x} + loading={true} + //filterOptions={(x) => x !== ""} + //filterOptions={filterOptions} onInputChange={this.handleSearchUpdate.bind(this)} //maxSearchResults={10} //inputValue={this.state.searchText} @@ -583,57 +585,81 @@ class SearchBox extends React.Component { // loading && !dataSource.length ? Loading : menuItems || [] //} renderOption={(props, option, { selected }) => ( -
  • - - - - - {option.text} - - {option.id} - - - - +
  • + +
    +
    +
    +
    {option.text}
    +
    + {option.id} +
    +
    +
    +
    {`${option.topographicPlace}, ${option.parentTopographicPlace}`}
    + {option.futureOrExpiredLabel && ( +
    + {formatMessage({id: option.futureOrExpiredLabel})} +
    + )} +
    +
    + +
    +
    • )} onChange={this.handleNewRequest.bind(this)} - getOptionLabel={(option) => `${option.text}` } - //getOptionLabel={option.value} - //renderOption={(props, option) => ( - // - // {option.text}{option.value} - // - //)} + getOptionLabel={(option) => `${option.text}`} + //getOptionLabel={option.value} + //renderOption={(props, option) => ( + // + // {option.text}{option.value} + // + //)} renderInput={(params) => ( - + - - + - + )} @@ -641,21 +667,21 @@ class SearchBox extends React.Component {
    -
    +
    { - this.handleSaveAsFavorite(!!favorited); - }} + style={{marginLeft: 10, fontSize: 12}} + disabled={!!favorited} + onClick={() => { + this.handleSaveAsFavorite(!!favorited); + }} > - {formatMessage({ id: "filter_save_favorite" })} + {formatMessage({id: "filter_save_favorite"})}
    {chosenResult ? ( - { stopPlaceType: element.stopPlaceType, submode: element.submode, id: element.id, + topographicPlace: element.topographicPlace, + parentTopographicPlace: element.parentTopographicPlace, futureOrExpiredLabel: getFutureOrExpiredLabel(element), value: ( Date: Tue, 9 Apr 2024 13:18:28 +0200 Subject: [PATCH 06/43] Fix for multimodal stops and filtering --- src/actions/TiamatActions.js | 2 +- src/components/Header.js | 75 ++++++--- src/components/MainPage/SearchBox.js | 189 ++++++++++------------ src/components/MainPage/SearchMenuItem.js | 112 +++++++------ 4 files changed, 198 insertions(+), 180 deletions(-) diff --git a/src/actions/TiamatActions.js b/src/actions/TiamatActions.js index 11d056fcc..74103039f 100644 --- a/src/actions/TiamatActions.js +++ b/src/actions/TiamatActions.js @@ -420,7 +420,7 @@ export const getNeighbourStops = query: stopPlaceBBQuery, variables: { includeExpired: includeExpired, - ignoreStopPlaceId, + ignoreStopPlaceId: ignoreStopPlaceId.toString(), latMin: bounds.getSouthWest().lat, latMax: bounds.getNorthEast().lat, lonMin: bounds.getSouthWest().lng, diff --git a/src/components/Header.js b/src/components/Header.js index 3901e624c..6b7fcefa1 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -42,6 +42,7 @@ import { } from "../reducers/zonesSlice"; import { injectIntl } from "react-intl"; import { Helmet } from "react-helmet"; +import Menu from "@mui/material/Menu"; class Header extends React.Component { constructor(props) { @@ -150,6 +151,17 @@ class Header extends React.Component { this.props.dispatch(toggleShowTariffZonesInMap(value)); } + state = { + anchorEl: null, + }; + + handleClick = event => { + this.setState({ anchorEl: event.currentTarget }); + }; + + handleClose = () => { + this.setState({ anchorEl: null }); + }; render() { const { intl, @@ -198,6 +210,7 @@ class Header extends React.Component { const tiamatEnv = getTiamatEnv(); const logo = getLogo(); + const { anchorEl } = this.state; return (
    @@ -255,10 +268,23 @@ class Header extends React.Component { - + + + + } - primaryText={reportSite} + + onClick={() => this.handleConfirmChangeRoute( this.goToReports.bind(this), @@ -266,11 +292,11 @@ class Header extends React.Component { ) } style={{fontSize: 12, padding: 0}} - /> + > + {reportSite} + } - leftIcon={} + style={{fontSize: 12, padding: 0}} desktop={true} multiple @@ -289,11 +315,11 @@ class Header extends React.Component { primaryText={publicCodePrivateCodeSetting} />, ]} - /> + > + {settings} + } - leftIcon={} + style={{fontSize: 12, padding: 0}} desktop={true} multiple @@ -387,11 +413,13 @@ class Header extends React.Component { primaryText={showTariffZonesLabel} />, ]} - /> + > + + {mapSettings} + + } - leftIcon={} + style={{fontSize: 12, padding: 0}} menuItems={[ , ]} - /> + > + + {language} + + } + component={"a"} href="https://enturas.atlassian.net/wiki/spaces/PUBLIC/pages/1225523302/User+guide+national+stop+place+registry" target="_blank" - primaryText={userGuide} style={{fontSize: 12, padding: 0}} - /> + > + + {userGuide} + + {this.props.auth.isAuthenticated && ( } @@ -439,7 +474,7 @@ class Header extends React.Component { style={{fontSize: 12, padding: 0}} /> )} - + diff --git a/src/components/MainPage/SearchBox.js b/src/components/MainPage/SearchBox.js index ceffc5052..834ab09b5 100644 --- a/src/components/MainPage/SearchBox.js +++ b/src/components/MainPage/SearchBox.js @@ -46,7 +46,7 @@ import CheckBox from "@mui/material/Checkbox"; import Routes from "../../routes/"; import { Entities } from "../../models/Entities"; import RoleParser from "../../roles/rolesParser"; -import {Box, Button, Popover} from "@mui/material"; +import {Box, Button, Checkbox, FormControlLabel, FormGroup, Popover} from "@mui/material"; import TextField from "@mui/material/TextField"; import ModalityIconImg from "./ModalityIconImg"; import {topographicPlaceStyle} from "./SearchMenuItem"; @@ -153,13 +153,12 @@ class SearchBox extends React.Component { this.props.dispatch(UserActions.toggleShowFutureAndExpired(value)); } - handleTopographicalPlaceInput(searchText) { + handleTopographicalPlaceInput(event,searchText) { const { dispatch } = this.props; dispatch(findTopographicalPlace(searchText)); } handleNewRequest(event,result) { - debugger; if (typeof result.element !== "undefined") { this.props.dispatch(StopPlaceActions.setMarkerOnMap(result.element)); } @@ -286,14 +285,14 @@ class SearchBox extends React.Component { { text: "", value: ( - - {formatMessage({ id: "no_results_found" })} + +
    + {formatMessage({id: "no_results_found"})}
    - } - /> +     ), }, ]; @@ -414,41 +413,62 @@ class SearchBox extends React.Component { text: name, id: place.id, value: ( - - ), - type: place.topographicPlaceType, - }; + + +
    +
    +
    {name}
    +
    + {formatMessage({id: place.topographicPlaceType})} +
    +
    +
    + +     + ), + type: place.topographicPlaceType, + }; }); - const newStopText = { - headerText: formatMessage({ - id: newStopIsMultiModal - ? "making_parent_stop_place_title" - : "making_stop_place_title", - }), - bodyText: formatMessage({ id: "making_stop_place_hint" }), - }; + const newStopText = { + headerText: formatMessage({ + id: newStopIsMultiModal + ? "making_parent_stop_place_title" + : "making_stop_place_title", + }), + bodyText + : + formatMessage({id: "making_stop_place_hint"}), + }; - let favoriteText = { - title: formatMessage({ id: "favorites_title" }), - noFavoritesFoundText: formatMessage({ id: "no_favorites_found" }), - }; + let favoriteText = { + title: formatMessage({id: "favorites_title"}), + noFavoritesFoundText + : + formatMessage({id: "no_favorites_found"}), + }; - const text = { - emptyDescription: formatMessage({ id: "empty_description" }), + const text = { + emptyDescription: formatMessage({ id: "empty_description" }), edit: formatMessage({ id: "edit" }), view: formatMessage({ id: "view" }), }; + const formControlLabelStyle = { + "& .MuiFormControlLabel-label": { + fontSize: "0.8em" + } + } + const searchBoxWrapperStyle = { top: 60, background: "#fff", @@ -509,19 +529,20 @@ class SearchBox extends React.Component {
    -
    +
    `${option.text}`} hintText={formatMessage({ id: "filter_by_topography" })} options={topographicalPlacesDataSource} - onUpdateInput={this.handleTopographicalPlaceInput.bind( + onInputChange={this.handleTopographicalPlaceInput.bind( this, )} listStyle={{ width: "auto", minWidth: 300 }} @@ -534,23 +555,38 @@ class SearchBox extends React.Component { ref="topoFilter" onNewRequest={this.handleAddChip.bind(this)} renderInput={(params) => ( + )} + renderOption={(props, option, { selected }) => ( + <> + {option.value} + + )} /> - - this.toggleShowFutureAndExpired(value) - } - label={formatMessage({ - id: "show_future_expired_and_terminated", - })} - labelStyle={{ fontSize: "0.8em" }} - /> +
    + + + this.toggleShowFutureAndExpired(value) + } + /> + } + label={ + formatMessage({id: "show_future_expired_and_terminated",}) + } + sx = {formControlLabelStyle} + /> + +
    (
  • - -
    -
    -
    -
    {option.text}
    -
    - {option.id} -
    -
    -
    -
    {`${option.topographicPlace}, ${option.parentTopographicPlace}`}
    - {option.futureOrExpiredLabel && ( -
    - {formatMessage({id: option.futureOrExpiredLabel})} -
    - )} -
    -
    - -
    - -     - - + {option.value}
    • )} onChange={this.handleNewRequest.bind(this)} diff --git a/src/components/MainPage/SearchMenuItem.js b/src/components/MainPage/SearchMenuItem.js index 1ba2650f8..ecece31fb 100644 --- a/src/components/MainPage/SearchMenuItem.js +++ b/src/components/MainPage/SearchMenuItem.js @@ -53,8 +53,7 @@ const getFutureOrExpiredLabel = (stopPlace) => { export const topographicPlaceStyle = { color: "grey", - marginTop: -20, - marginBottom: -10, + fontSize: "0.7em", display: "flex", justifyContent: "space-between", @@ -67,9 +66,7 @@ const createGroupOfStopPlacesMenuItem = (element, formatMessage) => { value: (
    { style={{ marginTop: 10, marginLeft: 5, transform: "scale(0.8)" }} />
    - } - /> + ), }; }; @@ -113,9 +109,7 @@ const createParentStopPlaceMenuItem = (element, formatMessage) => { value: (
    { }))} />
    - } - /> + + ), }; }; @@ -184,54 +178,56 @@ const createStopPlaceMenuItem = (element, formatMessage) => { parentTopographicPlace: element.parentTopographicPlace, futureOrExpiredLabel: getFutureOrExpiredLabel(element), value: ( - -
    -
    -
    {element.name}
    -
    - {element.id} + + +
    +
    +
    +
    {element.name}
    +
    + {element.id} +
    +
    +
    +
    {`${element.topographicPlace}, ${element.parentTopographicPlace}`}
    + {element.futureOrExpiredLabel && ( +
    + {formatMessage({id: element.futureOrExpiredLabel})} +
    + )} +
    -
    -
    -
    {`${element.topographicPlace}, ${element.parentTopographicPlace}`}
    - {futureOrExpiredLabel && ( -
    - {formatMessage({ id: futureOrExpiredLabel })} -
    - )} -
    +
    - -
    - } - /> + + + ), }; }; From 47e9da33693bc232148b8d52f6f935f66badf5a2 Mon Sep 17 00:00:00 2001 From: a-limyr Date: Tue, 9 Apr 2024 14:02:12 +0200 Subject: [PATCH 07/43] Refactor search for stop place got a better look and feel. --- src/actions/TiamatActions.js | 2 +- src/components/MainPage/SearchBox.js | 13 +++++++------ src/components/MainPage/SearchMenuItem.js | 16 ---------------- 3 files changed, 8 insertions(+), 23 deletions(-) diff --git a/src/actions/TiamatActions.js b/src/actions/TiamatActions.js index 74103039f..f0fa709a0 100644 --- a/src/actions/TiamatActions.js +++ b/src/actions/TiamatActions.js @@ -420,7 +420,7 @@ export const getNeighbourStops = query: stopPlaceBBQuery, variables: { includeExpired: includeExpired, - ignoreStopPlaceId: ignoreStopPlaceId.toString(), + ignoreStopPlaceId: ignoreStopPlaceId+"" , latMin: bounds.getSouthWest().lat, latMax: bounds.getNorthEast().lat, lonMin: bounds.getSouthWest().lng, diff --git a/src/components/MainPage/SearchBox.js b/src/components/MainPage/SearchBox.js index 834ab09b5..a9669115e 100644 --- a/src/components/MainPage/SearchBox.js +++ b/src/components/MainPage/SearchBox.js @@ -201,7 +201,7 @@ class SearchBox extends React.Component { }); } - handleAddChip({ text, type, id }) { + handleAddChip({ event, text, type, id }) { const { searchText, stopTypeFilters, showFutureAndExpired, topoiChips } = this.props; if (searchText) { @@ -536,6 +536,7 @@ class SearchBox extends React.Component {
    ( ( -
  • + {option.value} -
    • + )} onChange={this.handleNewRequest.bind(this)} getOptionLabel={(option) => `${option.text}`} diff --git a/src/components/MainPage/SearchMenuItem.js b/src/components/MainPage/SearchMenuItem.js index ecece31fb..6ce83bf7a 100644 --- a/src/components/MainPage/SearchMenuItem.js +++ b/src/components/MainPage/SearchMenuItem.js @@ -64,9 +64,6 @@ const createGroupOfStopPlacesMenuItem = (element, formatMessage) => { element, text: element.name, value: ( -
    { style={{ marginTop: 10, marginLeft: 5, transform: "scale(0.8)" }} />
    - ), }; }; @@ -107,9 +103,6 @@ const createParentStopPlaceMenuItem = (element, formatMessage) => { element, text: element.name, value: ( -
    { }))} />
    - ), }; @@ -178,12 +170,6 @@ const createStopPlaceMenuItem = (element, formatMessage) => { parentTopographicPlace: element.parentTopographicPlace, futureOrExpiredLabel: getFutureOrExpiredLabel(element), value: ( - -
    { />
    - - ), }; }; From 73c13661a04eb7f5a96b31628e566f9e28381d0b Mon Sep 17 00:00:00 2001 From: a-limyr Date: Mon, 15 Apr 2024 14:53:19 +0200 Subject: [PATCH 08/43] SearchBox fixes --- src/components/Header.js | 13 +- src/components/MainPage/SearchBox.js | 151 +++++++++--------- .../MainPage/TopographicalFilter.js | 10 +- src/models/Equipments.js | 2 +- 4 files changed, 88 insertions(+), 88 deletions(-) diff --git a/src/components/Header.js b/src/components/Header.js index 6b7fcefa1..263e25606 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -226,17 +226,18 @@ class Header extends React.Component { color="inherit" aria-label="menu" sx={{mr: 2}} + onClick={() => + this.handleConfirmChangeRoute( + this.goToMain.bind(this), + "GoToMain", + ) + } > - this.handleConfirmChangeRoute( - this.goToMain.bind(this), - "GoToMain", - ) - } + /> diff --git a/src/components/MainPage/SearchBox.js b/src/components/MainPage/SearchBox.js index a9669115e..c6186fe44 100644 --- a/src/components/MainPage/SearchBox.js +++ b/src/components/MainPage/SearchBox.js @@ -48,12 +48,6 @@ import { Entities } from "../../models/Entities"; import RoleParser from "../../roles/rolesParser"; import {Box, Button, Checkbox, FormControlLabel, FormGroup, Popover} from "@mui/material"; import TextField from "@mui/material/TextField"; -import ModalityIconImg from "./ModalityIconImg"; -import {topographicPlaceStyle} from "./SearchMenuItem"; -import ListItemIcon from "@mui/material/ListItemIcon"; -import ListItemText from "@mui/material/ListItemText"; -import Typography from "@mui/material/Typography"; - class SearchBox extends React.Component { constructor(props) { @@ -63,8 +57,11 @@ class SearchBox extends React.Component { createNewStopOpen: false, coordinatesDialogOpen: false, loading: false, + stopPlaceSearchValue: "", + topographicPlaceFilterValue: "", }; + const searchStop = (searchText, dataSource, params, filter) => { const chips = filter ? filter.topoiChips : this.props.topoiChips; const showFutureAndExpired = filter @@ -91,11 +88,13 @@ class SearchBox extends React.Component { this.debouncedSearch = debounce(searchStop, 500); } - handleSearchUpdate(event, searchText) { + + handleSearchUpdate = (event, searchText, reason) =>{ // prevents ghost clicks - if (this.props.params && this.props.params.source === "click") { - return; + if(reason && reason === "clear"){ + this.setState({ stopPlaceSearchValue: '' }); } + if (!searchText || !searchText.length) { this.props.dispatch(UserActions.clearSearchResults()); this.props.dispatch(UserActions.setSearchText("")); @@ -121,15 +120,16 @@ class SearchBox extends React.Component { removeFiltersAndSearch() { this.props.dispatch(UserActions.removeAllFilters()); - this.handleSearchUpdate(this.props.searchText, null, null, { + this.props.filter = { topoiChips: [], stopTypeFilter: [], - }); + }; + this.handleSearchUpdate(null,this.props.searchText); } handleRetrieveFilter(filter) { this.props.dispatch(UserActions.loadFavoriteSearch(filter)); - this.handleSearchUpdate(filter.searchText, null, null, filter); + this.handleSearchUpdate(null, filter.searchText, null, null, filter); this.refs.searchText.setState({ open: true, @@ -153,14 +153,18 @@ class SearchBox extends React.Component { this.props.dispatch(UserActions.toggleShowFutureAndExpired(value)); } - handleTopographicalPlaceInput(event,searchText) { + handleTopographicalPlaceInput(event,searchText,reason) { + if(reason && reason === "clear"){ + this.setState({ topographicPlaceFilterValue: '' }); + } const { dispatch } = this.props; dispatch(findTopographicalPlace(searchText)); } - handleNewRequest(event,result) { - if (typeof result.element !== "undefined") { + handleNewRequest(event,result,reason) { + if (result && typeof result.element !== "undefined") { this.props.dispatch(StopPlaceActions.setMarkerOnMap(result.element)); + this.setState({stopPlaceSearchValue: "" }); } } @@ -201,11 +205,17 @@ class SearchBox extends React.Component { }); } - handleAddChip({ event, text, type, id }) { + handleAddChip( event, value ) { + + if (value == null) { + // + } else{ + const {text, type, id} = value; const { searchText, stopTypeFilters, showFutureAndExpired, topoiChips } = this.props; + if (searchText) { - this.handleSearchUpdate(searchText, null, null, { + this.handleSearchUpdate(null, searchText, null, { showFutureAndExpired, topoiChips: topoiChips.concat({ text, @@ -218,9 +228,9 @@ class SearchBox extends React.Component { this.props.dispatch( UserActions.addToposChip({ text: text, type: type, value: id }), ); - this.refs.topoFilter.setState({ - searchText: "", - }); + + this.setState({ topographicPlaceFilterValue: "" }); + } } handleDeleteChip(chipValue) { @@ -232,7 +242,7 @@ class SearchBox extends React.Component { topoiChips, } = this.props; if (searchText) { - this.handleSearchUpdate(searchText, null, null, { + this.handleSearchUpdate(null, searchText, { showFutureAndExpired, topoiChips: topoiChips.filter((chip) => chip.value !== chipValue), stopType: stopTypeFilters, @@ -302,47 +312,37 @@ class SearchBox extends React.Component { const filterNotification = { text: "", value: ( -
    - - {formatMessage({ id: "filters_are_applied" })} - - this.removeFiltersAndSearch()} style={{ + display: "flex", + flexDirection: "column", + minWidth: 340, + }} + > +
    +
    {formatMessage({id: "filters_are_applied"})}
    +
    - {formatMessage({ id: "remove" })} - + onClick={() => this.removeFiltersAndSearch()}> + {formatMessage({id: "remove"})} +
    +
    - } - /> + +     ), - }; + } + ; - if (menuItems.length > 6) { - menuItems[6] = filterNotification; - } else { +// if (menuItems.length > 6) { +// menuItems[6] = filterNotification; +// } else { menuItems.push(filterNotification); - } +// } } return menuItems; } @@ -364,10 +364,11 @@ class SearchBox extends React.Component { dataSource, showFutureAndExpired, } = this.props; - const { coordinatesDialogOpen, showMoreFilterOptions, loading } = - this.state; + const {coordinatesDialogOpen, showMoreFilterOptions, loading} = + this.state; - const { formatMessage, locale } = intl; + + const {formatMessage, locale} = intl; const menuItems = this.getMenuItems(this.props); const Loading = loading && !dataSource.length && [ @@ -413,11 +414,7 @@ class SearchBox extends React.Component { text: name, id: place.id, value: ( - - -
    - -     ), type: place.topographicPlaceType, }; @@ -541,33 +536,29 @@ class SearchBox extends React.Component { id: "filter_by_topography", })} getOptionLabel={(option) => `${option.text}`} - hintText={formatMessage({ id: "filter_by_topography" })} options={topographicalPlacesDataSource} onInputChange={this.handleTopographicalPlaceInput.bind( this, )} - listStyle={{ width: "auto", minWidth: 300 }} - style={{ - margin: "auto", - width: "100%", - marginTop: -20, - }} -// maxSearchResults={7} -// ref="topoFilter" + inputValue={this.state.topographicPlaceFilterValue} onChange={this.handleAddChip.bind(this)} renderInput={(params) => ( - { + // don't fire API if the user delete or not entered anything + if (event.target.value !== null) { + this.setState({ topographicPlaceFilterValue: event.target.value }); + } + }} /> )} renderOption={(props, option, { selected }) => ( - <> + {option.value} - + )} />
    @@ -617,7 +608,8 @@ class SearchBox extends React.Component { //filterOptions={filterOptions} onInputChange={this.handleSearchUpdate.bind(this)} //maxSearchResults={10} - //inputValue={this.state.searchText} + inputValue={this.state.stopPlaceSearchValue} + //value={this.state.stopPlaceSearchValue} //dataSource={ // loading && !dataSource.length ? Loading : menuItems || [] //} @@ -644,6 +636,12 @@ class SearchBox extends React.Component { sx={{width: 380}} label={formatMessage({id: "filter_by_name"})} variant="standard" + onChange={(event) => { + // don't fire API if the user delete or not entered anything + if (event.target.value !== null) { + this.setState({ stopPlaceSearchValue: event.target.value }); + } + }} /> @@ -760,6 +758,7 @@ class SearchBox extends React.Component { } } + const mapStateToProps = (state) => { const favoriteManager = new FavoriteManager(); const { stopType, topoiChips, text } = state.user.searchFilters; diff --git a/src/components/MainPage/TopographicalFilter.js b/src/components/MainPage/TopographicalFilter.js index 354e95ccc..b28a1743c 100644 --- a/src/components/MainPage/TopographicalFilter.js +++ b/src/components/MainPage/TopographicalFilter.js @@ -24,19 +24,19 @@ class TopographicalFilter extends React.Component { const chipStyle = { margin: 4, backgroundColor: typeColor, + color: typeTextColor }; - let id = data.id || data.value; return ( this.props.handleDeleteChip(id)} + onDelete={() => this.props.handleDeleteChip(id)} style={chipStyle} + label={data.text} > - - {data.text} - + + ); } diff --git a/src/models/Equipments.js b/src/models/Equipments.js index 71144f097..65dde6bb1 100644 --- a/src/models/Equipments.js +++ b/src/models/Equipments.js @@ -53,7 +53,7 @@ export const defaultEquipments = { }, generalSign: { isChecked: { - privateCode: { value: 512 }, + privateCode: { value: "512" }, signContentType: "transportMode", }, isUnChecked: null, From ef0397917f55afbfc7d4288ff6de740b85e24d78 Mon Sep 17 00:00:00 2001 From: a-limyr Date: Tue, 16 Apr 2024 13:37:16 +0200 Subject: [PATCH 09/43] Formatting --- src/actions/TiamatActions.js | 2 +- .../Dialogs/TerminateStopPlaceDialog.js | 2 +- .../EditStopPage/AddTagAutoComplete.js | 7 +- .../EditStopPage/ModalitiesMenuItems.js | 1 - src/components/EditStopPage/TagsDialog.js | 2 - src/components/Header.js | 532 +++++++++--------- src/components/MainPage/FavoritePopover.js | 5 +- src/components/MainPage/SearchBox.js | 359 ++++++------ src/components/MainPage/SearchMenuItem.js | 230 ++++---- .../MainPage/TopographicalFilter.js | 7 +- src/config/themeConfig.js | 6 +- src/config/themes/default/defaultTheme.js | 1 - src/containers/App.js | 19 +- src/containers/ReportPage.js | 7 +- src/reducers/userReducer.js | 2 - 15 files changed, 576 insertions(+), 606 deletions(-) diff --git a/src/actions/TiamatActions.js b/src/actions/TiamatActions.js index f0fa709a0..92efba4df 100644 --- a/src/actions/TiamatActions.js +++ b/src/actions/TiamatActions.js @@ -420,7 +420,7 @@ export const getNeighbourStops = query: stopPlaceBBQuery, variables: { includeExpired: includeExpired, - ignoreStopPlaceId: ignoreStopPlaceId+"" , + ignoreStopPlaceId: ignoreStopPlaceId + "", latMin: bounds.getSouthWest().lat, latMax: bounds.getNorthEast().lat, lonMin: bounds.getSouthWest().lng, diff --git a/src/components/Dialogs/TerminateStopPlaceDialog.js b/src/components/Dialogs/TerminateStopPlaceDialog.js index 141063cda..d432ae9cd 100644 --- a/src/components/Dialogs/TerminateStopPlaceDialog.js +++ b/src/components/Dialogs/TerminateStopPlaceDialog.js @@ -15,7 +15,7 @@ limitations under the Licence. */ import React from "react"; import PropTypes from "prop-types"; import Checkbox from "@mui/material/Checkbox"; -import {DatePicker, TimePicker} from "@mui/x-date-pickers/"; +import { DatePicker, TimePicker } from "@mui/x-date-pickers/"; import { getEarliestFromDate } from "../../utils/saveDialogUtils"; import areIntlLocalesSupported from "intl-locales-supported"; import TextField from "@mui/material/TextField"; diff --git a/src/components/EditStopPage/AddTagAutoComplete.js b/src/components/EditStopPage/AddTagAutoComplete.js index 385f7d8b2..c41ca9bb3 100644 --- a/src/components/EditStopPage/AddTagAutoComplete.js +++ b/src/components/EditStopPage/AddTagAutoComplete.js @@ -14,7 +14,7 @@ limitations under the Licence. */ import React, { Component } from "react"; import AutoComplete from "@mui/material/Autocomplete"; -import TextField from '@mui/material/TextField'; +import TextField from "@mui/material/TextField"; import debounce from "lodash.debounce"; import MenuItem from "@mui/material/MenuItem"; import { toCamelCase } from "../../utils/"; @@ -155,10 +155,7 @@ class AddTagAutoComplete extends Component { filter={() => true} onUpdateInput={this.handleUpdate.bind(this)} renderInput={(params) => ( - + )} /> ); diff --git a/src/components/EditStopPage/ModalitiesMenuItems.js b/src/components/EditStopPage/ModalitiesMenuItems.js index 62e1727d1..3eba2c37d 100644 --- a/src/components/EditStopPage/ModalitiesMenuItems.js +++ b/src/components/EditStopPage/ModalitiesMenuItems.js @@ -44,7 +44,6 @@ class ModalitiesMenuItems extends React.Component { return ( - {Object.keys(stopTypes).map((type, index) => { let isLegal = adHocStopPlaceTypes.indexOf(type) > -1 || diff --git a/src/components/EditStopPage/TagsDialog.js b/src/components/EditStopPage/TagsDialog.js index 838115fac..6d6385947 100644 --- a/src/components/EditStopPage/TagsDialog.js +++ b/src/components/EditStopPage/TagsDialog.js @@ -19,7 +19,6 @@ import TagItem from "./TagItem"; import AddTagDialog from "./AddTagDialog"; import CircularProgress from "@mui/material/CircularProgress"; - class TagsDialog extends Component { constructor(props) { super(props); @@ -100,7 +99,6 @@ class TagsDialog extends Component { top={15} status="loading" /> - )}
    diff --git a/src/components/Header.js b/src/components/Header.js index 263e25606..d290cc5e2 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -16,14 +16,14 @@ import React from "react"; import { connect } from "react-redux"; import AppBar from "@mui/material/AppBar"; import Toolbar from "@mui/material/Toolbar"; -import Container from '@mui/material/Container'; +import Container from "@mui/material/Container"; import IconButton from "@mui/material/IconButton"; import IconMenu from "@mui/icons-material/Menu"; import MenuItem from "@mui/material/MenuItem"; import MoreVertIcon from "@mui/icons-material/MoreVert"; import ArrowDropRight from "@mui/icons-material/ArrowRight"; -import Typography from '@mui/material/Typography'; -import MenuIcon from '@mui/icons-material/Menu'; +import Typography from "@mui/material/Typography"; +import MenuIcon from "@mui/icons-material/Menu"; import { getLogo } from "../config/themeConfig"; import MdAccount from "@mui/icons-material/AccountCircle"; import MdLanguage from "@mui/icons-material/Language"; @@ -33,7 +33,7 @@ import { UserActions } from "../actions/"; import { getIn } from "../utils"; import MdReport from "@mui/icons-material/Report"; import MdHelp from "@mui/icons-material/Help"; -import { getTiamatEnv} from "../config/themeConfig"; +import { getTiamatEnv } from "../config/themeConfig"; import ConfirmDialog from "./Dialogs/ConfirmDialog"; import { Button } from "@mui/material"; import { @@ -151,17 +151,17 @@ class Header extends React.Component { this.props.dispatch(toggleShowTariffZonesInMap(value)); } - state = { - anchorEl: null, - }; + state = { + anchorEl: null, + }; - handleClick = event => { - this.setState({ anchorEl: event.currentTarget }); - }; + handleClick = (event) => { + this.setState({ anchorEl: event.currentTarget }); + }; - handleClose = () => { - this.setState({ anchorEl: null }); - }; + handleClose = () => { + this.setState({ anchorEl: null }); + }; render() { const { intl, @@ -219,277 +219,277 @@ class Header extends React.Component { titleTemplate={`${formatMessage({ id: "_title" })} - %s`} /> - - - this.handleConfirmChangeRoute( - this.goToMain.bind(this), - "GoToMain", - ) - } - > - - - - -
    -
    - {title} - {(tiamatEnv === "test" || tiamatEnv === "development") && ( - - {tiamatEnv} - - )} -
    -
    -     - - -
    - {!this.props.auth.isAuthenticated && ( - - )} + + + this.handleConfirmChangeRoute( + this.goToMain.bind(this), + "GoToMain", + ) + } + > + + + + +
    +
    + {title} + {(tiamatEnv === "test" || tiamatEnv === "development") && ( + + {tiamatEnv} + + )}
    - - - - + + +
    + {!this.props.auth.isAuthenticated && ( +
    + + + + + + + this.handleConfirmChangeRoute( + this.goToReports.bind(this), + "GoToReports", + ) + } + style={{ fontSize: 12, padding: 0 }} + > + + {reportSite} + + - this.handleConfirmChangeRoute( - this.goToReports.bind(this), - "GoToReports", - ) + this.handleTogglePublicCodePrivateCodeOnStopPlaces( + !isPublicCodePrivateCodeOnStopPlacesEnabled, + ) } - style={{fontSize: 12, padding: 0}} - > - {reportSite} - - - this.handleTogglePublicCodePrivateCodeOnStopPlaces( - !isPublicCodePrivateCodeOnStopPlacesEnabled, - ) - } - insetChildren - desktop={true} - multiple - checked={isPublicCodePrivateCodeOnStopPlacesEnabled} - primaryText={publicCodePrivateCodeSetting} - />, - ]} - > - {settings} - - , + ]} + > + + {settings} + + + this.handleToggleMultiPolylines(!isMultiPolylinesEnabled) + } + insetChildren desktop={true} multiple + checked={isMultiPolylinesEnabled} + primaryText={showPathLinks} + />, + + this.handleToggleCompassBearing(!isCompassBearingEnabled) + } + insetChildren + desktop={true} + multiple + checked={isCompassBearingEnabled} + primaryText={showCompassBearing} + />, + + this.handleToggleShowExpiredStops(!showExpiredStops) + } + insetChildren + desktop={true} + multiple + checked={showExpiredStops} + primaryText={expiredStopLabel} + />, + + this.handleToggleMultimodalEdges(!showMultimodalEdges) + } + insetChildren + desktop={true} + multiple + checked={showMultimodalEdges} + primaryText={showMultimodalEdgesLabel} + />, + } + insetChildren menuItems={[ - this.handleToggleMultiPolylines(!isMultiPolylinesEnabled) - } - insetChildren - desktop={true} - multiple - checked={isMultiPolylinesEnabled} - primaryText={showPathLinks} - />, - - this.handleToggleCompassBearing(!isCompassBearingEnabled) - } - insetChildren - desktop={true} - multiple - checked={isCompassBearingEnabled} - primaryText={showCompassBearing} - />, - - this.handleToggleShowExpiredStops(!showExpiredStops) - } - insetChildren - desktop={true} - multiple - checked={showExpiredStops} - primaryText={expiredStopLabel} - />, - - this.handleToggleMultimodalEdges(!showMultimodalEdges) - } - insetChildren - desktop={true} - multiple - checked={showMultimodalEdges} - primaryText={showMultimodalEdgesLabel} - />, - } - insetChildren - menuItems={[ - this.handleToggleShowPublicCode(true)} - insetChildren - primaryText={showPublicCodeLabel} - checked={showPublicCode} - />, - this.handleToggleShowPublicCode(false)} - insetChildren - primaryText={showPrivateCodeLabel} - checked={!showPublicCode} - />, - ]} - />, - - this.handleToggleShowFareZones(!showFareZones) - } - insetChildren - desktop={true} - multiple - checked={showFareZones} - primaryText={showFareZonesLabel} - />, - - this.handleToggleShowTariffZones(!showTariffZones) - } - insetChildren - desktop={true} - multiple - checked={showTariffZones} - primaryText={showTariffZonesLabel} - />, - ]} - > - - {mapSettings} - - - this.handleSetLanguage("nb")} - insetChildren - primaryText={norwegian} - checked={locale === "nb"} + style={{ fontSize: 12, padding: 0 }} + onClick={() => this.handleToggleShowPublicCode(true)} + insetChildren + primaryText={showPublicCodeLabel} + checked={showPublicCode} />, this.handleSetLanguage("en")} - insetChildren - primaryText={english} - checked={locale === "en"} - />, - this.handleSetLanguage("fr")} - insetChildren - primaryText={french} - checked={locale === "fr"} - />, - this.handleSetLanguage("sv")} - insetChildren - primaryText={swedish} - checked={locale === "sv"} + style={{ fontSize: 12, padding: 0 }} + onClick={() => this.handleToggleShowPublicCode(false)} + insetChildren + primaryText={showPrivateCodeLabel} + checked={!showPublicCode} />, ]} - > - - {language} - - + />, + + this.handleToggleShowFareZones(!showFareZones) + } + insetChildren + desktop={true} + multiple + checked={showFareZones} + primaryText={showFareZonesLabel} + />, + + this.handleToggleShowTariffZones(!showTariffZones) + } + insetChildren + desktop={true} + multiple + checked={showTariffZones} + primaryText={showTariffZonesLabel} + />, + ]} + > + + {mapSettings} + + + this.handleSetLanguage("nb")} + insetChildren + primaryText={norwegian} + checked={locale === "nb"} + />, + this.handleSetLanguage("en")} + insetChildren + primaryText={english} + checked={locale === "en"} + />, + this.handleSetLanguage("fr")} + insetChildren + primaryText={french} + checked={locale === "fr"} + />, + this.handleSetLanguage("sv")} + insetChildren + primaryText={swedish} + checked={locale === "sv"} + />, + ]} + > + + {language} + + + + + {userGuide} + + + {this.props.auth.isAuthenticated && ( - - {userGuide} - - - {this.props.auth.isAuthenticated && ( - } - primaryText={`${logOut} ${username}`} - onClick={() => this.handleLogOut()} - style={{fontSize: 12, padding: 0}} - /> - )} - - - + leftIcon={} + primaryText={`${logOut} ${username}`} + onClick={() => this.handleLogOut()} + style={{ fontSize: 12, padding: 0 }} + /> + )} +
    + { - this.setState({ - isConfirmDialogOpen: false, - }); - }} - handleConfirm={() => { - this.handleConfirm(); - }} + open={this.state.isConfirmDialogOpen} + handleClose={() => { + this.setState({ + isConfirmDialogOpen: false, + }); + }} + handleConfirm={() => { + this.handleConfirm(); + }} messagesById={{ title: "discard_changes_title", body: "discard_changes_body", diff --git a/src/components/MainPage/FavoritePopover.js b/src/components/MainPage/FavoritePopover.js index b335cd94f..5d07e70cc 100644 --- a/src/components/MainPage/FavoritePopover.js +++ b/src/components/MainPage/FavoritePopover.js @@ -68,9 +68,10 @@ class FilterPopover extends React.Component { onClick={this.handleTouchTap.bind(this)} label={caption} labelStyle={{ fontSize: 12 }} - > + > + - {caption.toUpperCase()} + {caption.toUpperCase()} { const chips = filter ? filter.topoiChips : this.props.topoiChips; const showFutureAndExpired = filter @@ -88,23 +94,26 @@ class SearchBox extends React.Component { this.debouncedSearch = debounce(searchStop, 500); } - - handleSearchUpdate = (event, searchText, reason) =>{ + handleSearchUpdate = (event, searchText, reason) => { // prevents ghost clicks - if(reason && reason === "clear"){ - this.setState({ stopPlaceSearchValue: '' }); + if (reason && reason === "clear") { + this.setState({ stopPlaceSearchValue: "" }); } if (!searchText || !searchText.length) { this.props.dispatch(UserActions.clearSearchResults()); this.props.dispatch(UserActions.setSearchText("")); } else if (searchText.indexOf("(") > -1 && searchText.indexOf(")") > -1) { - } else { this.props.dispatch(UserActions.setSearchText(searchText)); - this.debouncedSearch(searchText, this.props.dataSource, this.props.params, this.props.filter); + this.debouncedSearch( + searchText, + this.props.dataSource, + this.props.params, + this.props.filter, + ); } - } + }; handleEdit(id, entityType) { const route = @@ -124,7 +133,7 @@ class SearchBox extends React.Component { topoiChips: [], stopTypeFilter: [], }; - this.handleSearchUpdate(null,this.props.searchText); + this.handleSearchUpdate(null, this.props.searchText); } handleRetrieveFilter(filter) { @@ -153,18 +162,18 @@ class SearchBox extends React.Component { this.props.dispatch(UserActions.toggleShowFutureAndExpired(value)); } - handleTopographicalPlaceInput(event,searchText,reason) { - if(reason && reason === "clear"){ - this.setState({ topographicPlaceFilterValue: '' }); + handleTopographicalPlaceInput(event, searchText, reason) { + if (reason && reason === "clear") { + this.setState({ topographicPlaceFilterValue: "" }); } const { dispatch } = this.props; dispatch(findTopographicalPlace(searchText)); } - handleNewRequest(event,result,reason) { + handleNewRequest(event, result, reason) { if (result && typeof result.element !== "undefined") { this.props.dispatch(StopPlaceActions.setMarkerOnMap(result.element)); - this.setState({stopPlaceSearchValue: "" }); + this.setState({ stopPlaceSearchValue: "" }); } } @@ -205,29 +214,28 @@ class SearchBox extends React.Component { }); } - handleAddChip( event, value ) { - + handleAddChip(event, value) { if (value == null) { // - } else{ - const {text, type, id} = value; - const { searchText, stopTypeFilters, showFutureAndExpired, topoiChips } = - this.props; - - if (searchText) { - this.handleSearchUpdate(null, searchText, null, { - showFutureAndExpired, - topoiChips: topoiChips.concat({ - text, - type, - value: id, - }), - stopType: stopTypeFilters, - }); - } - this.props.dispatch( - UserActions.addToposChip({ text: text, type: type, value: id }), - ); + } else { + const { text, type, id } = value; + const { searchText, stopTypeFilters, showFutureAndExpired, topoiChips } = + this.props; + + if (searchText) { + this.handleSearchUpdate(null, searchText, null, { + showFutureAndExpired, + topoiChips: topoiChips.concat({ + text, + type, + value: id, + }), + stopType: stopTypeFilters, + }); + } + this.props.dispatch( + UserActions.addToposChip({ text: text, type: type, value: id }), + ); this.setState({ topographicPlaceFilterValue: "" }); } @@ -295,14 +303,13 @@ class SearchBox extends React.Component { { text: "", value: ( - -
    - {formatMessage({id: "no_results_found"})} -
    -     + +
    + {formatMessage({ id: "no_results_found" })} +
    +     ), }, ]; @@ -312,37 +319,38 @@ class SearchBox extends React.Component { const filterNotification = { text: "", value: ( - -
    +
    +
    +
    + {formatMessage({ id: "filters_are_applied" })} +
    +
    -
    -
    {formatMessage({id: "filters_are_applied"})}
    -
    this.removeFiltersAndSearch()}> - {formatMessage({id: "remove"})} -
    + onClick={() => this.removeFiltersAndSearch()} + > + {formatMessage({ id: "remove" })}
    - - +
    + ), - } - ; - -// if (menuItems.length > 6) { -// menuItems[6] = filterNotification; -// } else { - menuItems.push(filterNotification); -// } + }; + // if (menuItems.length > 6) { + // menuItems[6] = filterNotification; + // } else { + menuItems.push(filterNotification); + // } } return menuItems; } @@ -364,11 +372,10 @@ class SearchBox extends React.Component { dataSource, showFutureAndExpired, } = this.props; - const {coordinatesDialogOpen, showMoreFilterOptions, loading} = - this.state; + const { coordinatesDialogOpen, showMoreFilterOptions, loading } = + this.state; - - const {formatMessage, locale} = intl; + const { formatMessage, locale } = intl; const menuItems = this.getMenuItems(this.props); const Loading = loading && !dataSource.length && [ @@ -414,55 +421,51 @@ class SearchBox extends React.Component { text: name, id: place.id, value: ( -
    -
    -
    {name}
    -
    - {formatMessage({id: place.topographicPlaceType})} -
    -
    -
    - ), - type: place.topographicPlaceType, - }; +
    +
    +
    {name}
    +
    + {formatMessage({ id: place.topographicPlaceType })} +
    +
    +
    + ), + type: place.topographicPlaceType, + }; }); - const newStopText = { - headerText: formatMessage({ - id: newStopIsMultiModal - ? "making_parent_stop_place_title" - : "making_stop_place_title", - }), - bodyText - : - formatMessage({id: "making_stop_place_hint"}), - }; + const newStopText = { + headerText: formatMessage({ + id: newStopIsMultiModal + ? "making_parent_stop_place_title" + : "making_stop_place_title", + }), + bodyText: formatMessage({ id: "making_stop_place_hint" }), + }; - let favoriteText = { - title: formatMessage({id: "favorites_title"}), - noFavoritesFoundText - : - formatMessage({id: "no_favorites_found"}), - }; + let favoriteText = { + title: formatMessage({ id: "favorites_title" }), + noFavoritesFoundText: formatMessage({ id: "no_favorites_found" }), + }; - const text = { - emptyDescription: formatMessage({ id: "empty_description" }), + const text = { + emptyDescription: formatMessage({ id: "empty_description" }), edit: formatMessage({ id: "edit" }), view: formatMessage({ id: "view" }), }; const formControlLabelStyle = { "& .MuiFormControlLabel-label": { - fontSize: "0.8em" - } - } + fontSize: "0.8em", + }, + }; const searchBoxWrapperStyle = { top: 60, @@ -477,7 +480,7 @@ class SearchBox extends React.Component { }; const filterOptions = createFilterOptions({ - matchFrom: 'any', + matchFrom: "any", stringify: (option) => option.text, }); @@ -543,41 +546,43 @@ class SearchBox extends React.Component { inputValue={this.state.topographicPlaceFilterValue} onChange={this.handleAddChip.bind(this)} renderInput={(params) => ( - { - // don't fire API if the user delete or not entered anything - if (event.target.value !== null) { - this.setState({ topographicPlaceFilterValue: event.target.value }); - } - }} - /> + { + // don't fire API if the user delete or not entered anything + if (event.target.value !== null) { + this.setState({ + topographicPlaceFilterValue: event.target.value, + }); + } + }} + /> )} renderOption={(props, option, { selected }) => ( - + {option.value} )} />
    - - - this.toggleShowFutureAndExpired(value) + + + this.toggleShowFutureAndExpired(value) + } + /> } - /> - } - label={ - formatMessage({id: "show_future_expired_and_terminated",}) - } - sx = {formControlLabelStyle} - /> - + label={formatMessage({ + id: "show_future_expired_and_terminated", + })} + sx={formControlLabelStyle} + /> +
    ( - - {option.value} - + + {option.value} + )} onChange={this.handleNewRequest.bind(this)} getOptionLabel={(option) => `${option.text}`} - //getOptionLabel={option.value} - //renderOption={(props, option) => ( - // - // {option.text}{option.value} - // - //)} + //getOptionLabel={option.value} + //renderOption={(props, option) => ( + // + // {option.text}{option.value} + // + //)} renderInput={(params) => ( - - - - - { - // don't fire API if the user delete or not entered anything - if (event.target.value !== null) { - this.setState({ stopPlaceSearchValue: event.target.value }); - } - }} - /> - - - - - + + + { + // don't fire API if the user delete or not entered anything + if (event.target.value !== null) { + this.setState({ + stopPlaceSearchValue: event.target.value, + }); + } + }} + /> + )} /> - -
    -
    +
    { - this.handleSaveAsFavorite(!!favorited); - }} + style={{ marginLeft: 10, fontSize: 12 }} + disabled={!!favorited} + onClick={() => { + this.handleSaveAsFavorite(!!favorited); + }} > - {formatMessage({id: "filter_save_favorite"})} + {formatMessage({ id: "filter_save_favorite" })}
    {chosenResult ? ( - { const favoriteManager = new FavoriteManager(); const { stopType, topoiChips, text } = state.user.searchFilters; diff --git a/src/components/MainPage/SearchMenuItem.js b/src/components/MainPage/SearchMenuItem.js index 6ce83bf7a..b8a28ea5f 100644 --- a/src/components/MainPage/SearchMenuItem.js +++ b/src/components/MainPage/SearchMenuItem.js @@ -64,35 +64,33 @@ const createGroupOfStopPlacesMenuItem = (element, formatMessage) => { element, text: element.name, value: ( -
    -
    -
    -
    {element.name}
    -
    - {element.id} -
    -
    - {element.topographicPlaces.length && ( -
    - {element.topographicPlaces.map((place, i) => ( -
    - {`${place.topographicPlace}, ${place.parentTopographicPlace}`} -
    - ))} +
    +
    +
    +
    {element.name}
    +
    {element.id}
    +
    + {element.topographicPlaces.length && ( +
    + {element.topographicPlaces.map((place, i) => ( +
    + {`${place.topographicPlace}, ${place.parentTopographicPlace}`}
    - )} + ))}
    - -
    + )} +
    + +
    ), }; }; @@ -103,57 +101,51 @@ const createParentStopPlaceMenuItem = (element, formatMessage) => { element, text: element.name, value: ( -
    -
    -
    -
    - {element.name} - - MM - -
    -
    - {element.id} -
    -
    -
    -
    {`${element.topographicPlace}, ${element.parentTopographicPlace}`}
    - {futureOrExpiredLabel && ( -
    - {formatMessage({ id: futureOrExpiredLabel })} -
    - )} -
    +
    +
    +
    +
    + {element.name} + + MM +
    - ({ - submode: child.submode, - stopPlaceType: child.stopPlaceType, - }))} - /> +
    {element.id}
    - +
    +
    {`${element.topographicPlace}, ${element.parentTopographicPlace}`}
    + {futureOrExpiredLabel && ( +
    + {formatMessage({ id: futureOrExpiredLabel })} +
    + )} +
    +
    + ({ + submode: child.submode, + stopPlaceType: child.stopPlaceType, + }))} + /> +
    ), }; }; @@ -165,53 +157,49 @@ const createStopPlaceMenuItem = (element, formatMessage) => { text: element.name, stopPlaceType: element.stopPlaceType, submode: element.submode, - id: element.id, + id: element.id, topographicPlace: element.topographicPlace, - parentTopographicPlace: element.parentTopographicPlace, - futureOrExpiredLabel: getFutureOrExpiredLabel(element), + parentTopographicPlace: element.parentTopographicPlace, + futureOrExpiredLabel: getFutureOrExpiredLabel(element), value: ( -
    -
    -
    -
    {element.name}
    -
    - {element.id} -
    -
    -
    -
    {`${element.topographicPlace}, ${element.parentTopographicPlace}`}
    - {element.futureOrExpiredLabel && ( -
    - {formatMessage({id: element.futureOrExpiredLabel})} -
    - )} -
    -
    - -
    - +
    +
    +
    +
    {element.name}
    +
    {element.id}
    +
    +
    +
    {`${element.topographicPlace}, ${element.parentTopographicPlace}`}
    + {element.futureOrExpiredLabel && ( +
    + {formatMessage({ id: element.futureOrExpiredLabel })} +
    + )} +
    +
    + +
    ), }; }; diff --git a/src/components/MainPage/TopographicalFilter.js b/src/components/MainPage/TopographicalFilter.js index b28a1743c..567cd8f87 100644 --- a/src/components/MainPage/TopographicalFilter.js +++ b/src/components/MainPage/TopographicalFilter.js @@ -24,7 +24,7 @@ class TopographicalFilter extends React.Component { const chipStyle = { margin: 4, backgroundColor: typeColor, - color: typeTextColor + color: typeTextColor, }; let id = data.id || data.value; @@ -34,10 +34,7 @@ class TopographicalFilter extends React.Component { onDelete={() => this.props.handleDeleteChip(id)} style={chipStyle} label={data.text} - > - - - + > ); } diff --git a/src/config/themeConfig.js b/src/config/themeConfig.js index dfec3120b..6dc67a4fe 100644 --- a/src/config/themeConfig.js +++ b/src/config/themeConfig.js @@ -13,7 +13,7 @@ limitations under the Licence. */ import { getIn } from "../utils"; -import {getEnvColor as defaultEnvColor} from "./themes/default/defaultTheme"; +import { getEnvColor as defaultEnvColor } from "./themes/default/defaultTheme"; import { getV0Theme as getV0DefaultTheme, getTheme as getDefaultTheme, @@ -23,7 +23,7 @@ import { primary as defaultPrimary } from "./themes/default/defaultTheme"; import { primaryDarker as defaultPrimaryDarker, darkColor as defaultDarkColor, - headerColor as defaultBanner, + headerColor as defaultBanner, } from "./themes/default/defaultTheme"; export const getTiamatEnv = () => { @@ -81,7 +81,7 @@ export const getPrimaryColor = () => { export const getHeaderColor = () => { if (process.env.REACT_APP_THEME) { return require("./themes/" + process.env.REACT_APP_THEME + "/index.js") - .primary; + .primary; } else { return headerColor; } diff --git a/src/config/themes/default/defaultTheme.js b/src/config/themes/default/defaultTheme.js index 8f3a13f38..7c4293655 100644 --- a/src/config/themes/default/defaultTheme.js +++ b/src/config/themes/default/defaultTheme.js @@ -27,7 +27,6 @@ const white = "#ffffff"; const darkBlack = "rgba(0, 0, 0, 0.87)"; const fullBlack = "rgba(0, 0, 0, 1)"; - export const getEnvColor = (env) => { let currentEnv = env || getTiamatEnv(); switch (currentEnv.toLowerCase()) { diff --git a/src/containers/App.js b/src/containers/App.js index dff263ed1..fb8dccd37 100644 --- a/src/containers/App.js +++ b/src/containers/App.js @@ -30,8 +30,7 @@ import configureLocalization from "../localization/localization"; import { UserActions } from "../actions"; import { Helmet } from "react-helmet"; import { useAuth } from "../auth/auth"; -import MuiThemeProvider from "@mui/material/styles/ThemeProvider" - +import MuiThemeProvider from "@mui/material/styles/ThemeProvider"; const muiTheme = createTheme(getTheme()); @@ -70,15 +69,13 @@ const App = ({ children }) => { - - -
    -
    - {children} - -
    -     - + +
    +
    + {children} + +
    +     ); diff --git a/src/containers/ReportPage.js b/src/containers/ReportPage.js index 10c4339fd..207b8b813 100644 --- a/src/containers/ReportPage.js +++ b/src/containers/ReportPage.js @@ -439,10 +439,9 @@ class ReportPage extends React.Component { ref="topoFilter" onNewRequest={this.handleAddChip.bind(this)} renderInput={(params) => ( - + )} /> { }); case types.SET_SEARCH_TEXT: - - return Object.assign({}, state, { searchFilters: { ...state.searchFilters, From f22f208d77936addf18ee330d07ff8efa136f90f Mon Sep 17 00:00:00 2001 From: a-limyr Date: Thu, 18 Apr 2024 12:16:56 +0200 Subject: [PATCH 10/43] Updates to searchbox and coordinate lookup++ --- src/components/Dialogs/CoordinatesDialog.js | 20 +++---- src/components/EditStopPage/ModalityFilter.js | 4 +- src/components/Header.js | 2 +- src/components/MainPage/CreateNewStop.js | 6 +-- src/components/MainPage/SearchBox.js | 53 +++++++++---------- src/config/themes/default/defaultTheme.js | 1 + 6 files changed, 42 insertions(+), 44 deletions(-) diff --git a/src/components/Dialogs/CoordinatesDialog.js b/src/components/Dialogs/CoordinatesDialog.js index 41e4dec77..63f26fac0 100644 --- a/src/components/Dialogs/CoordinatesDialog.js +++ b/src/components/Dialogs/CoordinatesDialog.js @@ -29,6 +29,7 @@ class CoordinatesDialog extends React.Component { super(props); this.state = { errorText: "", + coordinates: null, }; } @@ -40,9 +41,10 @@ class CoordinatesDialog extends React.Component { handleClose: PropTypes.func.isRequired, }; - handleInputChange(event, newValue) { + handleInputChange(event) { + debugger; this.setState({ - coordinates: newValue, + coordinates: event.target.value, }); } @@ -58,7 +60,6 @@ class CoordinatesDialog extends React.Component { const coordinatesString = this.state ? this.state.coordinates : this.props.coordinates; - if (typeof coordinatesString === "undefined") return; const position = extractCoordinates(coordinatesString); @@ -97,21 +98,22 @@ class CoordinatesDialog extends React.Component { {confirmDialogTranslation.title} {confirmDialogTranslation.body} -

    + onChange={(e, value) => this.toggleShowFutureAndExpired(value) } /> @@ -635,7 +634,6 @@ class SearchBox extends React.Component { { @@ -693,32 +691,35 @@ class SearchBox extends React.Component { justifyContent: "space-between", }} > - } primary={false} - labelStyle={{ fontSize: 11 }} - label={formatMessage({ id: "lookup_coordinates" })} - /> - + {formatMessage({ id: "lookup_coordinates" })} + + + + - - this.handleNewStop(false)} - style={{ fontSize: "0.9em" }} - primaryText={formatMessage({ id: "new_stop" })} - /> - this.handleNewStop(true)} - style={{ fontSize: "0.9em" }} - primaryText={formatMessage({ - id: "new__multi_stop", - })} - /> - - + this.handleNewStop(false)}> + {formatMessage({ id: "new_stop" })} + + this.handleNewStop(true)}> + {formatMessage({ + id: "new__multi_stop", + })} + +

    )}
    diff --git a/src/config/themes/default/defaultTheme.js b/src/config/themes/default/defaultTheme.js index 7c4293655..ff5a336f3 100644 --- a/src/config/themes/default/defaultTheme.js +++ b/src/config/themes/default/defaultTheme.js @@ -18,6 +18,7 @@ import { getTiamatEnv } from "../../themeConfig"; export const primary = "#5AC39A"; export const primaryDarker = "#181C56"; export const darkColor = "#181C56"; + const cyan700 = "#5AC39A"; const grey100 = "#f5f5f5"; const grey300 = "#e0e0e0"; From 32716730e4b730381d07d58aaac9e72c77cc7196 Mon Sep 17 00:00:00 2001 From: a-limyr Date: Fri, 19 Apr 2024 09:52:34 +0200 Subject: [PATCH 11/43] Update to clear filter, color ++ --- src/actions/TiamatActions.js | 5 +++-- src/components/Dialogs/CoordinatesDialog.js | 1 - src/components/EditStopPage/ModalityFilter.js | 3 ++- src/components/Header.js | 3 ++- src/components/MainPage/SearchBox.js | 21 +++++++++++-------- src/reducers/userReducer.js | 2 +- 6 files changed, 20 insertions(+), 15 deletions(-) diff --git a/src/actions/TiamatActions.js b/src/actions/TiamatActions.js index 92efba4df..ac5783c88 100644 --- a/src/actions/TiamatActions.js +++ b/src/actions/TiamatActions.js @@ -82,8 +82,8 @@ export const getContext = async (auth) => { return context; }; -const handleQuery = (client, payload) => (dispatch) => - client.query(payload).then((result) => { +const handleQuery = (client, payload) => (dispatch) => { + return client.query(payload).then((result) => { dispatch( createApolloThunk( types.APOLLO_QUERY_RESULT, @@ -94,6 +94,7 @@ const handleQuery = (client, payload) => (dispatch) => ); return result; }); +}; const handleMutation = (client, payload) => (dispatch) => client diff --git a/src/components/Dialogs/CoordinatesDialog.js b/src/components/Dialogs/CoordinatesDialog.js index 63f26fac0..a351a4ddc 100644 --- a/src/components/Dialogs/CoordinatesDialog.js +++ b/src/components/Dialogs/CoordinatesDialog.js @@ -42,7 +42,6 @@ class CoordinatesDialog extends React.Component { }; handleInputChange(event) { - debugger; this.setState({ coordinates: event.target.value, }); diff --git a/src/components/EditStopPage/ModalityFilter.js b/src/components/EditStopPage/ModalityFilter.js index 9a2708018..eb4cdff6b 100644 --- a/src/components/EditStopPage/ModalityFilter.js +++ b/src/components/EditStopPage/ModalityFilter.js @@ -63,6 +63,7 @@ class ModalityFilter extends React.Component { checkedIcon={ @@ -70,7 +71,7 @@ class ModalityFilter extends React.Component { icon={ diff --git a/src/components/Header.js b/src/components/Header.js index 1ebde9434..ecd90bdca 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -209,6 +209,7 @@ class Header extends React.Component { }); const tiamatEnv = getTiamatEnv(); + const headerColor = getEnvColor(tiamatEnv); const logo = getLogo(); const { anchorEl } = this.state; @@ -218,7 +219,7 @@ class Header extends React.Component { defaultTitle={formatMessage({ id: "_title" })} titleTemplate={`${formatMessage({ id: "_title" })} - %s`} /> - + { // prevents ghost clicks + debugger; if (reason && reason === "clear") { this.setState({ stopPlaceSearchValue: "" }); + this.props.dispatch(UserActions.clearSearchResults()); + this.props.dispatch(UserActions.setSearchText("")); } if (!searchText || !searchText.length) { this.props.dispatch(UserActions.clearSearchResults()); this.props.dispatch(UserActions.setSearchText("")); + this.setState({ stopPlaceSearchValue: "" }); + } else if (searchText && searchText === "") { + debugger; + this.props.dispatch(UserActions.clearSearchResults()); + this.props.dispatch(UserActions.setSearchText("")); + this.setState({ stopPlaceSearchValue: "" }); } else if (searchText.indexOf("(") > -1 && searchText.indexOf(")") > -1) { } else { this.props.dispatch(UserActions.setSearchText(searchText)); @@ -128,10 +137,6 @@ class SearchBox extends React.Component { removeFiltersAndSearch() { this.props.dispatch(UserActions.removeAllFilters()); - this.props.filter = { - topoiChips: [], - stopTypeFilter: [], - }; this.handleSearchUpdate(null, this.props.searchText); } @@ -318,7 +323,7 @@ class SearchBox extends React.Component { const filterNotification = { text: "", value: ( - +
    `${option.text}`} options={topographicalPlacesDataSource} onInputChange={this.handleTopographicalPlaceInput.bind( @@ -606,7 +608,7 @@ class SearchBox extends React.Component { //openOnFocus freeSolo options={menuItems} - loading={true} + loading={loading} //filterOptions={(x) => x !== ""} //filterOptions={filterOptions} onInputChange={this.handleSearchUpdate.bind(this)} @@ -702,6 +704,7 @@ class SearchBox extends React.Component { /> } primary={false} + sx={{ color: "black" }} > {formatMessage({ id: "lookup_coordinates" })} diff --git a/src/reducers/userReducer.js b/src/reducers/userReducer.js index 9b356aaf5..499e93509 100644 --- a/src/reducers/userReducer.js +++ b/src/reducers/userReducer.js @@ -92,7 +92,7 @@ const userReducer = (state = initialState, action) => { case types.REMOVED_ALL_FILTERS: return Object.assign({}, state, { - searchFilters: { topoiChips: [], stopType: [] }, + searchFilters: { ...state.searchFilters, topoiChips: [], stopType: [] }, }); case types.OPEN_LOOKUP_COORDINATES_DIALOG: From f5c1f519715a1af17057e32ac50c60187ecfb847 Mon Sep 17 00:00:00 2001 From: a-limyr Date: Fri, 19 Apr 2024 11:38:21 +0200 Subject: [PATCH 12/43] Loading and no matching text updated --- src/components/MainPage/SearchBox.js | 94 ++++++++++++++++------------ 1 file changed, 54 insertions(+), 40 deletions(-) diff --git a/src/components/MainPage/SearchBox.js b/src/components/MainPage/SearchBox.js index 972fb195d..6a93e15ee 100644 --- a/src/components/MainPage/SearchBox.js +++ b/src/components/MainPage/SearchBox.js @@ -95,7 +95,9 @@ class SearchBox extends React.Component { handleSearchUpdate = (event, searchText, reason) => { // prevents ghost clicks - debugger; + if (event && event.source === "click") { + return; + } if (reason && reason === "clear") { this.setState({ stopPlaceSearchValue: "" }); this.props.dispatch(UserActions.clearSearchResults()); @@ -106,11 +108,6 @@ class SearchBox extends React.Component { this.props.dispatch(UserActions.clearSearchResults()); this.props.dispatch(UserActions.setSearchText("")); this.setState({ stopPlaceSearchValue: "" }); - } else if (searchText && searchText === "") { - debugger; - this.props.dispatch(UserActions.clearSearchResults()); - this.props.dispatch(UserActions.setSearchText("")); - this.setState({ stopPlaceSearchValue: "" }); } else if (searchText.indexOf("(") > -1 && searchText.indexOf(")") > -1) { } else { this.props.dispatch(UserActions.setSearchText(searchText)); @@ -175,7 +172,12 @@ class SearchBox extends React.Component { } handleNewRequest(event, result, reason) { - if (result && typeof result.element !== "undefined") { + debugger; + if ( + result && + typeof result.element !== "undefined" && + result.element !== null + ) { this.props.dispatch(StopPlaceActions.setMarkerOnMap(result.element)); this.setState({ stopPlaceSearchValue: "" }); } @@ -295,7 +297,7 @@ class SearchBox extends React.Component { } getMenuItems(nextProps) { - const { dataSource, topoiChips, stopTypeFilter } = nextProps; + const { dataSource, topoiChips, stopTypeFilter, searchText } = nextProps; const { formatMessage } = nextProps.intl; let menuItems = []; if (dataSource && dataSource.length) { @@ -305,14 +307,11 @@ class SearchBox extends React.Component { } else { menuItems = [ { - text: "", + element: null, + text: searchText, value: ( - -
    - {formatMessage({ id: "no_results_found" })} -
    + + {formatMessage({ id: "no_results_found" })} ), }, @@ -321,9 +320,9 @@ class SearchBox extends React.Component { if (stopTypeFilter.length || topoiChips.length) { const filterNotification = { - text: "", + text: searchText, value: ( - + this.removeFiltersAndSearch()}>
    this.removeFiltersAndSearch()} > {formatMessage({ id: "remove" })}
    @@ -350,11 +348,12 @@ class SearchBox extends React.Component {     ), }; - // if (menuItems.length > 6) { - // menuItems[6] = filterNotification; - // } else { - menuItems.push(filterNotification); - // } + + if (menuItems.length > 6) { + menuItems[6] = filterNotification; + } else { + menuItems.push(filterNotification); + } } return menuItems; } @@ -386,24 +385,21 @@ class SearchBox extends React.Component { { text: "", value: ( - - -
    - {formatMessage({ id: "loading" })} -
    + +
    + +
    + {formatMessage({ id: "loading" })}
    - } - /> +
    +     ), }, ]; @@ -609,6 +605,23 @@ class SearchBox extends React.Component { freeSolo options={menuItems} loading={loading} + loadingText={ + +
    + +
    + {formatMessage({ id: "loading" })} +
    +
    +     + } //filterOptions={(x) => x !== ""} //filterOptions={filterOptions} onInputChange={this.handleSearchUpdate.bind(this)} @@ -631,6 +644,7 @@ class SearchBox extends React.Component { // {option.text}{option.value} // //)} + noOptionsText={formatMessage({ id: "no_results_found" })} renderInput={(params) => ( From 7b02fe0f7ae3e30b2886e5af4c0bf908996a4786 Mon Sep 17 00:00:00 2001 From: a-limyr Date: Tue, 23 Apr 2024 10:56:24 +0200 Subject: [PATCH 13/43] Colors and main menu --- src/components/Header.js | 503 +++++++++++++++------- src/components/MainPage/MoreMenuItem.tsx | 118 +++++ src/components/MainPage/SearchBox.js | 22 +- src/config/themes/default/defaultTheme.js | 56 ++- 4 files changed, 516 insertions(+), 183 deletions(-) create mode 100644 src/components/MainPage/MoreMenuItem.tsx diff --git a/src/components/Header.js b/src/components/Header.js index ecd90bdca..fb425b431 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -13,18 +13,16 @@ See the Licence for the specific language governing permissions and limitations under the Licence. */ import React from "react"; +import MoreMenuItem from "./MainPage/MoreMenuItem"; import { connect } from "react-redux"; import AppBar from "@mui/material/AppBar"; import Toolbar from "@mui/material/Toolbar"; -import Container from "@mui/material/Container"; import IconButton from "@mui/material/IconButton"; -import IconMenu from "@mui/icons-material/Menu"; import MenuItem from "@mui/material/MenuItem"; import MoreVertIcon from "@mui/icons-material/MoreVert"; import ArrowDropRight from "@mui/icons-material/ArrowRight"; import Typography from "@mui/material/Typography"; -import MenuIcon from "@mui/icons-material/Menu"; -import { getEnvColor, getHeaderColor, getLogo } from "../config/themeConfig"; +import { getEnvColor, getLogo, getTheme } from "../config/themeConfig"; import MdAccount from "@mui/icons-material/AccountCircle"; import MdLanguage from "@mui/icons-material/Language"; import MdSettings from "@mui/icons-material/Settings"; @@ -43,6 +41,7 @@ import { import { injectIntl } from "react-intl"; import { Helmet } from "react-helmet"; import Menu from "@mui/material/Menu"; +import { Check } from "@mui/icons-material"; class Header extends React.Component { constructor(props) { @@ -210,6 +209,7 @@ class Header extends React.Component { const tiamatEnv = getTiamatEnv(); const headerColor = getEnvColor(tiamatEnv); + const theme = getTheme(); const logo = getLogo(); const { anchorEl } = this.state; @@ -269,6 +269,7 @@ class Header extends React.Component { variant="contained" onClick={() => this.handleLogin()} sx={{ mr: 2 }} + color={"primary2Color"} > {logIn} @@ -280,7 +281,7 @@ class Header extends React.Component { aria-haspopup="true" onClick={this.handleClick} > - + {reportSite} - } + label={settings} + style={{ + fontSize: 12, + padding: 0, + paddingBottom: 5, + paddingTop: 5, + width: 300, + }} desktop={true} multiple - menuItems={[ - - this.handleTogglePublicCodePrivateCodeOnStopPlaces( - !isPublicCodePrivateCodeOnStopPlacesEnabled, - ) - } - insetChildren - desktop={true} - multiple - checked={isPublicCodePrivateCodeOnStopPlacesEnabled} - primaryText={publicCodePrivateCodeSetting} - />, - ]} > - - {settings} - - + this.handleTogglePublicCodePrivateCodeOnStopPlaces( + !isPublicCodePrivateCodeOnStopPlacesEnabled, + ) + } + insetChildren + desktop={true} + multiple + checked={isPublicCodePrivateCodeOnStopPlacesEnabled} + > + {isPublicCodePrivateCodeOnStopPlacesEnabled ? ( + + ) : ( +
    + )} + {publicCodePrivateCodeSetting} + + + } + label={mapSettings} + style={{ + fontSize: 12, + padding: 0, + paddingBottom: 5, + paddingTop: 5, + width: 300, + }} desktop={true} multiple - menuItems={[ - - this.handleToggleMultiPolylines(!isMultiPolylinesEnabled) - } - insetChildren - desktop={true} - multiple - checked={isMultiPolylinesEnabled} - primaryText={showPathLinks} - />, - - this.handleToggleCompassBearing(!isCompassBearingEnabled) - } - insetChildren - desktop={true} - multiple - checked={isCompassBearingEnabled} - primaryText={showCompassBearing} - />, - - this.handleToggleShowExpiredStops(!showExpiredStops) - } - insetChildren - desktop={true} - multiple - checked={showExpiredStops} - primaryText={expiredStopLabel} - />, - - this.handleToggleMultimodalEdges(!showMultimodalEdges) - } - insetChildren - desktop={true} - multiple - checked={showMultimodalEdges} - primaryText={showMultimodalEdgesLabel} - />, - } - insetChildren - menuItems={[ - this.handleToggleShowPublicCode(true)} - insetChildren - primaryText={showPublicCodeLabel} - checked={showPublicCode} - />, - this.handleToggleShowPublicCode(false)} - insetChildren - primaryText={showPrivateCodeLabel} - checked={!showPublicCode} - />, - ]} - />, - - this.handleToggleShowFareZones(!showFareZones) - } - insetChildren - desktop={true} - multiple - checked={showFareZones} - primaryText={showFareZonesLabel} - />, - - this.handleToggleShowTariffZones(!showTariffZones) - } - insetChildren - desktop={true} - multiple - checked={showTariffZones} - primaryText={showTariffZonesLabel} - />, - ]} > - - {mapSettings} - - - this.handleSetLanguage("nb")} - insetChildren - primaryText={norwegian} - checked={locale === "nb"} - />, - this.handleSetLanguage("en")} - insetChildren - primaryText={english} - checked={locale === "en"} - />, + + this.handleToggleMultiPolylines(!isMultiPolylinesEnabled) + } + insetChildren + desktop={true} + multiple + > + {isMultiPolylinesEnabled ? ( + + ) : ( +
    + )} + {showPathLinks} + + + + this.handleToggleCompassBearing(!isCompassBearingEnabled) + } + > + {isCompassBearingEnabled ? ( + + ) : ( +
    + )} + {showCompassBearing} + + + + this.handleToggleShowExpiredStops(!showExpiredStops) + } + > + {showExpiredStops ? ( + + ) : ( +
    + )} + {expiredStopLabel} + + + + this.handleToggleMultimodalEdges(!showMultimodalEdges) + } + insetChildren + desktop={true} + multiple + checked={showMultimodalEdges} + > + {showMultimodalEdges ? ( + + ) : ( +
    + )} + {showMultimodalEdgesLabel} + + + } + label={quayCodeShowingLabel} + > this.handleSetLanguage("fr")} - insetChildren - primaryText={french} - checked={locale === "fr"} - />, + style={{ + fontSize: 12, + padding: 0, + paddingBottom: 5, + paddingTop: 5, + width: 300, + }} + onClick={() => this.handleToggleShowPublicCode(true)} + > + {showPublicCode ? ( + + ) : ( +
    + )} + {showPublicCodeLabel} + + this.handleSetLanguage("sv")} - insetChildren - primaryText={swedish} - checked={locale === "sv"} - />, - ]} + style={{ + fontSize: 12, + padding: 0, + paddingBottom: 5, + paddingTop: 5, + width: 300, + }} + onClick={() => this.handleToggleShowPublicCode(false)} + > + {!showPublicCode ? ( + + ) : ( +
    + )} + {showPrivateCodeLabel} + + + + this.handleToggleShowFareZones(!showFareZones)} + insetChildren + desktop={true} + multiple + checked={showFareZones} + > + {showFareZones ? ( + + ) : ( +
    + )} + {showFareZonesLabel} + + + + this.handleToggleShowTariffZones(!showTariffZones) + } + insetChildren + desktop={true} + multiple + checked={showTariffZones} + > + {showTariffZones ? ( + + ) : ( +
    + )} + {showTariffZonesLabel} + + + } + label={language} + style={{ + fontSize: 12, + padding: 0, + paddingBottom: 5, + paddingTop: 5, + width: 300, + }} > - - {language} - - + this.handleSetLanguage("nb")} + insetChildren + checked={locale === "nb"} + > + {locale === "nb" ? ( + + ) : ( +
    + )} + {norwegian} + + this.handleSetLanguage("en")} + insetChildren + checked={locale === "en"} + > + {locale === "en" ? ( + + ) : ( +
    + )} + {english} + + this.handleSetLanguage("fr")} + insetChildren + checked={locale === "fr"} + > + {locale === "fr" ? ( + + ) : ( +
    + )} + {french} + + this.handleSetLanguage("sv")} + insetChildren + checked={locale === "sv"} + > + {locale === "sv" ? ( + + ) : ( +
    + )} + {swedish} + + {userGuide} @@ -472,10 +647,18 @@ class Header extends React.Component { {this.props.auth.isAuthenticated && ( } - primaryText={`${logOut} ${username}`} onClick={() => this.handleLogOut()} - style={{ fontSize: 12, padding: 0 }} - /> + style={{ + fontSize: 12, + padding: 0, + paddingBottom: 5, + paddingTop: 5, + width: 300, + }} + > + + {`${logOut} ${username}`} + )}
    diff --git a/src/components/MainPage/MoreMenuItem.tsx b/src/components/MainPage/MoreMenuItem.tsx new file mode 100644 index 000000000..1c88adfee --- /dev/null +++ b/src/components/MainPage/MoreMenuItem.tsx @@ -0,0 +1,118 @@ +import React, { + KeyboardEventHandler, + useRef, + useState, + useCallback, + useId, + FC, +} from "react"; +import { MenuItemProps, MenuItem, Menu, MenuProps } from "@mui/material"; +import NavigateNextIcon from "@mui/icons-material/NavigateNext"; + +type MoreMenuItemProps = { + button?: true; + label: string; + leftIcon: string; + MenuProps?: Omit; +} & Omit; + +const MoreMenuItem: FC = ({ + label, + leftIcon, + children, + id, + MenuProps, + ...other +}) => { + const [isOpen, setIsOpen] = useState(false); + const open = useCallback(() => setIsOpen(true), []); + const close = useCallback(() => setIsOpen(false), []); + + const menuItemRef = useRef(null); + const menuItemId = useId(); + const normMenuItemId = id ?? menuItemId; + + const handleItemKeyDown: KeyboardEventHandler = (ev) => { + if ( + (ev.key !== "ArrowRight" && ev.key !== "Enter") || + ev.ctrlKey || + ev.shiftKey || + ev.altKey || + ev.metaKey + ) + return; + ev.preventDefault(); + ev.stopPropagation(); + setIsOpen(true); + }; + + const handleMenuKeyDown: KeyboardEventHandler = (ev) => { + ev.stopPropagation(); + if ( + (ev.key !== "ArrowLeft" && ev.key !== "Escape") || + ev.ctrlKey || + ev.shiftKey || + ev.altKey || + ev.metaKey + ) + return; + ev.preventDefault(); + setIsOpen(false); + }; + + return ( + .left-content": { + display: "flex", + alignItems: "center", + }, + }} + onMouseEnter={open} + onMouseLeave={close} + id={normMenuItemId} + > +
    + {leftIcon} + {label} +
    + + menuItemRef.current?.focus() }} + disableRestoreFocus + onKeyDown={handleMenuKeyDown} + sx={{ + pointerEvents: "none", + "& .MuiList-root": { + pointerEvents: "auto", + }, + }} + MenuListProps={{ + ...MenuProps?.MenuListProps, + "aria-labelledby": normMenuItemId, + }} + anchorEl={menuItemRef.current} + open={isOpen} + onClose={close} + anchorOrigin={ + MenuProps?.anchorOrigin ?? { vertical: "center", horizontal: "left" } + } + transformOrigin={ + MenuProps?.transformOrigin ?? { + vertical: "center", + horizontal: "right", + } + } + > + {children} + +     + ); +}; + +export default MoreMenuItem; diff --git a/src/components/MainPage/SearchBox.js b/src/components/MainPage/SearchBox.js index 6a93e15ee..dee90494e 100644 --- a/src/components/MainPage/SearchBox.js +++ b/src/components/MainPage/SearchBox.js @@ -16,7 +16,6 @@ import { connect } from "react-redux"; import React from "react"; import ReactDOM from "react-dom"; import Autocomplete, { createFilterOptions } from "@mui/material/Autocomplete"; -import FlatButton from "@mui/material/Button"; import MdMore from "@mui/icons-material/ExpandMore"; import { StopPlaceActions, UserActions } from "../../actions/"; import SearchBoxDetails from "./SearchBoxDetails"; @@ -172,7 +171,6 @@ class SearchBox extends React.Component { } handleNewRequest(event, result, reason) { - debugger; if ( result && typeof result.element !== "undefined" && @@ -527,7 +525,11 @@ class SearchBox extends React.Component {
    @@ -589,12 +591,13 @@ class SearchBox extends React.Component {
    ) : (
    - this.handleToggleFilter(true)} + color={"textColor"} > {formatMessage({ id: "filters_more" })} - +
    )}
    @@ -666,15 +669,16 @@ class SearchBox extends React.Component { />
    - { this.handleSaveAsFavorite(!!favorited); }} + color={"textColor"} > {formatMessage({ id: "filter_save_favorite" })} - +
    {chosenResult ? ( @@ -717,7 +721,6 @@ class SearchBox extends React.Component { style={{ width: 20, height: 20 }} /> } - primary={false} sx={{ color: "black" }} > {formatMessage({ id: "lookup_coordinates" })} @@ -730,8 +733,9 @@ class SearchBox extends React.Component { anchorEl: e.currentTarget, }); }} + color={"primary2Color"} + sx={{ color: "white" }} startIcon={} - primary={true} > {formatMessage({ id: "new_stop" })} diff --git a/src/config/themes/default/defaultTheme.js b/src/config/themes/default/defaultTheme.js index ff5a336f3..8242f9130 100644 --- a/src/config/themes/default/defaultTheme.js +++ b/src/config/themes/default/defaultTheme.js @@ -75,20 +75,48 @@ export const getV0Theme = () => ({ export const getTheme = () => ({ fontFamily: "Roboto, sans-serif", palette: { - primary1Color: primary, - primary2Color: cyan700, - primary3Color: grey400, - accent1Color: primary, - accent2Color: grey100, - accent3Color: grey500, - textColor: darkBlack, - alternateTextColor: white, - canvasColor: white, - borderColor: grey300, - disabledColor: lighten(darkBlack, 0.3), - pickerHeaderColor: primary, - clockCircleColor: lighten(darkBlack, 0.07), - shadowColor: fullBlack, + primary1Color: { + main: primary, + }, + primary2Color: { + main: cyan700, + }, + primary3Color: { + main: grey400, + }, + accent1Color: { + main: primary, + }, + accent2Color: { + main: grey100, + }, + accent3Color: { + main: grey500, + }, + textColor: { + main: darkBlack, + }, + alternateTextColor: { + main: white, + }, + canvasColor: { + main: white, + }, + borderColor: { + main: grey300, + }, + disabledColor: { + main: lighten(darkBlack, 0.3), + }, + pickerHeaderColor: { + main: primary, + }, + clockCircleColor: { + main: lighten(darkBlack, 0.07), + }, + shadowColor: { + main: fullBlack, + }, }, datePicker: { selectColor: primary, From 5c202c34378676af4b071f2dad7e98ac9f65d7d9 Mon Sep 17 00:00:00 2001 From: a-limyr Date: Tue, 23 Apr 2024 14:49:32 +0200 Subject: [PATCH 14/43] Submenu handling --- src/components/Header.js | 24 ------------------------ 1 file changed, 24 deletions(-) diff --git a/src/components/Header.js b/src/components/Header.js index fb425b431..127998844 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -317,8 +317,6 @@ class Header extends React.Component { paddingTop: 5, width: 300, }} - desktop={true} - multiple > {isPublicCodePrivateCodeOnStopPlacesEnabled ? ( @@ -356,8 +350,6 @@ class Header extends React.Component { paddingTop: 5, width: 300, }} - desktop={true} - multiple > this.handleToggleMultiPolylines(!isMultiPolylinesEnabled) } - insetChildren - desktop={true} - multiple > {isMultiPolylinesEnabled ? ( @@ -433,10 +422,6 @@ class Header extends React.Component { onClick={() => this.handleToggleMultimodalEdges(!showMultimodalEdges) } - insetChildren - desktop={true} - multiple - checked={showMultimodalEdges} > {showMultimodalEdges ? ( @@ -503,10 +488,6 @@ class Header extends React.Component { width: 300, }} onClick={() => this.handleToggleShowFareZones(!showFareZones)} - insetChildren - desktop={true} - multiple - checked={showFareZones} > {showFareZones ? ( @@ -527,9 +508,6 @@ class Header extends React.Component { onClick={() => this.handleToggleShowTariffZones(!showTariffZones) } - insetChildren - desktop={true} - multiple checked={showTariffZones} > {showTariffZones ? ( @@ -579,7 +557,6 @@ class Header extends React.Component { width: 300, }} onClick={() => this.handleSetLanguage("en")} - insetChildren checked={locale === "en"} > {locale === "en" ? ( @@ -598,7 +575,6 @@ class Header extends React.Component { width: 300, }} onClick={() => this.handleSetLanguage("fr")} - insetChildren checked={locale === "fr"} > {locale === "fr" ? ( From bfcd66db32b003c395751bfcd1a0997b6cf76631 Mon Sep 17 00:00:00 2001 From: a-limyr Date: Thu, 25 Apr 2024 11:17:39 +0200 Subject: [PATCH 15/43] Edit stop place version --- .../EditStopPage/VersionsPopover.js | 48 +++++++++---------- src/components/Header.js | 1 - src/reducers/zonesSlice.ts | 5 +- 3 files changed, 25 insertions(+), 29 deletions(-) diff --git a/src/components/EditStopPage/VersionsPopover.js b/src/components/EditStopPage/VersionsPopover.js index 41cd93e80..91ae4cbe7 100644 --- a/src/components/EditStopPage/VersionsPopover.js +++ b/src/components/EditStopPage/VersionsPopover.js @@ -75,33 +75,29 @@ class VersionsPopover extends Component { targetOrigin={{ horizontal: "left", vertical: "top" }} onClose={() => this.setState({ open: false })} > - - {sortVersions(versions).map((version, i) => ( - -
    -
    - {version.version} -
    -
    {version.name}
    -
    -
    - {version.changedBy || notAvailableMessage}:{" "} - {version.versionComment || notAvailableMessage} -
    + {sortVersions(versions).map((version, i) => ( + this.handleOnRequest(version)} + > +
    +
    +
    + {version.version}
    - } - secondaryText={ -
    {`${ - version.fromDate || notAvailableMessage - } - ${version.toDate || notAvailableMessage}`}
    - } - onClick={() => this.handleOnRequest(version)} - /> - ))} -
    +
    {version.name}
    +
    +
    + {version.changedBy || notAvailableMessage}:{" "} + {version.versionComment || notAvailableMessage} +
    +
    +
    {`${ + version.fromDate || notAvailableMessage + } - ${version.toDate || notAvailableMessage}`}
    + + ))}
    ); diff --git a/src/components/Header.js b/src/components/Header.js index 127998844..fef208a7c 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -20,7 +20,6 @@ import Toolbar from "@mui/material/Toolbar"; import IconButton from "@mui/material/IconButton"; import MenuItem from "@mui/material/MenuItem"; import MoreVertIcon from "@mui/icons-material/MoreVert"; -import ArrowDropRight from "@mui/icons-material/ArrowRight"; import Typography from "@mui/material/Typography"; import { getEnvColor, getLogo, getTheme } from "../config/themeConfig"; import MdAccount from "@mui/icons-material/AccountCircle"; diff --git a/src/reducers/zonesSlice.ts b/src/reducers/zonesSlice.ts index b6b41a1db..2c5332c67 100644 --- a/src/reducers/zonesSlice.ts +++ b/src/reducers/zonesSlice.ts @@ -171,7 +171,8 @@ export const { setSelectedFareZones, setSelectedTariffZones } = export const toggleShowFareZonesInMap = createAsyncThunk( "zones/toggleShowFareZonesInMap", async (value, { dispatch }) => { - Settings.setShowTariffZonesInMap(false); + debugger; + Settings.setShowTariffZonesInMap(!value); Settings.setShowFareZonesInMap(value); dispatch(zonesSlice.actions.toggleShowFareZonesInMap(value)); }, @@ -180,7 +181,7 @@ export const toggleShowFareZonesInMap = createAsyncThunk( export const toggleShowTariffZonesInMap = createAsyncThunk( "zones/toggleShowTariffZonesInMap", async (value, { dispatch }) => { - Settings.setShowFareZonesInMap(false); + Settings.setShowFareZonesInMap(!value); Settings.setShowTariffZonesInMap(value); dispatch(zonesSlice.actions.toggleShowTariffZonesInMap(value)); }, From 68cbb581d5df5f12316ab16665f1882b74eacce1 Mon Sep 17 00:00:00 2001 From: a-limyr Date: Tue, 30 Apr 2024 11:13:13 +0200 Subject: [PATCH 16/43] Rolling back zones issue --- src/components/Header.js | 6 ++---- src/reducers/zonesSlice.ts | 1 - 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/Header.js b/src/components/Header.js index fef208a7c..4d2d21fa5 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -140,12 +140,12 @@ class Header extends React.Component { } handleToggleShowFareZones(value) { - this.props.dispatch(toggleShowTariffZonesInMap(!value)); + this.props.dispatch(toggleShowTariffZonesInMap(false)); this.props.dispatch(toggleShowFareZonesInMap(value)); } handleToggleShowTariffZones(value) { - this.props.dispatch(toggleShowFareZonesInMap(!value)); + this.props.dispatch(toggleShowFareZonesInMap(false)); this.props.dispatch(toggleShowTariffZonesInMap(value)); } @@ -537,7 +537,6 @@ class Header extends React.Component { width: 300, }} onClick={() => this.handleSetLanguage("nb")} - insetChildren checked={locale === "nb"} > {locale === "nb" ? ( @@ -592,7 +591,6 @@ class Header extends React.Component { width: 300, }} onClick={() => this.handleSetLanguage("sv")} - insetChildren checked={locale === "sv"} > {locale === "sv" ? ( diff --git a/src/reducers/zonesSlice.ts b/src/reducers/zonesSlice.ts index 2c5332c67..d2cbe560a 100644 --- a/src/reducers/zonesSlice.ts +++ b/src/reducers/zonesSlice.ts @@ -171,7 +171,6 @@ export const { setSelectedFareZones, setSelectedTariffZones } = export const toggleShowFareZonesInMap = createAsyncThunk( "zones/toggleShowFareZonesInMap", async (value, { dispatch }) => { - debugger; Settings.setShowTariffZonesInMap(!value); Settings.setShowFareZonesInMap(value); dispatch(zonesSlice.actions.toggleShowFareZonesInMap(value)); From 38e253343f51738c1462f6b9201012c80c97bd6e Mon Sep 17 00:00:00 2001 From: a-limyr Date: Thu, 2 May 2024 10:46:41 +0200 Subject: [PATCH 17/43] Parking and Quays tab fix --- src/components/EditStopPage/EditStopGeneral.js | 3 ++- .../EditStopPage/ParkingItemPayAndRideExpandedFields.js | 8 ++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/EditStopPage/EditStopGeneral.js b/src/components/EditStopPage/EditStopGeneral.js index 9312b1a58..ac50a66f3 100644 --- a/src/components/EditStopPage/EditStopGeneral.js +++ b/src/components/EditStopPage/EditStopGeneral.js @@ -371,7 +371,7 @@ class EditStopGeneral extends React.Component { this.props.dispatch(StopPlaceActions.discardChangesForEditingStop()); } - handleSlideChange(value) { + handleSlideChange(event, value) { this.props.dispatch(UserActions.changeElementTypeTab(value)); } @@ -617,6 +617,7 @@ class EditStopGeneral extends React.Component { activeStopPlace={stopPlace} itemTranslation={translations} intl={intl} + value={activeElementTab} />
    { - + {formatMessage({ id: "parking_parkAndRide_capacity_sub_header" })} ( {`${totalCapacity}`}) - + { - + {formatMessage({ id: "parking_recharging_sub_header" })} - + {formatMessage({ id: "parking_recharging_available_info" })} From 69c3824dd3139b61301e4bc15457bc35f6c81e78 Mon Sep 17 00:00:00 2001 From: a-limyr Date: Mon, 6 May 2024 09:54:53 +0200 Subject: [PATCH 18/43] Support old tiamat in addition to legacy --- src/models/ParentStopPlace.js | 28 +++++++++++++++++++++++++--- src/models/Quay.js | 9 ++++++++- src/models/StopPlace.js | 11 ++++++++++- src/models/stopPlaceUtils.js | 9 ++++++++- 4 files changed, 51 insertions(+), 6 deletions(-) diff --git a/src/models/ParentStopPlace.js b/src/models/ParentStopPlace.js index acb244edc..67c30b54a 100644 --- a/src/models/ParentStopPlace.js +++ b/src/models/ParentStopPlace.js @@ -46,7 +46,15 @@ class ParentStopPlace { entityType: Entities.STOP_PLACE, }; - if (child.geometry && child.geometry.coordinates) { + if (child.geometry && child.geometry.legacyCoordinates) { + let coordinates = child.geometry.legacyCoordinates[0].slice(); + // Leaflet uses latLng, GeoJSON [long,lat] + clientStop.location = [ + setDecimalPrecision(coordinates[1], 6), + setDecimalPrecision(coordinates[0], 6), + ]; + childToAdd.location = clientStop.location; + } else if (child.geometry && child.geometry.coordinates) { let coordinates = child.geometry.coordinates[0].slice(); // Leaflet uses latLng, GeoJSON [long,lat] clientStop.location = [ @@ -144,7 +152,14 @@ class ParentStopPlace { clientStop.placeEquipments = stop.placeEquipments; } - if (stop.geometry && stop.geometry.coordinates) { + if (stop.geometry && stop.geometry.legacyCoordinates) { + let coordinates = stop.geometry.legacyCoordinates[0].slice(); + // Leaflet uses latLng, GeoJSON is [long,lat] + clientStop.location = [ + setDecimalPrecision(coordinates[1], 6), + setDecimalPrecision(coordinates[0], 6), + ]; + } else if (stop.geometry && stop.geometry.coordinates) { let coordinates = stop.geometry.coordinates[0].slice(); // Leaflet uses latLng, GeoJSON is [long,lat] clientStop.location = [ @@ -186,7 +201,14 @@ class ParentStopPlace { child.hasExpired = hasExpired(clientStop.validBetween); child.isChildOfParent = true; - if (child.geometry && child.geometry.coordinates) { + if (child.geometry && child.geometry.legacyCoordinates) { + let coordinates = child.geometry.legacyCoordinates[0].slice(); + // Leaflet uses latLng, GeoJSON is [long,lat] + child.location = [ + setDecimalPrecision(coordinates[1], 6), + setDecimalPrecision(coordinates[0], 6), + ]; + } else if (child.geometry && child.geometry.coordinates) { let coordinates = child.geometry.coordinates[0].slice(); // Leaflet uses latLng, GeoJSON is [long,lat] child.location = [ diff --git a/src/models/Quay.js b/src/models/Quay.js index 4e62119a2..0739a4e46 100644 --- a/src/models/Quay.js +++ b/src/models/Quay.js @@ -48,7 +48,14 @@ class Quay { clientQuay.privateCode = quay.privateCode.value; } - if (quay.geometry && quay.geometry.coordinates) { + if (quay.geometry && quay.geometry.legacyCoordinates) { + let coordinates = quay.geometry.legacyCoordinates[0].slice(); + + clientQuay.location = [ + setDecimalPrecision(coordinates[1], 6), + setDecimalPrecision(coordinates[0], 6), + ]; + } else if (quay.geometry && quay.geometry.coordinates) { let coordinates = quay.geometry.coordinates[0].slice(); clientQuay.location = [ diff --git a/src/models/StopPlace.js b/src/models/StopPlace.js index 616da6568..f2540788f 100644 --- a/src/models/StopPlace.js +++ b/src/models/StopPlace.js @@ -131,7 +131,16 @@ class StopPlace { ); } - if (stop.geometry && stop.geometry.coordinates) { + if (stop.geometry && stop.geometry.legacyCoordinates) { + // this is temporary + let coordinates = stop.geometry.legacyCoordinates[0].slice(); + // Leaflet uses latLng, GeoJSON [long,lat] + clientStop.location = [ + setDecimalPrecision(coordinates[1], 6), + setDecimalPrecision(coordinates[0], 6), + ]; + } else if (stop.geometry && stop.geometry.coordinates) { + //this must be changed to new input format when we have switched to legacyCoordinates let coordinates = stop.geometry.coordinates[0].slice(); // Leaflet uses latLng, GeoJSON [long,lat] clientStop.location = [ diff --git a/src/models/stopPlaceUtils.js b/src/models/stopPlaceUtils.js index e6090d773..3f7c56daf 100644 --- a/src/models/stopPlaceUtils.js +++ b/src/models/stopPlaceUtils.js @@ -86,7 +86,13 @@ export const netexifyPlaceEquipment = (placeEquipments) => { export const simplifyBoardingPositions = (boardingPositions) => { if (boardingPositions) { return boardingPositions.map((bp) => { - let coordinates = bp.geometry.coordinates[0].slice(); + let coordinates; + if (bp.geometry.legacyCoordinates) { + coordinates = bp.geometry.legacyCoordinates[0].slice(); + } else if (bp.geometry.coordinates) { + coordinates = bp.geometry.coordinates[0].slice(); + } + return { id: bp.id, publicCode: bp.publicCode, @@ -107,6 +113,7 @@ export const netexifyBoardingPositions = (boardingPositions) => { geometry: { coordinates: [[bp.location[1], bp.location[0]]], type: "Point", + legacyCoordinates: [[bp.location[1], bp.location[0]]], }, publicCode: bp.publicCode, id: bp.id || undefined, From 1a8d616d9edadef99de0a047f84e4f75d73e6cef Mon Sep 17 00:00:00 2001 From: a-limyr Date: Tue, 7 May 2024 10:26:00 +0200 Subject: [PATCH 19/43] Rollback of legacy coordinates test --- src/models/ParentStopPlace.js | 28 +++------------------------- src/models/Quay.js | 9 +-------- src/models/StopPlace.js | 10 +--------- src/models/stopPlaceUtils.js | 4 +--- 4 files changed, 6 insertions(+), 45 deletions(-) diff --git a/src/models/ParentStopPlace.js b/src/models/ParentStopPlace.js index 67c30b54a..acb244edc 100644 --- a/src/models/ParentStopPlace.js +++ b/src/models/ParentStopPlace.js @@ -46,15 +46,7 @@ class ParentStopPlace { entityType: Entities.STOP_PLACE, }; - if (child.geometry && child.geometry.legacyCoordinates) { - let coordinates = child.geometry.legacyCoordinates[0].slice(); - // Leaflet uses latLng, GeoJSON [long,lat] - clientStop.location = [ - setDecimalPrecision(coordinates[1], 6), - setDecimalPrecision(coordinates[0], 6), - ]; - childToAdd.location = clientStop.location; - } else if (child.geometry && child.geometry.coordinates) { + if (child.geometry && child.geometry.coordinates) { let coordinates = child.geometry.coordinates[0].slice(); // Leaflet uses latLng, GeoJSON [long,lat] clientStop.location = [ @@ -152,14 +144,7 @@ class ParentStopPlace { clientStop.placeEquipments = stop.placeEquipments; } - if (stop.geometry && stop.geometry.legacyCoordinates) { - let coordinates = stop.geometry.legacyCoordinates[0].slice(); - // Leaflet uses latLng, GeoJSON is [long,lat] - clientStop.location = [ - setDecimalPrecision(coordinates[1], 6), - setDecimalPrecision(coordinates[0], 6), - ]; - } else if (stop.geometry && stop.geometry.coordinates) { + if (stop.geometry && stop.geometry.coordinates) { let coordinates = stop.geometry.coordinates[0].slice(); // Leaflet uses latLng, GeoJSON is [long,lat] clientStop.location = [ @@ -201,14 +186,7 @@ class ParentStopPlace { child.hasExpired = hasExpired(clientStop.validBetween); child.isChildOfParent = true; - if (child.geometry && child.geometry.legacyCoordinates) { - let coordinates = child.geometry.legacyCoordinates[0].slice(); - // Leaflet uses latLng, GeoJSON is [long,lat] - child.location = [ - setDecimalPrecision(coordinates[1], 6), - setDecimalPrecision(coordinates[0], 6), - ]; - } else if (child.geometry && child.geometry.coordinates) { + if (child.geometry && child.geometry.coordinates) { let coordinates = child.geometry.coordinates[0].slice(); // Leaflet uses latLng, GeoJSON is [long,lat] child.location = [ diff --git a/src/models/Quay.js b/src/models/Quay.js index 0739a4e46..4e62119a2 100644 --- a/src/models/Quay.js +++ b/src/models/Quay.js @@ -48,14 +48,7 @@ class Quay { clientQuay.privateCode = quay.privateCode.value; } - if (quay.geometry && quay.geometry.legacyCoordinates) { - let coordinates = quay.geometry.legacyCoordinates[0].slice(); - - clientQuay.location = [ - setDecimalPrecision(coordinates[1], 6), - setDecimalPrecision(coordinates[0], 6), - ]; - } else if (quay.geometry && quay.geometry.coordinates) { + if (quay.geometry && quay.geometry.coordinates) { let coordinates = quay.geometry.coordinates[0].slice(); clientQuay.location = [ diff --git a/src/models/StopPlace.js b/src/models/StopPlace.js index f2540788f..1940c340f 100644 --- a/src/models/StopPlace.js +++ b/src/models/StopPlace.js @@ -131,16 +131,8 @@ class StopPlace { ); } - if (stop.geometry && stop.geometry.legacyCoordinates) { + if (stop.geometry && stop.geometry.coordinates) { // this is temporary - let coordinates = stop.geometry.legacyCoordinates[0].slice(); - // Leaflet uses latLng, GeoJSON [long,lat] - clientStop.location = [ - setDecimalPrecision(coordinates[1], 6), - setDecimalPrecision(coordinates[0], 6), - ]; - } else if (stop.geometry && stop.geometry.coordinates) { - //this must be changed to new input format when we have switched to legacyCoordinates let coordinates = stop.geometry.coordinates[0].slice(); // Leaflet uses latLng, GeoJSON [long,lat] clientStop.location = [ diff --git a/src/models/stopPlaceUtils.js b/src/models/stopPlaceUtils.js index 3f7c56daf..fbc693210 100644 --- a/src/models/stopPlaceUtils.js +++ b/src/models/stopPlaceUtils.js @@ -87,9 +87,7 @@ export const simplifyBoardingPositions = (boardingPositions) => { if (boardingPositions) { return boardingPositions.map((bp) => { let coordinates; - if (bp.geometry.legacyCoordinates) { - coordinates = bp.geometry.legacyCoordinates[0].slice(); - } else if (bp.geometry.coordinates) { + if (bp.geometry.coordinates) { coordinates = bp.geometry.coordinates[0].slice(); } From 706465cb50ee1b7180985f063db4616fdd66fcfc Mon Sep 17 00:00:00 2001 From: a-limyr Date: Mon, 27 May 2024 11:26:31 +0200 Subject: [PATCH 20/43] AutoComplete report page --- src/components/ReportPage/ReportPageFooter.js | 4 +- src/containers/ReportPage.js | 45 ++++++++++++------- 2 files changed, 31 insertions(+), 18 deletions(-) diff --git a/src/components/ReportPage/ReportPageFooter.js b/src/components/ReportPage/ReportPageFooter.js index 4c53460a2..2961a498c 100644 --- a/src/components/ReportPage/ReportPageFooter.js +++ b/src/components/ReportPage/ReportPageFooter.js @@ -13,7 +13,7 @@ See the Licence for the specific language governing permissions and limitations under the Licence. */ import React from "react"; -import RaisedButton from "@mui/material/Button"; +import Button from "@mui/material/Button"; import { jsonArrayToCSV } from "../../utils/CSVHelper"; import { ColumnTransformersStopPlace, @@ -189,7 +189,7 @@ class ReportPageFooter extends React.Component { ))}
    - -1) { let addedChipsIds = this.state.topoiChips.map((tc) => tc.id); if (addedChipsIds.indexOf(chip.id) === -1) { @@ -325,7 +325,7 @@ class ReportPage extends React.Component { } } - handleTopographicalPlaceSearch(searchText) { + handleTopographicalPlaceSearch(event, searchText) { this.props.dispatch(topographicalPlaceSearch(searchText)); } @@ -335,10 +335,21 @@ class ReportPage extends React.Component { text: name, id: place.id, value: ( - +
    +
    +
    {name}
    +
    + {formatMessage({ id: place.topographicPlaceType })} +
    +
    +
    ), type: place.topographicPlaceType, }; @@ -425,24 +436,26 @@ class ReportPage extends React.Component { {formatMessage({ id: "filter_report_by_topography" })}
    `${option.name}`} options={topographicalPlacesDataSource} - onUpdateInput={this.handleTopographicalPlaceSearch.bind(this)} - filter={AutoComplete.caseInsensitiveFilter} - style={{ - margin: "auto", - width: "50%", - textAlign: "center", - marginTop: -10, - }} + onInputChange={this.handleTopographicalPlaceSearch.bind(this)} maxSearchResults={5} fullWidth={true} - ref="topoFilter" - onNewRequest={this.handleAddChip.bind(this)} + onChange={this.handleAddChip.bind(this)} + noOptionsText={formatMessage({ id: "no_results_found" })} renderInput={(params) => ( )} + renderOption={(props, option, { selected }) => ( + + {option.value} + + )} /> Date: Tue, 4 Jun 2024 15:09:25 +0200 Subject: [PATCH 21/43] Report page --- src/components/MainPage/SearchBox.js | 1 + .../ReportPage/AdvancedReportFilters.js | 169 ++++++++++-------- .../ReportPage/GeneralReportFilters.js | 60 ++++--- .../ReportPage/ShowMoreMenuFooter.js | 10 +- src/components/ReportPage/TagFilterTray.js | 7 +- .../ReportPage/TagSuggestionPopover.js | 91 +++++----- src/containers/ReportPage.js | 35 ++-- 7 files changed, 216 insertions(+), 157 deletions(-) diff --git a/src/components/MainPage/SearchBox.js b/src/components/MainPage/SearchBox.js index dee90494e..80d1edd24 100644 --- a/src/components/MainPage/SearchBox.js +++ b/src/components/MainPage/SearchBox.js @@ -544,6 +544,7 @@ class SearchBox extends React.Component { )} inputValue={this.state.topographicPlaceFilterValue} onChange={this.handleAddChip.bind(this)} + noOptionsText={formatMessage({ id: "no_results_found" })} renderInput={(params) => ( - { this.setState({ open: true, anchorEl: e.currentTarget, }); }} - style={{ transform: "scale(0.9)" }} - label={formatMessage({ id: "filters_admin" })} - /> - } + > + {formatMessage({ id: "filters_admin" })} + + + { this.setState({ open: false }); }} > - - - { - handleCheckboxChange("showFutureAndExpired", value); - }} - /> - - - { - handleCheckboxChange("withoutLocationOnly", value); - }} - /> - - - { - handleCheckboxChange("withDuplicateImportedIds", value); - }} - style={{ marginTop: 10 }} - /> - - - { - handleCheckboxChange("withNearbySimilarDuplicates", value); - }} - style={{ marginTop: 10 }} - /> - - - { - handleCheckboxChange("withTags", value); - }} - style={{ marginTop: 10 }} - /> - - - + + { + handleCheckboxChange("showFutureAndExpired", value); + }} + /> + } + label={formatMessage({ + id: "show_future_expired_and_terminated", + })} + /> + + + { + handleCheckboxChange("withoutLocationOnly", value); + }} + /> + } + label={formatMessage({ + id: "only_without_coordinates", + })} + /> + + + { + handleCheckboxChange("withDuplicateImportedIds", value); + }} + /> + } + label={formatMessage({ + id: "only_duplicate_importedIds", + })} + /> + + + { + handleCheckboxChange("withNearbySimilarDuplicates", value); + }} + /> + } + label={formatMessage({ + id: "with_nearby_similar_duplicates", + })} + /> + + + { + handleCheckboxChange("withTags", value); + }} + /> + } + label={formatMessage({ + id: "only_with_tags", + })} + /> + + ); } diff --git a/src/components/ReportPage/GeneralReportFilters.js b/src/components/ReportPage/GeneralReportFilters.js index 15ecc3d64..8d9a4bea8 100644 --- a/src/components/ReportPage/GeneralReportFilters.js +++ b/src/components/ReportPage/GeneralReportFilters.js @@ -14,10 +14,11 @@ import React, { Component } from "react"; import Checkbox from "@mui/material/Checkbox"; -import RaisedButton from "@mui/material/Button"; +import Button from "@mui/material/Button"; import Menu from "@mui/material/Menu"; import MenuItem from "@mui/material/MenuItem"; -import { Popover } from "@mui/material"; +import { FormControlLabel, Popover } from "@mui/material"; +import MdMore from "@mui/icons-material/ExpandMore"; class GeneralReportFilters extends Component { constructor(props) { @@ -37,38 +38,51 @@ class GeneralReportFilters extends Component { return (
    - { this.setState({ open: true, anchorEl: e.currentTarget, }); }} - style={{ transform: "scale(0.9)" }} - label={formatMessage({ id: "filters_general" })} - /> - } + > + {formatMessage({ id: "filters_general" })} + + { this.setState({ open: false }); }} > - - - { - handleCheckboxChange("hasParking", value); - }} - style={{ marginTop: 10 }} - /> - - - + + { + handleCheckboxChange("hasParking", value); + }} + /> + } + label={formatMessage({ + id: "has_parking", + })} + /> + +
    ); } diff --git a/src/components/ReportPage/ShowMoreMenuFooter.js b/src/components/ReportPage/ShowMoreMenuFooter.js index 097e88aad..d0f1e30ae 100644 --- a/src/components/ReportPage/ShowMoreMenuFooter.js +++ b/src/components/ReportPage/ShowMoreMenuFooter.js @@ -14,6 +14,7 @@ import React, { Component } from "react"; import FlatButton from "@mui/material/Button"; +import Typography from "@mui/material/Typography"; class ShowMoreMenuFooter extends Component { render() { @@ -39,12 +40,9 @@ class ShowMoreMenuFooter extends Component { return (
    - + + {label} +
    ); } diff --git a/src/components/ReportPage/TagFilterTray.js b/src/components/ReportPage/TagFilterTray.js index 13200fe41..01474744f 100644 --- a/src/components/ReportPage/TagFilterTray.js +++ b/src/components/ReportPage/TagFilterTray.js @@ -40,10 +40,9 @@ class TagFilterTray extends Component { color: "#fff", textTransform: "uppercase", }} - onRequestDelete={() => handleItemOnCheck(tag, false)} - > - {tag} - + label={tag} + onDelete={() => handleItemOnCheck(tag, false)} + /> ))} diff --git a/src/components/ReportPage/TagSuggestionPopover.js b/src/components/ReportPage/TagSuggestionPopover.js index 4b02173f7..8297e0d87 100644 --- a/src/components/ReportPage/TagSuggestionPopover.js +++ b/src/components/ReportPage/TagSuggestionPopover.js @@ -23,7 +23,8 @@ import { injectIntl } from "react-intl"; import TextField from "@mui/material/TextField"; import MdAdd from "@mui/icons-material/Add"; import { connect } from "react-redux"; -import { Popover } from "@mui/material"; +import { FormControlLabel, Popover } from "@mui/material"; +import Typography from "@mui/material/Typography"; class TagSuggestionPopover extends Component { constructor(props) { @@ -75,9 +76,8 @@ class TagSuggestionPopover extends Component { return (
    } + variant="contained" + startIcon={} onClick={(e) => { e.preventDefault(); this.setState({ @@ -85,49 +85,56 @@ class TagSuggestionPopover extends Component { anchorEl: e.currentTarget, }); }} - /> - + {formatMessage({ id: "add_tag" })} + + + { this.setState({ open: false }); }} + disableAutoFocus={true} > -
    - { - this.setState({ - filterText, - }); - }} - /> -
    - - {filteredTags && filteredTags.length ? ( - filteredTags.map((tag, i) => ( - - -1} - onCheck={(e, checked) => { - handleItemOnCheck(tag.name, checked); - }} - labelStyle={{ fontSize: "0.9em" }} - /> - - )) - ) : ( -
    - {formatMessage({ id: "no_tags_found" })} -
    - )} -     + { + this.setState({ + filterText: filterText, + }); + }} + /> + + {filteredTags && filteredTags.length ? ( + filteredTags.map((tag, i) => ( + + -1} + onChange={(e, checked) => { + handleItemOnCheck(tag.name, checked); + }} + /> + } + label={ + + {tag.name} + + } + /> + + )) + ) : ( +
    + {formatMessage({ id: "no_tags_found" })} +
    + )} - +
    ); } diff --git a/src/containers/ReportPage.js b/src/containers/ReportPage.js index a9e19af9e..2a7559db2 100644 --- a/src/containers/ReportPage.js +++ b/src/containers/ReportPage.js @@ -27,7 +27,7 @@ import { topographicalPlaceSearch, } from "../actions/TiamatActions"; import MenuItem from "@mui/material/MenuItem"; -import RaisedButton from "@mui/material/Button"; +import Button from "@mui/material/Button"; import TextField from "@mui/material/TextField"; import MdSpinner from "../static/icons/spinner"; import MdSearch from "@mui/icons-material/Search"; @@ -55,6 +55,7 @@ class ReportPage extends React.Component { topoiChips: [], activePageIndex: 0, searchQuery: "", + topographicPlaceFilterValue: "", isLoading: false, columnOptionsQuays: columnOptionsQuays, columnOptionsStopPlace: columnOptionsStopPlace, @@ -318,15 +319,18 @@ class ReportPage extends React.Component { this.setState({ topoiChips: this.state.topoiChips.concat(chip), }); - this.refs.topoFilter.setState({ - searchText: "", - }); + this.setState({ topographicPlaceFilterValue: "" }); } } } - handleTopographicalPlaceSearch(event, searchText) { - this.props.dispatch(topographicalPlaceSearch(searchText)); + handleTopographicalPlaceSearch(event, searchText, reason) { + if (reason && reason === "clear") { + debugger; + this.setState({ topographicPlaceFilterValue: "" }); + } + const { dispatch } = this.props; + dispatch(topographicalPlaceSearch(searchText)); } createTopographicPlaceMenuItem(place, formatMessage) { @@ -440,8 +444,6 @@ class ReportPage extends React.Component { getOptionLabel={(option) => `${option.name}`} options={topographicalPlacesDataSource} onInputChange={this.handleTopographicalPlaceSearch.bind(this)} - maxSearchResults={5} - fullWidth={true} onChange={this.handleAddChip.bind(this)} noOptionsText={formatMessage({ id: "no_results_found" })} renderInput={(params) => ( @@ -449,6 +451,14 @@ class ReportPage extends React.Component { {...params} variant="standard" label={formatMessage({ id: "filter_by_topography" })} + onChange={(event) => { + // don't fire API if the user delete or not entered anything + if (event.target.value !== null) { + this.setState({ + topographicPlaceFilterValue: event.target.value, + }); + } + }} /> )} renderOption={(props, option, { selected }) => ( @@ -484,6 +494,7 @@ class ReportPage extends React.Component { }} > - : } - label={formatMessage({ id: "search" })} onClick={() => this.handleSearch()} - /> + > + {formatMessage({ id: "search" })} + Date: Tue, 11 Jun 2024 10:40:51 +0200 Subject: [PATCH 22/43] Report page - almost done --- .../EditStopPage/ColumnFilterPopover.js | 92 ++++++++++--------- .../ReportPage/AdvancedReportFilters.js | 1 - .../ReportPage/GeneralReportFilters.js | 1 - src/components/ReportPage/ReportPageFooter.js | 32 ++++--- src/components/ReportPage/TagFilterTray.js | 5 +- src/config/environments/dev.json | 2 +- src/containers/ReportPage.js | 6 +- src/models/columnTransformers.js | 16 ++-- 8 files changed, 81 insertions(+), 74 deletions(-) diff --git a/src/components/EditStopPage/ColumnFilterPopover.js b/src/components/EditStopPage/ColumnFilterPopover.js index 38eb5203a..2c0c77cde 100644 --- a/src/components/EditStopPage/ColumnFilterPopover.js +++ b/src/components/EditStopPage/ColumnFilterPopover.js @@ -16,7 +16,7 @@ import React from "react"; import RaisedButton from "@mui/material/Button"; import Menu from "@mui/material/Menu"; import Checkbox from "@mui/material/Checkbox"; -import { Popover } from "@mui/material"; +import { FormControlLabel, Popover } from "@mui/material"; class ColumnFilterPopover extends React.Component { constructor(props) { @@ -52,12 +52,10 @@ class ColumnFilterPopover extends React.Component { return (
    - - + {buttonLabel} + + - -
    - - {captionLabel} - +
    + + {captionLabel} + +
    + {columnOptions.map((option) => ( +
    + { + this.props.handleColumnCheck(option.id, checked); + }} + /> + } + label={formatMessage({ + id: `report.columnNames.${option.id}`, + })} + />
    - {columnOptions.map((option) => ( -
    + ))} +
    + { - this.props.handleColumnCheck(option.id, checked); + checked={allIsChecked} + onChange={(e, checked) => { + this.props.handleCheckAll(checked); }} /> -
    - ))} -
    - { - this.props.handleCheckAll(checked); - }} - /> -
    -
    - + } + label={selectAllLabel} + /> +
    +     ); } diff --git a/src/components/ReportPage/AdvancedReportFilters.js b/src/components/ReportPage/AdvancedReportFilters.js index 86ce94d6e..73575d03e 100644 --- a/src/components/ReportPage/AdvancedReportFilters.js +++ b/src/components/ReportPage/AdvancedReportFilters.js @@ -49,7 +49,6 @@ class AdvancedReportFilters extends Component { + + { this.setState({ open: false }); }} > - - - - - + + {formatMessage({ id: "export_to_csv_stop_places" })} + + + {formatMessage({ id: "export_to_csv_quays" })} + + ); diff --git a/src/components/ReportPage/TagFilterTray.js b/src/components/ReportPage/TagFilterTray.js index 01474744f..ce7912d19 100644 --- a/src/components/ReportPage/TagFilterTray.js +++ b/src/components/ReportPage/TagFilterTray.js @@ -33,7 +33,9 @@ class TagFilterTray extends Component { { if (!parking || !parking.length) { - return ; + return ; } return parking.map((p) => (
    @@ -189,23 +189,23 @@ export const ColumnTransformerStopPlaceJsx = { }, shelterEquipment: (stop) => { return isEquipted(stop, ["placeEquipments", "shelterEquipment"]) ? ( - + ) : ( - + ); }, waitingRoomEquipment: (stop) => { return isEquipted(stop, ["placeEquipments", "waitingRoomEquipment"]) ? ( - + ) : ( - + ); }, sanitaryEquipment: (stop) => { return isEquipted(stop, ["placeEquipments", "sanitaryEquipment"]) ? ( - + ) : ( - + ); }, generalSign: (stop) => { @@ -236,7 +236,7 @@ export const ColumnTransformerStopPlaceJsx = { }); return transportModeSigns; } - return ; + return ; }, tags: (stop) => ( Date: Tue, 11 Jun 2024 10:44:17 +0200 Subject: [PATCH 23/43] date-picker --- package-lock.json | 66 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + 2 files changed, 67 insertions(+) diff --git a/package-lock.json b/package-lock.json index 5c26d2b8b..38ba6dd20 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "@mui/icons-material": "5.15.18", "@mui/lab": "5.0.0-alpha.170", "@mui/material": "5.15.18", + "@mui/x-date-pickers": "6.20.0", "@reduxjs/toolkit": "2.2.5", "@sentry/react": "7.116.0", "@sentry/tracing": "7.114.0", @@ -4944,6 +4945,71 @@ } } }, + "node_modules/@mui/x-date-pickers": { + "version": "6.20.0", + "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-6.20.0.tgz", + "integrity": "sha512-q/x3rNmPYMXnx75+3s9pQb1YDtws9y5bwxpxeB3EW88oCp33eS7bvJpeuoCA1LzW/PpVfIRhi5RCyAvrEeTL7Q==", + "dependencies": { + "@babel/runtime": "^7.23.2", + "@mui/base": "^5.0.0-beta.22", + "@mui/utils": "^5.14.16", + "@types/react-transition-group": "^4.4.8", + "clsx": "^2.0.0", + "prop-types": "^15.8.1", + "react-transition-group": "^4.4.5" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@emotion/react": "^11.9.0", + "@emotion/styled": "^11.8.1", + "@mui/material": "^5.8.6", + "@mui/system": "^5.8.0", + "date-fns": "^2.25.0 || ^3.2.0", + "date-fns-jalali": "^2.13.0-0", + "dayjs": "^1.10.7", + "luxon": "^3.0.2", + "moment": "^2.29.4", + "moment-hijri": "^2.1.2", + "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "date-fns": { + "optional": true + }, + "date-fns-jalali": { + "optional": true + }, + "dayjs": { + "optional": true + }, + "luxon": { + "optional": true + }, + "moment": { + "optional": true + }, + "moment-hijri": { + "optional": true + }, + "moment-jalaali": { + "optional": true + } + } + }, "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": { "version": "5.1.1-v1", "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz", diff --git a/package.json b/package.json index bc10fd9ac..26721b489 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "@mui/icons-material": "5.15.18", "@mui/lab": "5.0.0-alpha.170", "@mui/material": "5.15.18", + "@mui/x-date-pickers": "6.20.0", "@reduxjs/toolkit": "2.2.5", "@sentry/react": "7.116.0", "@sentry/tracing": "7.114.0", From 9b98dc2c634d8eb7f41b1e022b85a7ac69ff145c Mon Sep 17 00:00:00 2001 From: a-limyr Date: Tue, 11 Jun 2024 12:13:34 +0200 Subject: [PATCH 24/43] version box updates --- .../EditStopPage/VersionsPopover.js | 31 +++++++++++++------ 1 file changed, 21 insertions(+), 10 deletions(-) diff --git a/src/components/EditStopPage/VersionsPopover.js b/src/components/EditStopPage/VersionsPopover.js index 91ae4cbe7..e04d48367 100644 --- a/src/components/EditStopPage/VersionsPopover.js +++ b/src/components/EditStopPage/VersionsPopover.js @@ -18,6 +18,7 @@ import Menu from "@mui/material/Menu"; import MenuItem from "@mui/material/MenuItem"; import { sortVersions } from "../../utils"; import { Popover } from "@mui/material"; +import Divider from "@mui/material/Divider"; class VersionsPopover extends Component { constructor(props) { @@ -54,7 +55,6 @@ class VersionsPopover extends Component { return (
    {buttonLabel}
    - {sortVersions(versions).map((version, i) => ( this.handleOnRequest(version)} + sx={{ fontSize: 12 }} > -
    -
    +
    +
    {version.version}
    {version.name}
    -
    +
    {version.changedBy || notAvailableMessage}:{" "} {version.versionComment || notAvailableMessage}
    -
    {`${ - version.fromDate || notAvailableMessage - } - ${version.toDate || notAvailableMessage}`}
    +
    +
    + {`${ + version.fromDate || notAvailableMessage + } - ${version.toDate || notAvailableMessage}`} +
    ))} - +
    ); } From 6f5a3a1ab608c4c86e6dcfb4cb744cda21d0ae98 Mon Sep 17 00:00:00 2001 From: a-limyr Date: Tue, 11 Jun 2024 13:58:17 +0200 Subject: [PATCH 25/43] version fix --- src/actions/TiamatActions.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/actions/TiamatActions.js b/src/actions/TiamatActions.js index ac5783c88..3ddbbd53d 100644 --- a/src/actions/TiamatActions.js +++ b/src/actions/TiamatActions.js @@ -562,7 +562,7 @@ export const getStopPlaceAndPathLinkByVersion = query: stopPlaceAndPathLinkByVersion, variables: { id, - version, + version: parseInt(version), }, context: await getContext(getState().roles.auth), })(dispatch); From c48dd412e2972383dc60d0856c7ddab470ac0c00 Mon Sep 17 00:00:00 2001 From: a-limyr Date: Wed, 12 Jun 2024 12:09:54 +0200 Subject: [PATCH 26/43] Edit stop place updates --- package-lock.json | 91 ++++++------------- .../EditStopPage/StopPlaceDetails.js | 33 ++++--- src/config/environments/dev.json | 2 +- 3 files changed, 45 insertions(+), 81 deletions(-) diff --git a/package-lock.json b/package-lock.json index 38ba6dd20..927bd61fe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3379,9 +3379,9 @@ } }, "node_modules/@grpc/grpc-js": { - "version": "1.8.21", - "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.8.21.tgz", - "integrity": "sha512-KeyQeZpxeEBSqFVTi3q2K7PiPXmgBfECc4updA1ejCLjYmoAlvvM3ZMp5ztTDUCUQmoY3CpDxvchjO1+rFkoHg==", + "version": "1.8.22", + "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.8.22.tgz", + "integrity": "sha512-oAjDdN7fzbUi+4hZjKG96MR6KTEubAeMpQEb+77qy+3r0Ua5xTFuie6JOLr4ZZgl5g+W5/uRTS2M1V8mVAFPuA==", "dev": true, "dependencies": { "@grpc/proto-loader": "^0.7.0", @@ -9619,9 +9619,9 @@ "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==" }, "node_modules/cookie": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz", - "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==", + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==", "dev": true, "engines": { "node": ">= 0.6" @@ -10927,9 +10927,9 @@ "dev": true }, "node_modules/ejs": { - "version": "3.1.9", - "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.9.tgz", - "integrity": "sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==", + "version": "3.1.10", + "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz", + "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==", "dev": true, "dependencies": { "jake": "^10.8.5" @@ -12209,17 +12209,17 @@ "optional": true }, "node_modules/express": { - "version": "4.18.2", - "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz", - "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==", + "version": "4.19.2", + "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz", + "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==", "dev": true, "dependencies": { "accepts": "~1.3.8", "array-flatten": "1.1.1", - "body-parser": "1.20.1", + "body-parser": "1.20.2", "content-disposition": "0.5.4", "content-type": "~1.0.4", - "cookie": "0.5.0", + "cookie": "0.6.0", "cookie-signature": "1.0.6", "debug": "2.6.9", "depd": "2.0.0", @@ -12250,45 +12250,6 @@ "node": ">= 0.10.0" } }, - "node_modules/express/node_modules/body-parser": { - "version": "1.20.1", - "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz", - "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==", - "dev": true, - "dependencies": { - "bytes": "3.1.2", - "content-type": "~1.0.4", - "debug": "2.6.9", - "depd": "2.0.0", - "destroy": "1.2.0", - "http-errors": "2.0.0", - "iconv-lite": "0.4.24", - "on-finished": "2.4.1", - "qs": "6.11.0", - "raw-body": "2.5.1", - "type-is": "~1.6.18", - "unpipe": "1.0.0" - }, - "engines": { - "node": ">= 0.8", - "npm": "1.2.8000 || >= 1.4.16" - } - }, - "node_modules/express/node_modules/raw-body": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz", - "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==", - "dev": true, - "dependencies": { - "bytes": "3.1.2", - "http-errors": "2.0.0", - "iconv-lite": "0.4.24", - "unpipe": "1.0.0" - }, - "engines": { - "node": ">= 0.8" - } - }, "node_modules/extend": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz", @@ -14326,9 +14287,9 @@ } }, "node_modules/ip": { - "version": "1.1.8", - "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.8.tgz", - "integrity": "sha512-PuExPYUiu6qMBQb4l06ecm6T6ujzhmh+MeJcW9wa89PoAz5pvd4zPgN5WJV104mb6S2T1AwNIAaB70JNrLQWhg==", + "version": "1.1.9", + "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.9.tgz", + "integrity": "sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ==", "dev": true }, "node_modules/ip-regex": { @@ -23990,9 +23951,9 @@ "dev": true }, "node_modules/socks/node_modules/ip": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz", - "integrity": "sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.1.tgz", + "integrity": "sha512-lJUL9imLTNi1ZfXT+DU6rBBdbiKGBuay9B6xGSPVjUeQwaH1RIGqef8RZkUtHioLmSNpPR5M4HVKJGm1j8FWVQ==", "dev": true }, "node_modules/sort-any": { @@ -25104,9 +25065,9 @@ } }, "node_modules/tar": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.0.tgz", - "integrity": "sha512-/Wo7DcT0u5HUV486xg675HtjNd3BXZ6xDbzsCUZPt5iw8bTQ63bP0Raut3mvro9u+CUyq7YQd8Cx55fsZXxqLQ==", + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz", + "integrity": "sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==", "dev": true, "dependencies": { "chownr": "^2.0.0", @@ -26252,9 +26213,9 @@ } }, "node_modules/webpack-dev-middleware": { - "version": "5.3.3", - "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.3.tgz", - "integrity": "sha512-hj5CYrY0bZLB+eTO+x/j67Pkrquiy7kWepMHmUMoPsmcUaeEnQJqFzHJOyxgWlq746/wUuA64p9ta34Kyb01pA==", + "version": "5.3.4", + "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz", + "integrity": "sha512-BVdTqhhs+0IfoeAf7EoH5WE+exCmqGerHfDM0IL096Px60Tq2Mn9MAbnaGUe6HiMa41KMCYF19gyzZmBcq/o4Q==", "dev": true, "dependencies": { "colorette": "^2.0.10", diff --git a/src/components/EditStopPage/StopPlaceDetails.js b/src/components/EditStopPage/StopPlaceDetails.js index 957b2ede6..dc0f8cd9d 100644 --- a/src/components/EditStopPage/StopPlaceDetails.js +++ b/src/components/EditStopPage/StopPlaceDetails.js @@ -488,10 +488,12 @@ class StopPlaceDetails extends React.Component {
    )} + > + {formatMessage({ id: "tags" })} +
    )}
    @@ -568,21 +570,19 @@ class StopPlaceDetails extends React.Component { )}
    @@ -627,17 +627,19 @@ class StopPlaceDetails extends React.Component { {isPublicCodePrivateCodeEnabled && (
    Date: Fri, 14 Jun 2024 14:33:04 +0200 Subject: [PATCH 27/43] Edit stop places - lot of updates --- .../EditStopPage/StopPlaceDetails.js | 61 ++++++++++--------- .../EditStopPage/WeightingPopover.js | 20 ++++-- .../EditStopPage/WheelChairPopover.js | 30 +++++---- src/static/icons/TransportSign.js | 6 +- 4 files changed, 67 insertions(+), 50 deletions(-) diff --git a/src/components/EditStopPage/StopPlaceDetails.js b/src/components/EditStopPage/StopPlaceDetails.js index dc0f8cd9d..a6b1efd24 100644 --- a/src/components/EditStopPage/StopPlaceDetails.js +++ b/src/components/EditStopPage/StopPlaceDetails.js @@ -60,6 +60,8 @@ import { import { Popover } from "@mui/material"; import { Link } from "react-router-dom"; import Routes from "../../routes"; +import { Signpost } from "@mui/icons-material"; +import TransportSign from "../../static/icons/TransportSign"; class StopPlaceDetails extends React.Component { constructor(props) { @@ -471,8 +473,7 @@ class StopPlaceDetails extends React.Component { style={{ display: "flex", alignItems: "center", flex: 2 }} > - + { this.handleOpenWeightPopover(e); }} + style={{ paddingTop: 12 }} > - + +
    +
    + } - uncheckedIcon={ + icon={ } style={{ width: "auto" }} checked={ticketMachine} - onCheck={(e, v) => { + onChange={(e, v) => { this.handleTicketMachineChange(v); }} /> @@ -712,12 +724,12 @@ class StopPlaceDetails extends React.Component { } - uncheckedIcon={ + icon={ } style={{ width: "auto" }} checked={busShelter} - onCheck={(e, v) => { + onChange={(e, v) => { this.handleBusShelterChange(v); }} /> @@ -725,12 +737,10 @@ class StopPlaceDetails extends React.Component { } - uncheckedIcon={ - - } + icon={} style={{ width: "auto" }} checked={WC} - onCheck={(e, v) => { + onChange={(e, v) => { this.handleWCChange(v); }} /> @@ -738,29 +748,22 @@ class StopPlaceDetails extends React.Component { } - uncheckedIcon={ + icon={ } style={{ width: "auto" }} checked={waitingRoom} - onCheck={(e, v) => { + onChange={(e, v) => { this.handleWaitingRoomChange(v); }} /> - } + icon={} uncheckedIcon={ - { + onChange={(e, v) => { this.handleChangeSign512(v); }} /> diff --git a/src/components/EditStopPage/WeightingPopover.js b/src/components/EditStopPage/WeightingPopover.js index 556f0a766..5e0bb1706 100644 --- a/src/components/EditStopPage/WeightingPopover.js +++ b/src/components/EditStopPage/WeightingPopover.js @@ -17,7 +17,10 @@ import MenuItem from "@mui/material/MenuItem"; import MdTransfer from "@mui/icons-material/TransferWithinAStation"; import weightTypes, { weightColors } from "../../models/weightTypes"; import { injectIntl } from "react-intl"; -import { Popover } from "@mui/material"; +import Menu from "@mui/material/Menu"; +import ListItemText from "@mui/material/ListItemText"; +import ListItemIcon from "@mui/material/ListItemIcon"; + class WeightingPopover extends React.Component { render() { const { @@ -29,7 +32,7 @@ class WeightingPopover extends React.Component { } = this.props; return ( - { handleChange(type); }} - leftIcon={} - /> + > + + + + + {formatMessage({ id: `weightTypes.${type}` })} + + ))} - + ); } } diff --git a/src/components/EditStopPage/WheelChairPopover.js b/src/components/EditStopPage/WheelChairPopover.js index 1bcd75c83..e0e32da62 100644 --- a/src/components/EditStopPage/WheelChairPopover.js +++ b/src/components/EditStopPage/WheelChairPopover.js @@ -17,7 +17,10 @@ import MenuItem from "@mui/material/MenuItem"; import WheelChair from "@mui/icons-material/Accessible"; import IconButton from "@mui/material/IconButton"; import accessibilityAssessments from "../../models/accessibilityAssessments"; -import { Popover } from "@mui/material"; + +import Menu from "@mui/material/Menu"; +import ListItemIcon from "@mui/material/ListItemIcon"; +import ListItemText from "@mui/material/ListItemText"; class WheelChairPopover extends React.Component { constructor(props) { @@ -59,13 +62,14 @@ class WheelChairPopover extends React.Component { style={{ display: "flex", alignItems: "center", fontSize: "0.8em" }} > { if (!disabled) this.handleOpenPopover(e); }} > {displayLabel ? ( @@ -78,7 +82,7 @@ class WheelChairPopover extends React.Component { "" )}
    - { this.handleChange(option); }} - primaryText={formatMessage({ - id: `accessibilityAssessments.wheelchairAccess.${option.toLowerCase()}`, - })} - secondaryText={ + > + - } - /> + + + {formatMessage({ + id: `accessibilityAssessments.wheelchairAccess.${option.toLowerCase()}`, + })} + + ), )} - +
    ); } diff --git a/src/static/icons/TransportSign.js b/src/static/icons/TransportSign.js index 6002fae06..e3c1e1ec6 100644 --- a/src/static/icons/TransportSign.js +++ b/src/static/icons/TransportSign.js @@ -13,11 +13,11 @@ See the Licence for the specific language governing permissions and limitations under the Licence. */ import React from "react"; -import IconButton from "@mui/material/IconButton"; +import SvgIcon from "@mui/material/SvgIcon"; const TransportSign = (props) => { return ( - + { /> - + ); }; From 0273c11480478672142e6eca4bee9b995358564b Mon Sep 17 00:00:00 2001 From: a-limyr Date: Thu, 20 Jun 2024 15:08:14 +0200 Subject: [PATCH 28/43] Edit stop places - lot of updates --- src/components/Dialogs/AltNamesDialog.js | 4 +- src/components/Dialogs/EditAltName.js | 33 +++---- src/components/Dialogs/TariffZonesDialog.js | 2 + .../EditStopPage/CreateKeyValuePair.js | 30 +++--- .../EditStopPage/EditKeyValuePair.js | 11 +-- .../EditStopPage/FacilitiesQuayTab.js | 42 ++++---- .../EditStopPage/FacilitiesStopTab.js | 24 ++--- .../EditStopPage/ModalitiesMenuItems.js | 64 ++++++------- src/components/EditStopPage/QuayItem.js | 6 +- .../EditStopPage/StopPlaceDetails.js | 95 ++++++++++--------- src/components/MainPage/MoreMenuItem.tsx | 67 +++++++------ src/containers/ReportPage.js | 31 +++--- 12 files changed, 197 insertions(+), 212 deletions(-) diff --git a/src/components/Dialogs/AltNamesDialog.js b/src/components/Dialogs/AltNamesDialog.js index fe18d4787..d3127c4cf 100644 --- a/src/components/Dialogs/AltNamesDialog.js +++ b/src/components/Dialogs/AltNamesDialog.js @@ -256,14 +256,14 @@ class AltNamesDialog extends React.Component { this.handleEdit(i); }} > - + { this.handleRemoveName(i); }} > - +
    ) : null} diff --git a/src/components/Dialogs/EditAltName.js b/src/components/Dialogs/EditAltName.js index 416466b13..8752d41d9 100644 --- a/src/components/Dialogs/EditAltName.js +++ b/src/components/Dialogs/EditAltName.js @@ -14,7 +14,7 @@ import React, { Component } from "react"; import FlatButton from "@mui/material/Button"; -import SelectField from "@mui/material/Select"; +import Select from "@mui/material/Select"; import MenuItem from "@mui/material/MenuItem"; import TextField from "@mui/material/TextField"; import * as altNameConfig from "../../config/altNamesConfig"; @@ -89,10 +89,9 @@ class EditAltName extends Component {
    - { this.setState({ @@ -101,19 +100,17 @@ class EditAltName extends Component { }} > {altNameConfig.supportedNameTypes.map((type) => ( - + {formatMessage({ id: `altNamesDialog.nameTypes.${type}`, })} - /> + ))} - - + + {tariffZones.map((tz) => ( {fareZones.map((fz) => ( kv.key.toLowerCase() === key.toLowerCase(), ); @@ -71,29 +65,31 @@ class CreateKeyValuePair extends React.Component { {formatMessage({ id: "creating_new_key_values" })} { + onChange={(event) => { this.setState({ - key: v, + key: event.target.value, }); }} - value={key} - hintText={formatMessage({ id: "key" })} - floatingLabelText={formatMessage({ id: "key" })} + value={this.state.key} + placeholder={formatMessage({ id: "key" })} + label={formatMessage({ id: "key" })} floatingLabelFixed={true} fullWidth={true} /> { + onChange={(event) => { this.setState({ - values: v, + values: event.target.value, }); }} - hintText={formatMessage({ id: "values" })} - floatingLabelText={formatMessage({ id: "values" })} + placeholder={formatMessage({ id: "values" })} + label={formatMessage({ id: "values" })} floatingLabelFixed={true} - value={values} + value={this.state.values} fullWidth={true} multiLine={true} /> diff --git a/src/components/EditStopPage/EditKeyValuePair.js b/src/components/EditStopPage/EditKeyValuePair.js index f1b7a6327..a948b2175 100644 --- a/src/components/EditStopPage/EditKeyValuePair.js +++ b/src/components/EditStopPage/EditKeyValuePair.js @@ -25,12 +25,6 @@ class EditKeyValuePair extends React.Component { }; } - UNSAFE_componentWillReceiveProps(nextProps) { - this.setState({ - values: this.getValuesByKey(nextProps.keyValues, nextProps.editingKey), - }); - } - handleUpdate() { const { handleUpdateValues, editingKey } = this.props; const { values } = this.state; @@ -60,10 +54,11 @@ class EditKeyValuePair extends React.Component { {`${formatMessage({ id: "editing_key" })} ${editingKey}`} { + onChange={(event) => { this.setState({ - values: v, + values: event.target.value, }); }} value={values} diff --git a/src/components/EditStopPage/FacilitiesQuayTab.js b/src/components/EditStopPage/FacilitiesQuayTab.js index 156f792d0..3245c12ec 100644 --- a/src/components/EditStopPage/FacilitiesQuayTab.js +++ b/src/components/EditStopPage/FacilitiesQuayTab.js @@ -202,7 +202,7 @@ class FacilitiesQuayTab extends React.Component { /> } disabled={disabled} - uncheckedIcon={ + icon={ { + onChange={(e, v) => { this.handle512Sign(v); }} /> @@ -233,7 +233,7 @@ class FacilitiesQuayTab extends React.Component { } - uncheckedIcon={ + icon={ } label={ @@ -243,7 +243,7 @@ class FacilitiesQuayTab extends React.Component { } labelStyle={{ fontSize: "0.8em" }} style={{ width: "80%" }} - onCheck={(e, v) => { + onChange={(e, v) => { this.handleTicketMachineChange(v); }} /> @@ -291,9 +291,7 @@ class FacilitiesQuayTab extends React.Component { } - uncheckedIcon={ - - } + icon={} label={ busShelter ? formatMessage({ id: "busShelter" }) @@ -301,7 +299,7 @@ class FacilitiesQuayTab extends React.Component { } labelStyle={{ fontSize: "0.8em" }} style={{ width: "80%" }} - onCheck={(e, v) => { + onChange={(e, v) => { this.handleBusShelterChange(v); }} /> @@ -339,18 +337,18 @@ class FacilitiesQuayTab extends React.Component { ? formatMessage({ id: "step_free_access" }) : formatMessage({ id: "step_free_access_no" }) } - uncheckedIcon={ + icon={ } labelStyle={{ fontSize: "0.8em" }} - onCheck={(e, v) => { + onChange={(e, v) => { this.handleValueForBusShelterChange({ stepFree: v }); }} /> } - uncheckedIcon={ + icon={ @@ -362,7 +360,7 @@ class FacilitiesQuayTab extends React.Component { } labelStyle={{ fontSize: "0.8em" }} style={{ width: "auto" }} - onCheck={(e, v) => { + onChange={(e, v) => { this.handleValueForBusShelterChange({ enclosed: v }); }} /> @@ -392,9 +390,7 @@ class FacilitiesQuayTab extends React.Component { } - uncheckedIcon={ - - } + icon={} label={ WC ? formatMessage({ id: "wc" }) @@ -402,7 +398,7 @@ class FacilitiesQuayTab extends React.Component { } labelStyle={{ fontSize: "0.8em" }} style={{ width: "80%" }} - onCheck={(e, v) => { + onChange={(e, v) => { this.handleWCChange(v); }} /> @@ -415,9 +411,7 @@ class FacilitiesQuayTab extends React.Component { } - uncheckedIcon={ - - } + icon={} label={ waitingRoom ? formatMessage({ id: "waiting_room" }) @@ -425,7 +419,7 @@ class FacilitiesQuayTab extends React.Component { } labelStyle={{ fontSize: "0.8em" }} style={{ width: "80%" }} - onCheck={(e, v) => { + onChange={(e, v) => { this.handleWaitingRoomChange(v); }} /> @@ -464,18 +458,18 @@ class FacilitiesQuayTab extends React.Component { ? formatMessage({ id: "step_free_access" }) : formatMessage({ id: "step_free_access_no" }) } - uncheckedIcon={ + icon={ } labelStyle={{ fontSize: "0.8em" }} - onCheck={(e, v) => { + onChange={(e, v) => { this.handleValueForWaitingRoomChange({ stepFree: v }); }} /> } - uncheckedIcon={ + icon={ } label={ @@ -485,7 +479,7 @@ class FacilitiesQuayTab extends React.Component { } labelStyle={{ fontSize: "0.8em" }} style={{ width: "auto" }} - onCheck={(e, v) => { + onChange={(e, v) => { this.handleValueForWaitingRoomChange({ heated: v }); }} /> diff --git a/src/components/EditStopPage/FacilitiesStopTab.js b/src/components/EditStopPage/FacilitiesStopTab.js index 84ac73f50..55bb78be7 100644 --- a/src/components/EditStopPage/FacilitiesStopTab.js +++ b/src/components/EditStopPage/FacilitiesStopTab.js @@ -228,7 +228,7 @@ class FacilitiesStopTab extends React.Component { }} /> } - uncheckedIcon={ + icon={ } - uncheckedIcon={ + icon={ } label={ @@ -315,9 +315,7 @@ class FacilitiesStopTab extends React.Component { } - uncheckedIcon={ - - } + icon={} label={ busShelter ? formatMessage({ id: "busShelter" }) @@ -366,7 +364,7 @@ class FacilitiesStopTab extends React.Component { ? formatMessage({ id: "step_free_access" }) : formatMessage({ id: "step_free_access_no" }) } - uncheckedIcon={ + icon={ } labelStyle={{ fontSize: "0.8em" }} @@ -374,7 +372,7 @@ class FacilitiesStopTab extends React.Component { } - uncheckedIcon={ + icon={ @@ -416,9 +414,7 @@ class FacilitiesStopTab extends React.Component { } - uncheckedIcon={ - - } + icon={} label={ WC ? formatMessage({ id: "wc" }) @@ -439,9 +435,7 @@ class FacilitiesStopTab extends React.Component { } - uncheckedIcon={ - - } + icon={} label={ waitingRoom ? formatMessage({ id: "waiting_room" }) @@ -488,7 +482,7 @@ class FacilitiesStopTab extends React.Component { ? formatMessage({ id: "step_free_access" }) : formatMessage({ id: "step_free_access_no" }) } - uncheckedIcon={ + icon={ } labelStyle={{ fontSize: "0.8em" }} @@ -499,7 +493,7 @@ class FacilitiesStopTab extends React.Component { } - uncheckedIcon={ + icon={ } label={ diff --git a/src/components/EditStopPage/ModalitiesMenuItems.js b/src/components/EditStopPage/ModalitiesMenuItems.js index 3eba2c37d..507d7392d 100644 --- a/src/components/EditStopPage/ModalitiesMenuItems.js +++ b/src/components/EditStopPage/ModalitiesMenuItems.js @@ -20,7 +20,7 @@ import { getStopPlacesForSubmodes, getInverseSubmodesWhitelist, } from "../../roles/rolesParser"; -import Menu from "@mui/material/Menu"; +import MoreMenuItem from "../MainPage/MoreMenuItem"; class ModalitiesMenuItems extends React.Component { render() { @@ -43,7 +43,7 @@ class ModalitiesMenuItems extends React.Component { const chosenStyle = { fontWeight: 600 }; return ( - +
    {Object.keys(stopTypes).map((type, index) => { let isLegal = adHocStopPlaceTypes.indexOf(type) > -1 || @@ -83,28 +83,26 @@ class ModalitiesMenuItems extends React.Component { } return ( - + } + label={ {formatMessage({ id: `stopTypes.${type}.name` })} } + key={"stopType" + index} + className={isLegal ? "" : "menu-item--not-legal"} + value={type} + style={{ padding: "0px 10px" }} onClick={() => { !submodes && handleStopTypeChange(type); }} - insetChildren={true} - rightIcon={submodes && } - leftIcon={ - - } - menuItems={ - submodes && + > + {submodes && submodes.map(({ submode, formatted }) => { // make all submodes legal if stopPlace is legal let isLegal = @@ -132,30 +130,30 @@ class ModalitiesMenuItems extends React.Component { value={submode} className={isLegal ? "" : "menu-item--not-legal"} style={{ padding: "0px 10px" }} - primaryText={ - - {formatted} - - } onClick={() => { handleSubModeTypeChange(type, transportMode, submode); }} - leftIcon={ - - } - insetChildren={true} - /> + > + + {submode && + formatMessage({ + id: `stopTypes.${type}.submodes.${submode}`, + })} + {!submode && + formatMessage({ + id: `stopTypes.${type}.submodes.unspecified`, + })} + ); - }) - } - /> + })} + ); })} -
    +
    ); } } diff --git a/src/components/EditStopPage/QuayItem.js b/src/components/EditStopPage/QuayItem.js index 453881030..a6c575eec 100644 --- a/src/components/EditStopPage/QuayItem.js +++ b/src/components/EditStopPage/QuayItem.js @@ -331,7 +331,7 @@ class QuayItem extends React.Component { } disabled={disabled} - uncheckedIcon={ + icon={ @@ -347,7 +347,7 @@ class QuayItem extends React.Component { } disabled={disabled} - uncheckedIcon={ + icon={ } style={{ width: "auto" }} @@ -368,7 +368,7 @@ class QuayItem extends React.Component { /> } disabled={disabled} - uncheckedIcon={ + icon={
    - - - - - - - { - this.handleOpenStopPlaceTypePopover(e); - }} - > - - - - + + + + + +
    +
    + + { + this.handleOpenStopPlaceTypePopover(e); + }} + > + + + +
    + - + @@ -592,9 +599,9 @@ class StopPlaceDetails extends React.Component { onClick={this.handleOpenTZDialog.bind(this)} style={{ borderBottom: "1px dotted", - marginTop: 13, + marginTop: -10, paddingBottom: 4, - marginLeft: 8, + marginLeft: 28, cursor: "pointer", }} > @@ -613,8 +620,8 @@ class StopPlaceDetails extends React.Component {
    @@ -760,15 +767,15 @@ class StopPlaceDetails extends React.Component { } - uncheckedIcon={ - } + checkedIcon={} style={{ width: "auto" }} checked={sign512} onChange={(e, v) => { diff --git a/src/components/MainPage/MoreMenuItem.tsx b/src/components/MainPage/MoreMenuItem.tsx index 1c88adfee..cf09f8f20 100644 --- a/src/components/MainPage/MoreMenuItem.tsx +++ b/src/components/MainPage/MoreMenuItem.tsx @@ -81,36 +81,43 @@ const MoreMenuItem: FC = ({ {leftIcon} {label}
    - - menuItemRef.current?.focus() }} - disableRestoreFocus - onKeyDown={handleMenuKeyDown} - sx={{ - pointerEvents: "none", - "& .MuiList-root": { - pointerEvents: "auto", - }, - }} - MenuListProps={{ - ...MenuProps?.MenuListProps, - "aria-labelledby": normMenuItemId, - }} - anchorEl={menuItemRef.current} - open={isOpen} - onClose={close} - anchorOrigin={ - MenuProps?.anchorOrigin ?? { vertical: "center", horizontal: "left" } - } - transformOrigin={ - MenuProps?.transformOrigin ?? { - vertical: "center", - horizontal: "right", - } - } - > - {children} - + {children && ( + <> + + menuItemRef.current?.focus() }} + disableRestoreFocus + onKeyDown={handleMenuKeyDown} + sx={{ + pointerEvents: "none", + "& .MuiList-root": { + pointerEvents: "auto", + }, + }} + MenuListProps={{ + ...MenuProps?.MenuListProps, + "aria-labelledby": normMenuItemId, + }} + anchorEl={menuItemRef.current} + open={isOpen} + onClose={close} + anchorOrigin={ + MenuProps?.anchorOrigin ?? { + vertical: "center", + horizontal: "left", + } + } + transformOrigin={ + MenuProps?.transformOrigin ?? { + vertical: "center", + horizontal: "right", + } + } + > + {children} + + + )} ); }; diff --git a/src/containers/ReportPage.js b/src/containers/ReportPage.js index 8e5dfa819..cc5774572 100644 --- a/src/containers/ReportPage.js +++ b/src/containers/ReportPage.js @@ -325,10 +325,6 @@ class ReportPage extends React.Component { } handleTopographicalPlaceSearch(event, searchText, reason) { - if (reason && reason === "clear") { - debugger; - this.setState({ topographicPlaceFilterValue: "" }); - } const { dispatch } = this.props; dispatch(topographicalPlaceSearch(searchText)); } @@ -412,6 +408,8 @@ class ReportPage extends React.Component { this.createTopographicPlaceMenuItem(place, formatMessage), ); + console.log({ topographicalPlacesDataSource }); + return (
    @@ -441,7 +439,7 @@ class ReportPage extends React.Component {
    `${option.name}`} + filterOptions={(x) => x} options={topographicalPlacesDataSource} onInputChange={this.handleTopographicalPlaceSearch.bind(this)} onChange={this.handleAddChip.bind(this)} @@ -451,21 +449,20 @@ class ReportPage extends React.Component { {...params} variant="standard" label={formatMessage({ id: "filter_by_topography" })} - onChange={(event) => { - // don't fire API if the user delete or not entered anything - if (event.target.value !== null) { - this.setState({ - topographicPlaceFilterValue: event.target.value, - }); - } + onChange={(event, v) => { + this.setState({ + topographicPlaceFilterValue: event.target.value, + }); }} /> )} - renderOption={(props, option, { selected }) => ( - - {option.value} - - )} + renderOption={(props, option, { selected }) => { + return ( + + {option.value} + + ); + }} /> Date: Fri, 28 Jun 2024 09:33:34 +0200 Subject: [PATCH 29/43] Edit stop places - lot of updates --- src/components/Dialogs/AltNamesDialog.js | 1 + src/components/Dialogs/EditAltName.js | 4 ++++ src/components/Dialogs/NewAltName.js | 6 +++--- src/components/EditStopPage/StopPlaceDetails.js | 8 ++++---- 4 files changed, 12 insertions(+), 7 deletions(-) diff --git a/src/components/Dialogs/AltNamesDialog.js b/src/components/Dialogs/AltNamesDialog.js index d3127c4cf..4ced39087 100644 --- a/src/components/Dialogs/AltNamesDialog.js +++ b/src/components/Dialogs/AltNamesDialog.js @@ -301,6 +301,7 @@ class AltNamesDialog extends React.Component { this.setState({ type }); }} onLanguageChange={(event, key, lang) => { + debugger; this.setState({ lang }); }} onValueChange={(event, value) => { diff --git a/src/components/Dialogs/EditAltName.js b/src/components/Dialogs/EditAltName.js index 8752d41d9..573987c34 100644 --- a/src/components/Dialogs/EditAltName.js +++ b/src/components/Dialogs/EditAltName.js @@ -90,6 +90,7 @@ class EditAltName extends Component {
    @@ -72,7 +72,7 @@ class NewAltName extends Component { diff --git a/src/components/EditStopPage/StopPlaceDetails.js b/src/components/EditStopPage/StopPlaceDetails.js index d0048c130..cdefa663a 100644 --- a/src/components/EditStopPage/StopPlaceDetails.js +++ b/src/components/EditStopPage/StopPlaceDetails.js @@ -521,11 +521,11 @@ class StopPlaceDetails extends React.Component { From caf16c463ccc453cc8d46224c017af82ea505f89 Mon Sep 17 00:00:00 2001 From: a-limyr Date: Wed, 3 Jul 2024 11:17:03 +0200 Subject: [PATCH 30/43] Color handling and icon updates --- .../EditStopPage/ModalitiesMenuItems.js | 29 ++++++++++++------- .../EditStopPage/StopPlaceDetails.js | 12 ++++---- src/components/MainPage/ModalityIconSvg.js | 2 +- 3 files changed, 27 insertions(+), 16 deletions(-) diff --git a/src/components/EditStopPage/ModalitiesMenuItems.js b/src/components/EditStopPage/ModalitiesMenuItems.js index 507d7392d..1f6ada90f 100644 --- a/src/components/EditStopPage/ModalitiesMenuItems.js +++ b/src/components/EditStopPage/ModalitiesMenuItems.js @@ -40,7 +40,8 @@ class ModalitiesMenuItems extends React.Component { const illegalSubmodes = getInverseSubmodesWhitelist(legalSubmodes); // stopPlacesTypes that submodes are depending on to be legal in order to render const adHocStopPlaceTypes = getStopPlacesForSubmodes(legalSubmodes); - const chosenStyle = { fontWeight: 600 }; + const chosenStyle = { fontWeight: "bold" }; + const unchosenStyle = {}; return (
    @@ -89,7 +90,7 @@ class ModalitiesMenuItems extends React.Component { } label={ {formatMessage({ id: `stopTypes.${type}.name` })} @@ -139,14 +140,22 @@ class ModalitiesMenuItems extends React.Component { type={type} submode={submode} /> - {submode && - formatMessage({ - id: `stopTypes.${type}.submodes.${submode}`, - })} - {!submode && - formatMessage({ - id: `stopTypes.${type}.submodes.unspecified`, - })} + + {submode && + formatMessage({ + id: `stopTypes.${type}.submodes.${submode}`, + })} + {!submode && + formatMessage({ + id: `stopTypes.${type}.submodes.unspecified`, + })} + ); })} diff --git a/src/components/EditStopPage/StopPlaceDetails.js b/src/components/EditStopPage/StopPlaceDetails.js index cdefa663a..98f7240ae 100644 --- a/src/components/EditStopPage/StopPlaceDetails.js +++ b/src/components/EditStopPage/StopPlaceDetails.js @@ -626,7 +626,9 @@ class StopPlaceDetails extends React.Component { > - +
    @@ -717,7 +719,7 @@ class StopPlaceDetails extends React.Component { } + checkedIcon={} icon={ } @@ -730,7 +732,7 @@ class StopPlaceDetails extends React.Component { } + checkedIcon={} icon={ } @@ -743,7 +745,7 @@ class StopPlaceDetails extends React.Component { } + checkedIcon={} icon={} style={{ width: "auto" }} checked={WC} @@ -754,7 +756,7 @@ class StopPlaceDetails extends React.Component { } + checkedIcon={} icon={ } diff --git a/src/components/MainPage/ModalityIconSvg.js b/src/components/MainPage/ModalityIconSvg.js index 6a4379ee5..0214c1b94 100644 --- a/src/components/MainPage/ModalityIconSvg.js +++ b/src/components/MainPage/ModalityIconSvg.js @@ -57,7 +57,7 @@ class ModalityIconSvg extends React.Component { return ( - + From c09b6cc026e2585c7dca75f119630fab1906aff3 Mon Sep 17 00:00:00 2001 From: a-limyr Date: Wed, 24 Jul 2024 12:35:10 +0200 Subject: [PATCH 31/43] Multimodal stop and some other updates --- .../Dialogs/AddStopPlaceSuggestionListItem.js | 26 +++++--- .../EditParentStopPage/EditParentGeneral.js | 51 ++++++++++---- .../EditParentStopPage/ParentStopDetails.js | 18 +++-- .../EditStopPage/AddTagAutoComplete.js | 66 ++++++++++--------- src/components/EditStopPage/AddTagDialog.js | 4 +- .../EditStopPage/StopPlaceDetails.js | 1 - src/modelUtils/mapToQueryVariables.js | 2 +- src/utils/index.js | 4 +- 8 files changed, 109 insertions(+), 63 deletions(-) diff --git a/src/components/Dialogs/AddStopPlaceSuggestionListItem.js b/src/components/Dialogs/AddStopPlaceSuggestionListItem.js index 53c79c5de..271f5e918 100644 --- a/src/components/Dialogs/AddStopPlaceSuggestionListItem.js +++ b/src/components/Dialogs/AddStopPlaceSuggestionListItem.js @@ -18,6 +18,7 @@ import Checkbox from "@mui/material/Checkbox"; import ModalityIconImg from "../MainPage/ModalityIconImg"; import { injectIntl } from "react-intl"; import HasExpiredInfo from "../MainPage/HasExpiredInfo"; +import { FormControlLabel } from "@mui/material"; class AddStopPlaceSuggestionListItem extends Component { render() { @@ -26,10 +27,14 @@ class AddStopPlaceSuggestionListItem extends Component { return (
    - onCheck(suggestion.id, v)} + onCheck(suggestion.id, v)} + /> + } label={
    {suggestion.isParent ? ( @@ -39,10 +44,16 @@ class AddStopPlaceSuggestionListItem extends Component { type={suggestion.stopPlaceType} submode={suggestion.submode} style={{ marginRight: 5 }} - iconStyle={{ marginTop: -1 }} /> )} -
    +
    {suggestion.name ? ( {suggestion.name} ) : ( @@ -53,8 +64,7 @@ class AddStopPlaceSuggestionListItem extends Component {
    { this.props.dispatch( UserActions.requestTerminateStopPlace(stopPlace.id), ); }} - /> + > +
    + {formatMessage({ id: "terminate_stop_place" })} +
    + } disabled={!stopHasBeenModified} label={formatMessage({ id: "undo_changes" })} - style={{ margin: "8 5", zIndex: 999 }} - labelStyle={{ fontSize: "0.7em" }} + style={{ margin: "8 5", zIndex: 999, fontSize: "0.7em" }} onClick={() => { this.setState({ confirmUndoOpen: true }); }} - /> + > + + {formatMessage({ id: "undo_changes" })} + } disabled={!isAllowedToSave} label={formatMessage({ id: "save_new_version" })} - style={{ margin: "8 5", zIndex: 999 }} - labelStyle={{ fontSize: "0.7em" }} + style={{ margin: "8 5", zIndex: 999, fontSize: "0.7em" }} onClick={this.handleSave.bind(this)} - /> + > + + {formatMessage({ id: "save_new_version" })} +
    )}
    {formatMessage({ id: "parentStopPlace" })}
    this.setState({ tagsOpen: true })} - style={{ marginTop: -8 }} - label={formatMessage({ id: "tags" })} disabled={!stopPlace.id} - /> + > + {formatMessage({ id: "tags" })} +
    {!stopPlace.location && (
    @@ -206,15 +207,16 @@ class ParentStopDetails extends Component {
    @@ -226,7 +228,9 @@ class ParentStopDetails extends Component {
    { - this.props.findTagByName(name.toLowerCase()).then((response) => { - this.setState({ - dataSource: response.data.tags, + this.props + .findTagByName(name.toString().toLowerCase()) + .then((response) => { + this.setState({ + dataSource: response.data.tags, + }); }); - }); }, 500); } - handleSelectedTag({ text, comment }) { + handleSelectedTag({ event, text, comment }) { const tagInCamelCase = toCamelCase(text); this.props.handleChooseTag(tagInCamelCase, comment); this.setState({ @@ -49,7 +51,7 @@ class AddTagAutoComplete extends Component { const value = event.target.value; const { dataSource } = this.state; const isFoundInDataSource = dataSource.find( - (item) => item.name.toLowerCase() === value.toLowerCase(), + (item) => item.name.toString().toLowerCase() === value.toLowerCase(), ); if (value) { @@ -65,13 +67,14 @@ class AddTagAutoComplete extends Component { getMenuItems(dataSource = [], searchText) { let menuItems = []; - if (!searchText) return menuItems; const isFoundInDataSource = dataSource.some( - (item) => item.name.toLowerCase() === searchText.toLowerCase(), + (item) => + item.name.toString().toLowerCase() === + searchText.toString().toLowerCase(), ); - + debugger; if (dataSource.length) { const suggestion = { text: "TAG_SUGGESTION", @@ -80,10 +83,9 @@ class AddTagAutoComplete extends Component { disabled={true} key={"tag-menu-suggestion"} innerDivStyle={{ margin: "-12px 0px" }} - primaryText={ -
    Forslag:
    - } - /> + > +
    Forslag:
    + ), }; @@ -98,8 +100,9 @@ class AddTagAutoComplete extends Component { key={"tag-menu-item" + i} style={{ paddingRight: 10, width: "auto" }} innerDivStyle={{ margin: "-5px 0px" }} - primaryText={tag.name} - /> + > + {tag.name} + ), }; }), @@ -108,30 +111,27 @@ class AddTagAutoComplete extends Component { if (!isFoundInDataSource) { menuItems.push({ - text: searchText.toLowerCase(), + text: searchText.toString().toLowerCase(), comment: "", value: ( - - {toCamelCase(searchText)} - - - {this.props.intl.formatMessage({ id: "new_tag_hint" })} - -
    - } - /> + > +
    + {toCamelCase(searchText)} + + {this.props.intl.formatMessage({ id: "new_tag_hint" })} + +
    + ), }); } return menuItems; } - handleUpdate(searchText) { + handleUpdate(event, searchText) { this.props.handleInputChange(searchText); this.findTag(searchText); } @@ -144,19 +144,25 @@ class AddTagAutoComplete extends Component { return ( this.handleBlur(e)} fullWidth={true} filter={() => true} - onUpdateInput={this.handleUpdate.bind(this)} + onInputChange={this.handleUpdate.bind(this)} renderInput={(params) => ( )} + renderOption={(props, option, { selected }) => ( + + {option.value} + + )} /> ); } diff --git a/src/components/EditStopPage/AddTagDialog.js b/src/components/EditStopPage/AddTagDialog.js index fd18e6a4b..dd6008a40 100644 --- a/src/components/EditStopPage/AddTagDialog.js +++ b/src/components/EditStopPage/AddTagDialog.js @@ -90,7 +90,8 @@ class AddTagDialog extends Component { display: "flex", flexDirection: "column", marginLeft: 5, - paddingBottom: 5, + marginBottom: 10, + paddingTop: 10, }} >
    @@ -99,6 +100,7 @@ class AddTagDialog extends Component { tagName={tagName} searchText={searchText} handleInputChange={(value) => { + debugger; this.setState({ searchText: value }); }} handleChooseTag={this.handleChooseTag.bind(this)} diff --git a/src/components/EditStopPage/StopPlaceDetails.js b/src/components/EditStopPage/StopPlaceDetails.js index 98f7240ae..b98105970 100644 --- a/src/components/EditStopPage/StopPlaceDetails.js +++ b/src/components/EditStopPage/StopPlaceDetails.js @@ -490,7 +490,6 @@ class StopPlaceDetails extends React.Component {
    )} diff --git a/src/modelUtils/mapToQueryVariables.js b/src/modelUtils/mapToQueryVariables.js index 983417e7c..d47da2f79 100644 --- a/src/modelUtils/mapToQueryVariables.js +++ b/src/modelUtils/mapToQueryVariables.js @@ -128,7 +128,7 @@ helpers.mapParentStopToVariables = (original, userInput) => { } else { parentStopVariables.stopPlaceIds = stop.children.map((child) => child.id); } - + debugger; if (stop.location) { parentStopVariables.legacyCoordinates = [ [stop.location[1], stop.location[0]], diff --git a/src/utils/index.js b/src/utils/index.js index 8756c11dd..04d8a9d25 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -78,10 +78,10 @@ export const toCamelCase = (string) => { if (!string) return ""; if (!/\s/g.test(string)) { - return string.toLowerCase(); + return string.toString().toLowerCase(); } - return string.replace(/^([A-Z])|\s(\w)/g, (match, p1, p2) => { + return string.toString().replace(/^([A-Z])|\s(\w)/g, (match, p1, p2) => { if (p2) return p2.toUpperCase(); return p1.toLowerCase(); }); From d9dac337df8af8718202b09913f81ecf99a110cd Mon Sep 17 00:00:00 2001 From: a-limyr Date: Mon, 12 Aug 2024 12:37:42 +0200 Subject: [PATCH 32/43] Tags and other stuff --- package-lock.json | 4 +- package.json | 1 + src/actions/TiamatActions.js | 4 +- .../EditParentStopPage/EditParentGeneral.js | 1 - .../EditParentStopPage/ParentStopDetails.js | 9 +-- .../EditStopPage/AddTagAutoComplete.js | 64 ++++++++++--------- src/components/EditStopPage/AddTagDialog.js | 21 +++--- 7 files changed, 53 insertions(+), 51 deletions(-) diff --git a/package-lock.json b/package-lock.json index 927bd61fe..c1bc87810 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,6 +30,7 @@ "intl-locales-supported": "1.8.11", "leaflet": "1.9.4", "lint-staged": "15.2.2", + "lodash": "4.17.21", "lodash.debounce": "4.0.8", "moment": "2.30.1", "oidc-client-ts": "3.0.1", @@ -18250,8 +18251,7 @@ "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "dev": true + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, "node_modules/lodash._objecttypes": { "version": "2.4.1", diff --git a/package.json b/package.json index 26721b489..43cabf965 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "intl-locales-supported": "1.8.11", "leaflet": "1.9.4", "lint-staged": "15.2.2", + "lodash": "4.17.21", "lodash.debounce": "4.0.8", "moment": "2.30.1", "oidc-client-ts": "3.0.1", diff --git a/src/actions/TiamatActions.js b/src/actions/TiamatActions.js index 3ddbbd53d..7e6027e9c 100644 --- a/src/actions/TiamatActions.js +++ b/src/actions/TiamatActions.js @@ -296,7 +296,7 @@ export const createParentStopPlace = name, description, versionComment, - coordinates, + legacyCoordinates, validBetween, stopPlaceIds, }) => @@ -307,7 +307,7 @@ export const createParentStopPlace = name, description, versionComment, - coordinates, + legacyCoordinates, validBetween, stopPlaceIds, }, diff --git a/src/components/EditParentStopPage/EditParentGeneral.js b/src/components/EditParentStopPage/EditParentGeneral.js index e2a2eaa16..8bb332b9b 100644 --- a/src/components/EditParentStopPage/EditParentGeneral.js +++ b/src/components/EditParentStopPage/EditParentGeneral.js @@ -271,7 +271,6 @@ class EditParentGeneral extends React.Component { } getIsAllowedToSave() { - debugger; const { disabled, stopHasBeenModified, stopPlace } = this.props; if (!stopPlace) return false; if (disabled) return false; diff --git a/src/components/EditParentStopPage/ParentStopDetails.js b/src/components/EditParentStopPage/ParentStopDetails.js index 4caeca10d..91f43aa6a 100644 --- a/src/components/EditParentStopPage/ParentStopDetails.js +++ b/src/components/EditParentStopPage/ParentStopDetails.js @@ -53,8 +53,8 @@ class ParentStopDetails extends Component { }; } - handleChangeName(e, value) { - this.props.dispatch(StopPlaceActions.changeStopName(value)); + handleChangeName(e) { + this.props.dispatch(StopPlaceActions.changeStopName(e.target.value)); } handleAddStopPlaceClose() { @@ -208,16 +208,16 @@ class ParentStopDetails extends Component {
    @@ -227,6 +227,7 @@ class ParentStopDetails extends Component {
    + +
    Forslag:
    - +
    ), }; - menuItems = menuItems.concat( suggestion, dataSource.map((tag, i) => { @@ -96,13 +101,12 @@ class AddTagAutoComplete extends Component { text: tag.name, comment: tag.comment, value: ( - {tag.name} - +
    ), }; }), @@ -114,7 +118,7 @@ class AddTagAutoComplete extends Component { text: searchText.toString().toLowerCase(), comment: "", value: ( - @@ -124,7 +128,7 @@ class AddTagAutoComplete extends Component { {this.props.intl.formatMessage({ id: "new_tag_hint" })}
    - + ), }); } @@ -145,25 +149,23 @@ class AddTagAutoComplete extends Component { return ( + typeof option === "string" ? option : option.text + } onChange={this.handleSelectedTag.bind(this)} - onBlur={(e, v) => this.handleBlur(e)} - fullWidth={true} - filter={() => true} + style={{ marginLeft: 10, width: 350 }} + //filterOptions={(x) => x.text} onInputChange={this.handleUpdate.bind(this)} renderInput={(params) => ( - - )} - renderOption={(props, option, { selected }) => ( - - {option.value} - + )} - /> + > ); } } diff --git a/src/components/EditStopPage/AddTagDialog.js b/src/components/EditStopPage/AddTagDialog.js index dd6008a40..04e8ac48c 100644 --- a/src/components/EditStopPage/AddTagDialog.js +++ b/src/components/EditStopPage/AddTagDialog.js @@ -28,6 +28,7 @@ class AddTagDialog extends Component { } handleChooseTag(tagName, comment) { + debugger; if (!tagName) { this.setState({ searchText: "", @@ -46,10 +47,6 @@ class AddTagDialog extends Component { searchText: tagName, }); } - - if (this.refs.comment) { - this.refs.comment.focus(); - } } handleAddTag() { @@ -57,7 +54,7 @@ class AddTagDialog extends Component { const { idReference, handleLoading, addTag, getTags } = this.props; handleLoading(true); - + debugger; addTag(idReference, tagName, comment) .then((result) => { this.setState({ @@ -100,7 +97,6 @@ class AddTagDialog extends Component { tagName={tagName} searchText={searchText} handleInputChange={(value) => { - debugger; this.setState({ searchText: value }); }} handleChooseTag={this.handleChooseTag.bind(this)} @@ -108,20 +104,23 @@ class AddTagDialog extends Component { /> this.setState({ comment: v || "" })} + onChange={(e) => this.setState({ comment: e.target.value || "" })} /> + > + {formatMessage({ id: "add" })} + ); } From 7100c58f57fc1dbf418d2ba54b57a24dd08fecef Mon Sep 17 00:00:00 2001 From: a-limyr Date: Tue, 20 Aug 2024 14:23:01 +0200 Subject: [PATCH 33/43] Tags and removed some debug statements --- src/components/Dialogs/AltNamesDialog.js | 9 ++--- src/components/Dialogs/NewAltName.js | 34 +++++++++---------- .../EditStopPage/AddTagAutoComplete.js | 2 -- src/components/EditStopPage/AddTagDialog.js | 2 -- .../EditStopPage/CreateKeyValuePair.js | 1 - src/components/EditStopPage/ParkingItem.js | 4 +-- src/modelUtils/mapToQueryVariables.js | 14 +++++++- src/reducers/zonesSlice.ts | 2 +- 8 files changed, 37 insertions(+), 31 deletions(-) diff --git a/src/components/Dialogs/AltNamesDialog.js b/src/components/Dialogs/AltNamesDialog.js index 4ced39087..f18a88ee8 100644 --- a/src/components/Dialogs/AltNamesDialog.js +++ b/src/components/Dialogs/AltNamesDialog.js @@ -298,14 +298,15 @@ class AltNamesDialog extends React.Component { translations={translations} handleAddAltName={this.handleAddAltName.bind(this)} handleTypeChange={(event, key, type) => { - this.setState({ type }); + this.setState({ type: event.target.value }); }} onLanguageChange={(event, key, lang) => { + this.setState({ lang: event.target.value }); debugger; - this.setState({ lang }); }} - onValueChange={(event, value) => { - this.setState({ value }); + onValueChange={(event) => { + this.setState({ value: event.target.value }); + debugger; }} lang={lang} type={type} diff --git a/src/components/Dialogs/NewAltName.js b/src/components/Dialogs/NewAltName.js index 868774c45..8a028158a 100644 --- a/src/components/Dialogs/NewAltName.js +++ b/src/components/Dialogs/NewAltName.js @@ -14,7 +14,7 @@ import React, { Component } from "react"; import FlatButton from "@mui/material/Button"; -import SelectField from "@mui/material/Select"; +import Select from "@mui/material/Select"; import MenuItem from "@mui/material/MenuItem"; import TextField from "@mui/material/TextField"; import * as altNameConfig from "../../config/altNamesConfig"; @@ -52,45 +52,43 @@ class NewAltName extends Component { > {translations.addAltName} - {altNameConfig.supportedNameTypes.map((type, index) => ( - + {formatMessage({ id: `altNamesDialog.nameTypes.${type}`, })} - /> + ))} - - + { this.setState({ diff --git a/src/components/EditStopPage/CreateKeyValuePair.js b/src/components/EditStopPage/CreateKeyValuePair.js index ac6313d2b..fa61aafcf 100644 --- a/src/components/EditStopPage/CreateKeyValuePair.js +++ b/src/components/EditStopPage/CreateKeyValuePair.js @@ -32,7 +32,6 @@ class CreateKeyValuePair extends React.Component { handleUpdate() { const { handleCreateValues, keyValues, intl } = this.props; const { key, values } = this.state; - debugger; let keyAlreadyExists = keyValues.some( (kv) => kv.key.toLowerCase() === key.toLowerCase(), ); diff --git a/src/components/EditStopPage/ParkingItem.js b/src/components/EditStopPage/ParkingItem.js index 811b19442..55ecc4251 100644 --- a/src/components/EditStopPage/ParkingItem.js +++ b/src/components/EditStopPage/ParkingItem.js @@ -263,8 +263,8 @@ class ParkingItem extends React.Component { hintText={translations.capacity} disabled={disabled || parking.hasExpired} floatingLabelText={translations.capacity} - onChange={(e, v) => { - this.handleSetTotalCapacity(v); + onChange={(event) => { + this.handleSetTotalCapacity(event.target.value); }} value={parking.totalCapacity} type="number" diff --git a/src/modelUtils/mapToQueryVariables.js b/src/modelUtils/mapToQueryVariables.js index d47da2f79..f9bfcc9de 100644 --- a/src/modelUtils/mapToQueryVariables.js +++ b/src/modelUtils/mapToQueryVariables.js @@ -18,6 +18,7 @@ import { netexifyPlaceEquipment, netexifyBoardingPositions, } from "../models/stopPlaceUtils"; +import PARKING_TYPE from "../models/parkingType"; const helpers = {}; @@ -128,7 +129,6 @@ helpers.mapParentStopToVariables = (original, userInput) => { } else { parentStopVariables.stopPlaceIds = stop.children.map((child) => child.id); } - debugger; if (stop.location) { parentStopVariables.legacyCoordinates = [ [stop.location[1], stop.location[0]], @@ -293,6 +293,18 @@ helpers.mapParkingToVariables = (parkingArr, parentRef) => { ], }, ]; + } else if (source.parkingType === PARKING_TYPE.BIKE_PARKING) { + debugger; + parking.parkingProperties = [ + { + spaces: [ + { + parkingUserType: "allUsers", + numberOfSpaces: source.totalCapacity, + }, + ], + }, + ]; } parking.name = { diff --git a/src/reducers/zonesSlice.ts b/src/reducers/zonesSlice.ts index 87999ea75..7afa0f831 100644 --- a/src/reducers/zonesSlice.ts +++ b/src/reducers/zonesSlice.ts @@ -102,7 +102,7 @@ export const getTariffZonesByIdsAction = createAsyncThunk< fetchPolicy: "network-only", context: getContext(thunkAPI.getState().roles.auth), }); - debugger; + return response.data.tariffZones; }); From 52e407981a8b1bb53d3549ecd66df60f4024bb70 Mon Sep 17 00:00:00 2001 From: a-limyr Date: Thu, 12 Sep 2024 13:10:38 +0200 Subject: [PATCH 34/43] Tag style update --- src/components/EditStopPage/AddTagDialog.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/EditStopPage/AddTagDialog.js b/src/components/EditStopPage/AddTagDialog.js index 08a964f5f..2770a8e8c 100644 --- a/src/components/EditStopPage/AddTagDialog.js +++ b/src/components/EditStopPage/AddTagDialog.js @@ -91,7 +91,7 @@ class AddTagDialog extends Component { >
    { @@ -106,13 +106,14 @@ class AddTagDialog extends Component { value={comment} label={formatMessage({ id: "comment" })} hintText={formatMessage({ id: "comment" })} - style={{ marginLeft: 10, width: 350 }} + style={{ marginLeft: 10, width: 350, marginTop: 10 }} fullWidth={true} ref="comment" id={"comment-text"} onChange={(e) => this.setState({ comment: e.target.value || "" })} /> Date: Thu, 12 Sep 2024 13:26:59 +0200 Subject: [PATCH 35/43] Map layer changes --- src/components/Map/LeafletMap.js | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/src/components/Map/LeafletMap.js b/src/components/Map/LeafletMap.js index 00101d4c0..663bc77c0 100644 --- a/src/components/Map/LeafletMap.js +++ b/src/components/Map/LeafletMap.js @@ -117,7 +117,7 @@ export const LeafLetMap = ({ > @@ -127,16 +127,6 @@ export const LeafLetMap = ({ > - - - From 928c76af98521309159c63d0227b79b0d80c1640 Mon Sep 17 00:00:00 2001 From: a-limyr Date: Mon, 16 Sep 2024 14:43:21 +0200 Subject: [PATCH 36/43] Updates to alt names and save, discard and undo buttons. --- src/components/Dialogs/EditAltName.js | 14 +++++---- src/components/Dialogs/NewAltName.js | 3 ++ .../EditStopPage/EditStopGeneral.js | 30 +++++++++++++++---- 3 files changed, 35 insertions(+), 12 deletions(-) diff --git a/src/components/Dialogs/EditAltName.js b/src/components/Dialogs/EditAltName.js index 573987c34..7370045aa 100644 --- a/src/components/Dialogs/EditAltName.js +++ b/src/components/Dialogs/EditAltName.js @@ -90,13 +90,14 @@ class EditAltName extends Component {