DroneDeploy
Search…
Plans.update
1
<!DOCTYPE html>
2
<html lang="en">
3
4
<head>
5
<meta charset="UTF-8">
6
<title>Document</title>
7
<style>
8
.title {
9
font-size: 1.3em;
10
font-weight: 500;
11
}
12
13
.sans {
14
font-family: Lato, sans-serif;
15
color: rgba(0, 0, 0, 0.87);
16
}
17
18
.btn {
19
border: none;
20
background-color: #039be5;
21
font-size: 14px;
22
font-family: Lato;
23
font-weight: 500;
24
color: white;
25
padding: 10px 16px;
26
margin-top: 10px;
27
flex-basis: 100%;
28
width: 100%;
29
}
30
31
label {
32
font-weight: 300;
33
}
34
35
input,
36
select {
37
border: none;
38
border-radius: 0;
39
border-bottom: 1px solid #039be5;
40
min-width: 30%;
41
max-width: 100%;
42
font-size: 0.8em;
43
font-size: 14px;
44
}
45
46
input[type="text"] {
47
width: 100%;
48
margin-top: 5px;
49
}
50
</style>
51
</head>
52
53
<body>
54
<h1 class="title sans">Plans.update example</h1>
55
<div id="planDetails"></div>
56
<form action="" id="updateForm">
57
<input type="text" class="sans" placeholder="New Project Name" id="newName" />
58
<button type="submit" class="btn sans" id="updateBtn">Update name</button>
59
</form>
60
<button type="button" id="randomizeGeometry" class="btn">Randomize geometry</button>
61
<script>
62
var planOutput = document.getElementById('planDetails');
63
var updateForm = document.getElementById('updateForm');
64
var updateBtn = document.getElementById('updateBtn');
65
var randomizeBtn = document.getElementById('randomizeGeometry');
66
67
function formatOutput(plan) {
68
//es6 template string
69
return `<div class="details>
70
<h2 class="planName sans">
71
${plan.name}
72
</h2>
73
<br>
74
<span class="author sans">By ${plan.username}</span>
75
</div>`
76
}
77
78
function randomlyAdjustGeometry(geometry) {
79
var offset = Math.random() / 100 * ([1, -1][Math.floor(Math.random() * 2)]);
80
geometry[2].lng = geometry[0].lng + offset;
81
return geometry;
82
}
83
84
new DroneDeploy({
85
version: 1
86
})
87
.then(function(dronedeployApi) {
88
dronedeployApi.Plans.getCurrentlyViewed().subscribe(function(plan) {
89
planOutput.innerHTML = formatOutput(plan);
90
});
91
dronedeployApi.Plans.getCurrentlyViewed()
92
.then(function(plan) {
93
updateForm.addEventListener('submit', function(event) {
94
event.preventDefault();
95
var newName = event.target[0].value;
96
event.target[0].value = '';
97
dronedeployApi.Plans.update(plan.id, {
98
name: newName
99
});
100
});
101
102
randomizeBtn.addEventListener('click', function(event) {
103
event.preventDefault();
104
var newGeometry = randomlyAdjustGeometry(plan.geometry);
105
dronedeployApi.Plans.update(plan.id, {
106
geometry: newGeometry
107
});
108
});
109
110
});
111
});
112
</script>
113
</body>
114
115
</html>
Copied!
Last modified 2yr ago
Copy link