Started creating share button UI

app/models/task.py

@@ -439,8 +439,11 @@ class Task(models.Model):
         return {
             'tiles': [{'url': self.get_tile_json_url(t), 'type': t} for t in types],
             'meta': {
-                'task': str(self.id),
-                'project': self.project.id
+                'task': {
+                    'id': str(self.id),
+                    'project': self.project.id,
+                    'public': self.public
+                }
             }
         }
 

app/static/app/js/components/Map.jsx

@@ -14,6 +14,7 @@ import '../vendor/leaflet/Leaflet.Autolayers/leaflet-autolayers';
 import $ from 'jquery';
 import ErrorMessage from './ErrorMessage';
 import SwitchModeButton from './SwitchModeButton';
+import ShareButton from './ShareButton';
 import AssetDownloads from '../classes/AssetDownloads';
 import PropTypes from 'prop-types';
 
@@ -40,7 +41,7 @@ class Map extends React.Component {
     
     this.state = {
       error: "",
-      switchButtonTask: null // When this is set to a task, show a switch mode button to view the 3d model
+      singleTask: null // When this is set to a task, show a switch mode button to view the 3d model
     };
 
     this.imageryLayers = [];
@@ -62,7 +63,7 @@ class Map extends React.Component {
           assets = AssetDownloads.excludeSeparators(),
           layerId = layer => {
             const meta = layer[Symbol.for("meta")];
-            return meta.project + "_" + meta.task;
+            return meta.task.project + "_" + meta.task.id;
           };
 
     // Remove all previous imagery layers
@@ -105,13 +106,8 @@ class Map extends React.Component {
             }
 
             // Show 3D switch button only if we have a single orthophoto
-            const task = {
-              id: meta.task,
-              project: meta.project
-            };
-
             if (tiles.length === 1){
-              this.setState({switchButtonTask: task});
+              this.setState({singleTask: meta.task});
             }
 
             // For some reason, getLatLng is not defined for tileLayer?
@@ -129,12 +125,12 @@ class Map extends React.Component {
                                 <div>Bounds: [${layer.options.bounds.toBBoxString().split(",").join(", ")}]</div>
                                     <ul class="asset-links">
                                     ${assets.map(asset => {
-                                        return `<li><a href="${asset.downloadUrl(meta.project, meta.task)}">${asset.label}</a></li>`;
+                                        return `<li><a href="${asset.downloadUrl(meta.task.project, meta.task.id)}">${asset.label}</a></li>`;
                                     }).join("")}
                                 </ul>
 
                                 <button
-                                    onclick="location.href='/3d/project/${task.project}/task/${task.id}/';"
+                                    onclick="location.href='/3d/project/${meta.task.project}/task/${meta.task.id}/';"
                                     type="button"
                                     class="switchModeButton btn btn-sm btn-secondary">
                                     <i class="fa fa-cube"></i> 3D
@@ -268,8 +264,12 @@ class Map extends React.Component {
         <div 
           style={{height: "100%"}}
           ref={(domNode) => (this.container = domNode)}>
+
+          {this.state.singleTask !== null ? 
+            <ShareButton task={this.state.singleTask} />
+          : ""}
           <SwitchModeButton 
-            task={this.state.switchButtonTask}
+            task={this.state.singleTask}
             type="mapToModel" />
         </div>
       </div>

app/static/app/js/components/ShareButton.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import '../css/ShareButton.scss';
+import SharePanel from './SharePanel';
+import PropTypes from 'prop-types';
+import $ from 'jquery';
+
+class ShareButton extends React.Component {
+  static defaultProps = {
+    task: null,
+  };
+  static propTypes = {
+    task: PropTypes.object.isRequired
+  }
+
+  constructor(props){
+    super(props);
+
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick(){
+  }
+
+  componentDidMount(){
+    const $container = $("<div/>");
+    
+    $(this.shareButton).popover({
+        container: 'body',
+        animation: false,
+        content: function(){
+          window.ReactDOM.render(<SharePanel />, $container.get(0));
+          return $container;
+        },
+        html: true,
+        placement: 'top',
+        title: "Share"
+      }).on("shown.bs.popover", () => {
+
+      }).on("hidden.bs.popover", () => {
+
+      });
+  }
+
+  componentWillUnmount(){
+    $(this.shareButton).popover('dispose');
+  }
+
+  render() {
+    return (
+      <button 
+        ref={(domNode) => { this.shareButton = domNode; }}
+        type="button"
+        className={"shareButton btn btn-sm " + (this.props.task.public ? "btn-primary" : "btn-secondary")}>
+        <i className="fa fa-share-alt"></i> Share
+      </button>
+    );
+  }
+}
+
+export default ShareButton;

app/static/app/js/components/SharePanel.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import '../css/SharePanel.scss';
+import PropTypes from 'prop-types';
+
+
+class SharePanel extends React.Component{
+  static propTypes = {
+    sharingEnabled: PropTypes.bool
+  };
+  static defaultProps = {
+    sharingEnabled: true
+  };
+
+  constructor(props){
+    super(props);
+
+    this.state = {
+      sharingEnabled: props.sharingEnabled
+    };
+
+    this.handleSharingEnabled = this.handleSharingEnabled.bind(this);
+  }
+
+  handleSharingEnabled(e){
+    this.setState({ sharingEnabled: e.target.checked });
+  }
+
+  render(){
+    return (<div className="sharePanel">
+        <div className="checkbox">
+          <label>
+            <input 
+              type="checkbox" 
+              checked={this.state.sharingEnabled}
+              onChange={this.handleSharingEnabled}
+               />
+            Enable sharing
+          </label>
+        </div>
+        
+      </div>);
+  }
+}
+
+export default SharePanel;

app/static/app/js/css/ShareButton.scss

@@ -0,0 +1,9 @@
+.shareButton{
+    border-width: 1px;
+    position: absolute;
+    z-index: 2000;
+    bottom: 24px;
+    right: 76px;
+
+}
+

app/static/app/js/css/SharePanel.scss

@@ -0,0 +1,6 @@
+.sharePanel{
+	.checkbox{
+		margin-top: 0;
+	}
+}
+