@m4l/components 0.2.19 → 0.2.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (211) hide show
  1. package/components/AccountPopover/{index.34362031.js → index.b00671fa.js} +1 -5
  2. package/components/AppBar/{index.c64b66ee.js → index.3a694645.js} +2 -2
  3. package/components/CommonActions/components/ActionCancel/{index.106c5327.js → index.bd595785.js} +2 -2
  4. package/components/CommonActions/components/ActionFormCancel/{index.6d00f737.js → index.6fd990b7.js} +4 -4
  5. package/components/CommonActions/components/ActionFormIntro/{index.9ee7df17.js → index.798cb977.js} +2 -2
  6. package/components/CommonActions/components/ActionIntro/{index.bd2a14b2.js → index.64498081.js} +2 -2
  7. package/components/CommonActions/components/Actions/{index.8368ac0f.js → index.b8a1d42a.js} +1 -1
  8. package/components/DataGrid/formatters/ColumnBooleanFormatter/{index.6924642b.js → index.6faecd3c.js} +1 -1
  9. package/components/DataGrid/formatters/ColumnConcatenatedValueFormatter/{index.17a5c379.js → index.3cabb920.js} +3 -3
  10. package/components/DataGrid/formatters/ColumnConcatenatedValueFormatter/index.d.ts +1 -1
  11. package/components/DataGrid/formatters/ColumnInteractiveCheckFormatter/index.d.ts +1 -1
  12. package/components/DataGrid/formatters/ColumnInteractiveCheckFormatter/{index.60ddc1d2.js → index.fd1bea19.js} +3 -3
  13. package/components/DataGrid/formatters/index.d.ts +3 -1
  14. package/components/DataGrid/{index.37ce6054.js → index.660a6e7b.js} +3 -3
  15. package/components/DataGrid/subcomponents/Actions/{index.a39b31d8.js → index.e07a52bf.js} +12 -12
  16. package/components/DataGrid/types.d.ts +1 -1
  17. package/components/DragResizeWindow/{index.cb3d34e7.js → index.7c402375.js} +4 -4
  18. package/components/DynamicFilter/{index.73258cb8.js → index.0d1fcfa7.js} +10 -10
  19. package/components/GridLayout/{index.4d26c328.js → index.88b62a5d.js} +2 -2
  20. package/components/GridLayout/subcomponents/Griditem/{index.25e9f332.js → index.5256b153.js} +3 -3
  21. package/components/GridLayout/subcomponents/Responsive/{index.3839890b.js → index.dfed4e68.js} +1 -1
  22. package/components/GridLayout/subcomponents/SizeProvider/{index.a751962f.js → index.6b5de802.js} +1 -1
  23. package/components/Icon/{index.282c5b58.js → index.770f86ae.js} +1 -1
  24. package/components/Image/{index.8915f577.js → index.6dd3b128.js} +2 -2
  25. package/components/LanguagePopover/{index.5e1d85a9.js → index.b7f2816d.js} +2 -2
  26. package/components/LinearProgressIndeterminate/{index.2d53ade4.js → index.32caeee2.js} +1 -1
  27. package/components/LoadingError/{index.d95e6efb.js → index.3a86956f.js} +3 -3
  28. package/components/MFLoader/{index.cc563716.js → index.544940c7.js} +1 -4
  29. package/components/ModalDialog/{index.690c82a4.js → index.9ac45602.js} +4 -4
  30. package/components/NoItemSelected/{index.5246b204.js → index.08ec6c48.js} +1 -1
  31. package/components/ObjectLogs/{index.ad5284ce.js → index.0d263f80.js} +5 -5
  32. package/components/PDFViewer/{index.51e4f1b2.js → index.de51408a.js} +1 -2
  33. package/components/Page/{index.f4aedd2d.js → index.09e28ba1.js} +1 -1
  34. package/components/PaperForm/classes/index.d.ts +2 -1
  35. package/components/PaperForm/classes/types.d.ts +1 -0
  36. package/components/PaperForm/{index.30f68f0f.js → index.130ce6ad.js} +11 -6
  37. package/components/PaperForm/types.d.ts +4 -1
  38. package/components/Period/{index.8e118051.js → index.3c7e8590.js} +2 -2
  39. package/components/PopupsProvider/index.3d5ad0ee.js +4 -0
  40. package/components/PrintingSystem/{index.9dc25af9.js → index.9dcfb35d.js} +18 -14
  41. package/components/PrintingSystem/subcomponents/BodyNode/{index.6c1cf8f5.js → index.a3897785.js} +1 -1
  42. package/components/PrintingSystem/subcomponents/ChartNode/{index.fdb01c74.js → index.ecd5e809.js} +1 -1
  43. package/components/PrintingSystem/subcomponents/DividerNode/{index.46c5eb9e.js → index.6e177f94.js} +1 -1
  44. package/components/PrintingSystem/subcomponents/FooterNode/{index.18aa1ddd.js → index.82f1e38f.js} +1 -1
  45. package/components/PrintingSystem/subcomponents/GridNode/{index.f4b4ffca.js → index.2b8fef69.js} +2 -6
  46. package/components/PrintingSystem/subcomponents/HeaderNode/{index.9afcd686.js → index.a5d48adf.js} +1 -1
  47. package/components/PrintingSystem/subcomponents/PaperNode/{index.a3967d23.js → index.a4c5c3e6.js} +1 -1
  48. package/components/PrintingSystem/subcomponents/PropertyValueNode/{index.e1c05641.js → index.3764b312.js} +3 -5
  49. package/components/PrintingSystem/subcomponents/SectionNode/{index.c5588090.js → index.4941ecf4.js} +1 -1
  50. package/components/PrintingSystem/subcomponents/TextBoxNode/{index.7792384b.js → index.9cc3b262.js} +1 -1
  51. package/components/PrintingSystem/types.d.ts +2 -2
  52. package/components/PropertyValue/{index.d61c943c.js → index.d975c7f3.js} +1 -2
  53. package/components/Resizeable/{index.18c86aff.js → index.14ab4804.js} +1 -1
  54. package/components/SideBar/{index.f5aecd41.js → index.e55c9b7c.js} +4 -4
  55. package/components/ToastContainer/{index.83304f62.js → index.b5f27f85.js} +3 -3
  56. package/components/areas/components/AreasAdmin/{index.c55d5c24.js → index.c802bb2f.js} +18 -20
  57. package/components/areas/components/AreasViewer/classes/index.d.ts +1 -1
  58. package/components/areas/components/AreasViewer/{index.2bec316e.js → index.214d8c7d.js} +15 -19
  59. package/components/areas/contexts/AreasContext/helper.d.ts +2 -2
  60. package/components/areas/contexts/AreasContext/{index.827ee1e5.js → index.055ab6e2.js} +6 -16
  61. package/components/areas/hooks/useAreas/{index.71bc8f19.js → index.5da0bc90.js} +1 -1
  62. package/components/formatters/BooleanFormatter/{index.b21353a5.js → index.7a463493.js} +2 -3
  63. package/components/formatters/{index.7b216229.js → index.648cf3b0.js} +1 -1
  64. package/components/hook-form/RHFAutocomplete/{index.210ee73f.js → index.d05ae217.js} +2 -3
  65. package/components/hook-form/RHFAutocompleteAsync/{index.e5935f63.js → index.699b8aaf.js} +1 -1
  66. package/components/hook-form/RHFColorPicker/{index.bcc1eced.js → index.c069ef4d.js} +10 -7
  67. package/components/hook-form/RHFDateTime/{index.fa80a8cb.js → index.97bd36d7.js} +1 -1
  68. package/components/hook-form/RHFPeriod/{index.d320e56f.js → index.4e10efa3.js} +1 -2
  69. package/components/hook-form/RHFTextField/{index.ab689d7d.js → index.78934e84.js} +2 -2
  70. package/components/hook-form/RHFUpload/{index.e251c9b6.js → index.7178a50b.js} +2 -2
  71. package/components/index.d.ts +0 -1
  72. package/components/modal/{WindowBase.779aa7a5.js → WindowBase.14255209.js} +3 -3
  73. package/components/modal/{WindowConfirm.ec73ba4f.js → WindowConfirm.f79ee169.js} +6 -6
  74. package/components/mui_extended/Accordion/{index.e15e10d9.js → index.fb6849e8.js} +2 -2
  75. package/components/mui_extended/Button/{index.5c68764a.js → index.928f05b7.js} +1 -1
  76. package/components/mui_extended/IconButton/{index.a719445f.js → index.023c369f.js} +1 -1
  77. package/components/mui_extended/MenuActions/{index.62359120.js → index.34293162.js} +2 -2
  78. package/components/mui_extended/Pager/{index.fa5f5ded.js → index.212ee603.js} +1 -2
  79. package/components/mui_extended/Tab/{index.cefe27e7.js → index.409b9c74.js} +4 -4
  80. package/components/mui_extended/ToggleButton/{index.5aa6ea58.js → index.cb0fb441.js} +1 -1
  81. package/components/mui_extended/ToggleIconButton/{index.47ddefd4.js → index.49390b68.js} +1 -1
  82. package/contexts/ModalContext/{index.6085b148.js → index.e8f5ad3e.js} +1 -1
  83. package/hooks/useFormAddEdit/{index.59821a33.js → index.5e748884.js} +2 -4
  84. package/hooks/useModal/{index.1c88654a.js → index.50b23c06.js} +1 -1
  85. package/hooks/useTab/{index.500c048b.js → index.eee18a49.js} +1 -1
  86. package/index.js +94 -113
  87. package/{node_modules.bb836860.js → node_modules.448153f1.js} +1 -1
  88. package/package.json +1 -1
  89. package/react-data-grid.c5377916.js +2 -2
  90. package/{react-draggable.312ab17d.js → react-draggable.38b6012b.js} +1 -1
  91. package/{react-resizable.f2c58a4c.js → react-resizable.3cdda6a7.js} +2 -2
  92. package/vendor.daffbfe5.js +114 -0
  93. package/components/PopupsProvider/classes/index.d.ts +0 -11
  94. package/components/PopupsProvider/classes/types.d.ts +0 -9
  95. package/components/PopupsProvider/contexts/PopupsContext/PopupsContext.d.ts +0 -19
  96. package/components/PopupsProvider/contexts/PopupsContext/helper.d.ts +0 -7
  97. package/components/PopupsProvider/contexts/PopupsContext/index.d.ts +0 -1
  98. package/components/PopupsProvider/contexts/PopupsContext/store.d.ts +0 -16
  99. package/components/PopupsProvider/contexts/PopupsContext/types.d.ts +0 -117
  100. package/components/PopupsProvider/hooks/usePopupsStore/index.d.ts +0 -3
  101. package/components/PopupsProvider/index.81460070.js +0 -247
  102. package/components/PopupsProvider/index.d.ts +0 -2
  103. package/components/PopupsProvider/subcomponents/Popup/index.d.ts +0 -8
  104. package/components/PopupsProvider/subcomponents/Popup/types.d.ts +0 -16
  105. package/components/PopupsProvider/subcomponents/PopupsContainer/index.d.ts +0 -2
  106. package/components/PopupsProvider/subcomponents/PopupsContainer/types.d.ts +0 -1
  107. package/components/hook-form/HelperError/index.66bbcac3.js +0 -30
  108. package/components/hook-form/RHFHelperError/index.d.ts +0 -4
  109. package/components/maps/components/GpsTools/GpsTools.d.ts +0 -1
  110. package/components/maps/components/GpsTools/classes/index.d.ts +0 -4
  111. package/components/maps/components/GpsTools/classes/types.d.ts +0 -20
  112. package/components/maps/components/GpsTools/constants.d.ts +0 -8
  113. package/components/maps/components/GpsTools/contexts/GpsToolsContext/index.d.ts +0 -19
  114. package/components/maps/components/GpsTools/contexts/GpsToolsContext/store.d.ts +0 -16
  115. package/components/maps/components/GpsTools/contexts/GpsToolsContext/types.d.ts +0 -173
  116. package/components/maps/components/GpsTools/hooks/useGpsToolsStore/index.d.ts +0 -2
  117. package/components/maps/components/GpsTools/hooks/useLayers/index.d.ts +0 -1
  118. package/components/maps/components/GpsTools/icons.d.ts +0 -15
  119. package/components/maps/components/GpsTools/index.d.ts +0 -2
  120. package/components/maps/components/GpsTools/index.dfa96cdf.js +0 -2092
  121. package/components/maps/components/GpsTools/subcomponents/TabTools/index.d.ts +0 -9
  122. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/GeofencesTool/constants.d.ts +0 -7
  123. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/GeofencesTool/index.d.ts +0 -1
  124. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/GeofencesTool/model.d.ts +0 -122
  125. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/GeofencesTool/subcomponents/GeofenceAddEdit/constants.d.ts +0 -20
  126. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/GeofencesTool/subcomponents/GeofenceAddEdit/helpers.d.ts +0 -7
  127. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/GeofencesTool/subcomponents/GeofenceAddEdit/hooks/useDrawing.d.ts +0 -11
  128. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/GeofencesTool/subcomponents/GeofenceAddEdit/hooks/useSubmit.d.ts +0 -8
  129. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/GeofencesTool/subcomponents/GeofenceAddEdit/hooks/useSumbitErrorsFocus.d.ts +0 -5
  130. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/GeofencesTool/subcomponents/GeofenceAddEdit/hooks/useValidation.d.ts +0 -22
  131. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/GeofencesTool/subcomponents/GeofenceAddEdit/index.d.ts +0 -1
  132. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/GeofencesTool/subcomponents/GeofenceAddEdit/subcomponents/ConfigData/index.d.ts +0 -1
  133. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/GeofencesTool/subcomponents/GeofenceAddEdit/subcomponents/ConfigData/types.d.ts +0 -6
  134. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/GeofencesTool/subcomponents/GeofenceAddEdit/subcomponents/ConfigData/validations.d.ts +0 -5
  135. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/GeofencesTool/subcomponents/GeofenceAddEdit/subcomponents/GeneralData/index.d.ts +0 -1
  136. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/GeofencesTool/subcomponents/GeofenceAddEdit/subcomponents/GeneralData/types.d.ts +0 -7
  137. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/GeofencesTool/subcomponents/GeofenceAddEdit/subcomponents/GeneralData/validations.d.ts +0 -6
  138. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/GeofencesTool/subcomponents/GeofenceAddEdit/subcomponents/MyActions/index.d.ts +0 -1
  139. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/GeofencesTool/subcomponents/GeofenceAddEdit/subcomponents/MyTabs/index.d.ts +0 -1
  140. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/GeofencesTool/subcomponents/GeofenceAddEdit/subcomponents/StyleData/index.d.ts +0 -1
  141. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/GeofencesTool/subcomponents/GeofenceAddEdit/subcomponents/StyleData/subcomponents/FillData/index.d.ts +0 -1
  142. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/GeofencesTool/subcomponents/GeofenceAddEdit/subcomponents/StyleData/subcomponents/StrokeData/index.d.ts +0 -1
  143. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/GeofencesTool/subcomponents/GeofenceAddEdit/subcomponents/StyleData/types.d.ts +0 -10
  144. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/GeofencesTool/subcomponents/GeofenceAddEdit/types.d.ts +0 -25
  145. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/GeofencesTool/subcomponents/GeofencesList/hooks/useCheckedFeatures.d.ts +0 -9
  146. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/GeofencesTool/subcomponents/GeofencesList/hooks/useCheckedGeofences.d.ts +0 -4
  147. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/GeofencesTool/subcomponents/GeofencesList/hooks/useColumns.d.ts +0 -9
  148. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/GeofencesTool/subcomponents/GeofencesList/hooks/useMaster.d.ts +0 -20
  149. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/GeofencesTool/subcomponents/GeofencesList/hooks/useRowActionsGetter.d.ts +0 -9
  150. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/GeofencesTool/subcomponents/GeofencesList/index.d.ts +0 -1
  151. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/GeofencesTool/subcomponents/GeofencesList/subcomponents/Filter/index.d.ts +0 -7
  152. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/MeasureTool/constants.d.ts +0 -30
  153. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/MeasureTool/hooks/useMeasure.d.ts +0 -31
  154. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/MeasureTool/hooks/useValidation.d.ts +0 -10
  155. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/MeasureTool/index.d.ts +0 -1
  156. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/MeasureTool/subcomponents/MeasureData/index.d.ts +0 -1
  157. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/MeasureTool/subcomponents/MeasureData/types.d.ts +0 -6
  158. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/MeasureTool/subcomponents/MeasureData/validations.d.ts +0 -2
  159. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/MeasureTool/subcomponents/MyActions/index.d.ts +0 -1
  160. package/components/maps/components/GpsTools/subcomponents/TabTools/subcomponents/MeasureTool/types.d.ts +0 -9
  161. package/components/maps/components/GpsTools/types.d.ts +0 -34
  162. package/components/maps/components/Map/Map.d.ts +0 -2
  163. package/components/maps/components/Map/classes/index.d.ts +0 -5
  164. package/components/maps/components/Map/classes/types.d.ts +0 -19
  165. package/components/maps/components/Map/contexts/MapContext/MapContext.d.ts +0 -19
  166. package/components/maps/components/Map/contexts/MapContext/helper.d.ts +0 -8
  167. package/components/maps/components/Map/contexts/MapContext/index.d.ts +0 -2
  168. package/components/maps/components/Map/contexts/MapContext/store.d.ts +0 -16
  169. package/components/maps/components/Map/contexts/MapContext/types.d.ts +0 -414
  170. package/components/maps/components/Map/dictionary.d.ts +0 -70
  171. package/components/maps/components/Map/featureRenders/CommonFeatureRender/index.d.ts +0 -8
  172. package/components/maps/components/Map/featureRenders/MarkerFeatureRender/IconMarker.d.ts +0 -6
  173. package/components/maps/components/Map/featureRenders/MarkerFeatureRender/IconMarkerGrua.d.ts +0 -1
  174. package/components/maps/components/Map/featureRenders/MarkerFeatureRender/IconMarkerTaxi.d.ts +0 -1
  175. package/components/maps/components/Map/featureRenders/MarkerFeatureRender/index.d.ts +0 -2
  176. package/components/maps/components/Map/featureRenders/index.d.ts +0 -1
  177. package/components/maps/components/Map/hooks/useAutoFocus/index.d.ts +0 -8
  178. package/components/maps/components/Map/hooks/useAutoFocus/types.d.ts +0 -15
  179. package/components/maps/components/Map/hooks/useDisableZoomEvents/index.d.ts +0 -1
  180. package/components/maps/components/Map/hooks/useMapStore/index.d.ts +0 -3
  181. package/components/maps/components/Map/index.040c05a5.js +0 -1339
  182. package/components/maps/components/Map/index.d.ts +0 -7
  183. package/components/maps/components/Map/pluginLayers/PolylineWithArrows/index.d.ts +0 -9
  184. package/components/maps/components/Map/pluginLayers/index.d.ts +0 -1
  185. package/components/maps/components/Map/subcomponents/LayersContainer/index.d.ts +0 -2
  186. package/components/maps/components/Map/subcomponents/LayersTool/hooks/useCheckedLayers.d.ts +0 -9
  187. package/components/maps/components/Map/subcomponents/LayersTool/hooks/useColumns.d.ts +0 -15
  188. package/components/maps/components/Map/subcomponents/LayersTool/hooks/useMaster.d.ts +0 -12
  189. package/components/maps/components/Map/subcomponents/LayersTool/index.d.ts +0 -1
  190. package/components/maps/components/Map/subcomponents/LayersTool/model.d.ts +0 -19
  191. package/components/maps/components/Map/subcomponents/MainTools/index.d.ts +0 -2
  192. package/components/maps/components/Map/subcomponents/MainTools/types.d.ts +0 -5
  193. package/components/maps/components/Map/subcomponents/MyLayer/index.d.ts +0 -17
  194. package/components/maps/components/Map/subcomponents/MyLayer/subcomponents/MarkerClusterGroup/index.d.ts +0 -20
  195. package/components/maps/components/Map/subcomponents/MyLayer/subcomponents/MarkerClusterGroup/types.d.ts +0 -11
  196. package/components/maps/components/Map/subcomponents/MyLayer/subcomponents/RenderByEachFeatureComponent/index.d.ts +0 -12
  197. package/components/maps/components/Map/subcomponents/MyLayer/subcomponents/RenderByEachFeatureComponent/types.d.ts +0 -5
  198. package/components/maps/components/Map/subcomponents/MyLayer/types.d.ts +0 -2
  199. package/components/maps/components/Map/types.d.ts +0 -28
  200. package/components/maps/index.d.ts +0 -3
  201. package/hooks/useFormReadyForUpdate/index.d.ts +0 -6
  202. package/hooks/useFormReadyForUpdate/index.f60f500e.js +0 -20
  203. package/hooks/useSizeContainer/contants.d.ts +0 -1
  204. package/hooks/useSizeContainer/index.62b4e0c4.js +0 -35
  205. package/hooks/useSizeContainer/index.d.ts +0 -8
  206. package/hooks/useStateRef/index.538edb89.js +0 -15
  207. package/hooks/useStateRef/index.d.ts +0 -8
  208. package/components/DataGrid/formatters/ColumnUncertaintyFormatter/{index.084ce3ef.js → index.aeea65aa.js} +1 -1
  209. /package/components/GridLayout/subcomponents/{Griditem → GridItem}/index.d.ts +0 -0
  210. /package/components/GridLayout/subcomponents/{Griditem → GridItem}/types.d.ts +0 -0
  211. /package/utils/{index.9ad3909a.js → index.79b6a2c1.js} +0 -0
