Merge pull request #512 from JesseCrocker/local-port

Add support for connecting to a local server on port other than 8000
This commit is contained in:
pathmapper 2019-07-29 17:16:36 +02:00 committed by GitHub
commit b5cfb44cf0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 14 deletions

View file

@ -91,8 +91,15 @@ export default class App extends React.Component {
autoBind(this); autoBind(this);
this.revisionStore = new RevisionStore() this.revisionStore = new RevisionStore()
const params = new URLSearchParams(window.location.search.substring(1))
let port = params.get("localport")
if (port == null && (window.location.port != 80 && window.location.port != 443)) {
port = window.location.port
}
this.styleStore = new ApiStyleStore({ this.styleStore = new ApiStyleStore({
onLocalStyleChange: mapStyle => this.onStyleChanged(mapStyle, false) onLocalStyleChange: mapStyle => this.onStyleChanged(mapStyle, false),
port: port,
host: params.get("localhost")
}) })

View file

@ -1,37 +1,37 @@
import style from './style.js' import style from './style.js'
import ReconnectingWebSocket from 'reconnecting-websocket' import ReconnectingWebSocket from 'reconnecting-websocket'
const host = 'localhost'
const port = '8000'
const localUrl = `http://${host}:${port}`
const websocketUrl = `ws://${host}:${port}/ws`
export class ApiStyleStore { export class ApiStyleStore {
constructor(opts) { constructor(opts) {
this.onLocalStyleChange = opts.onLocalStyleChange || (() => {}) this.onLocalStyleChange = opts.onLocalStyleChange || (() => {})
const port = opts.port || '8000'
const host = opts.host || 'localhost'
this.localUrl = `http://${host}:${port}`
this.websocketUrl = `ws://${host}:${port}/ws`
this.init = this.init.bind(this)
} }
init(cb) { init(cb) {
fetch(localUrl + '/styles', { fetch(this.localUrl + '/styles', {
mode: 'cors', mode: 'cors',
}) })
.then(function(response) { .then((response) => {
return response.json(); return response.json();
}) })
.then(function(body) { .then((body) => {
const styleIds = body; const styleIds = body;
this.latestStyleId = styleIds[0] this.latestStyleId = styleIds[0]
this.notifyLocalChanges() this.notifyLocalChanges()
cb(null) cb(null)
}) })
.catch(function() { .catch(function(e) {
cb(new Error('Can not connect to style API')) cb(new Error('Can not connect to style API'))
}) })
} }
notifyLocalChanges() { notifyLocalChanges() {
const connection = new ReconnectingWebSocket(websocketUrl) const connection = new ReconnectingWebSocket(this.websocketUrl)
connection.onmessage = e => { connection.onmessage = e => {
if(!e.data) return if(!e.data) return
console.log('Received style update from API') console.log('Received style update from API')
@ -48,7 +48,7 @@ export class ApiStyleStore {
latestStyle(cb) { latestStyle(cb) {
if(this.latestStyleId) { if(this.latestStyleId) {
fetch(localUrl + '/styles/' + this.latestStyleId, { fetch(this.localUrl + '/styles/' + this.latestStyleId, {
mode: 'cors', mode: 'cors',
}) })
.then(function(response) { .then(function(response) {
@ -65,7 +65,7 @@ export class ApiStyleStore {
// Save current style replacing previous version // Save current style replacing previous version
save(mapStyle) { save(mapStyle) {
const id = mapStyle.id const id = mapStyle.id
fetch(localUrl + '/styles/' + id, { fetch(this.localUrl + '/styles/' + id, {
method: "PUT", method: "PUT",
mode: 'cors', mode: 'cors',
headers: { headers: {