227 lines
5.5 KiB
JavaScript
227 lines
5.5 KiB
JavaScript
if ('serviceWorker' in navigator) {
|
|
window.addEventListener('load', () => {
|
|
navigator.serviceWorker.register('serviceWorker.js')
|
|
.then(registration => {
|
|
console.log('Service Worker is registered', registration);
|
|
})
|
|
.catch(err => {
|
|
console.error('Registration failed:', err);
|
|
});
|
|
});
|
|
}
|
|
|
|
$('#valueSelector').change(function() {
|
|
console.log($(this).val());
|
|
if( $(this).val() == 'time') {
|
|
$('#atTime').prop( "disabled", false );
|
|
} else if( $(this).val() == 'atDeviceValue') {
|
|
$('#atDeviceValue').prop( "disabled", false );
|
|
$('#atDeviceValueInt').prop( "disabled", false );
|
|
} else {
|
|
$('#atDeviceValue').prop( "disabled", true );
|
|
}
|
|
});
|
|
|
|
var pressTimer;
|
|
var touch = 0;
|
|
var touchSubId = "";
|
|
$("div.square-content").on('touchend', function (e){
|
|
clearTimeout(pressTimer);
|
|
});
|
|
|
|
$("div.square-content").on('touchstart', function (eTarget) {
|
|
var id = $(this).attr('id').replace('device-', '');
|
|
var subId = $(this).attr('data-sub-device-id');
|
|
|
|
touch++;
|
|
if(touch == 2 && touchSubId == subId){
|
|
console.log("Detail");
|
|
$("#modal-detail-"+subId).removeClass('modal-container-hiden').show();
|
|
ajaxChart(subId);
|
|
touch = 0;
|
|
touchSubId = "";
|
|
return;
|
|
}
|
|
touchSubId = subId;
|
|
|
|
pressTimer = window.setTimeout(function (e) {
|
|
console.log("Setting");
|
|
$("#modal-setting-"+id).removeClass('modal-container-hiden').show();
|
|
}, 500);
|
|
});
|
|
|
|
$("div.square-content").mousedown(function(e) {
|
|
if (event.which == 3) {
|
|
var windowLoc = $(location).attr('pathname');
|
|
windowLoc = windowLoc.substring(windowLoc.lastIndexOf("/"));
|
|
console.log(windowLoc);
|
|
var id = null;
|
|
if (windowLoc == "/") {
|
|
id = $(this).attr('id').replace('device-', '');
|
|
} else if (windowLoc == "/scene") {
|
|
id = $(this).attr('id').replace('scene-', '');
|
|
}
|
|
$("#modal-setting-"+id).removeClass('modal-container-hiden').show();
|
|
console.log("Setting");
|
|
console.log("modal" + id);
|
|
}
|
|
});
|
|
|
|
$(".close").on('click', function (e) {
|
|
var a = $(this).parent().parent();
|
|
a.hide();
|
|
});
|
|
|
|
$(this).bind("contextmenu", function(e) {
|
|
e.preventDefault();
|
|
});
|
|
|
|
$("div.square-content").on('dblclick', function (eTarget) {
|
|
windowLoc = windowLoc.substring(windowLoc.lastIndexOf("/"));
|
|
if (windowLoc == "/") {
|
|
console.log("Detail");
|
|
var subId = $(this).attr('data-sub-device-id');
|
|
ajaxChart(subId);
|
|
$("#modal-detail-"+subId).removeClass('modal-container-hiden').show();
|
|
}
|
|
});
|
|
|
|
$("input#sleepTime").change(function() {
|
|
console.log("Input text changed!");
|
|
});
|
|
|
|
var element = $('div.delete');
|
|
element.hide();
|
|
$("a#remove").on('click', function (e) {
|
|
console.log("Show/Hide Button");
|
|
var element = $('div.delete');
|
|
element.toggle();
|
|
});
|
|
|
|
function ajaxChart(id, period = 'day', group = 'hour'){
|
|
$.ajax({
|
|
url: 'ajax',
|
|
type: 'POST',
|
|
dataType: 'json',
|
|
data: {
|
|
"subDevice": id,
|
|
"action": 'chart',
|
|
"period": period,
|
|
"group": group
|
|
},
|
|
success: function(data){
|
|
console.log('ID: ',id, 'DATA: ', data);
|
|
var ctx = document.getElementById('canvas-'+id).getContext('2d');
|
|
var myChart = new Chart(ctx, data);
|
|
},
|
|
error: function (request, status, error) {
|
|
console.log("ERROR ajaxChart():", request, error);
|
|
}
|
|
});
|
|
}
|
|
|
|
//select room on load
|
|
var windowLoc = $(location).attr('pathname');
|
|
windowLoc = windowLoc.substring(windowLoc.lastIndexOf("/"));
|
|
console.log();
|
|
if (windowLoc == "/") {
|
|
var selectRoomId = localStorage.getItem("selectedRoomId");
|
|
console.log('Saved Selected Room ID '+ selectRoomId);
|
|
$('[name="room"]').val(selectRoomId);
|
|
$('.device-button').each(function(){
|
|
if (selectRoomId != 'all'){
|
|
if($(this).data('room-id') != selectRoomId){
|
|
$(this).hide();
|
|
} else {
|
|
$(this).show();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
//Room selector
|
|
$( '[name="room"]' ).change(function (e) {
|
|
console.log('Selected Room ID ' + this.value)
|
|
var roomId = this.value;
|
|
localStorage.setItem("selectedRoomId", roomId);
|
|
$('.device-button').show();
|
|
if (roomId != 'all'){
|
|
$('.device-button').each(function(){
|
|
if($(this).data('room-id') != roomId){
|
|
$(this).hide();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
|
|
var autoUpdate = setInterval(function(){
|
|
$.ajax({
|
|
url: 'ajax',
|
|
type: 'POST',
|
|
dataType: 'json',
|
|
data: {
|
|
"action": 'getState'
|
|
},
|
|
success: function(data){
|
|
// console.log('DATA: ', data);
|
|
for (const key in data) {
|
|
if (data.hasOwnProperty(key)) {
|
|
const device = data[key];
|
|
$('[data-sub-device-id="'+key+'"]')
|
|
.find('.device-button-value')
|
|
.text(device['value'])
|
|
.attr('title',device['time'])
|
|
}
|
|
}
|
|
},
|
|
error: function (request, status, error) {
|
|
console.log("ERROR ajaxChart():", request, error);
|
|
}
|
|
});
|
|
},2000);
|
|
|
|
|
|
|
|
//Graphs
|
|
$('.graph-period').on('click', function (e) {
|
|
var subId = $(this).attr('data-sub-device-id');
|
|
var period = $(this).attr('data-period');
|
|
var groupBy = $(this).attr('data-group');
|
|
ajaxChart(subId, period, groupBy);
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|