@@ -1,2092 +0,0 @@
1
- import { createContext, useRef, useEffect, useState, useMemo, useCallback, useContext } from "react";
2
- import { createStore, useStore } from "zustand";
3
- import { shallow } from "zustand/shallow";
4
- import { useResponsiveDesktop, useFirstRender } from "@m4l/graphics";
5
- import { useModuleDictionary, useModuleSkeleton, useEnvironment, useNetwork, useModulePrivileges, useHostTools, usePaginate } from "@m4l/core";
6
- import { devtools } from "zustand/middleware";
7
- import { immer } from "zustand/middleware/immer";
8
- import { enableMapSet } from "immer";
9
- import { jsx, jsxs, Fragment } from "react/jsx-runtime";
10
- import { D as DICCTIONARY, u as useMapStore, m as mapClasses, a as MAP_ZINDEX_DEFAULT, C as CommonFeatureRender, M as MAP_ZINDEX_OVER_MAP, b as useDisableZoomEvents } from "../Map/index.040c05a5.js";
11
- import { D as DynamicFilter } from "../../../DynamicFilter/index.73258cb8.js";
12
- import { C as ColumnSetCheckFormatter } from "../../../DataGrid/formatters/ColumnSetCheckFormatter/index.eb406256.js";
13
- import { C as ColumnDateFormatter } from "../../../DataGrid/formatters/ColumnDateFormatter/index.704db1ca.js";
14
- import { u as useModal } from "../../../../hooks/useModal/index.1c88654a.js";
15
- import { W as WindowConfirm } from "../../../modal/WindowConfirm.ec73ba4f.js";
16
- import { generateUtilityClasses } from "@mui/material";
17
- import "@mui/base";
18
- import { S as Stack } from "../../../mui_extended/Stack/index.0e53197c.js";
19
- import { c as DataGrid } from "../../../DataGrid/index.37ce6054.js";
20
- import { B as Button } from "../../../mui_extended/Button/index.5c68764a.js";
21
- import { useFormContext, useWatch } from "react-hook-form";
22
- import { H as HelperError } from "../../../hook-form/HelperError/index.66bbcac3.js";
23
- import { A as Actions } from "../../../CommonActions/components/Actions/index.8368ac0f.js";
24
- import { A as ActionFormIntro } from "../../../CommonActions/components/ActionFormIntro/index.9ee7df17.js";
25
- import { useMap } from "react-leaflet";
26
- import { u as useFormReadyForUpdate } from "../../../../hooks/useFormReadyForUpdate/index.f60f500e.js";
27
- import * as L from "leaflet";
28
- import { u as useTab } from "../../../../hooks/useTab/index.500c048b.js";
29
- import { P as PaperForm } from "../../../PaperForm/index.30f68f0f.js";
30
- import { R as RHFAutocomplete } from "../../../hook-form/RHFAutocomplete/index.210ee73f.js";
31
- import { R as RHFTextField } from "../../../hook-form/RHFTextField/index.ab689d7d.js";
32
- import { P as PropertyValue } from "../../../PropertyValue/index.d61c943c.js";
33
- import { R as RHFColorPicker } from "../../../hook-form/RHFColorPicker/index.bcc1eced.js";
34
- import clsx from "clsx";
35
- import { T as Tabs, a as Tab, b as TabContent, c as TabProvider } from "../../../mui_extended/Tab/index.cefe27e7.js";
36
- import { T as Tooltip } from "../../../mui_extended/Tooltip/index.24a2bc3f.js";
37
- import * as Yup from "yup";
38
- import { u as useFormAddEdit } from "../../../../hooks/useFormAddEdit/index.59821a33.js";
39
- import { R as RHFormProvider } from "../../../../contexts/RHFormContext/index.7769076a.js";
40
- import { R as RHFAutocompleteAsync } from "../../../hook-form/RHFAutocompleteAsync/index.e5935f63.js";
41
- import "@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css";
42
- import "@geoman-io/leaflet-geoman-free";
43
- import { styled } from "@mui/material/styles";
44
- import { u as useStateRef } from "../../../../hooks/useStateRef/index.538edb89.js";
45
- enableMapSet();
46
- const createGpsToolsStore = (initProps) => {
47
- const startProps = {
48
- currentTabTool: "geofences",
49
- geofenceState: {
50
- currentGeofenceTool: "list",
51
- rows: [],
52
- checkedGeofences: /* @__PURE__ */ new Set(),
53
- checkedCrossingFeatures: /* @__PURE__ */ new Set(),
54
- checkedInternalFeatures: /* @__PURE__ */ new Set(),
55
- hashGeofences: {}
56
- },
57
- ...initProps
58
- };
59
- return createStore(
60
- devtools(
61
- immer((set, _get) => ({
62
- ...startProps,
63
- gpsToolsActions: {
64
- init: () => {
65
- set((state) => {
66
- state.ownerState.status = "ready";
67
- });
68
- },
69
- setGpsToolsState: (status) => {
70
- set((state) => {
71
- state.ownerState.status = status;
72
- });
73
- },
74
- setHandlerGetLabel: (newHandler) => {
75
- set((state) => {
76
- state.getLabel = newHandler;
77
- });
78
- },
79
- setExternalState: (newExternalState) => {
80
- set((state) => {
81
- state.ownerState = { ...state.ownerState, ...newExternalState };
82
- });
83
- },
84
- setCurrentTabTool: (newTabTool) => {
85
- set((state) => {
86
- state.currentTabTool = newTabTool;
87
- });
88
- }
89
- },
90
- geofenceActions: {
91
- goToAddEdit: (geofenceId) => {
92
- set((state) => {
93
- state.geofenceState.currentGeofenceTool = "add_edit";
94
- state.geofenceState.geofenceId = geofenceId;
95
- });
96
- },
97
- goToList: (geofenceId) => {
98
- set((state) => {
99
- state.geofenceState.currentGeofenceTool = "list";
100
- state.geofenceState.geofenceId = geofenceId;
101
- });
102
- },
103
- addGeofence: (geofenceId, geofence) => {
104
- set((state) => {
105
- state.geofenceState.hashGeofences[geofenceId] = geofence;
106
- });
107
- },
108
- updatePartialGeofence: (geofenceId, geofence) => {
109
- set((state) => {
110
- state.geofenceState.hashGeofences[geofenceId] = { ...state.geofenceState.hashGeofences[geofenceId], ...geofence };
111
- });
112
- },
113
- updateRows: (newRows) => {
114
- set((state) => {
115
- state.geofenceState.rows = newRows;
116
- });
117
- },
118
- setCheckedGeofences: (newGeofences) => {
119
- set((state) => {
120
- state.geofenceState.checkedGeofences = new Set(newGeofences);
121
- });
122
- },
123
- setCheckedCrossingFeatures: (newFeatures) => {
124
- set((state) => {
125
- state.geofenceState.checkedCrossingFeatures = new Set(newFeatures);
126
- });
127
- },
128
- setCheckedInternalFeatures: (newFeatures) => {
129
- set((state) => {
130
- state.geofenceState.checkedInternalFeatures = new Set(newFeatures);
131
- });
132
- }
133
- }
134
- })),
135
- { name: `Map Tools Store` }
136
- )
137
- );
138
- };
139
- const GpsToolsContext = createContext(null);
140
- function GpsToolsProvider(props) {
141
- const {
142
- children
143
- } = props;
144
- const {
145
- getLabel
146
- } = useModuleDictionary();
147
- const isDesktop = useResponsiveDesktop();
148
- const isSkeleton = useModuleSkeleton();
149
- const isFirstRender = useFirstRender([getLabel]);
150
- const mapStoreRef = useRef();
151
- if (!mapStoreRef.current) {
152
- mapStoreRef.current = createGpsToolsStore({
153
- getLabel,
154
- ownerState: {
155
- status: "init",
156
- isMobile: !isDesktop,
157
- isSkeleton,
158
- focus: false
159
- }
160
- });
161
- }
162
- const {
163
- setHandlerGetLabel,
164
- setExternalState
165
- } = useStore(mapStoreRef.current, (state) => state.gpsToolsActions, shallow);
166
- useEffect(() => {
167
- if (!isFirstRender) {
168
- setHandlerGetLabel(getLabel);
169
- }
170
- }, [getLabel]);
171
- useEffect(() => {
172
- if (isFirstRender) {
173
- return;
174
- }
175
- setExternalState({
176
- isMobile: !isDesktop,
177
- isSkeleton
178
- });
179
- }, [isDesktop, isSkeleton]);
180
- return /* @__PURE__ */ jsx(GpsToolsContext.Provider, {
181
- value: mapStoreRef.current,
182
- children
183
- });
184
- }
185
- const COMPONENT_CLASS_NAME = "M4LGpsTools";
186
- const COMPONENT_MAP_TOOLS_ID = "gps_tools";
187
- const STYLE_OPACITIES = [
188
- {
189
- value: 0,
190
- label: "0%"
191
- },
192
- {
193
- value: 0.1,
194
- label: "10%"
195
- },
196
- {
197
- value: 0.2,
198
- label: "20%"
199
- },
200
- {
201
- value: 0.3,
202
- label: "30%"
203
- },
204
- {
205
- value: 0.4,
206
- label: "40%"
207
- },
208
- {
209
- value: 0.5,
210
- label: "50%"
211
- },
212
- {
213
- value: 1,
214
- label: "100%"
215
- }
216
- ];
217
- const STYLE_WHEIGHTS = [
218
- {
219
- value: 0,
220
- label: "0px"
221
- },
222
- {
223
- value: 1,
224
- label: "1px"
225
- },
226
- {
227
- value: 2,
228
- label: "2px"
229
- },
230
- {
231
- value: 3,
232
- label: "3px"
233
- },
234
- {
235
- value: 4,
236
- label: "4px"
237
- }
238
- ];
239
- const STYLE_PATTERNS = [
240
- {
241
- value: "",
242
- label: "------"
243
- },
244
- {
245
- value: "4 1 2",
246
- label: "-- - - --"
247
- }
248
- ];
249
- const icons = {
250
- GEOMETRY_CIRCLE: "geometry_circle.svg",
251
- GEOMETRY_RECTANGLE: "geometry_rectangle.svg",
252
- GEOMETRY_POLYGON: "geometry_polygon.svg",
253
- ADD: "add.svg",
254
- MEASURE: "measure.svg",
255
- GENERAL: "general.svg",
256
- CONFIG: "config.svg",
257
- STROKE: "stroke.svg",
258
- FILL: "fill.svg",
259
- EDIT: "edit.svg",
260
- DELETE: "delete.svg",
261
- ACTIVE: "active.svg",
262
- NAME: "name.svg"
263
- };
264
- function Filter(props) {
265
- const {
266
- refresh,
267
- setBackendQueryParams
268
- } = props;
269
- const {
270
- host_static_assets,
271
- environment_assets
272
- } = useEnvironment();
273
- const [initialFilter] = useState(() => {
274
- return [];
275
- });
276
- const onChangeFilter = (_initialFilters, rawFilters) => {
277
- setBackendQueryParams({
278
- f: rawFilters
279
- });
280
- refresh();
281
- };
282
- return /* @__PURE__ */ jsx(DynamicFilter, {
283
- withAllField: true,
284
- onChangeFilters: onChangeFilter,
285
- fields: [{
286
- name: "id",
287
- dictionaryId: DICCTIONARY.LABEL_ID,
288
- type: "number",
289
- multiple: true,
290
- presence: "optional",
291
- urlIcon: `${host_static_assets}/${environment_assets}/components/${COMPONENT_MAP_TOOLS_ID}/assets/icons/${icons.ACTIVE}`,
292
- defaultOperand1: true
293
- }, {
294
- name: "name",
295
- dictionaryId: DICCTIONARY.LABEL_NAME,
296
- type: "string",
297
- multiple: true,
298
- presence: "optional",
299
- urlIcon: `${host_static_assets}/${environment_assets}/components/${COMPONENT_MAP_TOOLS_ID}/assets/icons/${icons.NAME}`
300
- }],
301
- initialApplyedFilters: initialFilter
302
- });
303
- }
304
- function useColumns(props) {
305
- const {
306
- rowKeyGetter
307
- } = props;
308
- const {
309
- getLabel
310
- } = useModuleDictionary();
311
- const useHook = (field) => {
312
- return useGpsToolsStore((state) => {
313
- return field === "CrossingFeatures" ? [state.geofenceState.checkedCrossingFeatures, state.geofenceActions.setCheckedCrossingFeatures] : [state.geofenceState.checkedInternalFeatures, state.geofenceActions.setCheckedInternalFeatures];
314
- }, shallow);
315
- };
316
- const columns = useMemo(() => [{
317
- key: "id",
318
- name: getLabel(DICCTIONARY.LABEL_ID),
319
- type: "number",
320
- width: 40,
321
- visible: false
322
- }, {
323
- key: "name",
324
- name: getLabel(DICCTIONARY.LABEL_NAME),
325
- type: "string",
326
- width: 300
327
- }, {
328
- key: "checkedCrossingFeatures",
329
- name: getLabel(DICCTIONARY.LABEL_VIEW_TRANSIT_FEATURES),
330
- width: 80,
331
- type: "boolean",
332
- formatter: ColumnSetCheckFormatter({
333
- field: "CrossingFeatures",
334
- rowKeyGetter,
335
- useHook
336
- }),
337
- cellClass: "rdg-cell-align-center"
338
- }, {
339
- key: "checkedInternalFeatures",
340
- name: getLabel(DICCTIONARY.LABEL_VIEW_INTERNAL_FEATURES),
341
- width: 80,
342
- type: "boolean",
343
- formatter: ColumnSetCheckFormatter({
344
- field: "InternalFeatures",
345
- rowKeyGetter,
346
- useHook
347
- }),
348
- cellClass: "rdg-cell-align-center"
349
- }, {
350
- key: "created_at",
351
- name: getLabel(DICCTIONARY.LABEL_CREATED_AT),
352
- type: "date",
353
- formatter: ColumnDateFormatter({
354
- presentationType: "datetime",
355
- fieldValue: "row.created_at"
356
- })
357
- }, {
358
- key: "updated_at",
359
- name: getLabel(DICCTIONARY.LABEL_UPDATED_AT),
360
- type: "date",
361
- formatter: ColumnDateFormatter({
362
- presentationType: "datetime",
363
- fieldValue: "row.updated_at"
364
- })
365
- }], [getLabel]);
366
- return {
367
- columns
368
- };
369
- }
370
- const ENDPOINT_GEOFENCE_GET = "geofences";
371
- const ENDPOINT_GEOFENCE_NEW_EDIT = "geofences";
372
- var GeofencesFeaturesLayers = /* @__PURE__ */ ((GeofencesFeaturesLayers2) => {
373
- GeofencesFeaturesLayers2["LAYER_GEOFENCES"] = "geofences";
374
- GeofencesFeaturesLayers2["LAYER_GEOFENCES_TRANSIT_FEATURES"] = "geofencesCrossingFeatures";
375
- GeofencesFeaturesLayers2["LAYER_GEOFENCES_INTERNAL_FEATURES"] = "geofencesInternalFeatures";
376
- return GeofencesFeaturesLayers2;
377
- })(GeofencesFeaturesLayers || {});
378
- function useRowActionsGetter(props) {
379
- const {
380
- fullRefresh
381
- } = props;
382
- const {
383
- networkOperation
384
- } = useNetwork();
385
- const {
386
- openModal,
387
- closeModal
388
- } = useModal();
389
- const {
390
- getLabel
391
- } = useModuleDictionary();
392
- const {
393
- hasPrivilege
394
- } = useModulePrivileges();
395
- const {
396
- host_static_assets,
397
- environment_assets
398
- } = useEnvironment();
399
- const {
400
- goToAddEdit
401
- } = useGpsToolsStore((state) => state.geofenceActions, shallow);
402
- const {
403
- removeFeature
404
- } = useMapStore((state) => state.mapActions, shallow);
405
- const {
406
- toast
407
- } = useHostTools();
408
- const isDesktop = useResponsiveDesktop();
409
- const [urlIconEdit] = useState(`${host_static_assets}/${environment_assets}/frontend/components/maptools/assets/icons/${icons.EDIT}`);
410
- const [urlIconDelete] = useState(`${host_static_assets}/${environment_assets}/frontend/domain/microfrontends/maptools/assets/icons/${icons.DELETE}`);
411
- const goEdit = useCallback((objectId) => {
412
- goToAddEdit(objectId);
413
- removeFeature(GeofencesFeaturesLayers.LAYER_GEOFENCES, objectId);
414
- }, [getLabel]);
415
- const onDelete = useCallback((row) => {
416
- openModal({
417
- window: /* @__PURE__ */ jsx(WindowConfirm, {
418
- title: getLabel(DICCTIONARY.MODAL_DELETE_GEO_TITLE),
419
- msg: getLabel(DICCTIONARY.MODAL_DELETE_GEO_MESSAGE),
420
- onClickIntro: () => onConfirmDelete(row)
421
- }),
422
- variant: "delete",
423
- initialWidth: 300,
424
- initialHeigth: 350
425
- });
426
- }, [getLabel]);
427
- const onConfirmDelete = useCallback((row) => {
428
- networkOperation({
429
- method: "DELETE",
430
- endPoint: `geofences/${row.id}`
431
- }).then((response) => {
432
- toast(response.message, {
433
- type: "success"
434
- });
435
- fullRefresh();
436
- });
437
- closeModal();
438
- }, []);
439
- const rowActionsGetter = useCallback((row) => {
440
- const conditionalItems = [];
441
- conditionalItems.push({
442
- urlIcon: urlIconEdit,
443
- dictionaryId: DICCTIONARY.ROW_ACTION_GEO_EDIT,
444
- onClick: () => {
445
- goEdit(row.id);
446
- },
447
- disabled: !row.authUserOptions.edit
448
- });
449
- return conditionalItems;
450
- }, [hasPrivilege, goEdit, onDelete, urlIconDelete, urlIconEdit, isDesktop]);
451
- return {
452
- rowActionsGetter
453
- };
454
- }
455
- function useCheckedGeofences() {
456
- const [checkedGeofences, hashGeofences] = useGpsToolsStore((state) => [state.geofenceState.checkedGeofences, state.geofenceState.hashGeofences], shallow);
457
- const {
458
- setCheckedGeofences,
459
- updatePartialGeofence
460
- } = useGpsToolsStore((state) => state.geofenceActions, shallow);
461
- const {
462
- setFeatureData,
463
- removeFeature,
464
- getFeatureIds
465
- } = useMapStore((state) => state.mapActions, shallow);
466
- const {
467
- networkOperation
468
- } = useNetwork();
469
- useEffect(() => {
470
- const mapFeatureIds = getFeatureIds(GeofencesFeaturesLayers.LAYER_GEOFENCES);
471
- checkedGeofences.forEach((chkRow) => {
472
- const geofence = hashGeofences[chkRow];
473
- if (!geofence) {
474
- return;
475
- }
476
- if (!mapFeatureIds.includes(chkRow) || !geofence.hasRenderizedGeofence) {
477
- if (!geofence.geometry) {
478
- networkOperation({
479
- method: "GET",
480
- endPoint: `geofences/${geofence.id}`,
481
- isRemote: false,
482
- responseToCamelCase: true
483
- }).then((response) => {
484
- console.log("onCheckedRowsChange response:", response.data);
485
- const geoLoaded = {
486
- geometry: response.data.geometry,
487
- properties: response.data.properties,
488
- countCrossingFeatures: response.data.countCrossingFeatures,
489
- hasRenderizedGeofence: false
490
- };
491
- if (geoLoaded.geometry) {
492
- if (checkedGeofences.has(geofence.id)) {
493
- setFeatureData("geofences", chkRow, geoLoaded.geometry, geoLoaded.properties);
494
- geoLoaded.hasRenderizedGeofence = true;
495
- }
496
- }
497
- updatePartialGeofence(geofence.id, geoLoaded);
498
- });
499
- } else {
500
- setFeatureData(GeofencesFeaturesLayers.LAYER_GEOFENCES, chkRow, geofence.geometry, geofence.properties);
501
- updatePartialGeofence(geofence.id, {
502
- hasRenderizedGeofence: true
503
- });
504
- }
505
- }
506
- });
507
- mapFeatureIds.forEach((mapFeatureId) => {
508
- if (!checkedGeofences.has(Number(mapFeatureId))) {
509
- removeFeature(GeofencesFeaturesLayers.LAYER_GEOFENCES, mapFeatureId);
510
- }
511
- });
512
- return () => {
513
- };
514
- }, [checkedGeofences]);
515
- return {
516
- checkedGeofences,
517
- setCheckedGeofences
518
- };
519
- }
520
- function useCheckedFeatures(layerId, featuresType, endpoint) {
521
- const [checkedFeatures, setCheckedFeatures, hashGeofences] = useGpsToolsStore((state) => {
522
- return featuresType === "CrossingFeatures" ? [state.geofenceState.checkedCrossingFeatures, state.geofenceActions.setCheckedCrossingFeatures, state.geofenceState.hashGeofences] : [state.geofenceState.checkedInternalFeatures, state.geofenceActions.setCheckedInternalFeatures, state.geofenceState.hashGeofences];
523
- }, shallow);
524
- const {
525
- setFeatureData,
526
- removeFeature,
527
- getFeatureIds
528
- } = useMapStore((state) => state.mapActions, shallow);
529
- const {
530
- networkOperation
531
- } = useNetwork();
532
- useEffect(() => {
533
- const mapFeatureIds = getFeatureIds(layerId);
534
- checkedFeatures.forEach((chkRow) => {
535
- const geofence = hashGeofences[chkRow];
536
- if (!geofence) {
537
- return;
538
- }
539
- if (!mapFeatureIds.find((fId) => fId.toString().includes(`geo_${geofence.id}_fid`)) || !geofence[`hasRenderized${featuresType}`]) {
540
- const currentGeofenceLoadedFeatures = geofence[`loaded${featuresType}`];
541
- if (!currentGeofenceLoadedFeatures) {
542
- networkOperation({
543
- method: "GET",
544
- endPoint: `geofences/${geofence.id}/${endpoint}`,
545
- isRemote: false,
546
- responseToCamelCase: true
547
- }).then((response) => {
548
- console.log("onCheckedGeometriesChange response:", response.data);
549
- geofence[`loaded${featuresType}`] = response.data;
550
- const newGeofenceLoadedFeatures = geofence[`loaded${featuresType}`];
551
- if (newGeofenceLoadedFeatures && Array.isArray(geofence[`loaded${featuresType}`])) {
552
- if (checkedFeatures.has(geofence.id)) {
553
- newGeofenceLoadedFeatures.forEach((feature) => {
554
- setFeatureData(layerId, `geo_${geofence.id}_fid_${feature.id}`, feature.geometry, feature.properties);
555
- });
556
- geofence[`hasRenderized${featuresType}`] = true;
557
- }
558
- }
559
- }).catch(() => {
560
- });
561
- } else {
562
- currentGeofenceLoadedFeatures.forEach((feature) => {
563
- setFeatureData(layerId, `geo_${geofence.id}_fid_${feature.id}`, feature.geometry, feature.properties);
564
- });
565
- geofence[`hasRenderized${featuresType}`] = true;
566
- }
567
- }
568
- });
569
- mapFeatureIds.forEach((mapFeatureId) => {
570
- const featureId = Number(mapFeatureId.toString().split("_")[1]);
571
- if (!checkedFeatures.has(featureId)) {
572
- removeFeature(layerId, mapFeatureId);
573
- }
574
- });
575
- return () => {
576
- };
577
- }, [checkedFeatures]);
578
- return [checkedFeatures, setCheckedFeatures];
579
- }
580
- function useMaster() {
581
- const {
582
- goToAddEdit
583
- } = useGpsToolsStore((state) => state.geofenceActions, shallow);
584
- const [checkedGeofences, hashGeofences, initialRows] = useGpsToolsStore((state) => [state.geofenceState.checkedGeofences, state.geofenceState.hashGeofences, state.geofenceState.rows], shallow);
585
- const {
586
- setCheckedGeofences,
587
- addGeofence,
588
- updatePartialGeofence,
589
- updateRows
590
- } = useGpsToolsStore((state) => state.geofenceActions, shallow);
591
- useCheckedGeofences();
592
- const [checkedCrossingFeatures, setCheckedCrossingFeatures] = useCheckedFeatures(GeofencesFeaturesLayers.LAYER_GEOFENCES_TRANSIT_FEATURES, "CrossingFeatures", "crossing_features");
593
- const [checkedInternalFeatures, setCheckedInternalFeatures] = useCheckedFeatures(GeofencesFeaturesLayers.LAYER_GEOFENCES_INTERNAL_FEATURES, "InternalFeatures", "internal_features");
594
- const rowKeyGetter = useCallback((row) => row.id, []);
595
- const [selectedRows, setSelectedRows] = useState(/* @__PURE__ */ new Set());
596
- const [backendQueryParams, setBackendQueryParams] = useState({});
597
- const {
598
- columns
599
- } = useColumns({
600
- rowKeyGetter
601
- });
602
- const {
603
- pagerState,
604
- rows,
605
- onPageChange,
606
- onRowsPerPageChange,
607
- Refresh,
608
- setRows
609
- } = usePaginate({
610
- endPoint: "geofences",
611
- fireOnChangeParms: false,
612
- fireOnFirstLoad: false,
613
- queryParams: backendQueryParams,
614
- isRemote: false,
615
- responseToCamelCase: true,
616
- initialRows
617
- });
618
- const onSelectedRowsChange = (newRowsSelectSet) => {
619
- setSelectedRows(newRowsSelectSet);
620
- };
621
- const fullRefresh = useCallback((_id) => {
622
- Refresh();
623
- }, []);
624
- useEffect(() => {
625
- const newCheckedGeofences = new Set(checkedGeofences);
626
- const newCheckedCrossingFeatures = new Set(checkedCrossingFeatures);
627
- const newCheckedInternalFeatures = new Set(checkedInternalFeatures);
628
- let updatedCheckedGeofences = false;
629
- let updatedCheckedCrossingFeatures = false;
630
- let updatedCheckedInternalFeatures = false;
631
- newCheckedGeofences.forEach((chkRow) => {
632
- if (rows.findIndex((row) => row.id === chkRow) === -1) {
633
- newCheckedGeofences.delete(chkRow);
634
- }
635
- });
636
- newCheckedCrossingFeatures.forEach((chkTF) => {
637
- if (rows.findIndex((row) => row.id === chkTF) === -1) {
638
- newCheckedCrossingFeatures.delete(chkTF);
639
- }
640
- });
641
- newCheckedInternalFeatures.forEach((chkIF) => {
642
- if (rows.findIndex((row) => row.id === chkIF) === -1) {
643
- newCheckedInternalFeatures.delete(chkIF);
644
- }
645
- });
646
- rows.forEach((row) => {
647
- let hasGeo = hashGeofences[row.id];
648
- if (!hasGeo) {
649
- hasGeo = {
650
- ...row,
651
- hasRenderizedGeofence: false,
652
- loadedCrossingFeatures: null,
653
- loadedInternalFeatures: null,
654
- hasRenderizedCrossingFeatures: false,
655
- hasRenderizedInternalFeatures: false,
656
- createdAt: row.createdAt
657
- };
658
- addGeofence(row.id, hasGeo);
659
- return;
660
- }
661
- if (row.updatedAt && row.updatedAt !== hasGeo.updatedAt) {
662
- updatePartialGeofence(row.id, {
663
- updatedAt: row.updatedAt,
664
- geometry: null,
665
- hasRenderizedGeofence: false,
666
- hasRenderizedCrossingFeatures: false,
667
- hasRenderizedInternalFeatures: false,
668
- loadedCrossingFeatures: null,
669
- loadedInternalFeatures: null
670
- });
671
- updatedCheckedGeofences = true;
672
- updatedCheckedCrossingFeatures = true;
673
- updatedCheckedInternalFeatures = true;
674
- }
675
- });
676
- if (newCheckedGeofences.size !== checkedGeofences.size || updatedCheckedGeofences) {
677
- setCheckedGeofences(newCheckedGeofences);
678
- }
679
- if (newCheckedCrossingFeatures.size !== checkedCrossingFeatures.size || updatedCheckedCrossingFeatures) {
680
- setCheckedCrossingFeatures(newCheckedCrossingFeatures);
681
- }
682
- if (newCheckedInternalFeatures.size !== checkedInternalFeatures.size || updatedCheckedInternalFeatures) {
683
- setCheckedInternalFeatures(newCheckedInternalFeatures);
684
- }
685
- onSelectedRowsChange(selectedRows);
686
- updateRows(rows);
687
- }, [rows]);
688
- const {
689
- rowActionsGetter
690
- } = useRowActionsGetter({
691
- fullRefresh
692
- });
693
- return {
694
- rowKeyGetter,
695
- columns,
696
- refresh: Refresh,
697
- setBackendQueryParams,
698
- pagerState,
699
- rows,
700
- onPageChange,
701
- onRowsPerPageChange,
702
- rowActionsGetter,
703
- selectedRows,
704
- onSelectedRowsChange,
705
- checkedRows: checkedGeofences,
706
- onCheckedRowsChange: setCheckedGeofences,
707
- setRows,
708
- goToAddEdit
709
- };
710
- }
711
- const mapToolsClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
712
- "root",
713
- "tabToolsRoot",
714
- "tabContentRoot",
715
- "toolGeofences",
716
- "toolGeofencesList",
717
- "toolGeofencesAddEdit",
718
- "toolGeofencesAddEditGeneral",
719
- "toolGeofencesAddEditStyle",
720
- "toolMeasureFormValue",
721
- "toolMeasureFormValueDistance",
722
- "toolMeasureFormValueSymbol",
723
- "toolMeasure",
724
- "toolMeausureLabel",
725
- "toolMeausureLabelDistance",
726
- "toolMeausureLabelSymbol",
727
- "visible",
728
- "hidden"
729
- ]);
730
- function GeofencesList() {
731
- const {
732
- refresh,
733
- setBackendQueryParams,
734
- columns,
735
- rows,
736
- rowActionsGetter,
737
- selectedRows,
738
- onSelectedRowsChange,
739
- pagerState,
740
- onPageChange,
741
- onRowsPerPageChange,
742
- checkedRows,
743
- onCheckedRowsChange,
744
- setRows,
745
- rowKeyGetter,
746
- goToAddEdit
747
- } = useMaster();
748
- return /* @__PURE__ */ jsxs(Stack, {
749
- direction: "column",
750
- gap: "4px",
751
- className: mapToolsClasses.toolGeofencesList,
752
- children: [/* @__PURE__ */ jsx(Button, {
753
- onClick: () => goToAddEdit(),
754
- children: "Agregar geocerca"
755
- }), /* @__PURE__ */ jsx(Filter, {
756
- refresh,
757
- setBackendQueryParams
758
- }), /* @__PURE__ */ jsx(DataGrid, {
759
- id: "geofences",
760
- columns,
761
- rows,
762
- onRowsChange: setRows,
763
- checkedRows,
764
- onCheckedRowsChange,
765
- rowActionsGetter,
766
- rowKeyGetter,
767
- selectedRows,
768
- onSelectedRowsChange,
769
- withActions: true,
770
- actionsProps: {
771
- withPager: true,
772
- withLocalFilters: true,
773
- pagerOptions: {
774
- records: rows.length,
775
- totalRecords: pagerState.totalRecords,
776
- rowsPerPageOptions: [1, 2, 3, 4, 5, 10, 25],
777
- page: pagerState.page,
778
- rowsPerPage: pagerState.rowsPerPage,
779
- onPageChange,
780
- onRowsPerPageChange
781
- }
782
- }
783
- }, "list")]
784
- });
785
- }
786
- function MyActions$1() {
787
- const {
788
- control
789
- } = useFormContext();
790
- const inEdition = useWatch({
791
- control,
792
- name: "inEdition"
793
- });
794
- const {
795
- goToList
796
- } = useGpsToolsStore((state) => state.geofenceActions);
797
- return /* @__PURE__ */ jsxs(Actions, {
798
- children: [/* @__PURE__ */ jsx(HelperError, {
799
- name: "geometry"
800
- }), /* @__PURE__ */ jsx(Button, {
801
- onClick: () => {
802
- goToList();
803
- },
804
- disabled: inEdition,
805
- children: "Cancelar"
806
- }), /* @__PURE__ */ jsx(ActionFormIntro, {
807
- disabled: inEdition
808
- })]
809
- });
810
- }
811
- const STROKE_COLOR_DEFAULT = "#aaccaa";
812
- const STROKE_OPACITY_DEFAULT = { value: 1, label: "100%" };
813
- const STROKE_WHEIGTH_DEFAULT = { value: 1, label: "1 px" };
814
- const STROKE_DASH_ARRAY_DEFAULT = { value: "", label: "-----" };
815
- const FILL_COLOR_DEFAULT = "#aa3000";
816
- const FILL_OPACITY_DEFAULT = { value: 0.2, label: "20%" };
817
- const initialValues = {
818
- name: "",
819
- geofenceType: null,
820
- alias: null,
821
- customerId: null,
822
- timeMinInSeconds: 5,
823
- timeMinOutSeconds: 5,
824
- inEdition: false,
825
- geometry: null,
826
- lat: null,
827
- lng: null,
828
- properties: {
829
- radius: null,
830
- strokeColor: STROKE_COLOR_DEFAULT,
831
- strokeOpacity: STROKE_OPACITY_DEFAULT,
832
- strokeWeight: STROKE_WHEIGTH_DEFAULT,
833
- strokeDashArray: STROKE_DASH_ARRAY_DEFAULT,
834
- fillColor: FILL_COLOR_DEFAULT,
835
- fillOpacity: FILL_OPACITY_DEFAULT
836
- }
837
- };
838
- const formatDataEnpoint = (response) => {
839
- try {
840
- const { data } = response;
841
- const obRet = {
842
- ...initialValues,
843
- inEdition: false,
844
- name: data.name,
845
- geometry: data.geometry,
846
- geofenceType: { id: data.type.id, name: data.type.name, url: "" },
847
- properties: {
848
- strokeColor: data.properties.strokeColor || STROKE_COLOR_DEFAULT,
849
- strokeOpacity: data.properties.strokeOpacity || STROKE_OPACITY_DEFAULT,
850
- strokeWeight: data.properties.strokeWeight || STROKE_WHEIGTH_DEFAULT,
851
- strokeDashArray: data.properties.strokeDashArray || STROKE_DASH_ARRAY_DEFAULT,
852
- fillColor: data.properties.fillColor || FILL_COLOR_DEFAULT,
853
- fillOpacity: data.properties.fillOpacity || FILL_OPACITY_DEFAULT
854
- }
855
- };
856
- if (obRet.geofenceType?.id === "gt_circle") {
857
- if (data.properties.radius) {
858
- obRet.properties.radius = data.properties.radius;
859
- }
860
- if (data.geometry && data.geometry.type === "Point") {
861
- obRet.lng = data.geometry.coordinates[0];
862
- obRet.lat = data.geometry.coordinates[1];
863
- }
864
- }
865
- return obRet;
866
- } catch (error) {
867
- return { ...initialValues };
868
- }
869
- };
870
- const getLayerFromGeometry = (geometry, geofenceTypeId, radius) => {
871
- if (geometry) {
872
- if (geofenceTypeId === "gt_circle" && geometry.type === "Point") {
873
- return L.circle([geometry.coordinates[1], geometry.coordinates[0]], radius || 0);
874
- } else if (geofenceTypeId === "gt_polygon" && geometry.type === "Polygon") {
875
- const coordinates = geometry.coordinates.map(
876
- (ring) => ring.map((position) => [position[1], position[0]])
877
- );
878
- return L.polygon(coordinates);
879
- } else if (geofenceTypeId === "gt_rectangle" && geometry.type === "Polygon") {
880
- const latLngs = geometry.coordinates[0].map((coord) => [coord[1], coord[0]]);
881
- const lats = latLngs.map((coord) => coord);
882
- const lngs = latLngs.map((coord) => coord);
883
- const southWest = [Math.min(...lats), Math.min(...lngs)];
884
- const northEast = [Math.max(...lats), Math.max(...lngs)];
885
- return L.rectangle([southWest, northEast]);
886
- }
887
- }
888
- return null;
889
- };
890
- function useDrawing() {
891
- const { getLabel } = useModuleDictionary();
892
- const readyToUpdate = useFormReadyForUpdate();
893
- const map = useMap();
894
- const { control, setValue } = useFormContext();
895
- const fieldsWatch = useWatch({
896
- control,
897
- name: [
898
- "geofenceType",
899
- "inEdition",
900
- "properties.strokeColor",
901
- "properties.strokeOpacity",
902
- "properties.strokeWeight",
903
- "properties.strokeDashArray",
904
- "properties.fillColor",
905
- "properties.fillOpacity",
906
- "geometry",
907
- "properties.radius"
908
- ]
909
- });
910
- const geofenceTypeId = fieldsWatch[0]?.id;
911
- const inEdition = fieldsWatch[1];
912
- const strokeColor = fieldsWatch[2];
913
- const strokeOpacity = fieldsWatch[3].value;
914
- const strokeWeight = fieldsWatch[4].value;
915
- const strokeDashArray = fieldsWatch[5].value;
916
- const fillColor = fieldsWatch[6];
917
- const fillOpacity = fieldsWatch[7].value;
918
- const geometry = fieldsWatch[8];
919
- const radius = fieldsWatch[9];
920
- const [drawing, setDrawing] = useState(false);
921
- const currentLayer = useRef(null);
922
- const [geometrTypeIdCached, setgeofenceTypeIdCached] = useState(geofenceTypeId);
923
- useEffect(() => {
924
- if (geometry) {
925
- currentLayer.current = getLayerFromGeometry(geometry, geofenceTypeId, radius);
926
- if (currentLayer.current) {
927
- map.addLayer(currentLayer.current);
928
- }
929
- }
930
- return () => {
931
- if (currentLayer.current) {
932
- currentLayer.current.remove();
933
- }
934
- };
935
- }, [map]);
936
- useEffect(() => {
937
- if (currentLayer.current) {
938
- currentLayer.current.setStyle({
939
- color: strokeColor,
940
- opacity: strokeOpacity,
941
- weight: strokeWeight,
942
- dashArray: strokeDashArray,
943
- fillColor,
944
- fillOpacity
945
- });
946
- }
947
- }, [strokeColor, strokeOpacity, strokeWeight, strokeDashArray, fillColor, fillOpacity]);
948
- useEffect(() => {
949
- map.pm.setLang("en", {
950
- tooltips: {
951
- placeMarker: void 0,
952
- firstVertex: getLabel(DICCTIONARY.LABEL_FIRST_VERTEX),
953
- continueLine: getLabel(DICCTIONARY.LABEL_CONTINUE_LINE),
954
- finishLine: getLabel(DICCTIONARY.LABEL_FINISH_LINE),
955
- finishPoly: getLabel(DICCTIONARY.LABEL_FINISH_POLY),
956
- finishRect: getLabel(DICCTIONARY.LABEL_FINISH_RECT),
957
- startCircle: getLabel(DICCTIONARY.LABEL_START_CIRCLE),
958
- finishCircle: getLabel(DICCTIONARY.LABEL_FINISH_CIRCLE),
959
- placeCircleMarker: getLabel(DICCTIONARY.LABEL_PLACE_CIRCLE_MARKER)
960
- }
961
- });
962
- }, [map, getLabel]);
963
- useEffect(() => {
964
- if (map) {
965
- let shape = "Circle";
966
- if (geometrTypeIdCached === "gt_polygon") {
967
- shape = "Polygon";
968
- } else if (geometrTypeIdCached === "gt_rectangle") {
969
- shape = "Rectangle";
970
- }
971
- if (drawing) {
972
- if (!currentLayer.current) {
973
- setValue("inEdition", true);
974
- if (shape === "Circle") {
975
- map.on("pm:drawstart", ({ workingLayer }) => {
976
- workingLayer.on("pm:centerplaced", (e) => {
977
- var layer = e.workingLayer;
978
- layer.setStyle(
979
- {
980
- color: strokeColor,
981
- opacity: strokeOpacity,
982
- weight: strokeWeight,
983
- dashArray: strokeDashArray,
984
- fillColor,
985
- fillOpacity
986
- }
987
- );
988
- setValue("lat", layer.getLatLng().lat);
989
- setValue("lng", layer.getLatLng().lng);
990
- layer.on("pm:change", (_e) => {
991
- setValue("properties.radius", layer.getRadius());
992
- });
993
- });
994
- });
995
- setValue("properties.subType", shape);
996
- } else if (shape === "Polygon") {
997
- map.on("pm:drawstart", ({ workingLayer }) => {
998
- workingLayer.on("pm:vertexadded", (e) => {
999
- var layer = e.workingLayer;
1000
- layer.setStyle(
1001
- {
1002
- color: strokeColor,
1003
- opacity: strokeOpacity,
1004
- weight: strokeWeight,
1005
- dashArray: strokeDashArray,
1006
- fillColor,
1007
- fillOpacity
1008
- }
1009
- );
1010
- });
1011
- });
1012
- }
1013
- map.pm.enableDraw(shape);
1014
- map.pm.setPathOptions(
1015
- {
1016
- color: strokeColor,
1017
- opacity: strokeOpacity,
1018
- weight: strokeWeight,
1019
- dashArray: strokeDashArray,
1020
- fillColor,
1021
- fillOpacity
1022
- }
1023
- );
1024
- map.on("pm:create", (e) => {
1025
- currentLayer.current = e.layer;
1026
- setValue("geometry", currentLayer.current.toGeoJSON()?.geometry, {
1027
- shouldTouch: false,
1028
- shouldValidate: true
1029
- });
1030
- setValue("inEdition", false);
1031
- setDrawing(false);
1032
- });
1033
- } else {
1034
- currentLayer.current.pm.enable();
1035
- setValue("inEdition", true);
1036
- currentLayer.current.on("pm:disable", (e) => {
1037
- currentLayer.current = e.layer;
1038
- console.log("Geometr\xEDa editada **", currentLayer.current.toGeoJSON());
1039
- setValue("geometry", currentLayer.current.toGeoJSON()?.geometry, {
1040
- shouldTouch: false,
1041
- shouldValidate: true
1042
- });
1043
- setValue("inEdition", false);
1044
- setDrawing(false);
1045
- });
1046
- if (shape === "Circle") {
1047
- currentLayer.current.on("pm:change", (e) => {
1048
- currentLayer.current = e.layer;
1049
- setValue("properties.radius", currentLayer.current.getRadius());
1050
- });
1051
- }
1052
- }
1053
- } else {
1054
- map.pm.disableDraw("Polygon");
1055
- map.off("pm:create");
1056
- map.off("pm:edit");
1057
- map.off("pm:drawstart");
1058
- }
1059
- }
1060
- }, [map, drawing]);
1061
- const handleDraw = useCallback(() => {
1062
- setDrawing(true);
1063
- }, []);
1064
- const handleFinish = useCallback(() => {
1065
- if (currentLayer.current) {
1066
- currentLayer.current.pm.disable();
1067
- currentLayer.current.setStyle({ color: "#ff0000", fillColor: "#ff0000" });
1068
- }
1069
- }, []);
1070
- useEffect(() => {
1071
- if (!readyToUpdate)
1072
- return;
1073
- if (geofenceTypeId) {
1074
- if (geofenceTypeId !== geometrTypeIdCached) {
1075
- setgeofenceTypeIdCached(geofenceTypeId);
1076
- if (geometrTypeIdCached !== "gt_circle") {
1077
- setValue("properties.radius", null);
1078
- setValue("lat", null);
1079
- setValue("lng", null);
1080
- }
1081
- setValue("geometry", null);
1082
- if (currentLayer.current) {
1083
- currentLayer.current.remove();
1084
- currentLayer.current = null;
1085
- }
1086
- }
1087
- }
1088
- }, [geofenceTypeId]);
1089
- return { inEdition, handleDraw, handleFinish, geometrTypeIdCached };
1090
- }
1091
- function useSumbitErrorsFocus() {
1092
- const {
1093
- setFocus,
1094
- formState: { isSubmitted, errors }
1095
- } = useFormContext();
1096
- const { handleChange } = useTab();
1097
- useEffect(() => {
1098
- if (isSubmitted) {
1099
- const firstError = Object.keys(errors).reduce((field, a) => {
1100
- const fieldKey = field;
1101
- return !!errors[fieldKey] ? fieldKey : a;
1102
- }, null);
1103
- if (firstError) {
1104
- let found = ["name", "geometry", "geofenceType", "timeMinInSeconds", "timeMinOutSeconds"].some((field) => field.includes(firstError));
1105
- if (found) {
1106
- handleChange(null, "general");
1107
- }
1108
- if (firstError) {
1109
- setFocus(firstError);
1110
- }
1111
- }
1112
- }
1113
- }, [isSubmitted, errors]);
1114
- }
1115
- function GeneralData() {
1116
- const {
1117
- getLabel
1118
- } = useModuleDictionary();
1119
- const {
1120
- host_static_assets,
1121
- environment_assets
1122
- } = useEnvironment();
1123
- const {
1124
- inEdition,
1125
- handleDraw,
1126
- handleFinish,
1127
- geometrTypeIdCached
1128
- } = useDrawing();
1129
- useSumbitErrorsFocus();
1130
- const urlIcon = `${host_static_assets}/${environment_assets}/frontend/domain/components/map/assets/icons/${icons.GENERAL}`;
1131
- const geofencesTypes = useMemo(() => {
1132
- return [{
1133
- id: "gt_circle",
1134
- name: getLabel(DICCTIONARY.LABEL_GEOMETRY_CIRCLE),
1135
- url: `${host_static_assets}/${environment_assets}/frontend/domain/components/map/assets/icons/${icons.GEOMETRY_CIRCLE}`
1136
- }, {
1137
- id: "gt_polygon",
1138
- name: getLabel(DICCTIONARY.LABEL_GEOMETRY_POLYGON),
1139
- url: `${host_static_assets}/${environment_assets}/frontend/domain/components/map/assets/icons/${icons.GEOMETRY_POLYGON}`
1140
- }, {
1141
- id: "gt_rectangle",
1142
- name: getLabel(DICCTIONARY.LABEL_GEOMETRY_RECTANGLE),
1143
- url: `${host_static_assets}/${environment_assets}/frontend/domain/components/map/assets/icons/${icons.GEOMETRY_RECTANGLE}`
1144
- }];
1145
- }, [getLabel]);
1146
- return /* @__PURE__ */ jsxs(PaperForm, {
1147
- urlIcon,
1148
- title: getLabel(DICCTIONARY.PAPER_GENERAL),
1149
- children: [/* @__PURE__ */ jsx(RHFTextField, {
1150
- name: "name",
1151
- disabled: false,
1152
- type: "text",
1153
- label: getLabel(`${DICCTIONARY.LABEL_NAME}`)
1154
- }), /* @__PURE__ */ jsxs(Stack, {
1155
- direction: "column",
1156
- spacing: 1,
1157
- alignItems: "center",
1158
- children: [/* @__PURE__ */ jsxs(Stack, {
1159
- direction: "row",
1160
- spacing: 1,
1161
- alignItems: "center",
1162
- children: [/* @__PURE__ */ jsx(RHFAutocomplete, {
1163
- name: "geofenceType",
1164
- autoComplete: "off",
1165
- options: geofencesTypes,
1166
- getOptionLabel: (option) => option.name,
1167
- isOptionEqualToValue: (option, value) => option.id === value.id,
1168
- getOptionUrlImage: (option) => option.url,
1169
- imageHeight: "12px",
1170
- imageWidth: "12px",
1171
- label: getLabel(DICCTIONARY.LABEL_GEOMETRY_TYPE)
1172
- }), /* @__PURE__ */ jsx(Button, {
1173
- onClick: handleDraw,
1174
- disabled: inEdition || !geometrTypeIdCached,
1175
- children: getLabel(DICCTIONARY.LABEL_DRAW)
1176
- }), /* @__PURE__ */ jsx(Button, {
1177
- onClick: handleFinish,
1178
- disabled: !inEdition,
1179
- children: getLabel(DICCTIONARY.LABEL_FINISH)
1180
- })]
1181
- }), geometrTypeIdCached && geometrTypeIdCached === "gt_circle" && /* @__PURE__ */ jsxs(Stack, {
1182
- direction: "row",
1183
- spacing: 1,
1184
- alignItems: "center",
1185
- children: [/* @__PURE__ */ jsx(RHFTextField, {
1186
- name: "properties.radius",
1187
- label: getLabel(DICCTIONARY.LABEL_RADIUS),
1188
- autoComplete: "on",
1189
- skeletonWidth: "70%",
1190
- skeletonHeight: "18px",
1191
- disabled: true,
1192
- size: "medium"
1193
- }), /* @__PURE__ */ jsx(RHFTextField, {
1194
- name: "lat",
1195
- label: getLabel(DICCTIONARY.LABEL_LAT),
1196
- autoComplete: "on",
1197
- skeletonWidth: "70%",
1198
- skeletonHeight: "18px",
1199
- disabled: true,
1200
- size: "medium"
1201
- }), /* @__PURE__ */ jsx(RHFTextField, {
1202
- name: "lng",
1203
- label: getLabel(DICCTIONARY.LABEL_LON),
1204
- autoComplete: "on",
1205
- skeletonWidth: "70%",
1206
- skeletonHeight: "18px",
1207
- disabled: true,
1208
- size: "medium"
1209
- })]
1210
- })]
1211
- })]
1212
- });
1213
- }
1214
- function ConfigData() {
1215
- const {
1216
- getLabel
1217
- } = useModuleDictionary();
1218
- const {
1219
- host_static_assets,
1220
- environment_assets
1221
- } = useEnvironment();
1222
- const urlIcon = `${host_static_assets}/${environment_assets}/frontend/domain/components/map/assets/icons/${icons.CONFIG}`;
1223
- return /* @__PURE__ */ jsxs(PaperForm, {
1224
- urlIcon,
1225
- title: getLabel(DICCTIONARY.PAPER_CONFIG),
1226
- children: [/* @__PURE__ */ jsx(RHFTextField, {
1227
- name: "alias",
1228
- disabled: false,
1229
- type: "text",
1230
- label: getLabel(`${DICCTIONARY.LABEL_ALIAS}`)
1231
- }), /* @__PURE__ */ jsx(RHFTextField, {
1232
- name: "customerId",
1233
- disabled: false,
1234
- type: "text",
1235
- label: getLabel(`${DICCTIONARY.LABEL_CUSTOMER_ID}`)
1236
- }), /* @__PURE__ */ jsx(RHFTextField, {
1237
- name: "timeMinInSeconds",
1238
- disabled: false,
1239
- type: "number",
1240
- label: getLabel(`${DICCTIONARY.LABEL_TIME_MIN_IN_SECONDS}`)
1241
- }), /* @__PURE__ */ jsx(RHFTextField, {
1242
- name: "timeMinOutSeconds",
1243
- disabled: false,
1244
- type: "number",
1245
- label: getLabel(`${DICCTIONARY.LABEL_TIME_MIN_OUT_SECONDS}`)
1246
- })]
1247
- });
1248
- }
1249
- function FillData() {
1250
- const {
1251
- getLabel
1252
- } = useModuleDictionary();
1253
- const {
1254
- host_static_assets,
1255
- environment_assets
1256
- } = useEnvironment();
1257
- const urlIcon = `${host_static_assets}/${environment_assets}/frontend/domain/components/map/assets/icons/${icons.FILL}`;
1258
- return /* @__PURE__ */ jsxs(PaperForm, {
1259
- urlIcon,
1260
- title: getLabel(DICCTIONARY.PAPER_STROKE),
1261
- children: [/* @__PURE__ */ jsx(PropertyValue, {
1262
- property: getLabel(`${DICCTIONARY.LABEL_COLOR}`),
1263
- isForm: true,
1264
- propertyWidth: 150,
1265
- value: /* @__PURE__ */ jsx(RHFColorPicker, {
1266
- name: "properties.fillColor"
1267
- })
1268
- }, "properties.fillColor"), /* @__PURE__ */ jsx(PropertyValue, {
1269
- property: getLabel(`${DICCTIONARY.LABEL_OPACITY}`),
1270
- isForm: true,
1271
- propertyWidth: 150,
1272
- value: /* @__PURE__ */ jsx(RHFAutocomplete, {
1273
- name: "properties.fillOpacity",
1274
- autoComplete: "off",
1275
- options: STYLE_OPACITIES,
1276
- getOptionLabel: (option) => option.label,
1277
- isOptionEqualToValue: (option, value) => option.value === value.value,
1278
- label: "ssss"
1279
- })
1280
- }, "properties.fillOpacity")]
1281
- });
1282
- }
1283
- function StrokeData() {
1284
- const {
1285
- getLabel
1286
- } = useModuleDictionary();
1287
- const {
1288
- host_static_assets,
1289
- environment_assets
1290
- } = useEnvironment();
1291
- const urlIcon = `${host_static_assets}/${environment_assets}/frontend/domain/components/map/assets/icons/${icons.STROKE}`;
1292
- return /* @__PURE__ */ jsxs(PaperForm, {
1293
- urlIcon,
1294
- title: getLabel(DICCTIONARY.PAPER_STROKE),
1295
- children: [/* @__PURE__ */ jsx(PropertyValue, {
1296
- property: getLabel(`${DICCTIONARY.LABEL_COLOR}`),
1297
- isForm: true,
1298
- propertyWidth: 150,
1299
- value: /* @__PURE__ */ jsx(RHFColorPicker, {
1300
- name: "properties.strokeColor"
1301
- })
1302
- }, "properties.strokeColor"), /* @__PURE__ */ jsx(PropertyValue, {
1303
- property: getLabel(`${DICCTIONARY.LABEL_OPACITY}`),
1304
- isForm: true,
1305
- propertyWidth: 150,
1306
- value: /* @__PURE__ */ jsx(RHFAutocomplete, {
1307
- name: "properties.strokeOpacity",
1308
- autoComplete: "off",
1309
- options: STYLE_OPACITIES,
1310
- getOptionLabel: (option) => option.label,
1311
- isOptionEqualToValue: (option, value) => option.value === value.value,
1312
- label: "ssss"
1313
- })
1314
- }, "properties.strokeOpacity"), /* @__PURE__ */ jsx(PropertyValue, {
1315
- property: getLabel(`${DICCTIONARY.LABEL_WEIGHT}`),
1316
- isForm: true,
1317
- propertyWidth: 150,
1318
- value: /* @__PURE__ */ jsx(RHFAutocomplete, {
1319
- name: "properties.strokeWeight",
1320
- autoComplete: "off",
1321
- options: STYLE_WHEIGHTS,
1322
- getOptionLabel: (option) => option.label,
1323
- isOptionEqualToValue: (option, value) => option.value === value.value,
1324
- label: "ssss"
1325
- })
1326
- }, "properties.strokeWeight"), /* @__PURE__ */ jsx(PropertyValue, {
1327
- property: getLabel(`${DICCTIONARY.LABEL_DASH_ARRAY}`),
1328
- isForm: true,
1329
- propertyWidth: 150,
1330
- value: /* @__PURE__ */ jsx(RHFAutocomplete, {
1331
- name: "properties.strokeDashArray",
1332
- autoComplete: "off",
1333
- options: STYLE_PATTERNS,
1334
- getOptionLabel: (option) => option.label,
1335
- isOptionEqualToValue: (option, value) => option.value === value.value,
1336
- label: "ssss"
1337
- })
1338
- }, "properties.strokeDashArray")]
1339
- });
1340
- }
1341
- function StyleData() {
1342
- return /* @__PURE__ */ jsxs(Fragment, {
1343
- children: [/* @__PURE__ */ jsx(StrokeData, {}), /* @__PURE__ */ jsx(FillData, {})]
1344
- });
1345
- }
1346
- function MyTabs() {
1347
- const {
1348
- getLabel
1349
- } = useModuleDictionary();
1350
- const {
1351
- currentTab,
1352
- handleChange
1353
- } = useTab();
1354
- const geofenceAddEditTabs = useMemo(() => {
1355
- return [{
1356
- value: "general",
1357
- icon: void 0,
1358
- components: /* @__PURE__ */ jsxs(Fragment, {
1359
- children: [/* @__PURE__ */ jsx(GeneralData, {}), /* @__PURE__ */ jsx(ConfigData, {})]
1360
- }),
1361
- toolTip: getLabel(DICCTIONARY.TAB_GENERAL_CONFIG_TOOLTIP),
1362
- className: mapToolsClasses.toolGeofencesAddEditGeneral
1363
- }, {
1364
- value: "style",
1365
- icon: void 0,
1366
- components: /* @__PURE__ */ jsx(StyleData, {}),
1367
- toolTip: getLabel(DICCTIONARY.TAB_STYLE_CONFIG_TOOLTIP),
1368
- className: mapToolsClasses.toolGeofencesAddEditStyle
1369
- }];
1370
- }, [getLabel]);
1371
- console.log("MyTabs", currentTab);
1372
- return /* @__PURE__ */ jsxs(Stack, {
1373
- direction: "column",
1374
- children: [/* @__PURE__ */ jsx(Tabs, {
1375
- value: currentTab,
1376
- scrollButtons: "auto",
1377
- variant: "scrollable",
1378
- allowScrollButtonsMobile: true,
1379
- onChange: (_e, newValue) => handleChange(_e, newValue),
1380
- children: geofenceAddEditTabs.map((tab) => /* @__PURE__ */ jsx(Tab, {
1381
- value: tab.value,
1382
- icon: tab.icon,
1383
- label: /* @__PURE__ */ jsx(Tooltip, {
1384
- title: tab.toolTip,
1385
- children: /* @__PURE__ */ jsx("span", {
1386
- children: tab.toolTip
1387
- })
1388
- }),
1389
- SKTWidth: "100px",
1390
- SKTHeight: "14px"
1391
- }, tab.value))
1392
- }), geofenceAddEditTabs.map((tab) => {
1393
- const isMatched = tab.value === currentTab;
1394
- return /* @__PURE__ */ jsx(TabContent, {
1395
- className: clsx(mapToolsClasses.tabContentRoot, tab.className, isMatched ? mapToolsClasses.visible : mapToolsClasses.hidden),
1396
- children: tab.components
1397
- }, tab.value);
1398
- })]
1399
- });
1400
- }
1401
- function GeneralDataValidation(getLabel) {
1402
- return {
1403
- name: Yup.string().required(getLabel(DICCTIONARY.VALIDATION_FIELD_REQUIRED)),
1404
- geometry: Yup.object().nullable().required(getLabel(DICCTIONARY.VALIDATION_GEOMETRY_REQUIRED)),
1405
- geofenceType: Yup.object().nullable().required(getLabel(DICCTIONARY.VALIDATION_FIELD_REQUIRED))
1406
- };
1407
- }
1408
- function ConfigDataValidation(getLabel) {
1409
- return {
1410
- timeMinInSeconds: Yup.number().required(getLabel(DICCTIONARY.VALIDATION_FIELD_REQUIRED)).typeError(getLabel(DICCTIONARY.VALIDATION_FIELD_TYPE_NUMBER_ERROR)),
1411
- timeMinOutSeconds: Yup.number().required(getLabel(DICCTIONARY.VALIDATION_FIELD_REQUIRED)).typeError(getLabel(DICCTIONARY.VALIDATION_FIELD_TYPE_NUMBER_ERROR))
1412
- };
1413
- }
1414
- function useValidation$1() {
1415
- const { getLabel } = useModuleDictionary();
1416
- const validationSchema = useMemo(
1417
- () => Yup.object().shape({
1418
- ...GeneralDataValidation(getLabel),
1419
- ...ConfigDataValidation(getLabel)
1420
- }),
1421
- [getLabel]
1422
- );
1423
- return { validationSchema };
1424
- }
1425
- const getSummitData = (values, geofenceId) => {
1426
- const newEditObj = {
1427
- name: values.name,
1428
- typeId: values.geofenceType.id,
1429
- geometry: values.geometry,
1430
- properties: {
1431
- strokeColor: values.properties.fillColor,
1432
- strokeOpacity: values.properties.strokeOpacity.value,
1433
- strokeWeight: values.properties.strokeWeight.value,
1434
- strokeDashArray: values.properties.strokeDashArray.value,
1435
- fillColor: values.properties.fillColor,
1436
- fillOpacity: values.properties.fillOpacity.value
1437
- },
1438
- timeMinInSeconds: values.timeMinInSeconds,
1439
- timeMinOutSeconds: values.timeMinOutSeconds,
1440
- alias: values.alias,
1441
- customerId: values.customerId,
1442
- ...geofenceId ? { geofenceId } : {}
1443
- };
1444
- if (values.geofenceType.id === "gt_circle") {
1445
- newEditObj.properties.radius = values.properties.radius;
1446
- }
1447
- return newEditObj;
1448
- };
1449
- function useSubmit(props) {
1450
- const { objectId } = props;
1451
- const { toast } = useHostTools();
1452
- const { goToList } = useGpsToolsStore((state) => state.geofenceActions);
1453
- const { networkOperation } = useNetwork();
1454
- const onSubmit = async (data) => {
1455
- await networkOperation({
1456
- method: objectId ? "PUT" : "POST",
1457
- endPoint: `${ENDPOINT_GEOFENCE_NEW_EDIT}${objectId ? `/${objectId}` : ""}`,
1458
- data: getSummitData(data, objectId),
1459
- toastError: true,
1460
- toastSuccess: false,
1461
- bodyToSnakeCase: true,
1462
- isRemote: false
1463
- }).then((response) => {
1464
- toast(
1465
- response.message,
1466
- { type: "success" }
1467
- );
1468
- goToList();
1469
- }).catch(() => {
1470
- });
1471
- };
1472
- return { onSubmit };
1473
- }
1474
- function GeofenceAddEdit() {
1475
- const [geofenceId, finalInitalValues, omitCallEnpoint] = useGpsToolsStore((state) => {
1476
- if (state.geofenceState.geofenceId === void 0) {
1477
- return [void 0, initialValues, false];
1478
- }
1479
- const geofence = state.geofenceState.hashGeofences[state.geofenceState.geofenceId];
1480
- if (geofence?.geometry) {
1481
- const emulateResponse = {
1482
- data: {
1483
- type: geofence.type,
1484
- name: geofence.name,
1485
- id: geofence.id,
1486
- active: false,
1487
- geometry: geofence.geometry,
1488
- properties: geofence.properties,
1489
- countCrossingFeatures: geofence.countCrossingFeatures,
1490
- countInternalFeatures: geofence.countInternalFeatures,
1491
- createdAt: geofence.createdAt,
1492
- updatedAt: geofence.updatedAt,
1493
- timeMinInSeconds: geofence.timeMinInSeconds,
1494
- timeMinOutSeconds: geofence.timeMinOutSeconds,
1495
- alias: geofence.alias,
1496
- customerId: geofence.customerId
1497
- }
1498
- };
1499
- return [state.geofenceState.geofenceId, formatDataEnpoint(emulateResponse), true];
1500
- } else {
1501
- return [state.geofenceState.geofenceId, initialValues, false];
1502
- }
1503
- });
1504
- const {
1505
- formValues,
1506
- statusLoad
1507
- } = useFormAddEdit({
1508
- objectId: geofenceId,
1509
- formatDataEnpoint,
1510
- initialValues: finalInitalValues,
1511
- endPoint: ENDPOINT_GEOFENCE_GET,
1512
- isRemote: false,
1513
- omitCallEnpoint
1514
- });
1515
- const {
1516
- validationSchema
1517
- } = useValidation$1();
1518
- const {
1519
- onSubmit
1520
- } = useSubmit({
1521
- objectId: geofenceId
1522
- });
1523
- return /* @__PURE__ */ jsxs(RHFormProvider, {
1524
- statusLoad,
1525
- onSubmit,
1526
- values: formValues,
1527
- validationSchema,
1528
- className: mapToolsClasses.toolGeofencesAddEditGeneral,
1529
- children: [/* @__PURE__ */ jsx(Stack, {
1530
- direction: "column",
1531
- children: /* @__PURE__ */ jsx(TabProvider, {
1532
- initialValue: "general",
1533
- children: /* @__PURE__ */ jsx(MyTabs, {})
1534
- })
1535
- }), /* @__PURE__ */ jsx(MyActions$1, {})]
1536
- });
1537
- }
1538
- function GeofencesTool() {
1539
- const currentGeofenceTool = useGpsToolsStore((state) => state.geofenceState.currentGeofenceTool, shallow);
1540
- return /* @__PURE__ */ jsxs(Stack, {
1541
- direction: "column",
1542
- gap: "4px",
1543
- className: mapToolsClasses.toolGeofences,
1544
- children: [currentGeofenceTool === "list" && /* @__PURE__ */ jsx(GeofencesList, {}), currentGeofenceTool === "add_edit" && /* @__PURE__ */ jsx(GeofenceAddEdit, {})]
1545
- });
1546
- }
1547
- function MyActions() {
1548
- const {
1549
- control,
1550
- setValue
1551
- } = useFormContext();
1552
- const {
1553
- getLabel
1554
- } = useModuleDictionary();
1555
- const fieldsWatch = useWatch({
1556
- control,
1557
- name: ["statusEdition", "reInits"]
1558
- });
1559
- const statusEdition = fieldsWatch[0];
1560
- const reInits = fieldsWatch[1];
1561
- const initDraw = () => {
1562
- if (statusEdition === "initial") {
1563
- setValue("statusEdition", "draw");
1564
- } else if (statusEdition === "draw") {
1565
- setValue("reInits", reInits + 1);
1566
- }
1567
- };
1568
- return /* @__PURE__ */ jsx(Actions, {
1569
- children: /* @__PURE__ */ jsx(Button, {
1570
- onClick: initDraw,
1571
- children: statusEdition === "initial" ? getLabel(DICCTIONARY.LABEL_MEASURE_START) : getLabel(DICCTIONARY.LABEL_MEASURE_RESTART)
1572
- })
1573
- });
1574
- }
1575
- function MeasureDataValidation(_getLabel) {
1576
- return {};
1577
- }
1578
- function useValidation() {
1579
- const { getLabel } = useModuleDictionary();
1580
- const validationSchema = useMemo(
1581
- () => Yup.object().shape({
1582
- ...MeasureDataValidation()
1583
- }),
1584
- [getLabel]
1585
- );
1586
- return { validationSchema };
1587
- }
1588
- const INITIAL_FORM_VALUES = {
1589
- statusLoad: "ready",
1590
- reInits: 0,
1591
- value: "0",
1592
- measureTypeId: "distance",
1593
- magnitudFactor: { id: "m_kilometers", name: "Kilometers", symbol: "k", factor_x0: 0, factor_x1: 1, factor_x2: 0 },
1594
- unitArea: null,
1595
- statusEdition: "initial"
1596
- };
1597
- const STYLE_MEASURE_OPTIONS = {
1598
- strokeLineColor: "#1E96DC",
1599
- strokeLineWeight: 5,
1600
- markerHeight: 37,
1601
- markerWidth: 26,
1602
- labelMarkerHeight: 0,
1603
- labelMarkerWidth: 0,
1604
- labelMarkerAnchorY: 0,
1605
- labelMarkerAnchorX: 0
1606
- };
1607
- function useMeasure() {
1608
- const { getLabel } = useModuleDictionary();
1609
- const readyToUpdate = useFormReadyForUpdate();
1610
- const map = useMap();
1611
- const { control, setValue } = useFormContext();
1612
- const fieldsWatch = useWatch({
1613
- control,
1614
- name: [
1615
- "statusEdition",
1616
- "value",
1617
- "magnitudFactor",
1618
- "reInits"
1619
- ]
1620
- });
1621
- const statusEdition = fieldsWatch[0];
1622
- const value = fieldsWatch[1];
1623
- const magnitudFactor = fieldsWatch[2];
1624
- const reInits = fieldsWatch[3];
1625
- const [magnitudFactorCached, setMagnitudFactorCached] = useState(magnitudFactor);
1626
- const currentMeasure = useRef({ measurePoints: [], addMarker: false, magnitudFactor, dragging: false });
1627
- const clearMeasure = useCallback(() => {
1628
- currentMeasure.current.measurePoints.forEach((measurePoint) => {
1629
- measurePoint.marker.remove();
1630
- measurePoint.labelMarker.remove();
1631
- });
1632
- currentMeasure.current.measurePoints = [];
1633
- setValue("value", measureDistante());
1634
- }, []);
1635
- const getFormatFactorDistance = useCallback((distance, withSymbol = false) => {
1636
- if (distance === void 0) {
1637
- return void 0;
1638
- }
1639
- const cMagnitudeFactor = currentMeasure.current.magnitudFactor;
1640
- return (cMagnitudeFactor.factor_x0 + distance * cMagnitudeFactor.factor_x1 + (distance ^ 2 * cMagnitudeFactor.factor_x2)).toFixed(2) + (withSymbol ? ` ${cMagnitudeFactor.symbol}` : "");
1641
- }, []);
1642
- const measureDistante = useCallback(() => {
1643
- var totalDistance = 0;
1644
- const measurePoints = currentMeasure.current.measurePoints;
1645
- if (currentMeasure.current.layerLine) {
1646
- if (measurePoints.length < 2) {
1647
- currentMeasure.current.layerLine.remove();
1648
- currentMeasure.current.layerLine = void 0;
1649
- } else {
1650
- currentMeasure.current.layerLine.setLatLngs(measurePoints.map((measurePoint) => measurePoint.marker.getLatLng()));
1651
- }
1652
- } else {
1653
- if (measurePoints.length > 1) {
1654
- currentMeasure.current.layerLine = L.polyline(
1655
- measurePoints.map((measurePoint) => measurePoint.marker.getLatLng()),
1656
- {
1657
- color: STYLE_MEASURE_OPTIONS.strokeLineColor,
1658
- weight: STYLE_MEASURE_OPTIONS.strokeLineWeight,
1659
- interactive: false
1660
- }
1661
- ).addTo(map);
1662
- }
1663
- }
1664
- for (let i = 0; i < measurePoints.length - 1; i++) {
1665
- totalDistance += measurePoints[i].marker.getLatLng().distanceTo(measurePoints[i + 1].marker.getLatLng());
1666
- }
1667
- if (measurePoints.length > 0 && measurePoints[0].formatDistanceFromPrevious !== void 0) {
1668
- measurePoints[0].formatDistanceFromPrevious = void 0;
1669
- }
1670
- for (let i = 1; i < measurePoints.length; i++) {
1671
- const formatDistanceFromPrevious = getFormatFactorDistance(measurePoints[i - 1].marker.getLatLng().distanceTo(measurePoints[i].marker.getLatLng()), true);
1672
- if (measurePoints[i].formatDistanceFromPrevious !== formatDistanceFromPrevious) {
1673
- measurePoints[i].formatDistanceFromPrevious = formatDistanceFromPrevious;
1674
- measurePoints[i].labelMarker.setIcon(getLabelMarkerPointIcon(formatDistanceFromPrevious));
1675
- addClickListenerForRemove(measurePoints[i].labelMarker);
1676
- }
1677
- }
1678
- return getFormatFactorDistance(totalDistance);
1679
- }, [map]);
1680
- const getMarkerPointIcon = useCallback((position) => {
1681
- return L.divIcon({
1682
- className: mapClasses.measureMarkerRoot,
1683
- html: `<div class="${mapClasses.measureMarkerContainer}">
1684
- <div class="${mapClasses.measureMarkerContainerRhomb}">
1685
- </div>
1686
- <div class="${mapClasses.measureMarkerContainerSlot}">
1687
- <div class="${mapClasses.measureMarkerContainerSlotNumber}">
1688
- ${position}
1689
- </div>
1690
- </div>
1691
- </div>
1692
- `,
1693
- iconSize: [STYLE_MEASURE_OPTIONS.markerWidth, STYLE_MEASURE_OPTIONS.markerHeight],
1694
- iconAnchor: [STYLE_MEASURE_OPTIONS.markerWidth / 2, STYLE_MEASURE_OPTIONS.markerHeight]
1695
- });
1696
- }, []);
1697
- const getLabelMarkerPointIcon = useCallback((distance) => {
1698
- return L.divIcon({
1699
- className: mapClasses.measureLabelMarkerRoot,
1700
- html: `<div class="${mapClasses.measureLabelMarkerContainer}">
1701
- ${distance ? `<span class="${mapClasses.measureLabelMarkerDistance}">${distance}</span>` : ""}
1702
- <div class="${mapClasses.measureLabelMarkerRemove}">${getLabel(DICCTIONARY.LABEL_MEASURE_REMOVE_POINT)}</div>
1703
- </div>`,
1704
- iconSize: [STYLE_MEASURE_OPTIONS.labelMarkerWidth, STYLE_MEASURE_OPTIONS.labelMarkerHeight],
1705
- iconAnchor: [STYLE_MEASURE_OPTIONS.labelMarkerAnchorX, STYLE_MEASURE_OPTIONS.labelMarkerAnchorY]
1706
- });
1707
- }, [getLabel]);
1708
- const onClickRemovePoint = useCallback((labelMarker) => {
1709
- return (e) => {
1710
- e.stopPropagation();
1711
- if (!currentMeasure.current.dragging) {
1712
- var markIndex = currentMeasure.current.measurePoints.findIndex((searchElement) => {
1713
- return searchElement.labelMarker === labelMarker;
1714
- });
1715
- if (markIndex !== -1) {
1716
- var measurePoint = currentMeasure.current.measurePoints[markIndex];
1717
- measurePoint.marker.remove();
1718
- measurePoint.labelMarker.remove();
1719
- currentMeasure.current.measurePoints.splice(markIndex, 1);
1720
- setValue("value", measureDistante());
1721
- currentMeasure.current.addMarker = true;
1722
- }
1723
- currentMeasure.current.measurePoints.forEach((measurePoint2, index) => {
1724
- measurePoint2.marker.setIcon(getMarkerPointIcon(index + 1));
1725
- });
1726
- }
1727
- };
1728
- }, []);
1729
- const addClickListenerForRemove = useCallback((labelMarker) => {
1730
- var element = labelMarker.getElement();
1731
- if (element) {
1732
- var elements = element.getElementsByClassName("M4L-MapTool-MeasureToolTip-Remove");
1733
- element = elements[0];
1734
- if (element) {
1735
- element.addEventListener("click", onClickRemovePoint(labelMarker));
1736
- }
1737
- }
1738
- }, []);
1739
- const onClickMap = useCallback((e) => {
1740
- var lat = e.latlng.lat;
1741
- var lng = e.latlng.lng;
1742
- var formatDistanceFromPrevious = void 0;
1743
- if (currentMeasure.current.addMarker === false) {
1744
- return;
1745
- }
1746
- if (currentMeasure.current.measurePoints.length > 0) {
1747
- formatDistanceFromPrevious = getFormatFactorDistance(currentMeasure.current.measurePoints[currentMeasure.current.measurePoints.length - 1].marker.getLatLng().distanceTo(e.latlng));
1748
- }
1749
- var marker = L.marker([lat, lng], {
1750
- draggable: true,
1751
- riseOnHover: true,
1752
- autoPan: true,
1753
- icon: getMarkerPointIcon(currentMeasure.current.measurePoints.length + 1),
1754
- zIndexOffset: MAP_ZINDEX_DEFAULT
1755
- }).addTo(map);
1756
- marker.on("moveend", function(_e) {
1757
- var latlng = marker.getLatLng();
1758
- labelMarker.setLatLng(latlng);
1759
- setValue("value", measureDistante());
1760
- });
1761
- marker.on("mouseover", function() {
1762
- currentMeasure.current.addMarker = false;
1763
- });
1764
- marker.on("mouseout", function() {
1765
- currentMeasure.current.addMarker = true;
1766
- });
1767
- var labelMarker = L.marker([lat, lng], {
1768
- draggable: true,
1769
- riseOnHover: true,
1770
- icon: getLabelMarkerPointIcon(formatDistanceFromPrevious),
1771
- zIndexOffset: MAP_ZINDEX_DEFAULT
1772
- }).addTo(map);
1773
- labelMarker.on("moveend", function(_e) {
1774
- var latlng = labelMarker.getLatLng();
1775
- marker.setLatLng(latlng);
1776
- setValue("value", measureDistante());
1777
- });
1778
- labelMarker.on("mouseover", function(_e) {
1779
- currentMeasure.current.addMarker = false;
1780
- });
1781
- labelMarker.on("mouseout", function(_e) {
1782
- currentMeasure.current.addMarker = true;
1783
- });
1784
- labelMarker.on("dragstart", function(_e) {
1785
- currentMeasure.current.dragging = true;
1786
- });
1787
- labelMarker.on("dragend", function(_e) {
1788
- setTimeout(function() {
1789
- currentMeasure.current.dragging = false;
1790
- }, 10);
1791
- });
1792
- addClickListenerForRemove(labelMarker);
1793
- currentMeasure.current.measurePoints.push({
1794
- marker,
1795
- labelMarker,
1796
- formatDistanceFromPrevious
1797
- });
1798
- setValue("value", measureDistante());
1799
- }, [map, measureDistante, setValue]);
1800
- const onMouseMoveMap = useCallback(() => {
1801
- map.getContainer().style.cursor = "crosshair";
1802
- }, [map]);
1803
- const onMouseOutMap = useCallback(() => {
1804
- map.getContainer().style.cursor = "default";
1805
- }, [map]);
1806
- useEffect(() => {
1807
- if (map) {
1808
- if (statusEdition === "initial") {
1809
- return;
1810
- } else {
1811
- currentMeasure.current.addMarker = true;
1812
- map.on("mousemove", onMouseMoveMap);
1813
- map.on("mouseout", onMouseOutMap);
1814
- map.on("click", onClickMap);
1815
- }
1816
- }
1817
- }, [map, statusEdition]);
1818
- useEffect(() => {
1819
- console.log("useEffect magnitudFactor", readyToUpdate, magnitudFactor);
1820
- if (!readyToUpdate)
1821
- return;
1822
- if (magnitudFactor.id !== magnitudFactorCached.id) {
1823
- console.log("useEffect magnitudFactor CAMBIO");
1824
- setMagnitudFactorCached({ ...magnitudFactor });
1825
- currentMeasure.current.magnitudFactor = magnitudFactor;
1826
- setValue("value", measureDistante());
1827
- }
1828
- }, [magnitudFactor]);
1829
- useEffect(() => {
1830
- console.log("useEffect reInits", readyToUpdate, reInits);
1831
- if (!readyToUpdate)
1832
- return;
1833
- clearMeasure();
1834
- }, [reInits]);
1835
- useEffect(() => {
1836
- return () => {
1837
- map.off("mousemove", onMouseMoveMap);
1838
- map.off("mouseout", onMouseOutMap);
1839
- map.off("click", onClickMap);
1840
- map.getContainer().style.cursor = "default";
1841
- clearMeasure();
1842
- console.debug("DESMONTAJES MARCAS Y EVENTOS");
1843
- };
1844
- }, []);
1845
- return { statusEdition, magnitudFactor, value };
1846
- }
1847
- let DevTool;
1848
- try {
1849
- DevTool = require("@hookform/devtools").DevTool;
1850
- } catch (error) {
1851
- DevTool = () => null;
1852
- }
1853
- function MeasureData() {
1854
- const {
1855
- getLabel
1856
- } = useModuleDictionary();
1857
- const {
1858
- host_static_assets,
1859
- environment_assets
1860
- } = useEnvironment();
1861
- const {
1862
- control
1863
- } = useFormContext();
1864
- const {
1865
- value,
1866
- magnitudFactor
1867
- } = useMeasure();
1868
- const urlIcon = `${host_static_assets}/${environment_assets}/frontend/domain/components/map/assets/icons/${icons.MEASURE}`;
1869
- return /* @__PURE__ */ jsxs(PaperForm, {
1870
- urlIcon,
1871
- title: getLabel(DICCTIONARY.PAPER_MEASURE),
1872
- children: [/* @__PURE__ */ jsx(RHFAutocompleteAsync, {
1873
- endPoint: "magnitudes/factors?origin_unit_reference_id=m_kilometers",
1874
- name: "magnitudFactor",
1875
- autoComplete: "off",
1876
- getOptionLabel: (option) => option.name,
1877
- isOptionEqualToValue: (option, value2) => option.id === value2.id,
1878
- label: getLabel(DICCTIONARY.LABEL_MEASURE_UNIT),
1879
- isRemote: false
1880
- }), /* @__PURE__ */ jsxs(Stack, {
1881
- direction: "row",
1882
- spacing: 2,
1883
- className: mapToolsClasses.toolMeasureFormValue,
1884
- children: [/* @__PURE__ */ jsx("span", {
1885
- className: mapToolsClasses.toolMeasureFormValueDistance,
1886
- children: value
1887
- }), /* @__PURE__ */ jsx("span", {
1888
- className: mapToolsClasses.toolMeasureFormValueSymbol,
1889
- children: magnitudFactor.symbol
1890
- })]
1891
- }), process.env.NODE_ENV === "development" && /* @__PURE__ */ jsx(DevTool, {
1892
- control
1893
- })]
1894
- });
1895
- }
1896
- function MeasureTool() {
1897
- const {
1898
- getLabel
1899
- } = useModuleDictionary();
1900
- const finalInitalValues = {
1901
- ...INITIAL_FORM_VALUES
1902
- };
1903
- if (finalInitalValues?.magnitudFactor?.name) {
1904
- finalInitalValues.magnitudFactor.name = getLabel(DICCTIONARY.LABEL_MEASURE_UNIT_BASE_KILOMETERS);
1905
- }
1906
- const {
1907
- validationSchema
1908
- } = useValidation();
1909
- const onSubmit = () => {
1910
- };
1911
- return /* @__PURE__ */ jsxs(RHFormProvider, {
1912
- statusLoad: INITIAL_FORM_VALUES.statusLoad,
1913
- onSubmit,
1914
- values: finalInitalValues,
1915
- validationSchema,
1916
- children: [/* @__PURE__ */ jsx(Stack, {
1917
- direction: "column",
1918
- children: /* @__PURE__ */ jsx(MeasureData, {})
1919
- }), /* @__PURE__ */ jsx(MyActions, {})]
1920
- });
1921
- }
1922
- function useGpsToolsStore(selector, equalityFn) {
1923
- const context = useContext(GpsToolsContext);
1924
- if (!context)
1925
- throw new Error("useMapToolsStore context must be use inside GpsToolsContext");
1926
- return useStore(context, selector, equalityFn);
1927
- }
1928
- function useLayers() {
1929
- const {
1930
- addLayer,
1931
- removeLayer
1932
- } = useMapStore((state) => state.mapActions, shallow);
1933
- const {
1934
- init
1935
- } = useGpsToolsStore((state) => state.gpsToolsActions, shallow);
1936
- useEffect(() => {
1937
- addLayer({
1938
- layerId: GeofencesFeaturesLayers.LAYER_GEOFENCES,
1939
- name: "Geocercas",
1940
- renderFeature: CommonFeatureRender,
1941
- geoJsonObject: {
1942
- object: {
1943
- type: "FeatureCollection",
1944
- features: []
1945
- }
1946
- },
1947
- autoFocus: false
1948
- });
1949
- addLayer({
1950
- layerId: GeofencesFeaturesLayers.LAYER_GEOFENCES_TRANSIT_FEATURES,
1951
- name: "Geometr\xEDas de tr\xE1nsito",
1952
- renderFeature: CommonFeatureRender,
1953
- geoJsonObject: {
1954
- object: {
1955
- type: "FeatureCollection",
1956
- features: []
1957
- }
1958
- },
1959
- autoFocus: false
1960
- });
1961
- addLayer({
1962
- layerId: GeofencesFeaturesLayers.LAYER_GEOFENCES_INTERNAL_FEATURES,
1963
- name: "Geometr\xEDas internas",
1964
- renderFeature: CommonFeatureRender,
1965
- geoJsonObject: {
1966
- object: {
1967
- type: "FeatureCollection",
1968
- features: []
1969
- }
1970
- },
1971
- autoFocus: false
1972
- });
1973
- init();
1974
- return () => {
1975
- removeLayer(GeofencesFeaturesLayers.LAYER_GEOFENCES);
1976
- removeLayer(GeofencesFeaturesLayers.LAYER_GEOFENCES_INTERNAL_FEATURES);
1977
- removeLayer(GeofencesFeaturesLayers.LAYER_GEOFENCES_TRANSIT_FEATURES);
1978
- };
1979
- }, []);
1980
- }
1981
- const TabToolsRoot = styled("div")`
1982
- position:relative;
1983
- display:flex;
1984
- flex-direction:column;
1985
-
1986
- flex-grow:1;
1987
- width:100%;
1988
- height:100%;
1989
-
1990
-
1991
- z-index:${MAP_ZINDEX_OVER_MAP};
1992
-
1993
-
1994
- .${mapToolsClasses.tabContentRoot}.${mapToolsClasses.hidden} {
1995
- height:0px;
1996
- width:0px;
1997
- overflow:hidden;
1998
- opacity:0;
1999
- visibility:hidden;
2000
- }
2001
-
2002
-
2003
- .${mapToolsClasses.toolMeasureFormValue} {
2004
- justify-content: center;
2005
- }
2006
-
2007
- .${mapToolsClasses.toolMeasureFormValueDistance} {
2008
- border: 1px solid white;
2009
-
2010
- margin: 0 5px;
2011
- }
2012
- .${mapToolsClasses.toolMeasureFormValueSymbol} {
2013
- border: 1px solid white;
2014
-
2015
- margin: 0 5px;
2016
- }
2017
-
2018
- ${(props) => props.theme.components?.M4LGpsTools?.styleOverrides}
2019
- `;
2020
- function TabTools() {
2021
- const {
2022
- getLabel
2023
- } = useModuleDictionary();
2024
- const [node, divRef] = useStateRef(null);
2025
- const status = useGpsToolsStore((state) => state.ownerState.status, shallow);
2026
- const currentTabTool = useGpsToolsStore((state) => state.currentTabTool, shallow);
2027
- const {
2028
- setCurrentTabTool
2029
- } = useGpsToolsStore((state) => state.gpsToolsActions, shallow);
2030
- useDisableZoomEvents(node);
2031
- const toolTabs = useMemo(() => {
2032
- return [
2033
- {
2034
- id: "geofences",
2035
- icon: void 0,
2036
- component: /* @__PURE__ */ jsx(GeofencesTool, {}),
2037
- label: getLabel(DICCTIONARY.LABEL_TAB_GEO),
2038
- className: mapToolsClasses.toolGeofences
2039
- },
2040
- {
2041
- id: "measure",
2042
- icon: void 0,
2043
- component: /* @__PURE__ */ jsx(MeasureTool, {}),
2044
- label: getLabel(DICCTIONARY.LABEL_TAB_MEASURE),
2045
- className: mapToolsClasses.toolMeasure
2046
- }
2047
- ];
2048
- }, [getLabel]);
2049
- useLayers();
2050
- if (status !== "ready") {
2051
- return null;
2052
- }
2053
- return /* @__PURE__ */ jsxs(
2054
- TabToolsRoot,
2055
- {
2056
- ref: divRef,
2057
- children: [/* @__PURE__ */ jsx(Tabs, {
2058
- value: currentTabTool,
2059
- scrollButtons: "auto",
2060
- variant: "scrollable",
2061
- allowScrollButtonsMobile: true,
2062
- onChange: (_e, value) => setCurrentTabTool(value),
2063
- children: toolTabs.map((tab) => /* @__PURE__ */ jsx(Tab, {
2064
- value: tab.id,
2065
- icon: tab.icon,
2066
- label: tab.label,
2067
- SKTWidth: "100px",
2068
- SKTHeight: "14px"
2069
- }, tab.id))
2070
- }), toolTabs.map((tab) => {
2071
- const isMatched = tab.id === currentTabTool;
2072
- if (!isMatched && tab.id === "measure") {
2073
- return null;
2074
- }
2075
- return /* @__PURE__ */ jsx(TabContent, {
2076
- className: clsx(mapToolsClasses.tabContentRoot, tab.className, isMatched ? mapToolsClasses.visible : mapToolsClasses.hidden),
2077
- children: tab.component
2078
- }, tab.id);
2079
- })]
2080
- }
2081
- );
2082
- }
2083
- function GpsTools() {
2084
- const isSkeleton = useModuleSkeleton();
2085
- return /* @__PURE__ */ jsx(GpsToolsProvider, {
2086
- children: !isSkeleton && /* @__PURE__ */ jsx(TabTools, {})
2087
- });
2088
- }
2089
- export {
2090
- GpsTools as G,
2091
- useGpsToolsStore as u
2092
- };