From 25a02171be8545bc64d33713efcfeb66a79e4caf Mon Sep 17 00:00:00 2001 From: Willard Nilges Date: Thu, 6 Feb 2025 21:28:29 -0500 Subject: [PATCH 1/4] First wack at trying to make him use pano --- src/components/Gallery/component.js | 29 ++++++++++++++++++++++++++--- 1 file changed, 26 insertions(+), 3 deletions(-) diff --git a/src/components/Gallery/component.js b/src/components/Gallery/component.js index 5acfbb0..6d30767 100644 --- a/src/components/Gallery/component.js +++ b/src/components/Gallery/component.js @@ -71,13 +71,13 @@ export default class Gallery extends PureComponent { onClick={() => window .open( - `https://node-db.netlify.app/panoramas/${src}`, + `${src}`, "_blank" ) .focus() } className="db center mh-100 mw-100 zoom-in" - src={`https://node-db.netlify.app/panoramas/${src}`} + src={`${src}`} alt="Panorama" /> {this.renderPreviews()} @@ -105,7 +105,7 @@ export default class Gallery extends PureComponent { index === panoId - 1 ? "" : "o-30" }`} style={{ - backgroundImage: `url("https://node-db.netlify.app/panoramas/${panorama}")` + backgroundImage: `url("${panorama}")` }} /> @@ -123,11 +123,34 @@ export default class Gallery extends PureComponent { return []; } + fetch(`http://127.0.0.1:8001/api/v1/install/${nodeId}`).then( + async (response) => { + const images = await response.json(); + console.log(images); + let urls = images.map(a => a.url); + if (!urls || !urls.length) { + return []; + } + return urls; + //setImages(images); + //setIsLoading(false); + }, + ); + + // XXX (wdn): This pulls the panoramas out of the node object, for display + // on the beeg panorama screen. Instead, we can query Pano for the NN + // and not manipulate the data + /* const { panoramas } = node; + + console.log("Willard is printing."); + console.log(node); + console.log(panoramas); if (!panoramas || !panoramas.length) { return []; } return panoramas; + */ } } From 5185009ef2addf2423167652a123e38f273cc987 Mon Sep 17 00:00:00 2001 From: Willard Nilges Date: Thu, 6 Feb 2025 21:44:10 -0500 Subject: [PATCH 2/4] fetchData --- src/components/Gallery/component.js | 32 ++++++++++++-------------- src/components/NodeDetail/component.js | 30 ++++++++++++++++++++---- 2 files changed, 41 insertions(+), 21 deletions(-) diff --git a/src/components/Gallery/component.js b/src/components/Gallery/component.js index 6d30767..929c46a 100644 --- a/src/components/Gallery/component.js +++ b/src/components/Gallery/component.js @@ -6,13 +6,14 @@ export default class Gallery extends PureComponent { constructor(props) { super(props); this.state = { - panoramas: this.getPanoramas() + panoramas: []//this.getPanoramas() }; } componentDidMount() { this.keyDownHandler = this.handleKeyDown.bind(this); window.addEventListener("keydown", this.keyDownHandler, true); + this.fetchData(); } componentWillUnmount() { @@ -136,21 +137,18 @@ export default class Gallery extends PureComponent { //setIsLoading(false); }, ); - - // XXX (wdn): This pulls the panoramas out of the node object, for display - // on the beeg panorama screen. Instead, we can query Pano for the NN - // and not manipulate the data - /* - const { panoramas } = node; - - console.log("Willard is printing."); - console.log(node); - console.log(panoramas); - if (!panoramas || !panoramas.length) { - return []; - } - - return panoramas; - */ } + + fetchData = async () => { + try { + const { match, nodesById } = this.props; + const { nodeId } = match.params; + const panoResponse = await fetch(`http://127.0.0.1:8001/api/v1/install/${nodeId}`); + const j = await panoResponse.json(); + let urls = j.map(image => image.url); + this.setState({ panoramas: urls }); + } catch (error) { + console.error('Error fetching data:', error); + } + }; } diff --git a/src/components/NodeDetail/component.js b/src/components/NodeDetail/component.js index c71a9bb..18422ac 100644 --- a/src/components/NodeDetail/component.js +++ b/src/components/NodeDetail/component.js @@ -8,6 +8,28 @@ const getPixelPositionOffset = (width, height) => ({ }); export default class NodeDetail extends PureComponent { + constructor(props) { + super(props); + this.state = { + panoramas: [] + }; + } + + componentDidMount() { + this.fetchData(); + } + + fetchData = async () => { + try { + const panoResponse = await fetch(`http://127.0.0.1:8001/api/v1/install/${this.props.nodeId}`); + const j = await panoResponse.json(); + let urls = j.map(image => image.url); + this.setState({ panoramas: urls }); + } catch (error) { + console.error('Error fetching data:', error); + } + }; + render() { const { nodeId, nodesById } = this.props; @@ -63,17 +85,17 @@ export default class NodeDetail extends PureComponent { } renderImage(node) { - const { id, panoramas } = node; - if (!panoramas || !panoramas.length) { + const { id } = node; + if (!this.state.panoramas || !this.state.panoramas.length) { return null; } - const [firstPanorama] = panoramas; + const [firstPanorama] = this.state.panoramas; return (
From 069676d544fffcad761c8778afb0d64a71264ebd Mon Sep 17 00:00:00 2001 From: Willard Nilges Date: Thu, 6 Feb 2025 22:57:56 -0500 Subject: [PATCH 3/4] cleanup --- src/components/Gallery/component.js | 51 +++++++------------------- src/components/NodeDetail/component.js | 28 +++++++------- src/utils/index.js | 2 + 3 files changed, 31 insertions(+), 50 deletions(-) diff --git a/src/components/Gallery/component.js b/src/components/Gallery/component.js index 929c46a..f7f8553 100644 --- a/src/components/Gallery/component.js +++ b/src/components/Gallery/component.js @@ -1,6 +1,7 @@ import React, { PureComponent } from "react"; import { Link } from "react-router-dom"; import DocumentTitle from "react-document-title"; +import { PANO_URL } from "../../utils"; export default class Gallery extends PureComponent { constructor(props) { @@ -13,7 +14,7 @@ export default class Gallery extends PureComponent { componentDidMount() { this.keyDownHandler = this.handleKeyDown.bind(this); window.addEventListener("keydown", this.keyDownHandler, true); - this.fetchData(); + this.fetchPanoramas(); } componentWillUnmount() { @@ -115,40 +116,16 @@ export default class Gallery extends PureComponent { ); } - getPanoramas() { - const { match, nodesById } = this.props; - const { nodeId } = match.params; - const node = nodesById[nodeId]; - - if (!node) { - return []; - } - - fetch(`http://127.0.0.1:8001/api/v1/install/${nodeId}`).then( - async (response) => { - const images = await response.json(); - console.log(images); - let urls = images.map(a => a.url); - if (!urls || !urls.length) { - return []; - } - return urls; - //setImages(images); - //setIsLoading(false); - }, - ); - } - - fetchData = async () => { - try { - const { match, nodesById } = this.props; - const { nodeId } = match.params; - const panoResponse = await fetch(`http://127.0.0.1:8001/api/v1/install/${nodeId}`); - const j = await panoResponse.json(); - let urls = j.map(image => image.url); - this.setState({ panoramas: urls }); - } catch (error) { - console.error('Error fetching data:', error); - } - }; + fetchPanoramas = async () => { + try { + const { match } = this.props; + const { nodeId } = match.params; + const panoResponse = await fetch(`${PANO_URL}/api/v1/install/${nodeId}`); + const j = await panoResponse.json(); + let urls = j.map(image => image.url); + this.setState({ panoramas: urls }); + } catch (error) { + console.error('Error fetching data:', error); + } + }; } diff --git a/src/components/NodeDetail/component.js b/src/components/NodeDetail/component.js index 18422ac..9cd3dde 100644 --- a/src/components/NodeDetail/component.js +++ b/src/components/NodeDetail/component.js @@ -1,6 +1,7 @@ import React, { PureComponent } from "react"; import { OverlayView } from "react-google-maps"; import { Link } from "react-router-dom"; +import { PANO_URL } from "../../utils"; const getPixelPositionOffset = (width, height) => ({ x: -width / 2, @@ -15,20 +16,21 @@ export default class NodeDetail extends PureComponent { }; } - componentDidMount() { - this.fetchData(); - } - - fetchData = async () => { - try { - const panoResponse = await fetch(`http://127.0.0.1:8001/api/v1/install/${this.props.nodeId}`); - const j = await panoResponse.json(); - let urls = j.map(image => image.url); - this.setState({ panoramas: urls }); - } catch (error) { - console.error('Error fetching data:', error); + componentDidMount() { + this.fetchPanoramas(); } - }; + + fetchPanoramas = async () => { + try { + console.log(`PANO_URL = ${PANO_URL}`); + const panoResponse = await fetch(`${PANO_URL}/api/v1/install/${this.props.nodeId}`); + const j = await panoResponse.json(); + let urls = j.map(image => image.url); + this.setState({ panoramas: urls }); + } catch (error) { + console.error('Error fetching data:', error); + } + }; render() { const { nodeId, nodesById } = this.props; diff --git a/src/utils/index.js b/src/utils/index.js index 70d0d39..2b580cc 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -73,3 +73,5 @@ export const sectorColors = { potential: "#aaa", default: "#007aff" }; + +export const PANO_URL = process.env.REACT_APP_PANO_URL; From 1060a7197540b2047d940b74a080abf87037986d Mon Sep 17 00:00:00 2001 From: Will Nilges Date: Sun, 30 Mar 2025 15:27:37 -0400 Subject: [PATCH 4/4] Map build still works --- .env.sample | 1 + README.md | 4 ++++ 2 files changed, 5 insertions(+) create mode 100644 .env.sample diff --git a/.env.sample b/.env.sample new file mode 100644 index 0000000..f4f3a9d --- /dev/null +++ b/.env.sample @@ -0,0 +1 @@ +REACT_APP_PANO_URL=http://127.0.0.1:8081 diff --git a/README.md b/README.md index cee488e..2724632 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,10 @@ Installs dependencies. +``` +echo '127.0.0.1 map.nycmesh.net' >> /etc/hosts +``` + #### `yarn start` Runs the app in development mode.