iobroker.feiertage
Version:
125 lines (111 loc) • 5.37 kB
HTML
<html>
<head>
<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="words.js"></script>
<script type="text/javascript" src="holidays.js"></script>
<style>
.adapter-body {
overflow: hidden ;
}
table.highlight > tbody > tr {
transition: background-color .25s ease ;
}
table.highlight > tbody > tr:hover {
background-color: rgba(200, 200, 200, 0.5) ;
}
</style>
<!-- you have to define 2 functions in the global scope: -->
<script type="text/javascript">
function load(settings, onChange) {
var text = '';
for (var d in holidays) {
text += ' <tr>\n';
text += ' <td>';
text += ' <input type="checkbox" id="enable_' + d + '" class="value">';
text += ' <label class="translate" for="enable_' + d + '"> '/* + (holidays[d].date || '') */+ '</label>';
text += ' </td>\n';
text += ' <td>' + (holidays[d].date || '') + '</td>\n';
text += ' <td>' + _(holidays[d][systemLang]) + ' <span class="grey-text">' + (holidays[d]['comment_' + systemLang] ? _(holidays[d]['comment_' + systemLang]) : '') + '</span></td>\n';
text += ' <td class="translate">' + _(holidays[d].desc) + '</td>\n'; // Todo: wird nicht übersetzt (religion, political, ...)
text += ' </tr>\n';
if (settings['enable_' + d] === undefined) {
settings['enable_' + d] = holidays[d].enabled;
}
}
$('#config').append(text);
for (var key in settings) {
var $key = $('#' + key);
if ($key.attr('type') === 'checkbox') {
$key.prop('checked', settings[key]).change(function () {
onChange();
});
} else {
$key.val(settings[key]).change(function () {
onChange();
}).keyup(function () {
$(this).trigger('change');
});
}
}
onChange(false);
}
function save(callback) {
var obj = {};
$('.value').each(function () {
var $this = $(this);
var id = $this.attr('id');
if ($this.attr('type') === 'checkbox') {
obj[id] = $this.prop('checked');
} else {
obj[id] = $this.val();
}
});
callback(obj);
}
</script>
</head>
<body>
<div class="m adapter-container">
<div class="row" style="height: 100%;">
<div class="col s12">
<ul class="tabs">
<li class="tab col s4">
<a href="#tab-main" class="translate">Select holidays</a>
</li>
<!-- weitere Tabs hier einfügen -->
</ul>
</div>
<div id="tab-main" class="col s12 page">
<div class="row">
<div class="col s12 m4 l2">
<img src="feiertage.png" class="logo">
</div>
</div>
<div class="row">
<div class="col s12">
<table class="highlight">
<thead>
<tr>
<th class="translate">Select</th>
<th class="translate">Date</th>
<th class="translate">Holidays</th>
<th class="translate">Description</th>
</tr>
</thead>
<tbody id="config" class="translate">
<!-- Tabelle wird von Load-Funktion eingefügt -->
</tbody>
<table>
</div>
</div>
</div> <!-- Ende tab -->
</div><!-- Ende row -->
</div>
</body>
</html>