Commit e4853a1d authored by alain's avatar alain 🐙
Browse files

different loading indication to circumvent async loading of layers bug

parent 5298b78d
......@@ -3,7 +3,8 @@ export const textsNL = {
pilotLocations: "Pilot-locaties",
loading: "Bezig met laden...",
loadingError: "Laden mislukt...",
loadingRetry: "Probeer opnieuw",
loadingRetry: "Opnieuw",
back: "Terug",
status: [
"offline",
"geen recente data",
......@@ -33,6 +34,7 @@ export const textsEN = {
loading: "Loading...",
loadingError: "Loading failed...",
loadingRetry: "Retry",
back: "Back",
status: [
"offline",
"no recent data",
......
......@@ -5,18 +5,21 @@ class MapLoading extends React.Component {
constructor(props){
super()
this.state = {
}
}
render() {
return (
<div className="map-loading">
{(this.props.reload ?
<span>{texts.loadingError} <span className="link" onClick={() => { this.props.reload() }}>{texts.loadingRetry}</span></span>
<div>
<span>{texts.loadingError}</span>
<span className="link" onClick={() => { this.props.reload() }}>{texts.loadingRetry}</span>
<span className="link" onClick={() => { this.props.closeLoading() }}>{texts.back}</span>
</div>
:
<span>{texts.loading}</span>
<div>
<span className="loading"><span></span>{texts.loading}</span>
</div>
)}
</div>
)
......
import React from 'react'
import { connect } from 'react-redux'
import { setPanelStatus, setUnitStatus } from "../actions"
import { setPanelStatus, setUnitStatus, setLoadingError } from "../actions"
import { appSettings } from "../../../config/app"
......@@ -14,13 +14,17 @@ import Tooltip from './Tooltip.js';
import IconArrowDown from "../Icons/IconArrowDown"
import MapLoading from "../Map/MapLoading"
class PanelLayers extends React.Component {
constructor(props){
super()
this.closeLoading = this.closeLoading.bind(this)
}
componentDidMount() {
const { dataGroups } = this.props
const panelStatus = {},
......@@ -58,9 +62,13 @@ class PanelLayers extends React.Component {
this.props.dispatch(setUnitStatus(change))
}
closeLoading() {
this.props.dispatch(setLoadingError(false))
}
render() {
const { layers, dataGroups, viewportHeight, panelStatus, unitStatus } = this.props
const { layers, dataGroups, viewportHeight, panelStatus, unitStatus, loading, loadingError, reload } = this.props
const dataGroupsJSX = dataGroups.map((dataGroup, i) => {
let classes = ["panel-group"]
......@@ -103,12 +111,11 @@ class PanelLayers extends React.Component {
</div>
)
})
// && parameter.legend[parameter.range[0]].label
return (
<Panel>
<div id="layer-settings">
{ (loading > 0 || loadingError) && <MapLoading closeLoading={ this.closeLoading } reload={(loadingError ? reload : false)} /> }
{dataGroupsJSX}
</div>
</Panel>
......@@ -119,7 +126,8 @@ class PanelLayers extends React.Component {
const mapStateToProps = (state) => ({
panelStatus: state.panelStatus,
unitStatus: state.unitStatus
unitStatus: state.unitStatus,
loadingError: state.loadingError
})
PanelLayers = connect(mapStateToProps)(PanelLayers)
......
......@@ -10,6 +10,11 @@ export const setUnitStatus = (change) => ({
change
})
export const setLoadingError = loadingError => ({
type: 'SET_LOADING_ERROR',
loadingError
})
export const setPlaces = places => ({
type: 'SET_PLACES',
places
......
......@@ -16,6 +16,13 @@
}
}
@media (max-width: 700px) {
.mapboxgl-ctrl-top-right {
top: 50%;
transform: translateY(-50%);
}
}
.map-ctrl-button-square {
display: block;
width: 34px;
......@@ -62,11 +69,30 @@
}
.map-loading {
position: fixed;
right: 10px;
bottom: 10px;
background: #FFF;
position: absolute;
right: 0;
bottom: 0;
left: 0;
top: 0;
background: rgba(255, 255, 255, 0.85);
padding: 10px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
z-index: 3;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
div > span {
display: inline-block;
margin: 0 0.25em 0 0;
}
}
.open + .map-loading {
top: 35px;
div > span {
display: block;
margin: 1em 0;
}
}
\ No newline at end of file
// PANEL
.panel {
position: relative;
margin: 10px;
padding: 4px 10px;
width: 270px;
width: 290px;
max-width: calc(100vw - 70px);
background-color: #FFF;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
cursor: default;
......
......@@ -8,7 +8,7 @@
display: inline-block;
width: 2rem;
height: 2rem;
margin: 1rem;
margin: 1rem 1rem 1rem 0;
vertical-align: middle;
background-color: var(--color-loading, #000000);
border-radius: 100%;
......@@ -79,7 +79,8 @@ $color-input: #FFF;
//position: absolute;
top: 100%;
left: 0;
width: 270px;
width: 290px;
max-width: calc(100vw - 70px);
min-width: 100%;;
max-height: 0;
overflow: hidden;
......
......@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import { Provider, connect } from 'react-redux'
import reducer from './reducers.js'
import { setPanelStatus } from "./actions"
import { setPanelStatus, setLoadingError } from "./actions"
import 'mapbox-gl/dist/mapbox-gl.css'
import './css/index.scss'
......@@ -26,7 +26,7 @@ import MapControls from "./Map/MapControls.js"
import MapLocations from "./Map/MapLocations.js"
import MapSearch from 'Map/MapSearch.js'
import MapAttributions from "./Map/MapAttributions.js"
import MapLoading from "./Map/MapLoading"
import Panel from 'Panels/Panel'
import PanelLayers from "./Panels/PanelLayers"
......@@ -54,7 +54,6 @@ class App extends React.Component {
data: null,
layers: initialLayers,
loading: 0,
loadingError: false,
modalContent: null
}
......@@ -77,7 +76,7 @@ class App extends React.Component {
}
reload() { console.log('reload')
this.setState({ loadingError: false })
this.props.dispatch(setLoadingError(false))
this.update(this.state.layers, true)
}
......@@ -118,9 +117,9 @@ class App extends React.Component {
dataFunction(layerDefinition.id).then(data => {
if(!data) {
this.props.dispatch(setLoadingError(true))
this.setState({
loading: this.state.loading - 1,
loadingError: true
})
} else {
deckLayers[layer][source.name] = {
......@@ -247,7 +246,7 @@ class App extends React.Component {
// RENDER
render() {
const { viewport, layers, selectedCenter, deckLayers, loading, loadingError } = this.state
const { viewport, layers, selectedCenter, deckLayers, loading} = this.state
const { pitchMax, zoomMax, zoomMin } = mapControlSettings
return (
......@@ -258,11 +257,10 @@ class App extends React.Component {
<MapControls mapControlSettings={mapControlSettings} viewport={viewport} changeViewport={this.changeViewport} />
<MapAttributions />
{ (loading > 0 || loadingError) && <MapLoading reload={(loadingError ? this.reload : false)} /> }
<div className='mapboxgl-ctrl-bottom-left'>
{( texts.about && <Panel id="about" content={ texts.about } openOnLoad={true} /> )}
<PanelLayers layers={layers} forceUpdate={layers.join()} dataGroups={dataGroups} toggleLayer={this.toggleLayer} viewportHeight={viewport.height} />
<PanelLayers layers={layers} forceUpdate={layers.join()} dataGroups={dataGroups} toggleLayer={this.toggleLayer} viewportHeight={viewport.height} loading={loading} reload={this.reload} />
</div>
<div className='mapboxgl-ctrl-top-left'>
......@@ -277,7 +275,8 @@ class App extends React.Component {
}
const mapStateToProps = (state) => ({
panelStatus: state.panelStatus
panelStatus: state.panelStatus,
loadingError: state.loadingError
})
App = connect(mapStateToProps)(App)
......
import { combineReducers } from 'redux'
//import { deepCopy } from 'util/data'
const panelStatus = (state = {}, action) => {
switch (action.type) {
......@@ -21,10 +20,17 @@ const panelStatus = (state = {}, action) => {
const unitStatus = (state = {}, action) => {
switch (action.type) {
case 'SET_UNIT_STATUS':
//return deepCopy({...state, ...action.change})
return {...state, ...action.change}
default:
return state;
}
}
const loadingError = (state = null, action) => {
switch (action.type) {
case 'SET_LOADING_ERROR':
return action.loadingError;
default:
return state;
}
......@@ -43,6 +49,7 @@ const location = (state = null, action) => {
const combinedReducer = combineReducers({
panelStatus,
unitStatus,
loadingError,
location
})
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment