diff --git a/src/Map.js b/src/Map.js index 15cada1..7804b41 100644 --- a/src/Map.js +++ b/src/Map.js @@ -4,22 +4,22 @@ import {Provider} from "react-redux"; import React, {Component} from "react"; import MapView from "./components/MapView"; - import rootReducer from "./reducers"; +import { MESHDB_URL } from "./actions"; const store = createStore(rootReducer); class Map extends Component { state = { - match: {params: {nodeId: "238-240"}}, + match: {params: {nodeId: ""}}, } constructor(props) { super(props); - window.addEventListener("setMapNode", (e) => { - this.updateSelected.bind(this)(e.selectedNodes, false) - } - ) + window.addEventListener("message", ({ data, source }) => { + this.updateSelected.bind(this)(data.selectedNodes, false); + console.log(`[map] Got message from Admin Panel: ${data}. State is now: ${JSON.stringify(this.state)}`); + }); } updateSelected(selectedNodes, triggerEvent = true){ @@ -29,9 +29,8 @@ class Map extends Component { this.setState({match: undefined}); } if (triggerEvent) { - const selectedEvent = new Event("nodeSelectedOnMap");//, {detail: {selectedNodes: selectedNodes}}); - selectedEvent.selectedNodes = selectedNodes; - window.dispatchEvent(selectedEvent); + console.log(`[map] Posting update: ${selectedNodes}`); + window.parent.postMessage({selectedNodes: selectedNodes}, MESHDB_URL); } } diff --git a/src/actions/index.js b/src/actions/index.js index 32ea5f3..51311ee 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -1,14 +1,17 @@ +export const MESHDB_URL = process.env.REACT_APP_MESHDB_URL; + export function fetchNodes(dispatch) { - fetch("https://db.nycmesh.net/api/v1/mapdata/nodes/?format=json") + fetch(`${MESHDB_URL}/api/v1/mapdata/nodes/?format=json`) .then(res => res.json()) .then(json => { + console.log("Fetched Nodes"); dispatch({ type: "FETCH_NODES_SUCCESS", nodes: json }); }) .catch(err => console.log(err)); } export function fetchLinks(dispatch) { - fetch("https://db.nycmesh.net/api/v1/mapdata/links/?format=json") + fetch(`${MESHDB_URL}/api/v1/mapdata/links/?format=json`) .then(res => res.json()) .then(json => { dispatch({ type: "FETCH_LINKS_SUCCESS", links: json }); @@ -17,7 +20,7 @@ export function fetchLinks(dispatch) { } export function fetchSectors(dispatch) { - fetch("https://db.nycmesh.net/api/v1/mapdata/sectors/?format=json") + fetch(`${MESHDB_URL}/api/v1/mapdata/sectors/?format=json`) .then(res => res.json()) .then(json => { dispatch({ type: "FETCH_SECTORS_SUCCESS", sectors: json }); @@ -26,7 +29,7 @@ export function fetchSectors(dispatch) { } export function fetchKiosks(dispatch) { - fetch("https://db.nycmesh.net/api/v1/mapdata/kiosks/?format=json") + fetch(`${MESHDB_URL}/api/v1/mapdata/kiosks/?format=json`) .then(res => res.json()) .then(json => { dispatch({ type: "FETCH_KIOSKS_SUCCESS", kiosks: json }); diff --git a/src/components/MapView/NodeMarker.js b/src/components/MapView/NodeMarker.js index 43a481f..929534b 100644 --- a/src/components/MapView/NodeMarker.js +++ b/src/components/MapView/NodeMarker.js @@ -79,7 +79,7 @@ class NodeMarker extends PureComponent { if (type === "supernode") return { icon: { - url: "/static/admin/map/img/map/supernode.svg", + url: "/img/map/supernode.svg", anchor: { x: 14, y: 14 } }, zIndex: 100 @@ -88,7 +88,7 @@ class NodeMarker extends PureComponent { if (type === "pop") return { icon: { - url: "/static/admin/map/img/map/pop.svg", + url: "/img/map/pop.svg", anchor: { x: 14, y: 14 } }, zIndex: 100 @@ -97,7 +97,7 @@ class NodeMarker extends PureComponent { if (type === "ap") return { icon: { - url: "/static/admin/map/img/map/ap.svg", + url: "/img/map/ap.svg", anchor: { x: 10, y: 10 } }, zIndex: 90 @@ -106,7 +106,7 @@ class NodeMarker extends PureComponent { if (type === "hub") return { icon: { - url: "/static/admin/map/img/map/hub.svg", + url: "/img/map/hub.svg", anchor: { x: 10, y: 10 } }, zIndex: 93 @@ -114,8 +114,8 @@ class NodeMarker extends PureComponent { if (type === "omni") { const url = filters.backbone - ? "/static/admin/map/img/map/omni.svg" - : "/static/admin/map/img/map/active.svg"; + ? "/img/map/omni.svg" + : "/img/map/active.svg"; const zIndex = filters.backbone ? 92 : 91; return { icon: { @@ -128,8 +128,8 @@ class NodeMarker extends PureComponent { if (type === "remote") { const url = filters.backbone - ? "/static/admin/map/img/map/remote.svg" - : "/static/admin/map/img/map/active.svg"; + ? "/img/map/remote.svg" + : "/img/map/active.svg"; const anchor = filters.backbone ? { x: 5, y: 5 } : { x: 7, y: 7 }; return { @@ -143,8 +143,8 @@ class NodeMarker extends PureComponent { if (type === "kiosk") { const url = filters.backbone - ? "/static/admin/map/img/map/remote.svg" - : "/static/admin/map/img/map/active.svg"; + ? "/img/map/remote.svg" + : "/img/map/active.svg"; const anchor = filters.backbone ? { x: 5, y: 5 } : { x: 7, y: 7 }; return { @@ -159,7 +159,7 @@ class NodeMarker extends PureComponent { if (type === "active") return { icon: { - url: "/static/admin/map/img/map/active.svg", + url: "/img/map/active.svg", anchor: { x: 7, y: 7 } }, zIndex: 91 @@ -168,7 +168,7 @@ class NodeMarker extends PureComponent { if (type === "potential-supernode") return { icon: { - url: "/static/admin/map/img/map/potential-supernode.svg", + url: "/img/map/potential-supernode.svg", anchor: { x: 14, y: 14 } }, zIndex: 83 @@ -177,7 +177,7 @@ class NodeMarker extends PureComponent { if (type === "potential-hub") return { icon: { - url: "/static/admin/map/img/map/potential-hub.svg", + url: "/img/map/potential-hub.svg", anchor: { x: 10, y: 10 } }, zIndex: 82 @@ -186,7 +186,7 @@ class NodeMarker extends PureComponent { if (type === "potential") return { icon: { - url: "/static/admin/map/img/map/potential.svg", + url: "/img/map/potential.svg", anchor: { x: 7, y: 7 } }, zIndex: 81 @@ -194,7 +194,7 @@ class NodeMarker extends PureComponent { return { icon: { - url: "/static/admin/map/img/map/dead.svg", + url: "/img/map/dead.svg", anchor: { x: 5, y: 5 } }, zIndex: 80