iobroker.daswetter
Version:
ioBroker DasWetter.com Adapter
525 lines (437 loc) • 19.7 kB
HTML
<html>
<head>
<!-- these 4 files always have to be included -->
<link rel="stylesheet" type="text/css" href="../../lib/css/materialize.css">
<link rel="stylesheet" type="text/css" href="../../css/adapter.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>
<!-- these files always have to be included -->
<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="words.js"></script>
<script type="text/javascript">
var timeout;
var Path2Delete = true;
function showHideSettings() {
if (Path2Delete) {
$('.col-delete-unused-ds').show();
$('.col-delete-unused-ds-descr').show();
}
else {
$('.col-delete-unused-ds').hide();
$('.col-delete-unused-ds-descr').hide();
}
var name = $('#iconSet').val();
name = parseInt(name, 10);
if (name == 5 || name == 6) {
$('.col-use-png-or-svg').show();
}
else {
$('.col-use-png-or-svg').hide();
}
if (name == 5) {
$('.col-use-color-or-bw').show();
}
else {
$('.col-use-color-or-bw').hide();
}
if (name == 7) {
$('.col-use-custom-path').show();
$('.col-use-custom-path-descr').show();
$('.col-use-custom-path-ext').show();
}
else {
$('.col-use-custom-path').hide();
$('.col-use-custom-path-descr').hide();
$('.col-use-custom-path-ext').hide();
}
}
function showHideWindSettings() {
var name = $('#windiconSet').val();
console.log('wind icon set ' + name);
if (name == 'custom') {
$('.col-use-wind-custom-path').show();
$('.col-use-wind-custom-path-descr').show();
$('.col-use-wind-custom-path-ext').show();
}
else {
$('.col-use-wind-custom-path').hide();
$('.col-use-wind-custom-path-descr').hide();
$('.col-use-wind-custom-path-ext').hide();
}
}
function showHideMoonSettings() {
var name = $('#mooniconSet').val();
console.log('moon icon set ' + name);
if (name == 'custom') {
$('.col-use-moon-custom-path').show();
$('.col-use-moon-custom-path-descr').show();
$('.col-use-moon-custom-path-ext').show();
}
else {
$('.col-use-moon-custom-path').hide();
$('.col-use-moon-custom-path-descr').hide();
$('.col-use-moon-custom-path-ext').hide();
}
}
function showWindIconSet() {
var text = [];
var url = '';
var ext = '';
const maxIcons = 29;
var name = $('#windiconSet').val();
if (name == 'custom') {
url = $('#WindCustomPath').val();
ext = $('#WindCustomPathExt').val();
}
else {
var url = '/adapter/daswetter/icons/viento-wind/'+name+'/';
var ext = '.png';
}
for (var i = 1; i <= maxIcons; i++) {
text.push('<img src="' + url + i + ext + '" width="50" alt="' + i + '"/>');
}
text.push('<p> ' + url + '1' + ext + ' </p>');
$('.windicons-show').html(text.join(' '));
showHideSettings();
showHideWindSettings();
showHideMoonSettings();
}
function showMoonIconSet() {
var text = [];
var url = '';
var ext = '';
const maxIcons = 29;
var name = $('#mooniconSet').val();
if (name == 'custom') {
url = $('#MoonCustomPath').val();
ext = $('#MoonCustomPathExt').val();
}
else {
url = '/adapter/daswetter/icons/luna-moon/';
ext = '.png';
}
for (var i = 1; i <= maxIcons; i++) {
text.push('<img src="' + url + i + ext + '" width="50" alt="' + i + '"/>');
}
text.push('<p> ' + url + '1' + ext + ' </p>');
$('.moonicons-show').html(text.join(' '));
showHideSettings();
showHideWindSettings();
showHideMoonSettings();
}
function showIconSet() {
var text = [];
var url = '';
var ext = '';
var name = $('#iconSet').val();
var UsePNG = $('#UsePNGorOriginalSVG').prop('checked');
console.log('use png ' + UsePNG);
var UseColor = $('#UseColorOrBW').prop('checked');
console.log('use color ' + UseColor);
if (name) {
if (name < 7) {
name = parseInt(name, 10);
url = '/adapter/daswetter/icons/tiempo-weather/galeria' + name + '/';
ext = (name < 5 || UsePNG) ? '.png' : '.svg';
}
else {
url = $('#CustomPath').val();
ext = $('#CustomPathExt').val();
}
//for (var i = 1; i < (name < 5) ? 21 : 23; i++) {
var maxIcons = (name < 5) ? 19 : 22;
if (name == 5) {
if (UsePNG) {
url = url + 'PNG/';
}
else {
url = url + 'SVG/';
}
if (UseColor) {
url = url + 'Color/';
}
else {
url = url + 'White/';
}
}
for (var i = 1; i <= maxIcons; i++) {
text.push('<img src="' + url + i + ext + '" width="50" alt="' + i + '"/>');
}
text.push('<p>' + maxIcons + ' images </p>');
if (name == 7) {
text.push('<p> ' + url + '1' + ext + ' </p>');
}
else {
text.push('<p> Access icons like http://ip:8082/adapter/daswetter/icons/tiempo-weather/galeria' + name + '/1' + ext + ' </p>');
}
}
$('.icons-show').html(text.join(' '));
showHideSettings();
showHideWindSettings();
showHideMoonSettings();
}
function load(settings, onChange) {
if (!settings) return;
if (settings.iconSet === undefined) {
settings.iconSet = 6;
}
for (var key in settings) {
if (!settings.hasOwnProperty(key)) continue;
var $value = $('#' + key + '.value');
if ($value.attr('type') === 'checkbox') {
$value.prop('checked', settings[key]).on('change', function () {
if ($(this).attr('id') === 'UsePNGorOriginalSVG'
|| $(this).attr('id') === 'UseColorOrBW') {
showIconSet();
}
onChange();
});
} else {
$value.val(settings[key]).on('change', function () {
console.log('on change');
if ($(this).attr('id') === 'iconSet'
|| $(this).attr('id') === 'CustomPath'
|| $(this).attr('id') === 'CustomPathExt'
) {
showIconSet();
}
if ($(this).attr('id') === 'windiconSet'
|| $(this).attr('id') === 'WindCustomPath'
|| $(this).attr('id') === 'WindCustomPathExt'
) {
showWindIconSet();
}
if ($(this).attr('id') === 'mooniconSet'
|| $(this).attr('id') === 'MoonCustomPath'
|| $(this).attr('id') === 'MoonCustomPathExt'
) {
showMoonIconSet();
}
onChange();
}).on('keyup', function () {
$(this).trigger('change');
});
}
}
showIconSet(settings.iconSet);
showMoonIconSet();
showWindIconSet();
// Signal to admin, that no changes yet
onChange(false);
M.updateTextFields();
//getAdapterInstances('daswetter', function (arr) {
// for (var i = 0; i < arr.length; i++) {
// var _id = arr[i]._id.replace('system.adapter.', '');
// console.log('got instance ' + _id);
var _id = 'daswetter.' + instance;
console.log('my instance ' + _id);
showIconSet(settings.iconSet);
showMoonIconSet();
showWindIconSet();
// }
//});
}
function save(callback) {
var obj = {};
$('.value').each(function () {
var $this = $(this);
var id = $this.attr('id');
if ($this.attr('type') === 'checkbox') {
obj[$this.attr('id')] = $this.prop('checked');
} else {
obj[$this.attr('id')] = $this.val();
}
});
callback(obj);
}
</script>
</head>
<body>
<div class="m adapter-container">
<div class="row">
<!-- tab definition -->
<div class="col s12">
<ul class="tabs">
<li class="tab col s3"><a href="#tab-main" class="translate active">Main settings</a></li>
<li class="tab col s3"><a href="#tab-icons" class="translate">Icons</a></li>
<li class="tab col s3"><a href="#tab-windicons" class="translate">WindIcons</a></li>
<li class="tab col s3"><a href="#tab-moonicons" class="translate">MoonIcons</a></li>
</ul>
</div>
<!-- main tab-->
<div id="tab-main" class="col s12 page">
<div class="row">
<div class="col s6 m4 l2">
<img src="daswettercom.png" class="logo">
</div>
</div>
<div class="row">
<div class="col s12">
<span class="translate">use_only_the_URL_you_need</span>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input type="text" id="Days7Forecast" class="value" />
<label for="Days7Forecast" class="translate">URL_7_days_forecast</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input type="text" id="Days5Forecast" class="value" />
<label for="Days5Forecast" class="translate">URL_5_days_forecast</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input type="text" id="HourlyForecast" class="value" />
<label for="HourlyForecast" class="translate">URL_hourly_forecast</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input type="text" id="HourlyForecastJSON" class="value" />
<label for="HourlyForecastJSON" class="translate">URL_hourly_forecast_JSON</label>
</div>
</div>
<div class="row">
<div class="input-field col s3">
<input type="checkbox" id="createCurrent" class="value" />
<label for="createCurrent" class="translate">createCurrent</label>
</div>
<div class="input-field col s3">
<select id="createInXHour" class="value">
<option value="0">none</option>
<option value="1">in 1 hour</option>
<option value="2">in 2 hours</option>
<option value="3">in 3 hours</option>
<option value="4">in 6 hous</option>
</select>
<label for="createInXHour" class="translate">createInXHour</label>
</div>
</div>
<div class="row">
<div class="input-field col s3">
<input class="value number" id="parseTimeout" size="3" maxlength="3" type="number" />
<label for="parseTimeout" class="translate">parse_timeout</label>
</div>
</div>
</div>
<!-- icon tab -->
<div id="tab-icons" class="col s12 page">
<div class="row">
<div class="input-field col s12 m4">
<select id="iconSet" class="value">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">custom</option>
</select>
<label for="iconSet" class="translate">Icon set</label>
</div>
</div>
<div class="row">
<div class="icons-show col s12">
</div>
</div>
<div class="row">
<div class="input-field col s6 col-use-png-or-svg">
<input type="checkbox" id="UsePNGorOriginalSVG" class="value" />
<label for="UsePNGorOriginalSVG" class="translate">use_png_or_svg</label>
</div>
</div>
<div class="row">
<div class="input-field col s6 col-use-color-or-bw">
<input type="checkbox" id="UseColorOrBW" class="value" />
<label for="UseColorOrBW" class="translate">use_color_or_bw</label>
</div>
</div>
<div class="row">
<div class="input-field col s6 col-use-custom-path">
<input type="text" id="CustomPath" class="value" />
<label for="CustomPath" class="translate">custom_path</label>
</div>
<div class="col s6 col-use-custom-path-descr">
<span class="translate">custom_path_hint</span>
</div>
</div>
<div class="row">
<div class="input-field col s6 col-use-custom-path-ext">
<input type="text" id="CustomPathExt" class="value" />
<label for="CustomPathExt" class="translate">custom_path_ext</label>
</div>
</div>
</div>
<!-- wind icon tab -->
<div id="tab-windicons" class="col s12 page">
<div class="row">
<div class="input-field col s12 m4">
<select id="windiconSet" class="value">
<option value="Beaufort-White">Beaufort-White</option>
<option value="galeria2-Beaufort">galeria2-Beaufort</option>
<option value="galeria1">galeria1</option>
<option value="custom">custom</option>
</select>
<label for="windiconSet" class="translate">Icon set</label>
</div>
</div>
<div class="row">
<div class="windicons-show col s12">
</div>
</div>
<div class="row">
<div class="input-field col s6 col-use-wind-custom-path">
<input type="text" id="WindCustomPath" class="value" />
<label for="WindCustomPath" class="translate">custom_path</label>
</div>
<div class="col s6 col-use-wind-custom-path-descr">
<span class="translate">custom_path_hint</span>
</div>
</div>
<div class="row">
<div class="input-field col s6 col-use-wind-custom-path-ext">
<input type="text" id="WindCustomPathExt" class="value" />
<label for="WindCustomPathExt" class="translate">custom_path_ext</label>
</div>
</div>
</div>
<!-- moon moon tab -->
<div id="tab-moonicons" class="col s12 page">
<div class="row">
<div class="input-field col s12 m4">
<select id="mooniconSet" class="value">
<option value="original">original</option>
<option value="custom">custom</option>
</select>
<label for="mooniconSet" class="translate">Icon set</label>
</div>
</div>
<div class="row">
<div class="moonicons-show col s12">
</div>
</div>
<div class="row">
<div class="input-field col s6 col-use-moon-custom-path">
<input type="text" id="MoonCustomPath" class="value" />
<label for="MoonCustomPath" class="translate">custom_path</label>
</div>
<div class="col s6 col-use-moon-custom-path-descr">
<span class="translate">custom_path_hint</span>
</div>
</div>
<div class="row">
<div class="input-field col s6 col-use-moon-custom-path-ext">
<input type="text" id="MoonCustomPathExt" class="value" />
<label for="MoonCustomPathExt" class="translate">custom_path_ext</label>
</div>
</div>
</div>
</div>
</div>
</body>
</html>