Admin 5 UI Anpassung

weggetor

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>

Community Forum

NEWS

Admin 5 UI Anpassung

Support us

338

32.9k

83.0k

1.3m