Admin 5 UI Anpassung
-
Hi folks,
gibt es irgendwo einen Link zu einem HowTo wie man die Admin-Oberfläche Admin5-fähig macht ? Wird für meinen Adapter unter Admin 5.2.1 schon richtig angezeigt, aber vielleicht muss ich da noch was extra machen ?
Der aktuelle code für index_m.html:
<html> <head> <!-- Load ioBroker scripts and styles--> <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> <!-- Load our own files --> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript" src="words.js"></script> <script type="text/javascript"> // This will be called by the admin adapter when the settings page loads function load(settings, onChange) { // example: select elements with id=key and class=value and insert value if (!settings) return; $('.value').each(function () { var $key = $(this); var id = $key.attr('id'); if ($key.attr('type') === 'checkbox') { // do not call onChange direct, because onChange could expect some arguments $key.prop('checked', settings[id]) .on('change', () => onChange()) ; } else { // do not call onChange direct, because onChange could expect some arguments $key.val(settings[id]) .on('change', () => onChange()) .on('keyup', () => onChange()) ; } }); onChange(false); // reinitialize all the Materialize labels on the page if you are dynamically adding inputs: if (M) M.updateTextFields(); } // This will be called by the admin adapter when the user presses the save button function save(callback) { // example: select elements with class=value and build settings object var obj = {}; $('.value').each(function () { var $this = $(this); if ($this.attr('type') === 'checkbox') { obj[$this.attr('id')] = $this.prop('checked'); } else if ($this.attr('type') === 'number') { obj[$this.attr('id')] = parseFloat($this.val()); } else { obj[$this.attr('id')] = $this.val(); } }); callback(obj); } </script> </head> <body> <div class="m adapter-container"> <div class="row"> <div class="col s12 m4 l2"> <img src="airconwithme.png" class="logo"> </div> </div> <!-- Put your content here --> <!-- For example columns with settings: --> <div class="row"> <div class="col s4 input-field"> <input type="text" class="value" id="ipaddress" /> <label for="ipaddress" class="translate">IP Address</label> <span class="translate">IP Address of the Mitsubishi WLAN adapter</span> </div> <div class="col s4 input-field"> <input type="text" class="value" id="username" /> <label for="username" class="translate">Username</label> <span class="translate">Username for login on adapter website (default:admin)</span> </div> <div class="col s4 input-field"> <input type="password" class="value" id="password" /> <label for="password" class="translate">Password</label> <span class="translate">Password for login on adapter website (default:admin)</span> </div> </div> </div> </body> </html>
