Configuration options aren't displaying on Preference Panel in 1.0.3

[SteveDallas]

When I press "show configuration!" in the preference panel, the smartPlugDeviceInfo and smartPlugOptions \<div> sections aren't displayed. That is, the button doesn't seem to be toggling visibility of [smartPlugDeviceInfo and smartPlugOptions] or [smartPlugDeviceInfo and smartStripOptions], depending on which device type is selected.

I chose the "view source" option in my browser, and can see these \<div> containers in the page source, but they aren't being displayed. Is there something missing from the CSS that leaves them invisible?

I have tested this with Chromium on Ubuntu Linux, as well as Edge and Firefox on Windows 10.

[CodingTheUnknown]

Hi, not sure why you are getting this issue. I haven't checked on anything other then safari and chrome on a mac. Going to go and grab a windows machine and give this a go.

[CodingTheUnknown]

@SteveDallas Ok so i have just tries on an octoPi and OctoPrint server using a windows 10 machine using chrome and Edge. As a result, i am unaware of why this may be an issue for you. I can only advise you uninstall the plugin and try re-installing again.

Did you use previous versions or is this the first time you have used this plugin before?

[SteveDallas]

I'm the same person who pointed out the 1.0.2 bug with saving the device type. I updated to 1.0.3 by doing an uninstall with cleanup followed by a fresh install and reported this issue after upgrading in Issue #46, which you just closed. The Turn On/Turn Off buttons work in 1.0.3, but show configuration doesn't appear to do anything.

I also checked using Safari on Mojave. Not working there, either.

[SteveDallas]

Poking around in the Chromium developer console, I see that the "element.style" for smartPlugDeviceInfo and smartPlugOptions contains "display: none" and can toggle each one manually from within the developer console. So, it seems that the "show configuration!" button should be clearing "display: none" for smartPlugDeviceInfo and either smartPlugOptions or smartStripOptions, depending on the selected deviceType. I just don't know enough about the plugin architecture to see how to do it.

[CodingTheUnknown]

It should remain hidden and then within the javascript when the button is clicked it will show as its all managed using javascript.

window.onload = function() {
    document.getElementById("smartPlugDeviceInfo").style.display = "none";
    document.getElementById("smartPlugOptions").style.display = "none";
    document.getElementById("smartStripOptions").style.display = "none";
}

document.getElementById("update").onclick = function update_info (){
    var address = document.getElementById("address").value;
    var type = document.getElementById("device").value;
    OctoPrint.simpleApiCommand("TpLinkAutoShutdown", "update", {"url": address, "type": type})
        .done(function(responce){
            //console.log(responce.res.dev_name);
            document.getElementById("deviceName").value = responce.res.dev_name;
            document.getElementById("firmwareVersion").value = responce.res.sw_ver;
        })

    if (type == "smartPlug"){
       document.getElementById("smartPlugDeviceInfo").style.display = "block";
       document.getElementById("smartPlugOptions").style.display = "block";
       document.getElementById("smartStripOptions").style.display = "none";
    }else if (type == "smartStrip"){
       document.getElementById("smartPlugDeviceInfo").style.display = "block";
       document.getElementById("smartPlugOptions").style.display = "none";
       document.getElementById("smartStripOptions").style.display = "block";
    }else{
       document.getElementById("smartPlugDeviceInfo").style.display = "none";
       document.getElementById("smartPlugOptions").style.display = "none";
    }
}

[SteveDallas]

For some reason, the JavaScript for the settings page never seems to get called; or rather, the onclick event never gets processed. The onload event seems to work, as the three elements are hidden when I load the settings page.

I just updated to v1.0.4 (uninstall and cleanup, install new version, change settings and restart) and the show configuration button still isn't working for me.

[SteveDallas]

After doing some debugging with the developer console in Chromium, the problem is that "var type = document.getElementById("device").value;" sets type to the empty string, ''.

I don't understand why it works for you and not for me.

[CodingTheUnknown]

Hi. Yes this is because it is a dropdown box. However it shouldn't be empty unless you have not set the plug type before. This is because you haven't clicked save. Now i have tested this across the day on 6 installs of octopi & octoPrint and 5 machines both windows, Linux and Mac using Chrome, Edge, Safari. All worked every time.

I do think that this is an issue with your setup or maybe a plugin interfering as i have also contacted other users and asked if they have this issue and no issue have been seen.

[SteveDallas]

I found it. It's a naming collision with the Pushover plugin. Both plugins have an element named "device". I would argue against using such generic names, since the namespace is global. To test, I forked the plugin and changed "device" to "deviceType" and it's now working. Perhaps something like "tplinkDevice" would be a better choice.

[CodingTheUnknown]

Great. Simple issue to fix at my end and good result for yourself.