Skip to content

Commit f136b07

Browse files
DevMBSDevMBS
authored
replace jquery with vanilla js
1 parent 95eb70f commit f136b07

2 files changed

Lines changed: 119 additions & 124 deletions

File tree

‎app/mobile/index.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@
1616
<script src="https://cdn.socket.io/4.3.2/socket.io.min.js" integrity="sha384-KAZ4DtjNhLChOB/hxXuKqhMLYvx3b5MlT55xPEiNmREKRzeEm+RVPlTnAn0ajQNs" crossorigin="anonymous"></script>
1717
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
1818
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
19-
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
2019
<script data-pace-options='{ "ajax": false}' src="https://cdn.jsdelivr.net/npm/pace-js@latest/pace.min.js"></script>
2120
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pace-js@latest/pace-theme-default.min.css">
2221
<link rel ="stylesheet" href="../../loading-bar.css">

‎app/mobile/index.js‎

Lines changed: 119 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
if ('serviceWorker' in navigator) {
44
navigator.serviceWorker.register('/mobile/serviceworker.js');
55
}
6+
//fix swiper height
67
document.getElementsByClassName('swiper')[0].style.height = window.innerHeight*0.8+'px';
78
//hide preloader on window load
89
window.onload = function(){
@@ -174,33 +175,35 @@ if(localStorage.getItem('cloverside') == null){
174175
}
175176

176177
//close instructions
177-
$("#closecloverside").click(function() {
178-
close('cloverside');
179-
});
178+
document.getElementById("closecloverside").addEventListener("click", ()=>{
179+
close('cloverside');
180+
});
180181

181182

182183
//upload mission button
183-
$('#mission').change(function() {
184-
if ($(this).val() != '') $(this).prev().text('Mission: ' + $(this)[0].files[0].name);
185-
else $(this).prev().text('Choose code file');
186-
});
187-
$('#ub').click(function(){
188-
let file = document.getElementById("mission").files[0];
189-
if (file) {
190-
//read file contents
191-
fileReader.readAsText(file, "UTF-8");
192-
fileReader.onload = function(evt) {
193-
//send file contents to the server
184+
document.getElementById("mission").addEventListener("change", ()=>{
185+
if (document.getElementById("mission").value != '') document.getElementById("fl").innerText = 'Mission: ' + document.getElementById("mission").files[0].name;
186+
else document.getElementById("fl").innerText = 'Choose code';
187+
});
188+
document.getElementById("ub").addEventListener("click", ()=>{
189+
//get file
190+
let file = document.getElementById("mission").files[0];
191+
if (file) {
192+
//read it's contents
193+
fileReader.readAsText(file, "UTF-8");
194+
fileReader.onload = function(evt) {
195+
//send content to the server
194196
socket.emit('newMission', evt.target.result);
195197
document.getElementById('ub').innerText = 'Running...';
196-
setTimeout(function(){document.getElementById('ub').innerText = 'Upload & Run';document.getElementById('fl').innerText = 'Choose code file';}, 1000);
198+
setTimeout(function(){document.getElementById('ub').innerText = 'Upload & Run';document.getElementById('fl').innerText = 'Choose code';}, 1000);
199+
}
197200
}
198-
}
199-
//if upload button was pressed without choosing a file
200-
else{
201-
document.getElementById('ub').innerText = 'Please choose code file to upload!';
202-
}
203-
});
201+
//if upload button was pressed without choosing a file
202+
else{
203+
document.getElementById('ub').innerText = 'Choose file!';
204+
setTimeout(function(){document.getElementById('ub').innerText = 'Upload & Run'}, 1000);
205+
}
206+
});
204207

205208
//handle mission output
206209
socket.on('missionOutput', (mission) => {
@@ -222,47 +225,46 @@ socket.on('missionOutput', (mission) => {
222225
});
223226

224227
//close mission output
225-
$("#closemissionOut").click(function() {
226-
close('missionOut');
227-
});
228+
document.getElementById("closemissionOut").addEventListener("click", ()=>{
229+
close('missionOut');
230+
});
228231

229232
//send photo button onclick
230-
$("#gp").click(function() {
231-
socket.emit('req', {body: 'photo'});
232-
});
233+
document.getElementById("gp").addEventListener("click", ()=>{
234+
socket.emit('req', {body: 'photo'});
235+
});
233236

234237
//return button onclick
235-
$("#rtp").click(function() {
236-
//if user has not changed the return to operator settings
237-
if(localStorage.getItem('rtowarnclosed') == null){
238-
popUp('rtowarn');
239-
}
240-
else{
241-
//if user choosed 'return to my coordinates'
242-
if(localStorage.getItem('returnto') == 'mycoords'){
243-
//get user's position
244-
let gpsc = 0;
245-
map.locate({enableHighAccuracy: true}).on('locationfound', (e) => {
246-
if(gpsc == 0){
247-
//send request to the server
248-
socket.emit('req', {body: 'returnToHome', data: {to: 'user', lat: e.latitude, lon: e.longitude, alt: parseFloat(localStorage.getItem('alt')), speed: localStorage.getItem('speed'), action: localStorage.getItem('action')}});
249-
gpsc++;
250-
}
251-
});
238+
document.getElementById("rtp").addEventListener("click", ()=>{
239+
//if user has not changed the return settings
240+
if(!localStorage.getItem('rtowarnclosed')){
241+
popUp('rtowarn');
252242
}
253243
else{
254-
//if user choosed 'return to drone takeoff coordinates (coordinates of the first arm with gps)
255-
//send request to the server
256-
socket.emit('req', {body: 'returnToHome', data: {to: 'takeoff', alt: parseFloat(localStorage.getItem('alt')), speed: localStorage.getItem('speed'), action: localStorage.getItem('action')}});
244+
//if user choosed 'return to my coordinates'
245+
if(localStorage.getItem('returnto') == 'mycoords'){
246+
//get user coordinates
247+
let gpsc = 0;
248+
map.locate({enableHighAccuracy: true}).on('locationfound', (e) => {
249+
if(gpsc == 0){
250+
//send request to the server
251+
socket.emit('req', {body: 'returnToHome', data: {to: 'user', lat: e.latitude, lon: e.longitude, alt: parseFloat(localStorage.getItem('alt')), speed: localStorage.getItem('speed'), action: localStorage.getItem('action')}});
252+
gpsc++;
253+
}
254+
});
255+
}
256+
//if user chose 'return to the drone takeoff place' (coordinates of the first arming with gps)
257+
else{
258+
socket.emit('req', {body: 'returnToHome', data: {to: 'takeoff', alt: parseFloat(localStorage.getItem('alt')), speed: localStorage.getItem('speed'), action: localStorage.getItem('action')}});
259+
}
257260
}
258-
}
259-
});
261+
});
260262

261263
//close return warn
262-
$("#closertowarn").click(function() {
263-
localStorage.setItem('rtowarnclosed', ' ');
264-
close('rtowarn');
265-
});
264+
document.getElementById("closertowarn").addEventListener("click", ()=>{
265+
localStorage.setItem('rtowarnclosed', ' ');
266+
close('rtowarn');
267+
});
266268

267269
//handle return function errors
268270
socket.on('rError', function(){
@@ -276,34 +278,31 @@ socket.on('rTakeoffError', function(){
276278

277279

278280
//close return error
279-
$("#closertherror").click(function() {
280-
close('rtherror');
281-
});
281+
document.getElementById("closertherror").addEventListener("click", ()=>{
282+
close('rtherror');
283+
});
282284

283285
//close gps error
284-
$("#closegpswarn").click(function() {
285-
sessionStorage.setItem('gpswarnclosed', ' ');
286-
close('gpswarn');
287-
});
286+
document.getElementById("closegpswarn").addEventListener("click", ()=>{
287+
sessionStorage.setItem('gpswarnclosed', ' ');
288+
close('gpswarn');
289+
});
288290

289291

290292
//land button onclick
291-
$("#l").click(function() {
292-
//send land request to the server
293-
socket.emit('req', {body: 'land'});
294-
});
293+
document.getElementById("l").addEventListener("click", ()=>{
294+
socket.emit('req', {body: 'land'});
295+
});
295296

296297
//hover button onclick
297-
$("#h").click(function() {
298-
//send hover request to the server
299-
socket.emit('req', {body: 'hover'});
300-
});
298+
document.getElementById("h").addEventListener("click", ()=>{
299+
socket.emit('req', {body: 'hover'});
300+
});
301301

302-
//reboot button onclick
303-
$("#r").click(function() {
304-
//send disarm request to the server
305-
socket.emit('req', {body: 'disarm'});
306-
});
302+
//disarm button onclick
303+
document.getElementById("r").addEventListener("click", ()=>{
304+
socket.emit('req', {body: 'disarm'});
305+
});
307306

308307

309308

@@ -331,56 +330,53 @@ if(localStorage.getItem('speed') != null){
331330
}
332331

333332
//save settings button onclick
334-
$('#savesettings').click(function() {
335-
//set return alt and speed to the local storage
336-
localStorage.setItem('alt', document.getElementById('rtosalt').value);
337-
localStorage.setItem('speed', document.getElementById('rtosspeed').value);
338-
339-
//set action after return to the local storage
340-
let action;
341-
if(document.getElementById('action').value == 1){
342-
action = 'hover';
343-
}
344-
else{
345-
action = 'land';
346-
}
347-
localStorage.setItem('action', action);
348-
349-
//set a place to return to the local storage
350-
let returnto;
351-
if(document.getElementById('returnto').value == 1){
352-
returnto = 'mycoords';
353-
}
354-
else{
355-
returnto = 'takeoffcoords';
356-
}
357-
localStorage.setItem('returnto', returnto);
358-
359-
//enable auto photo requesting
360-
let autophoto;
361-
if(document.getElementById('atp').value == 1){
362-
autophoto = 'never';
363-
}
364-
else if(document.getElementById('atp').value == 2){
365-
autophoto = 30000;
366-
}
367-
else if(document.getElementById('atp').value == 3){
368-
autophoto = 60000;
369-
}
370-
else if(document.getElementById('atp').value == 4){
371-
autophoto = 300000;
372-
}
373-
if(autophoto != 'never'){
374-
autophotointerval = setInterval(getautophoto, autophoto);
375-
}
376-
else{
377-
try {
378-
clearInterval(autophotointerval);
379-
} catch(e) {}
380-
}
381-
document.getElementById('savesettings').innerText = 'Saved!';
382-
setTimeout(function(){document.getElementById('savesettings').innerText = 'Save'}, 400);
383-
});
333+
document.getElementById("savesettings").addEventListener("click", ()=>{
334+
//save altitude and speed of return
335+
localStorage.setItem('alt', document.getElementById('rtosalt').value);
336+
localStorage.setItem('speed', document.getElementById('rtosspeed').value);
337+
//save action after return
338+
let action;
339+
if(document.getElementById('action').value == 1){
340+
action = 'hover';
341+
}
342+
else{
343+
action = 'land';
344+
}
345+
localStorage.setItem('action', action);
346+
//save return place
347+
let returnto;
348+
if(document.getElementById('returnto').value == 1){
349+
returnto = 'mycoords';
350+
}
351+
else{
352+
returnto = 'takeoffcoords';
353+
}
354+
localStorage.setItem('returnto', returnto);
355+
//enable auto photo requesting
356+
let autophoto;
357+
if(document.getElementById('atp').value == 1){
358+
autophoto = 'never';
359+
}
360+
else if(document.getElementById('atp').value == 2){
361+
autophoto = 30000;
362+
}
363+
else if(document.getElementById('atp').value == 3){
364+
autophoto = 60000;
365+
}
366+
else if(document.getElementById('atp').value == 4){
367+
autophoto = 300000;
368+
}
369+
if(autophoto != 'never'){
370+
autophotointerval = setInterval(getautophoto, autophoto);
371+
}
372+
else{
373+
try {
374+
clearInterval(autophotointerval);
375+
} catch(e) {}
376+
}
377+
document.getElementById('savesettings').innerText = 'Saved!';
378+
setTimeout(function(){document.getElementById('savesettings').innerText = 'Save'}, 400);
379+
});
384380

385381
//setting up the drone marker on the map
386382
let dronemarker;

0 commit comments

Comments
 (0)