kopia lustrzana https://github.com/OpenDroneMap/WebODM
Started creating share button UI
rodzic
7d83a6d769
commit
ddb97cff99
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
|
@ -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;
|
|
@ -0,0 +1,9 @@
|
|||
.shareButton{
|
||||
border-width: 1px;
|
||||
position: absolute;
|
||||
z-index: 2000;
|
||||
bottom: 24px;
|
||||
right: 76px;
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
.sharePanel{
|
||||
.checkbox{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
Ładowanie…
Reference in New Issue