iobroker.hilink
Version:
ioBroker hilink Adapter
156 lines (144 loc) • 5.76 kB
HTML
<html>
<!-- these 4 files always have to be included -->
<link rel="stylesheet" type="text/css" href="../../lib/css/themes/jquery-ui/redmond/jquery-ui.min.css" />
<script type="text/javascript" src="../../lib/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../socket.io/socket.io.js"></script>
<script type="text/javascript" src="../../lib/js/jquery-ui-1.10.3.full.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- optional: use jqGrid
<link rel="stylesheet" type="text/css" href="../../lib/css/jqGrid/ui.jqgrid-4.5.4.css"/>
<script type="text/javascript" src="../../lib/js/jqGrid/jquery.jqGrid-4.5.4.min.js"></script>
<script type="text/javascript" src="../../lib/js/jqGrid/i18n/grid.locale-all.js"></script>
-->
<!-- optional: use multiselect
<link rel="stylesheet" type="text/css" href="../../lib/css/jquery.multiselect-1.13.css"/>
<script type="text/javascript" src="../../lib/js/jquery.multiselect-1.13.min.js"></script>
-->
<!-- these two file always have to be included -->
<link rel="stylesheet" type="text/css" href="../../css/adapter.css" />
<script type="text/javascript" src="../../js/translate.js"></script>
<script type="text/javascript" src="../../js/adapter-settings.js"></script>
<!-- you have to define 2 functions in the global scope: -->
<script type="text/javascript">
// Dictionary (systemDictionary is global variable from adapter-settings.js)
systemDictionary = {
"settime": {
"en": "Setting up the modem poll time..",
"de": "Einstellen der Modem Umfrage Zeit.",
"ru": "Установка времени опроса модема."
},
"Hilink adapter settings": {
"de": "Beispiel",
"ru": "Настройка драйвера Hilink"
},
"getip": {
"en": "Setting ip address of the modem",
"de": "Einstellung IP-Adresse des Modems",
"ru": "Установка ip адрес модема"
},
"trafficInfo": {
"en": "Traffic information",
"de": "Verkehrsinformationen",
"ru": "Информация о трафике"
},
"model": {
"en": "Modem model",
"de": "Modemmodell",
"ru": "Модель модема"
},
"On save adapter restarts with new config immediately": {
"de": "Beim Speichern von Einstellungen der Adapter wird sofort neu gestartet.",
"ru": "Сразу после сохранения настроек драйвер перезапуститься с новыми значениями"
}
};
// the function loadSettings has to exist ...
function load(settings, onChange) {
// example: select elements with id=key and class=value and insert value
for (var key in settings) {
// example: select elements with id=key and class=value and insert value
if ($('#' + key + '.value').attr('type') == 'checkbox') {
$('#' + key + '.value').prop('checked', settings[key]).change(function() {
onChange();
});
} else {
$('#' + key + '.value').val(settings[key]).change(function() {
onChange();
}).keyup(function() {
$(this).trigger('change');
});
}
}
// Signal to admin, that no changes yet
onChange(false);
}
// ... and the function save has to exist.
// you have to make sure the callback is called with the settings object as first param!
function save(callback) {
// example: select elements with class=value and build settings object
var obj = {};
$('.value').each(function() {
var $this = $(this);
obj[$this.attr('id')] = $this.val();
});
callback(obj);
}
</script>
<!-- you have to put your config page in a div with id adapter-container -->
<div class="container-fluid" id="adapter-container">
<div class="row">
<table>
<tr>
<td><img src="hilink.png" /></td>
<td>
<h3 class="translate">Hilink adapter settings</h3>
</td>
</tr>
</table>
<form class="form-horizontal">
<div class="col-xs-6">
<div class="form-group">
<label class="col-md-4 control-label" for="getip">IP адрес</label>
<div class="col-md-4">
<input id="getip" maxlength="15" name="getip" type="text" placeholder="192.168.8.1" class="value form-control input-md" required="">
<span class="translate help-block">getip</span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="model">Модель</label>
<div class="col-md-4">
<select id="model" name="model" class="value form-control">
<option value="3372s">3372s</option>
<option value="3372h">3372h</option>
</select>
<span class="translate">model</span>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-md-4 control-label" for="settime">Интервал</label>
<div class="col-md-4">
<input id="settime" min="1000" step="1000" name="settime" type="text" placeholder="60000 = 60sec" class="value form-control input-md">
<span class="translate help-block">settime</span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="trafficInfo">Информация о трафике</label>
<div class="col-md-4">
<select id="trafficInfo" name="trafficInfo" class="value form-control">
<option value="auto">auto</option>
<option value="def">def</option>
</select>
<span class="translate">trafficInfo</span>
</div>
</div>
</div>
</form>
</div>
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<p class="translate">On save adapter restarts with new config immediately</p>
</div>
</div>
</div>
</html>