();
+
+ // Set map position when map is available or location gets updated
+ useEffect(() => {
+ function updateNodeMarker(lat, lon) {
+ setNodeMarker([lat, lon]);
+ }
+ const mapInstance = mapRef.current;
+
+ if (!loading && mapInstance && stationLat) {
+ mapInstance.setView([+stationLat, +stationLon], 13);
+ updateNodeMarker(stationLat, stationLon);
+ }
+ }, [stationLat, stationLon, loading]);
+
+ // Center the map on the node also when editting is turned on
+ useEffect(() => {
+ const map = mapRef.current;
+ if (map && stationLat) {
+ editting && map.setView([+stationLat, +stationLon], 13);
+ }
+ }, [mapRef, editting, stationLat, stationLon]);
+
+ function onConfirmLocation() {
+ const position = mapRef.current.getCenter();
+ changeLocation({ lat: position.lat, lon: position.lng });
+ if (communityLayer) {
+ // Hide the community view, to avoid outdated links
+ toogleCommunityLayer();
+ }
+ }
+
+ function toogleCommunityLayer() {
+ if (communityLayer) {
+ mapRef.current.removeLayer(communityLayer);
+ setCommunityLayer(null);
+ } else {
+ const layer = getCommunityLayer(
+ boardData.hostname,
+ stationLat,
+ stationLon,
+ nodesData
+ );
+ layer.addTo(mapRef.current);
+ setCommunityLayer(layer);
+ }
+ }
+
+ function isReady() {
+ return !loading && typeof stationLat !== "undefined";
+ }
+
+ function toogleEdition() {
+ setEditting(!editting);
+ }
+
+ if (isAssetError) {
+ return (
+
+ Cannot load map, check your internet connection
+
+ );
+ }
+
+ return (
+ <>
+ {(!isReady() || submitting) && (
+
+
+
+ )}
+ {isReady() && (
+
+
+
+
+
+
+
+
+
+
+
+
+ {nodeMarker && (
+
+ )}
+ {editting && (
+
+ )}
+
+ )}
+ {isReady() && (
+
+ {editting && (
+
+ )}
+ {!editting && (
+
+ )}
+
+
+
+ )}
+ >
+ );
+};
+
+export default LocatePage;
diff --git a/plugins/lime-plugin-node-admin/src/components/config/config.tsx b/plugins/lime-plugin-node-admin/src/components/config/config.tsx
index e3cacb7f..f3c4792e 100644
--- a/plugins/lime-plugin-node-admin/src/components/config/config.tsx
+++ b/plugins/lime-plugin-node-admin/src/components/config/config.tsx
@@ -1,15 +1,17 @@
+import { ComponentChildren } from "preact";
+
import { ListItem } from "components/list";
import Loading from "components/loading";
import style from "./config.style.less";
type ConfigProps = {
- title: React.ReactNode,
- subtitle?: React.ReactNode,
- value: React.ReactNode,
- onClick: () => void,
- isLoading: boolean,
-}
+ title: ComponentChildren;
+ subtitle?: ComponentChildren;
+ value: ComponentChildren;
+ onClick: () => void;
+ isLoading: boolean;
+};
export const Config = ({
title,
@@ -27,7 +29,12 @@ export const Config = ({
{isLoading && }
{!isLoading && (
- {subtitle &&
{subtitle}
}
+ {subtitle && (
+
+ {" "}
+ {subtitle}{" "}
+
+ )}
{value}
)}