335 lines
10 KiB
JavaScript
335 lines
10 KiB
JavaScript
|
// TODO poner esto dentro de un onDocumentReady()
|
||
|
|
var app = new Vue({
|
||
|
|
el: '#app',
|
||
|
|
data: {
|
||
|
|
allowForceUpdate: false,
|
||
|
|
browsertime: Math.floor(Date.now() / 1000),
|
||
|
|
currentPage: 0,
|
||
|
|
development: false,
|
||
|
|
devicetime: 0,
|
||
|
|
file: '',
|
||
|
|
intervals: false,
|
||
|
|
kitinfo: false,
|
||
|
|
kitstatus: [],
|
||
|
|
lastPage: 0,
|
||
|
|
logging: [],
|
||
|
|
page: [
|
||
|
|
{'visible': true, 'footer': 'HOME', 'backTo': 0, 'back': false },
|
||
|
|
{'visible': false, 'footer': 'REGISTER Key', 'backTo': 0, 'back': true },
|
||
|
|
{'visible': false, 'footer': 'REGISTER WiFi','backTo': 1, 'back': true },
|
||
|
|
{'visible': false, 'footer': 'Connecting', 'backTo': 0, 'back': false },
|
||
|
|
{'visible': false, 'footer': 'Connecting', 'backTo': 0, 'back': true },
|
||
|
|
{'visible': false, 'footer': 'SD card', 'backTo': 0, 'back': true },
|
||
|
|
{'visible': false, 'footer': 'Kit info', 'backTo': 0, 'back': true },
|
||
|
|
{'visible': false, 'footer': 'Empty', 'backTo': 0, 'back': true },
|
||
|
|
],
|
||
|
|
publishinterval: 2,
|
||
|
|
readinginterval: 60,
|
||
|
|
sdlog: false,
|
||
|
|
selectedWifi: '',
|
||
|
|
sensor1: false,
|
||
|
|
sensor2: false,
|
||
|
|
sensor3: false,
|
||
|
|
sensor4: false,
|
||
|
|
sensors: false,
|
||
|
|
showDebug: false,
|
||
|
|
showExperimental: false,
|
||
|
|
showInterval: false,
|
||
|
|
showSdCard: false,
|
||
|
|
theApi: window.location.protocol + '//' + window.location.host + '/',
|
||
|
|
usertoken: '',
|
||
|
|
usertokenError: '',
|
||
|
|
version: 'SCK 2.0 / SAM V0.0.2 / ESP V0.0.2',
|
||
|
|
vueVersion: Vue.version,
|
||
|
|
weHaveTriedConnecting: false,
|
||
|
|
wifiname: '',
|
||
|
|
wifipass: '',
|
||
|
|
wifisync: true,
|
||
|
|
wifis: {
|
||
|
|
"nets": [{
|
||
|
|
"ssid": "Fake-WIFI-1",
|
||
|
|
"ch": 1,
|
||
|
|
"rssi": -64
|
||
|
|
}, {
|
||
|
|
"ssid": "Fake-Wifi-2",
|
||
|
|
"ch": 1,
|
||
|
|
"rssi": -89
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted: function () {
|
||
|
|
// When the app is mounted
|
||
|
|
this.logging.push('App started.');
|
||
|
|
|
||
|
|
this.checkIfDebugMode;
|
||
|
|
|
||
|
|
// 1. Remove loading screen
|
||
|
|
var el = document.getElementById('loading');
|
||
|
|
el.parentNode.removeChild(el);
|
||
|
|
|
||
|
|
var el1 = document.getElementById('app');
|
||
|
|
el1.style.display = 'block';
|
||
|
|
|
||
|
|
// 2. Select which API to use, dev vs prod
|
||
|
|
this.selectApiUrl();
|
||
|
|
|
||
|
|
// 3. Fetch available Wifis + status
|
||
|
|
this.jsGet('aplist');
|
||
|
|
this.jsGet('status');
|
||
|
|
// This can only be run once. We don't want the usertoken to be updated every 9
|
||
|
|
// seconds if the user is typing it in
|
||
|
|
this.jsGet('token');
|
||
|
|
|
||
|
|
// This checks if connection to the kit has been lost, every X sec
|
||
|
|
this.periodic(6000);
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
allowFirmwareUpdate: function(){
|
||
|
|
this.allowForceUpdate = 'true';
|
||
|
|
},
|
||
|
|
copyTextToClipboard: function(containerid){
|
||
|
|
// We need to copy the text temporary into a textBox to be able to copy it to clipboard.
|
||
|
|
var textToCopy = document.getElementById('kitinfo').innerText;
|
||
|
|
var textBox = document.createElement('textarea');
|
||
|
|
textBox.value = textToCopy;
|
||
|
|
document.body.appendChild(textBox);
|
||
|
|
textBox.select();
|
||
|
|
document.execCommand('copy');
|
||
|
|
textBox.remove();
|
||
|
|
document.getElementById('copied-notification').innerHTML = 'Text copied!'
|
||
|
|
},
|
||
|
|
periodic: function (ms) {
|
||
|
|
var that = this;
|
||
|
|
|
||
|
|
// TODO: should we check status every 5 sec?
|
||
|
|
setTimeout(function(){
|
||
|
|
that.jsGet('status');
|
||
|
|
return that.periodic(ms);
|
||
|
|
}, ms);
|
||
|
|
},
|
||
|
|
|
||
|
|
selectApiUrl: function () {
|
||
|
|
// If we are running this from the kit,
|
||
|
|
// the API should be on the same IP and port
|
||
|
|
// Most likely a 192.168.*.1/status
|
||
|
|
|
||
|
|
// If we are using port 8000, we are in development, and the API should be on port 3000
|
||
|
|
if (window.location.port === '8000') {
|
||
|
|
this.theApi = 'http://' + window.location.hostname + ':3000/';
|
||
|
|
this.development = true;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
xmlWrapper: function(theUrl, callback) {
|
||
|
|
// console.log('theurl: ' + theUrl);
|
||
|
|
var xmlHttp = new XMLHttpRequest();
|
||
|
|
var that = this;
|
||
|
|
|
||
|
|
xmlHttp.onreadystatechange = function() {
|
||
|
|
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
|
||
|
|
callback(xmlHttp.responseText);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
xmlHttp.onerror = function(e){
|
||
|
|
// Don't show this error, if we have tried connecting. Only on real API failures
|
||
|
|
if (!that.weHaveTriedConnecting) {
|
||
|
|
that.notify('Your kit is not responding', 5000, 'bg-red');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
xmlHttp.open( "GET", theUrl, true ); // false for synchronous request, true = async
|
||
|
|
xmlHttp.send( null );
|
||
|
|
},
|
||
|
|
|
||
|
|
jsGet: function(path) {
|
||
|
|
var that = this;
|
||
|
|
|
||
|
|
this.xmlWrapper(this.theApi + path, function(res){
|
||
|
|
if (path === 'aplist') {
|
||
|
|
that.wifis = JSON.parse(res);
|
||
|
|
}
|
||
|
|
if (path === 'status'){
|
||
|
|
//that.notify('Getting status', 1000);
|
||
|
|
that.kitstatus = JSON.parse(res);
|
||
|
|
}
|
||
|
|
if (path === 'token'){
|
||
|
|
tmpToken = JSON.parse(res)['token'];
|
||
|
|
if (tmpToken !== "null") {
|
||
|
|
that.usertoken = tmpToken;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
},
|
||
|
|
// Not actually a POST request, but a GET with params
|
||
|
|
jsPost: function(path, purpose){
|
||
|
|
this.browsertime = Math.floor(Date.now() / 1000);
|
||
|
|
var that = this;
|
||
|
|
// Available parameters:
|
||
|
|
// /set?ssid=value1&password=value2&token=value3&epoch=value
|
||
|
|
|
||
|
|
if (purpose == 'connect'){
|
||
|
|
this.weHaveTriedConnecting = true;
|
||
|
|
this.notify('Kit is trying to connect online...', 5000);
|
||
|
|
that.xmlWrapper(that.theApi + path +
|
||
|
|
'?ssid=' + encodeURIComponent(that.selectedWifi) +
|
||
|
|
'&password=' + encodeURIComponent(that.wifipass) +
|
||
|
|
'&token=' + that.usertoken +
|
||
|
|
'&epoch=' + that.browsertime +
|
||
|
|
'&mode=network',
|
||
|
|
function(res){
|
||
|
|
console.log('Kit response: ' + res);
|
||
|
|
});
|
||
|
|
// After we try to connect, we go to the next page.
|
||
|
|
this.gotoPage();
|
||
|
|
}
|
||
|
|
|
||
|
|
if (purpose == 'synctime'){
|
||
|
|
this.notify('Starting to log on SD CARD..', 2000);
|
||
|
|
this.xmlWrapper(this.theApi + path + '?epoch=' + this.browsertime + '&mode=sdcard', function(res){
|
||
|
|
// TODO: What is the correct response.key from the kit?
|
||
|
|
that.notify(JSON.parse(res).todo, 5000);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
checkIfTokenIsValid(){
|
||
|
|
if (this.usertoken.length === 6) {
|
||
|
|
this.gotoPage();
|
||
|
|
}else{
|
||
|
|
this.usertokenError = 'You need exactly 6 characters'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
gotoPage: function(num){
|
||
|
|
|
||
|
|
// Keep lastPage in memory
|
||
|
|
this.lastPage = this.currentPage;
|
||
|
|
|
||
|
|
// Hide current page
|
||
|
|
this.page[this.currentPage].visible = false;
|
||
|
|
|
||
|
|
// If no page specified, we go to the next page
|
||
|
|
if ( typeof num === 'undefined') {
|
||
|
|
// Don't go too far, when clicking 'Next'
|
||
|
|
if ( this.currentPage === (this.page.length - 1)) {
|
||
|
|
//console.log('Last page: ' + this.currentPage)
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.currentPage = parseInt(this.currentPage + 1);
|
||
|
|
}else{
|
||
|
|
this.currentPage = parseInt(num);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Show it
|
||
|
|
this.page[this.currentPage].visible = true;
|
||
|
|
|
||
|
|
this.logging.push('Go to page: ' + this.currentPage);
|
||
|
|
},
|
||
|
|
|
||
|
|
notify: function(msg, duration, className){
|
||
|
|
if (duration === 'undefined') {
|
||
|
|
console.log('no duration');
|
||
|
|
duration = 1000;
|
||
|
|
}
|
||
|
|
|
||
|
|
//All events should also go to the logging section
|
||
|
|
this.logging.push(msg);
|
||
|
|
|
||
|
|
var newtoast = document.createElement("div");
|
||
|
|
if (className) {
|
||
|
|
newtoast.className = "toast " + className;
|
||
|
|
}else{
|
||
|
|
newtoast.className = "toast";
|
||
|
|
}
|
||
|
|
newtoast.innerHTML = msg;
|
||
|
|
document.getElementById("toast-wrapper").appendChild(newtoast);
|
||
|
|
|
||
|
|
setTimeout(function(){
|
||
|
|
newtoast.outerHTML = "";
|
||
|
|
delete newtoast;
|
||
|
|
}, duration);
|
||
|
|
|
||
|
|
console.log('Notify:', msg);
|
||
|
|
},
|
||
|
|
|
||
|
|
checkUploadForm: function(e){
|
||
|
|
this.file = this.$refs.file.files[0];
|
||
|
|
},
|
||
|
|
|
||
|
|
// POST the file to /action via AJAX
|
||
|
|
submitFirmware: function(e){
|
||
|
|
var that = this;
|
||
|
|
firmStatus = document.getElementById('firmware-update-status');
|
||
|
|
firmStatusExtra = document.getElementById('firmware-status-extra');
|
||
|
|
firmStatus.classList = '';
|
||
|
|
firmStatus.classList += 'text-yellow';
|
||
|
|
firmStatus.innerHTML = 'Updating...';
|
||
|
|
firmStatusExtra.innerHTML = ' ';
|
||
|
|
|
||
|
|
let formData = new FormData();
|
||
|
|
let req = new XMLHttpRequest();
|
||
|
|
formData.append('file', this.file);
|
||
|
|
|
||
|
|
req.onreadystatechange = function() {
|
||
|
|
if (req.readyState === 4) {
|
||
|
|
console.log('request:', req);
|
||
|
|
firmStatus.innerHTML = ' ' + req.response;
|
||
|
|
firmStatusExtra.innerHTML = ' ';
|
||
|
|
|
||
|
|
// Color
|
||
|
|
if (req.response.startsWith("ERROR")) {
|
||
|
|
that.notify('Update failed', 5000, 'bg-red');
|
||
|
|
firmStatusExtra.innerHTML = 'Something went wrong :(<br/>Please be sure to select the right file and try again !!';
|
||
|
|
firmStatus.classList = '';
|
||
|
|
firmStatus.classList += 'text-red';
|
||
|
|
} else if (req.response.startsWith("Succeed")) {
|
||
|
|
that.weHaveTriedConnecting = true;
|
||
|
|
that.notify('Kit Updated...', 5000);
|
||
|
|
firmStatusExtra.innerHTML = 'Congratulations !!<br/>Your kit will restart so you can reconnect and complete the configuration process.<br/>If you need a Device key go to <span class="text-blue"><a href="https://start.smartcitizen.me">start.smartcitizen.me</a></span> to obtain a new one.';
|
||
|
|
firmStatus.classList = '';
|
||
|
|
firmStatus.classList += 'text-green';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
req.onerror = function(e){
|
||
|
|
console.log('error:', e);
|
||
|
|
}
|
||
|
|
req.onprogress = function(e){
|
||
|
|
console.log('progress:', e)
|
||
|
|
}
|
||
|
|
req.onload = function(e){
|
||
|
|
console.log('onload:', e)
|
||
|
|
}
|
||
|
|
req.open("POST", this.theApi + 'update');
|
||
|
|
//req.open("GET", this.theApi + 'ping');
|
||
|
|
req.send(formData);
|
||
|
|
console.log('formData sent via AJAX to: ' + this.theApi + 'update');
|
||
|
|
},
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
checkIfDebugMode: function(){
|
||
|
|
if (window.location.hash === '#debug'){
|
||
|
|
// Enables debug buttons
|
||
|
|
this.showDebug = true;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
sortedWifi: function () {
|
||
|
|
this.wifis.nets.sort(function (a, b) {
|
||
|
|
return a.rssi - b.rssi;
|
||
|
|
});
|
||
|
|
return this.wifis.nets.reverse();
|
||
|
|
},
|
||
|
|
usertokenCheck: function(){
|
||
|
|
return this.usertoken.length === 6;
|
||
|
|
},
|
||
|
|
selectedWifiCheck: function(){
|
||
|
|
return this.selectedWifi.length > 0;
|
||
|
|
},
|
||
|
|
checkIfFileSelected: function(){
|
||
|
|
return this.file.size > 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|