From cccc1d1935e0ec0062614f1595c94cc48dc988ab Mon Sep 17 00:00:00 2001
From: Piero Toffanin <pt@masseranolabs.com>
Date: Thu, 19 Jan 2017 15:40:04 -0500
Subject: [PATCH] Added standby component for loading textured mesh

---
 app/api/common.py                        |  2 +-
 app/static/app/js/ModelView.jsx          | 13 ++++++-
 app/static/app/js/components/Map.jsx     |  6 +--
 app/static/app/js/components/Standby.jsx | 47 ++++++++++++++++++++++++
 app/static/app/js/css/Standby.scss       | 26 +++++++++++++
 5 files changed, 88 insertions(+), 6 deletions(-)
 create mode 100644 app/static/app/js/components/Standby.jsx
 create mode 100644 app/static/app/js/css/Standby.scss

diff --git a/app/api/common.py b/app/api/common.py
index 017750b9..8e8df1e5 100644
--- a/app/api/common.py
+++ b/app/api/common.py
@@ -40,7 +40,7 @@ def get_tile_json(name, tiles, bounds):
         'scheme': 'tms',
         'tiles': tiles,
         'minzoom': 0,
-        'maxzoom': 22,
+        'maxzoom': 21,
         'bounds': bounds
     }
 
diff --git a/app/static/app/js/ModelView.jsx b/app/static/app/js/ModelView.jsx
index 1f5be817..ed0de590 100644
--- a/app/static/app/js/ModelView.jsx
+++ b/app/static/app/js/ModelView.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import './css/ModelView.scss';
 import ErrorMessage from './components/ErrorMessage';
+import Standby from './components/Standby';
 import $ from 'jquery';
 
 const THREE = require('three'); // import does not work :/
@@ -495,6 +496,8 @@ class ModelView extends React.Component {
           if (modelReference === null && !initializingModel){
 
             initializingModel = true;
+            this.texturedModelStandby.show();
+
             const mtlLoader = new THREE.MTLLoader();
             mtlLoader.setTexturePath(this.texturedModelDirectoryPath());
             mtlLoader.setPath(this.texturedModelDirectoryPath());
@@ -528,6 +531,7 @@ class ModelView extends React.Component {
 
                     modelReference = object;
                     initializingModel = false;
+                    this.texturedModelStandby.hide();
                 });
             });
           }else{
@@ -1052,8 +1056,13 @@ class ModelView extends React.Component {
           <div 
             className="container"
             ref={(domNode) => { this.container = domNode; }}
-            style={{height: "100%", width: "100%"}} 
-            onContextMenu={(e) => {e.preventDefault();}}></div>
+            style={{height: "100%", width: "100%", position: "relative"}} 
+            onContextMenu={(e) => {e.preventDefault();}}>
+              <Standby 
+                message="Loading textured model..."
+                ref={(domNode) => { this.texturedModelStandby = domNode; }}
+                />
+            </div>
       </div>);
   }
 }
diff --git a/app/static/app/js/components/Map.jsx b/app/static/app/js/components/Map.jsx
index 5eeb3019..56ca4483 100644
--- a/app/static/app/js/components/Map.jsx
+++ b/app/static/app/js/components/Map.jsx
@@ -56,19 +56,19 @@ class Map extends React.Component {
         "Google Maps Hybrid": L.tileLayer('//{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', {
             attribution: 'Map data: &copy; Google Maps',
             subdomains: ['mt0','mt1','mt2','mt3'],
-            maxZoom: 22,
+            maxZoom: 21,
             minZoom: 0,
             label: 'Google Maps Hybrid'
         }).addTo(this.map),
         "ESRI Satellite": L.tileLayer('//server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
             attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
-            maxZoom: 22,
+            maxZoom: 21,
             minZoom: 0,
             label: 'ESRI Satellite'  // optional label used for tooltip
         }),
         "OSM Mapnik": L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
             attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-            maxZoom: 22,
+            maxZoom: 21,
             minZoom: 0,
             label: 'OSM Mapnik'  // optional label used for tooltip
         })
diff --git a/app/static/app/js/components/Standby.jsx b/app/static/app/js/components/Standby.jsx
new file mode 100644
index 00000000..7831139b
--- /dev/null
+++ b/app/static/app/js/components/Standby.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import '../css/Standby.scss';
+
+class Standby extends React.Component {
+  static defaultProps = {
+      message: ""
+  };
+
+  static propTypes = {
+    message: React.PropTypes.string
+  };
+
+  constructor(props){
+    super(props);
+
+    this.state = {
+      message: props.message,
+      show: false
+    }
+  }
+
+  show(message = null){
+    this.setState({show: true});
+    if (message){
+      this.setState({message: message});
+    }
+  }
+
+  hide(){
+    this.setState({show: false});
+  }
+
+  render() {
+    return (
+      <div className="standby"
+           style={{display: this.state.show ? "block" : "none"}}>
+        <div className="cover">&nbsp;</div>
+        <div className="content">
+          <i className="fa fa-spinner fa-spin fa-2x fa-fw"></i>
+          <p>{this.state.message}</p>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Standby;
diff --git a/app/static/app/js/css/Standby.scss b/app/static/app/js/css/Standby.scss
new file mode 100644
index 00000000..060a54f8
--- /dev/null
+++ b/app/static/app/js/css/Standby.scss
@@ -0,0 +1,26 @@
+.standby{
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	.cover{	
+		opacity: 0.5;
+		background-color: #111;
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+	}
+	.content{
+		text-align: center;
+		position: absolute;
+		top: 45%;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		padding: 0;
+		color: white;
+	}
+}
\ No newline at end of file