324 lines
11 KiB
HTML
324 lines
11 KiB
HTML
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<!-- Materialze style -->
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../css/adapter.css"/>
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../lib/css/materialize.css">
|
||
|
|
|
||
|
|
<script type="text/javascript" src="../../lib/js/jquery-3.2.1.min.js"></script>
|
||
|
|
<script type="text/javascript" src="../../socket.io/socket.io.js"></script>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="../../js/translate.js"></script>
|
||
|
|
<script type="text/javascript" src="../../lib/js/materialize.js"></script>
|
||
|
|
<script type="text/javascript" src="../../js/adapter-settings.js"></script>
|
||
|
|
<script type="text/javascript" src="adminWords.js"></script>
|
||
|
|
<!-- you have to define 2 functions in the global scope: -->
|
||
|
|
<script type="text/javascript">
|
||
|
|
var gSettings;
|
||
|
|
var mapTimer;
|
||
|
|
var mapLoaded;
|
||
|
|
|
||
|
|
function setValue(id, value, onChange) {
|
||
|
|
var $value = $('#' + id + '.value');
|
||
|
|
if ($value.attr('type') === 'checkbox') {
|
||
|
|
$value.prop('checked', value).on('change', function() {
|
||
|
|
var id = $(this).attr('id');
|
||
|
|
if (id === 'useSystemGPS') {
|
||
|
|
showHideSettings();
|
||
|
|
}
|
||
|
|
gSettings[id] = $(this).prop('checked');
|
||
|
|
onChange();
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
$value.val(value).on('change', function() {
|
||
|
|
var id = $(this).attr('id');
|
||
|
|
gSettings[id] = $(this).val();
|
||
|
|
if (id === 'longitude' || id === 'latitude') {
|
||
|
|
updateMap();
|
||
|
|
}
|
||
|
|
onChange();
|
||
|
|
}).on('keyup', function() {
|
||
|
|
$(this).trigger('change');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function initMap() {
|
||
|
|
mapLoaded = true;
|
||
|
|
updateMap(true);
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateMap(immediately) {
|
||
|
|
if (!mapLoaded) return;
|
||
|
|
if (!immediately) {
|
||
|
|
clearTimeout(mapTimer);
|
||
|
|
mapTimer = setTimeout(function () {
|
||
|
|
updateMap(true);
|
||
|
|
}, 1000);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (mapTimer) {
|
||
|
|
clearTimeout(mapTimer);
|
||
|
|
mapTimer = null;
|
||
|
|
}
|
||
|
|
|
||
|
|
var lng;
|
||
|
|
var lat;
|
||
|
|
if (gSettings.useSystemGPS) {
|
||
|
|
if (systemConfig && systemConfig.common && (systemConfig.common.longitude || systemConfig.common.latitude)) {
|
||
|
|
lng = systemConfig.common.longitude;
|
||
|
|
lat = systemConfig.common.latitude;
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
lng = gSettings.longitude;
|
||
|
|
lat = gSettings.latitude;
|
||
|
|
}
|
||
|
|
lng = lng || 0;
|
||
|
|
lat = lat || 0;
|
||
|
|
|
||
|
|
if (lat || lng) {
|
||
|
|
var map = new google.maps.Map(document.getElementById('map'), {
|
||
|
|
zoom: 14,
|
||
|
|
center: {lat: parseFloat(lat), lng: parseFloat(lng)}
|
||
|
|
});
|
||
|
|
|
||
|
|
var marker = new google.maps.Marker({
|
||
|
|
position: {lat: parseFloat(lat), lng: parseFloat(lng)},
|
||
|
|
map: map,
|
||
|
|
title: _('Your home')
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function showHideSettings() {
|
||
|
|
updateMap();
|
||
|
|
if ($('#useSystemGPS').prop('checked')) {
|
||
|
|
$('.local-coords').hide();
|
||
|
|
} else {
|
||
|
|
$('.local-coords').show();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function load(settings, onChange) {
|
||
|
|
var key1 = 'AIzaSyCIrBRZfZAE';
|
||
|
|
var key2 = '_0C1OplAUy7OXhiWLoZc3eY';
|
||
|
|
var key = key1 + key2;
|
||
|
|
|
||
|
|
// load google API
|
||
|
|
$.ajax({
|
||
|
|
// please do not miss use this api key!
|
||
|
|
url: 'https://maps.googleapis.com/maps/api/js?key=' + key + '&signed_in=true&callback=initMap',
|
||
|
|
dataType: 'script',
|
||
|
|
cache: true
|
||
|
|
});
|
||
|
|
|
||
|
|
if (settings.useSystemGPS === undefined) {
|
||
|
|
settings.useSystemGPS = (systemConfig.common.longitude && systemConfig.common.latitude);
|
||
|
|
}
|
||
|
|
if (settings.enableSendToHost === undefined) {
|
||
|
|
settings.enableSendToHost = false;
|
||
|
|
}
|
||
|
|
if (settings.enableExec === undefined) {
|
||
|
|
settings.enableExec = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
gSettings = settings;
|
||
|
|
|
||
|
|
$('.value').each(function () {
|
||
|
|
var id = $(this).attr('id');
|
||
|
|
setValue(id, settings[id] || '', onChange);
|
||
|
|
});
|
||
|
|
|
||
|
|
showHideSettings();
|
||
|
|
list2chips('.libraries', settings.libraries || '', onChange);
|
||
|
|
|
||
|
|
$('.tab-astro').on('click', function () {
|
||
|
|
updateMap();
|
||
|
|
});
|
||
|
|
|
||
|
|
onChange(false);
|
||
|
|
if (M) M.updateTextFields();
|
||
|
|
}
|
||
|
|
|
||
|
|
function list2chips(selector, list, onChange) {
|
||
|
|
var chips = list.split(/[,;\s]+/);
|
||
|
|
var data = [];
|
||
|
|
for (var c = 0; c < chips.length; c++) {
|
||
|
|
if (chips[c] && chips[c].trim()) {
|
||
|
|
data.push({tag: chips[c].trim()});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
$(selector).chips({
|
||
|
|
data: data,
|
||
|
|
placeholder: _('Module names'),
|
||
|
|
secondaryPlaceholder: _('Add module'),
|
||
|
|
onChipAdd: onChange,
|
||
|
|
onChipDelete: onChange
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function chips2list(selector) {
|
||
|
|
var data = $(selector).chips('getData');
|
||
|
|
var text = [];
|
||
|
|
for (var lib = 0; lib < data.length; lib++) {
|
||
|
|
text.push(data[lib].tag);
|
||
|
|
}
|
||
|
|
return text.join(' ');
|
||
|
|
}
|
||
|
|
|
||
|
|
function convertGrad(obj, attr) {
|
||
|
|
// Extract ° " and '
|
||
|
|
var m = obj[attr].match(/([0-9]+)°(\s*)(([0-9]+)')?(\s*)(([0-9]+)")?(\s*)([A-Z]+)?/);
|
||
|
|
if (m) {
|
||
|
|
var grad = m[1];
|
||
|
|
var min = m[4];
|
||
|
|
var sec = m[7];
|
||
|
|
var dir = m[9];
|
||
|
|
|
||
|
|
if (grad !== undefined && grad !== null) {
|
||
|
|
// Graddez = Grad + ( Minuten * 60 + Sekunden ) / 3600
|
||
|
|
var result = parseInt(grad, 10);
|
||
|
|
if (min !== undefined && min !== null) {
|
||
|
|
result += parseInt(min, 10) / 60;
|
||
|
|
if (sec !== undefined && sec !== null) {
|
||
|
|
result += parseInt(sec, 10) / 3600;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (dir) {
|
||
|
|
dir = dir.toLowerCase();
|
||
|
|
if (dir === 's' || dir === 'w') {
|
||
|
|
result = (-1) * result;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
obj[attr] = result.toFixed(6);
|
||
|
|
return true;
|
||
|
|
} else {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
showMessage(_('Invalid format. Use A°B\'C"D'));
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function save(callback) {
|
||
|
|
var obj = {};
|
||
|
|
|
||
|
|
$('.value').each(function () {
|
||
|
|
var $this = $(this);
|
||
|
|
if ($this.attr('type') === 'checkbox') {
|
||
|
|
obj[$this.attr('id')] = $this.prop('checked');
|
||
|
|
} else {
|
||
|
|
obj[$this.attr('id')] = $this.val();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
obj.libraries = chips2list('.libraries');
|
||
|
|
|
||
|
|
if (obj.latitude.indexOf('°') !== -1) {
|
||
|
|
if (!convertGrad(obj, 'latitude')) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
$('#latitude').val(obj.latitude);
|
||
|
|
}
|
||
|
|
if (obj.longitude.indexOf('°') !== -1) {
|
||
|
|
if (!convertGrad(obj, 'longitude')) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
$('#longitude').val(obj.longitude);
|
||
|
|
}
|
||
|
|
|
||
|
|
callback(obj);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
.top-padding {
|
||
|
|
padding: 1rem;
|
||
|
|
}
|
||
|
|
#map {
|
||
|
|
width: 100%;
|
||
|
|
height: calc(100% - 60px);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- you have to put your config page in a div with id adapter-container -->
|
||
|
|
<div class="m adapter-container">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col s12">
|
||
|
|
<ul class="tabs">
|
||
|
|
<li class="tab col s5"><a href="#tab-main" class="translate active">Main settings</a></li>
|
||
|
|
<li class="tab col s5 tab-astro"><a href="#tab-astro" class="translate">Astro settings</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div id="tab-main" class="col s12 page">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col s6 m4 l2">
|
||
|
|
<img src="js.png" class="logo">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col s12">
|
||
|
|
<label class="translate">Additional npm modules:</label>
|
||
|
|
<div class="chips libraries"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="input-field col s12 m6">
|
||
|
|
<input id="enableSetObject" class="value" type="checkbox"/>
|
||
|
|
<span for="enableSetObject" class="translate">Enable command "setObject":</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="input-field col s12 m6">
|
||
|
|
<input id="enableSendToHost" class="value" type="checkbox"/>
|
||
|
|
<span for="enableSendToHost" class="translate">Enable command "sendToHost":</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="input-field col s12 m6">
|
||
|
|
<input id="enableExec" class="value" type="checkbox"/>
|
||
|
|
<span for="enableExec" class="translate">Enable command "exec":</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="input-field col s12 m6">
|
||
|
|
<input type="checkbox" id="subscribe" class="value" />
|
||
|
|
<span for="subscribe" class="translate">Do not subscribe all states on start:</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="tab-astro" class="col s12 page">
|
||
|
|
<div class="row top-padding">
|
||
|
|
<div class="col s12 m6">
|
||
|
|
<div class="row">
|
||
|
|
<div class="input-field col s12">
|
||
|
|
<input id="useSystemGPS" type="checkbox" class="value filled-in" />
|
||
|
|
<span for="useSystemGPS" class="translate">Use system settings:</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row local-coords">
|
||
|
|
<div class="input-field col s12">
|
||
|
|
<input id="latitude" type="text" class="value" />
|
||
|
|
<label for="latitude" class="translate">Latitude °:</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row local-coords">
|
||
|
|
<div class="input-field col s12">
|
||
|
|
<input id="longitude" type="text" class="value" />
|
||
|
|
<label for="longitude" class="translate">Longitude °:</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row local-coords">
|
||
|
|
<div class="col s12">
|
||
|
|
<p class="translate">Help</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col s12 m6 map">
|
||
|
|
<div id="map"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|