[gelöst] Speichern-Button inaktiv im Admin
-
Für die Eiligen:
Die Lösung bestand am Ende darin den gesammten Code zu verwerfen, die index_m.html vom iCal Adapter zu kopieren und anzupassen. Die ist nämlich sehr übersichtlich und frei von jeglichem SchnickSchnack. Danach funktionierte alles wie gewünscht. Ich verstehe dadurch zwar immernoch nicht warum (was ich unbefriedigend finde), aber nun ja - es erfüllt erst einmal seinen Zweck und ich komme weiter.
Hallo Zusammen,
ich brauche bitte mal Hilfe mit der Konfig/Adminseite.
Ich habe zwar schon ein paar Adapter geschrieben, aber die Konfig war bislang immer sehr einfach und deshalb dank Copy/Paste kein großes Problem. Ich brauchte nicht alles bis ins Details zu verstehen
. Es funktionierte ja einfach.Diesmal möchte ich aber eine Liste von gleichen Konfig-Einträgen zulassen (wie diese):
Ich habe das Template bisher soweit erweitert, dass ich das ADD-Button habe und (vordefinierte) Zeilen zur Tabelle hinzufügen kann. Ich bekomme Input-Felder und kann da Daten rein tippen.
Was nicht geht:
- Die Speichern-Buttons werden nicht blau. Somit kann ich nicht speichern. Was muss ich tun damit die richtig aktiviert werden?
Die roten Delete-Buttons funktionieren noch nicht. Denen fehlt noch eine Ereignis-Behandlung.- Da das Speichern noch nicht geht, konnte ich mich auch um das Laden noch nicht kümmern.
- Wie muss ich das Speichern-Objekt an die callback übergeben, damit stumpf das ganze Object von der automatischen Adapter-Verschlüsselung verschlüsselt wird (Ich tippe auf Einstellung in der io-package - aber wie genau?)
Edit (17:20Uhr):
Das Löschen einzelner Zeilen habe ich hin bekommen.Das Speichern ist aktuell mein größtes Problem, damit ich weiter machen kann, aber der Rest ist nicht unwichtig. Oder gibt es vielleicht einen Adapter, der eine sehr ähnliche Admin-Seite hat, bei dem ich abgucken kann? Die meisten Anregungen habe ich bisher aus fb_CheckPresence gezogen, aber da ist zuviel anderer Kram drumherum um das einfach zu durchschauen. Mehr Einstellungen als die im Screenshot gibt es tatsächlich nicht. Das ist alles.
Vielen Dank schon mal im Voraus.
grizzelbeeHier mein aktueller Code:
index_m.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> <!-- you have to define 2 functions in the global scope: --> <script type="text/javascript"> if (typeof supportsFeature !== 'function' || !supportsFeature('ADAPTER_AUTO_DECRYPT_NATIVE')) { alert('This adapter requires at least js-controller V3.0.0. Your system is not compatible. Please update.'); throw new Error('This adapter requires at least js-controller V3.0.0. Your system is not compatible. Please update.'); } $(document).ready(function(){ document.getElementById('buttonAdd').addEventListener('click', addConfigLine); if (M) M.updateTextFields(); }); function deleteConfigRow(row){ alert('Delete this row! -> ' +row); document.getElementById('configRow-'+row).remove(); } function addConfigLine(){ let tableConfig = document.getElementById('tableConfig'); let rows = tableConfig.getElementsByTagName('tr').length; let td; let tr = document.createElement('tr') tr.setAttribute("id", "configRow-"+rows); td = tr.appendChild(document.createElement('td')); //td.innerText=rows; td = tr.appendChild(document.createElement('td')); td.innerHTML='<div className="col s2 input-field tooltip"><input type="text" className="value validate" id="ipaddress" required pattern="^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?))|([a-zA-Z][\\w.-]*)$"/></div>'; td = tr.appendChild(document.createElement('td')); td.innerHTML='<div className="col s2 input-field tooltip"><input type="text" className="value validate" maxLength="32" id="username"pattern="^[a-zA-Z][a-zA-Z0-9 _,.\\-]{0,31}$"/></div>'; td = tr.appendChild(document.createElement('td')); td.innerHTML='<div className="input-field col s3 tooltip"><input type="password" className="value validate" id="password" pattern="^[a-zA-Z0-9 _\\-!"#$%&\'()*+,./:;<=>?@[\]^`{|}~]{1,32}$"/></div>'; td = tr.appendChild(document.createElement('td')); td.innerHTML='<div className="col s2 input-field tooltip"><input type="text" className="value" id="pollInterval" pattern="^[0-9]{2,4}$"/></div>'; td = tr.appendChild(document.createElement('td')); td.innerHTML='<div><a id="deleteMe-'+rows+'" data-index="'+rows+'" data-command="delete" class="values-buttons btn-floating btn-small waves-effect waves-light red"><i class="material-icons">delete</i></a></div>'; tableConfig.appendChild(tr); $('#deleteMe-'+rows).click(function(){ deleteConfigRow(rows); return false; }); } // 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()); } }); 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 let obj = {}; let configRows = document.getElementsByTagName('tr').length; console.log('This config has ' + configRows + ' Rows.'); for (let i=1; i < configRows; i++){ $('.value').each(function () { var $this = $(this); var id = $this.attr('id'); if ($this.attr('type') === 'checkbox') { obj[id] = $this.prop('checked'); } else if ($this.attr('type') === 'number') { obj[id] = parseFloat($this.val()); } else { obj[id] = $this.val(); } }); } console.log('ConfigObject:' + JSON.stringify(obj)); callback(obj); } </script> <script type="text/javascript" src="../gulpfile.js"></script> </head> <body> <!-- you have to put your config page in a div with id adapter-container --> <div class="m adapter-container" id ="wireguard"> <div class="row"> <!-- Forms are the standard way to receive user inputted data. Learn more http://materializecss.com/forms.html--> <div class="row"> <div class="input-field col s6"> <!--img src="wireguard.svg" class="logo"--> <img src="Logo_of_WireGuard.svg" width="500" float="right" alt="WireGuard logo"> </div> </div> <div class="row"> <div class="input-field col s6"> <span class="translate">Please add all your hosts running a WireGuard server instance you like to be monitored.</span> </div> </div> <div class="row"> <div class="col s12"> <a id="buttonAdd" class="btn-floating waves-effect waves-light table-button-add"><i class="material-icons">add</i></a> <span class="translate">Click here to add a new host</span> </div> </div> <div class="row"> <div class="col s11"> <table id="tableConfig" class="table-values" style="width: 100%;"> <thead> <tr> <th data-name="_index" style="width: 2%" class="translate"></th> <th data-name="hostaddress" style="width: 30%" class="translate" for="hostaddress">Host address</th> <th data-name="user" style="width: 20%" class="translate" for="user">User</th> <th data-name="password" style="width: 20%" class="translate" for="password">Password</th> <th data-name="pollInterval" style="width: 20%" class="translate" for="pollInterval">Poll interval</th> <th data-buttons="delete" class="header" style="width: 5%"></th> </tr> </thead> <tbody> </tbody> </table> </div> </div> </div> </div> </body> </html>``` -
du könntest vielleicht mal beim fb-checkpresence adapter schauen. da kann man familienmitglieder eienr liste hinzufügen, bearbeiten und löschen.
sieht aber etwas anders aus als bei dir.
