Javascript-JSON zum Steuer von Lampen

littlekenny

Grünschnabel
Hallo zusammen,

erstmal vorweg, ich bin Neuling in Sachen JavaScript habe aber gute Kenntnisse in HTML und PHP.
Nur JavaScript ist für mich totales Neuland!

Ich habe folgendes Problem:

Wie kann ich diesen Code umschreiben, so dass ich verschiedene Button haben (AN/AUS)
Ich würde gerne meine Lampen in der Wohnung über ein Webscript steuern, da ich verschiedene Lösungen im Einsatz habe!

Folgender Code steht zur Verfügung:

Javascript:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>API Debug tool</title>
        <style>
            body{
                font-family: verdana;
                margin: 20px;
            }
            h1{
                margin: 0px;
                font-size: 20px;
            }
            h2{
                font-size: 16px;
                margin-top: 20px;
                color: grey;
            }
            #buttons{
                clear: left;
            }
            input{
                width: 100%;
            }
            form{
                background: #e8e8e8;
                width: 500px;
                padding: 20px;
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
            }
            textarea{
                padding-top: 10px;
                width: 100%;
                font-family: monaco,monospace;
                font-size: 12px;
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
            }
        </style>
    </head>

    <body>
        <form name="commandform">
            <h1>CLIP API Debugger</h1>
            <h2>URL:</h2>
            <input hidden="true" name="commandurl" type="text" size="60" value="http://192.168.178.68/api/fDq5iXrks4FbRI8g8fpm7yiz3EpovLivJjG13Ks6/groups/2/action">
            <div id="buttons">
                <button type="button" onclick="getHTML('GET')">GET</button>
                <button type="button" id="an" onclick="getHTML('PUT')">Esszimmer AN</button>
               <button type="button" id="aus" onclick="getHTML('PUT')">Esszimmer AUS</button>
                <button type="button" onclick="getHTML('POST')">POST</button>
                <button type="button" onclick="getHTML('DELETE')">DELETE</button>
            </div>
            <h2>Message Body:</h2>
            <textarea name="messagebodyan" rows="10" cols="100">{"on":true}</textarea>
           <input type="text" name="messagebodyaus" value='{"on":false}' rows="10" cols="100"></input>
            <h2>Command Response:</h2>
            <textarea name="response" rows="25" cols="100"></textarea>
        </form>
    </body>
</html>
<script language="JavaScript">
function getHTML(command)
{
    if (window.XMLHttpRequest)
    {
        var http = new XMLHttpRequest();
        http.open(command, document.commandform.commandurl.value, true);

        http.onreadystatechange = function()
        {
            if(http.readyState == 4)
            {
                if(http.status==200)
                {
                    document.commandform.response.value="Bad JSON: "+http.responseText
                    document.commandform.response.value=JSON.stringify(JSON.parse(http.responseText), null, '\t');
                }
                else
                {
                    document.commandform.response.value="Error "+http.status
                }
            }
        }
        http.send(document.commandform.messagebodyan.value);
    }
    return false;

}
</script>

Kann mir jemand sagen, wie ich dass ganze umschreiben müsste, so dass ich nur Buttons habe mit der AN/AUS funktion ohne die ganzen anderen Felder?

Vielen Dank.

Lieben Gruß, Martin.
 
Was heist den umschreiben.Wenn allesweg soll auser die Buttons währe neu schreiben einfacher.Wie viele Buttons brauchst du den? Was soll passieren wenn man drauf klickt? Soll ein alert erscheinen mit text"Lampe an / aus" ? Den rest mit den webscript musst du dann aber selber machen. Brauchst du die buttons GET POST DELETE auch ? Oder nur an aus für ein paar Lampen?
 
Hallo und vielen Dank für deine Antwort.

Die Buttons sollten erweiterbar sein, da dass System weiter ausgebaut wird.
Die Buttons sollen lediglich zum Ein und Ausschalten der Lampen dienen. Ein Alert wäre nice to have.

Die restlichen Buttons (GET, POST etc.) werden nicht benötigt. Der Rest mit dem Webscript wäre kein Thema!

Vielen Dank.
 
ich persönlich würde anstatt Javascript jquery nehmen.

HTML:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    //Klick auf einen Button mit der Klasse schalter_lampe
    $(".schalter_lampe").click(function(){
       
         var button_id = $(this).data("id"); //data-id des Button auslesen
         var button_state = $(this).data("state"); //data-state des Button auslesen (0=aus; 1=an)

         jQuery.ajax({
           //sendet einen post-request
            method: "POST",
            url: "http://my_url_to_change/",
            //Daten, die als Post gesendet werden (JSON)
            data: {
                id: button_id 
                state: button_state 
            },
            //Wenn vom Script kein fehler zurückkommt
            success: function(data)
            {
                //Wenn ausgeschaltet wird
                if(button_state == '0')
               {
                   $('#button_lampe_'+button_id).attr('data-state', 1); //ändern der data-state auf 1 für Einschalten
                   $('#button_lampe_'+button_id).prop('value', 'Einschalten'); //Button Text anpassen
                   $("'#status_lampe_'+button_id").text('Aus); //Ändern des text für Status
               }  
               //Wenn eingeschaltet wird
               else
               {
                   $('#button_lampe_'+button_id).attr('data-state', 0); //ändern der data-state auf 0 für Ausschalten
                   $('#button_lampe_'+button_id).prop('value', 'Ausschalten'); //Button Text anpassen
                   $("'#status_lampe_'+button_id").text('An); //Ändern des text für Status
               }

            }
        });
    });
});
</script>
</head>
<body>

<div id="div1">Lampe 1: <span id="status_lampe_1">An</span></div>
<button id="button_lampe_1" data-id="1" data-state="0" class="schalter_lampe">Ausschalten</button>

</body>
</html>

Dies ist beliebig erweiterbar. Du musst nur ein weiteres
HTML:
<div id="div1">Lampe 1: <span id="status_lampe_1">An</span></div>
<button id="button_lampe_1" data-id="1" data-state="0" class="schalter_lampe">Ausschalten</button>

anfügen und die entsprechenden ID's anpassen.

Achtung: code ist ungetestet.
 
Vielen Dank...

Eine Frage habe ich noch:

Damit sich die Lampen ein oder ausschalten, muss ich als Wert an die Basis folgendes senden:

Javascript:
{"on":true}

bzw.

Javascript:
{"on":false}

wo genau müsste ich dies nun einfügen, damit er dies dann weitergibt?

Vielen Dank.
 
naja du könntest unter
Code:
var button_state = $(this).data("state"); //data-state des Button auslesen (0=aus; 1=an)

noch folgende Zeile einfügen:
Code:
if(button_state == 1){var state = true;} else {var state = false;}

und im Ajax-call muss du dann bei dem data-Block anstatt
Code:
state: button_state

folgendes angeben:
Code:
state: state

Oder du hast Glück und das php-Script kann auch 0 und 1 anstatt von true/false korrekt verarbeiten.
 
Zurück