Parse MSP messages from the backpack while TX is in mavlink mode (#2883)
[ExpressLRS.git] / src / html / lr1121.js
blob4862abdcc9b8a31da3e0080391b5e2c614a83f93
1 /* eslint-disable no-unused-vars */
2 /* eslint-disable comma-dangle */
3 /* eslint-disable require-jsdoc */
5 document.addEventListener('DOMContentLoaded', onReady, false);
7 function _(el) {
8   return document.getElementById(el);
11 function onReady() {
12   if (window.File && window.FileList && window.FileReader) {
13     initFiledrag();
14   }
15   loadData();
18 function dec2hex(i, len) {
19   return "0x" + (i+0x10000).toString(16).substr(-len).toUpperCase();
22 function loadData() {
23   xmlhttp = new XMLHttpRequest();
24   xmlhttp.onreadystatechange = function() {
25     if (this.readyState === 4 && this.status === 200) {
26       const data = JSON.parse(this.responseText);
27       _('radio_type1').textContent = dec2hex(data['radio1']['type'], 2)
28       _('radio_hardware1').textContent = dec2hex(data['radio1']['hardware'], 2)
29       _('radio_firmware1').textContent = dec2hex(data['radio1']['firmware'], 4)
30       if (data['radio2']) {
31         _('radios').style.display='block'
32         _('radio_type2').textContent = dec2hex(data['radio2']['type'], 2)
33         _('radio_hardware2').textContent = dec2hex(data['radio2']['hardware'], 2)
34         _('radio_firmware2').textContent = dec2hex(data['radio2']['firmware'], 4)
35       }
36     }
37   };
38   xmlhttp.open('GET', '/lr1121.json', true);
39   xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
40   xmlhttp.send();
43 function initFiledrag() {
44   const fileselect = _('firmware_file');
45   const filedrag = _('filedrag');
47   fileselect.addEventListener('change', fileSelectHandler, false);
49   const xhr = new XMLHttpRequest();
50   if (xhr.upload) {
51     filedrag.addEventListener('dragover', fileDragHover, false);
52     filedrag.addEventListener('dragleave', fileDragHover, false);
53     filedrag.addEventListener('drop', fileSelectHandler, false);
54     filedrag.style.display = 'block';
55   }
58 function fileDragHover(e) {
59   e.stopPropagation();
60   e.preventDefault();
61   if (e.target === _('filedrag')) e.target.className = (e.type === 'dragover' ? 'hover' : '');
64 function fileSelectHandler(e) {
65   fileDragHover(e);
66   const files = e.target.files || e.dataTransfer.files;
67   uploadFile(files[0]);
70 function uploadFile(file) {
71   _('upload_btn').disabled = true
72   try {
73     const formdata = new FormData();
74     formdata.append('upload', file, file.name);
75     const ajax = new XMLHttpRequest();
76     ajax.upload.addEventListener('progress', progressHandler, false);
77     ajax.addEventListener('load', completeHandler, false);
78     ajax.addEventListener('error', errorHandler, false);
79     ajax.addEventListener('abort', abortHandler, false);
80     ajax.open('POST', '/lr1121');
81     ajax.setRequestHeader('X-FileSize', file.size);
82     ajax.setRequestHeader('X-Radio', document.querySelector("input[name=optionsRadio]:checked").value);
83     ajax.send(formdata);
84   }
85   catch (e) {
86     _('upload_btn').disabled = false
87   }
90 function progressHandler(event) {
91   // _("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
92   const percent = Math.round((event.loaded / event.total) * 100);
93   _('progressBar').value = percent;
94   _('status').innerHTML = percent + '% uploaded... please wait';
97 function completeHandler(event) {
98   _('status').innerHTML = '';
99   _('progressBar').value = 0;
100   _('upload_btn').disabled = false
101   const data = JSON.parse(event.target.responseText);
102   if (data.status === 'ok') {
103     function showMessage() {
104       cuteAlert({
105         type: 'success',
106         title: 'Update Succeeded',
107         message: data.msg
108       });
109     }
110     // This is basically a delayed display of the success dialog with a fake progress
111     let percent = 0;
112     const interval = setInterval(()=>{
113       percent = percent + 2;
114       _('progressBar').value = percent;
115       _('status').innerHTML = percent + '% flashed... please wait';
116       if (percent === 100) {
117         clearInterval(interval);
118         _('status').innerHTML = '';
119         _('progressBar').value = 0;
120         showMessage();
121       }
122     }, 100);
123   } else if (data.status === 'mismatch') {
124     cuteAlert({
125       type: 'question',
126       title: 'Targets Mismatch',
127       message: data.msg,
128       confirmText: 'Flash anyway',
129       cancelText: 'Cancel'
130     }).then((e)=>{
131       const xmlhttp = new XMLHttpRequest();
132       xmlhttp.onreadystatechange = function() {
133         if (this.readyState === 4) {
134           _('status').innerHTML = '';
135           _('progressBar').value = 0;
136           if (this.status === 200) {
137             const data = JSON.parse(this.responseText);
138             cuteAlert({
139               type: 'info',
140               title: 'Force Update',
141               message: data.msg
142             });
143           } else {
144             cuteAlert({
145               type: 'error',
146               title: 'Force Update',
147               message: 'An error occurred trying to force the update'
148             });
149           }
150         }
151       };
152       xmlhttp.open('POST', '/forceupdate', true);
153       const data = new FormData();
154       data.append('action', e);
155       xmlhttp.send(data);
156     });
157   } else {
158     cuteAlert({
159       type: 'error',
160       title: 'Update Failed',
161       message: data.msg
162     });
163   }
166 function errorHandler(event) {
167   _('status').innerHTML = '';
168   _('progressBar').value = 0;
169   _('upload_btn').disabled = false
170   cuteAlert({
171     type: 'error',
172     title: 'Update Failed',
173     message: event.target.responseText
174   });
177 function abortHandler(event) {
178   _('status').innerHTML = '';
179   _('progressBar').value = 0;
180   _('upload_btn').disabled = false
181   cuteAlert({
182     type: 'info',
183     title: 'Update Aborted',
184     message: event.target.responseText
185   });
188 @@include("libs.js")