From 89d497c73f6c245e63c91f3e04d29c98c42779ea Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Fri, 30 Dec 2016 13:21:03 +0100
Subject: [PATCH] Error panel with current map style errors #40

---
 .gitignore                    |  1 +
 src/components/App.jsx        | 16 ++++++++++++++--
 src/components/AppLayout.jsx  | 13 +++++++++++++
 src/components/ErrorPanel.jsx | 25 +++++++++++++++++++++++++
 src/config/colors.js          |  2 +-
 5 files changed, 54 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ErrorPanel.jsx

diff --git a/.gitignore b/.gitignore
index a399b1d..99105f4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,7 @@
 logs
 *.log
 *.swp
+*.swo
 
 # Runtime data
 pids
diff --git a/src/components/App.jsx b/src/components/App.jsx
index f45c832..041d567 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -9,6 +9,7 @@ import LayerList from './layers/LayerList'
 import LayerEditor from './layers/LayerEditor'
 import Toolbar from './Toolbar'
 import AppLayout from './AppLayout'
+import ErrorPanel from './ErrorPanel'
 
 import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
 import validateStyleMin from 'mapbox-gl-style-spec/lib/validate_style.min'
@@ -34,6 +35,7 @@ export default class App extends React.Component {
     })
 
     this.state = {
+      errors: [],
       mapStyle: style.emptyStyle,
       selectedLayerIndex: 0,
       sources: {},
@@ -77,9 +79,14 @@ export default class App extends React.Component {
     if(errors.length === 0) {
       this.revisionStore.addRevision(newStyle)
       this.saveStyle(newStyle)
-      this.setState({ mapStyle: newStyle })
+      this.setState({
+        mapStyle: newStyle,
+        errors: [],
+      })
     } else {
-      errors.forEach(err => console.error(err.message))
+      this.setState({
+        errors: errors.map(err => err.message)
+      })
     }
   }
 
@@ -187,11 +194,16 @@ export default class App extends React.Component {
       onLayerIdChange={this.onLayerIdChange.bind(this)}
     /> : null
 
+    const bottomPanel = this.state.errors.length > 0 ? <ErrorPanel
+      messages={this.state.errors}
+    /> : null
+
     return <AppLayout
       toolbar={toolbar}
       layerList={layerList}
       layerEditor={layerEditor}
       map={this.mapRenderer()}
+      bottom={bottomPanel}
     />
   }
 }
diff --git a/src/components/AppLayout.jsx b/src/components/AppLayout.jsx
index 70fceb8..9022452 100644
--- a/src/components/AppLayout.jsx
+++ b/src/components/AppLayout.jsx
@@ -11,6 +11,7 @@ class AppLayout extends React.Component {
     layerList: React.PropTypes.element.isRequired,
     layerEditor: React.PropTypes.element,
     map: React.PropTypes.element.isRequired,
+    bottom: React.PropTypes.element,
   }
 
   static childContextTypes = {
@@ -60,6 +61,18 @@ class AppLayout extends React.Component {
         </ScrollContainer>
       </div>
       {this.props.map}
+      {this.props.bottom && <div style={{
+          position: 'fixed',
+          height: 50,
+          bottom: 0,
+          left: 550,
+          zIndex: 1,
+          width: '100%',
+          backgroundColor: colors.black
+        }}>
+          {this.props.bottom}
+        </div>
+      }
     </div>
   }
 }
diff --git a/src/components/ErrorPanel.jsx b/src/components/ErrorPanel.jsx
new file mode 100644
index 0000000..31da4e7
--- /dev/null
+++ b/src/components/ErrorPanel.jsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import Paragraph from './Paragraph'
+import colors from '../config/colors'
+import { fontSizes, margins } from '../config/scales'
+
+class ErrorPanel extends React.Component {
+  static propTypes = {
+    messages: React.PropTypes.array,
+  }
+
+  render() {
+    return <div style={{
+      padding: margins[1],
+    }}>
+      {this.props.messages.map(m => <Paragraph style={{
+        color: colors.red,
+        margin: 0,
+        lineHeight: 1.2,
+      }}>{m}</Paragraph>)}
+    </div>
+  }
+}
+
+
+export default ErrorPanel
diff --git a/src/config/colors.js b/src/config/colors.js
index bb4baac..71e0d01 100644
--- a/src/config/colors.js
+++ b/src/config/colors.js
@@ -8,7 +8,7 @@ const baseColors = {
   blue: '#00d9f7',
   green: '#B4C7AD',
   orange: '#fb3',
-  red: '#f04',
+  red: '#cf4a4a',
 }
 
 const themeColors = {