Skip to content

Commit 8addc68

Browse files
justenPalmerjustenPalmer
committed
added initial support for mapbox tokens, config section added - fixes #23 
1 parent 5366714 commit 8addc68

File tree

13 files changed

+221
-39
lines changed

13 files changed

+221
-39
lines changed

‎src/App.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import React, {Component} from 'react';
22
import {Provider} from 'react-redux';
33
import {BrowserRouter as Router,Route,Switch} from 'react-router-dom';
44

5+
import Mconfig from './model/Mconfig';
6+
57
import Phome from './page/Phome';
68
import Pconfig from './page/Pconfig';
79
import Pstyles from './page/Pstyles';
@@ -14,6 +16,7 @@ import './App.css';
1416
export default class App extends Component {
1517

1618
render (){
19+
Mconfig.load();
1720
return (
1821
<Provider store={Store}>
1922
<Router>

‎src/model/Mconfig.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import Store from '../Store';
2+
3+
import LocalStorage from '../utility/LocalStorage';
4+
5+
const LOCALSTORAGE_KEY = '_config';
6+
7+
export default {
8+
9+
get:function(){
10+
return Store.getState().config;
11+
},
12+
13+
load:function(){
14+
return new Promise((resolve,reject)=>{
15+
let rec = LocalStorage.get(LOCALSTORAGE_KEY) || {};
16+
17+
Store.dispatch({
18+
type:'CONFIG_DEFINE',
19+
payload:rec
20+
});
21+
22+
return resolve();
23+
});
24+
},
25+
26+
save:function(){
27+
return new Promise((resolve,reject)=>{
28+
const config = this.get();
29+
console.log('config save:',config);
30+
LocalStorage.set(LOCALSTORAGE_KEY,config);
31+
return resolve();
32+
});
33+
},
34+
35+
setIn:function(key,val){
36+
return new Promise((resolve,reject)=>{
37+
if (!key) return reject('no key');
38+
39+
Store.dispatch({
40+
type:'CONFIG_SETIN',
41+
key:key,
42+
payload:val
43+
});
44+
45+
this.save();
46+
47+
return resolve();
48+
});
49+
}
50+
};

‎src/model/Mstyle.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,10 @@ const Mstyle = {
127127
let all = LocalStorage.getAll();
128128
all = all || {};
129129

130+
if (all._config) delete all._config;
131+
132+
console.log('all styles:',all);
133+
130134
Store.dispatch({
131135
type:'STYLES_DEFINE',
132136
payload:all

‎src/page/Pconfig.jsx‎

Lines changed: 5 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@ import React from 'react';
33
import {connect} from 'react-redux';
44

55
import Vnav from '../view/Vnav';
6-
import Vfield from '../view/Vfield';
6+
import Vconfig from '../view/Vconfig';
77

88
import {NavLink, Link, Route, Switch} from 'react-router-dom';
99

1010

1111
const mapStoreToProps = (store)=>{
1212
return {
13-
styles:store.styles
13+
config:store.config
1414
} // props
1515
};
1616
const mapDispatchToProps = {};
@@ -19,9 +19,6 @@ class Pconfig extends React.Component {
1919
constructor(props) {
2020
super(props);
2121
this.state = {};
22-
23-
//styles.do();
24-
this.id = props.match.params.id;
2522

2623
this.handle = {
2724
route:(path)=>{
@@ -41,29 +38,12 @@ class Pconfig extends React.Component {
4138
}
4239

4340
render (){
44-
const {styles, match} = this.props;
45-
// buil;d ary from obj
41+
const {config, match} = this.props;
4642

47-
4843
return <div>
4944
<Vnav/>
50-
<div className="container mt-4">
51-
<h2 className="px-2 py-2 m-0 text-light">Config</h2>
52-
53-
<ul className="nav nav-tabs">
54-
<li className="nav-item">
55-
<NavLink className="nav-link" to="/config/mapbox">Mapbox</NavLink>
56-
</li>
57-
<li className="nav-item">
58-
<NavLink className="nav-link" to="/add/upload">Upload</NavLink>
59-
</li>
60-
<li className="nav-item">
61-
<NavLink className="nav-link" to="/add/fromSource">From Source</NavLink>
62-
</li>
63-
</ul>
64-
<div className="p-3 bg-white position-relative">
65-
66-
</div>
45+
<div className="p-3">
46+
<Vconfig config={config} handle={this.handle}/>
6747
</div>
6848
</div>
6949
}

‎src/reducer/Rconfig.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import {Map, fromJS} from 'immutable';
2+
3+
const iState = Map({
4+
loaded:false
5+
});
6+
7+
export default function(state = iState, action){
8+
//console.log('style reducer:',action);
9+
// mutate with
10+
// state = {...state,, name:action.payload}
11+
12+
switch (action.type){
13+
case 'CONFIG_DEFINE':{
14+
const rec = fromJS(action.payload);
15+
return rec;
16+
}
17+
case 'CONFIG_SETIN':{
18+
const rec = state.setIn(action.key,action.payload);
19+
return rec;
20+
}
21+
default:
22+
return state;
23+
}
24+
}

‎src/reducer/index.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import {combineReducers} from 'redux';
2-
import Rstyles from './Rstyles';
2+
import Rconfig from './Rconfig';
33
import Rstyle from './Rstyle';
44
import RstyleError from './RstyleError';
5+
import Rstyles from './Rstyles';
56

67
export default combineReducers({
78
styles:Rstyles,
89
style:Rstyle,
9-
styleError:RstyleError
10+
styleError:RstyleError,
11+
config:Rconfig
1012
});

‎src/view/Vconfig/VconfigTokens.jsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import PropTypes from 'prop-types';
2+
import React from 'react';
3+
4+
import Mconfig from '../../model/Mconfig';
5+
6+
import Vproperty from '../Vproperty';
7+
8+
export default class VconfigTokens extends React.Component {
9+
10+
static propTypes = {
11+
config:PropTypes.object,
12+
handle: PropTypes.object,
13+
match: PropTypes.object
14+
}
15+
16+
constructor(props) {
17+
super(props);
18+
const {handle} = props;
19+
20+
this.state = {focus:'mapboxToken'};
21+
22+
this.handle = {
23+
...handle,
24+
change:(field)=>{
25+
Mconfig.setIn([field.name],field.value);
26+
}
27+
};
28+
29+
for (let i in this.handle){
30+
this.handle[i] = this.handle[i].bind(this);
31+
}
32+
}
33+
34+
render (){
35+
const {config, error, handle} = this.props;
36+
37+
return <div className="p-1">
38+
<h2 className="px-2 py-1 m-0 text-nav bg-light">
39+
API Access Tokens
40+
<div className="float-right">
41+
42+
</div>
43+
</h2>
44+
<div className="p-2">
45+
<div className="row">
46+
<div className="col-sm-6">
47+
<Vproperty property={{
48+
name:'mapboxToken',
49+
label:'mapbox token',
50+
spec:{doc:'token used to authenticate with Mapbox'},
51+
value:config.get('mapboxToken'),
52+
error:error && error.get && error.get('mapboxToken'),
53+
hideOptions:true
54+
}} focus={this.state.focus} handle={this.handle}/>
55+
</div>
56+
<div className="col-sm-6">
57+
<Vproperty property={{
58+
name:'olToken',
59+
label:'open layers token',
60+
spec:{doc:'token used to authenticate with Open Layers'},
61+
value:config.get('olToken'),
62+
error:error && error.get && error.get('olToken'),
63+
hideOptions:true
64+
}} focus={this.state.focus} handle={this.handle}/>
65+
</div>
66+
</div>
67+
</div>
68+
</div>;
69+
}
70+
};

‎src/view/Vconfig/index.jsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import PropTypes from 'prop-types';
2+
import React from 'react';
3+
4+
import VconfigTokens from './VconfigTokens';
5+
6+
export default class Vconfig extends React.Component {
7+
static propTypes = {
8+
error: PropTypes.object, // map
9+
handle: PropTypes.object,
10+
match: PropTypes.object,
11+
config: PropTypes.object
12+
}
13+
14+
constructor(props) {
15+
super(props);
16+
const {} = props;
17+
18+
19+
}
20+
21+
render (){
22+
const {config, error, handle} = this.props;
23+
24+
return <div className="p-2 bg-white">
25+
<VconfigTokens config={config} error={error} handle={handle}/>
26+
</div>;
27+
28+
}
29+
};

‎src/view/Vmap/Vmapbox.jsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
44
import MapboxGl from 'mapbox-gl';
55
import 'mapbox-gl/dist/mapbox-gl.css';
66

7+
import Mconfig from '../../model/Mconfig';
78
import Mstyle from '../../model/Mstyle';
89
import Mlayer from '../../model/Mlayer';
910

@@ -105,6 +106,13 @@ export default class Vmap extends React.Component {
105106

106107
//console.log('map style:',styleJS,MapboxGl);
107108

109+
const config = Mconfig.get();
110+
const token = config.get('mapboxToken');
111+
112+
//console.log('token:',token,config);
113+
114+
MapboxGl.accessToken = token;
115+
108116
const map = new MapboxGl.Map({
109117
container: this.container,
110118
style: styleJS.toJS(),

‎src/view/Vnav/index.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,7 @@ export default class Vnav extends React.Component {
1414
}
1515

1616
/*
17-
<NavLink to={paths.config} className="nav-link" activeClassName="active">
18-
config
19-
</NavLink>
17+
2018
*/
2119

2220
return <nav className="navbar navbar-expand-lg navbar-light bg-light">
@@ -29,7 +27,9 @@ export default class Vnav extends React.Component {
2927
<div className="collapse navbar-collapse">
3028
<ul className="navbar-nav">
3129
<li className="nav-item">
32-
30+
<NavLink to={paths.config} className="nav-link" activeClassName="active">
31+
config
32+
</NavLink>
3333
</li>
3434
</ul>
3535
</div>

0 commit comments

Comments
 (0)