JSFiddle - React, Tailwind, and code Playground

by Spero Koulouras

HTML

<header>
        <button class="logoblock" type="button" onclick="refreshDB()"> <span class="outsidebrackets">( </span>
 <span class="insidebrackets">( </span>
 <span class="logotext">smartbotics</span>
 <span class="insidebrackets"> )</span>
 <span class="outsidebrackets"> )</span>

        </button>
</header>
    <script>
        console.log("Loading");
        loadDB();
        console.log("updateRoom");
        updateRoomDB();
        console.log("updateDOM");
        updateDOM();
    </script>

<p id="node"></p>
<p id="dimmerlevel"></p>

CSS

#homescreen {
    background-color: black;
    color: white;
}
.logoblock {
    width: 100%;
    height: 5em;
    padding: .1em;
    color: white;
    background-color: black;
    border: none;
    letter-spacing: .15em;
    text-align: right;
}

.logotext {
    transition: color .5s ease;
    font-family: Verdana;
    font-size: medium;
    color: #E0E0E0;
}

.logoblock:hover .logotext {
    color: #808080;
}
.logoblock .outsidebrackets {
    transition: color .5s ease;
    color: #CCCCCC;
}
.logoblock .insidebrackets {
    transition: color .5s ease;
    color: #3FA9F5;
}
.logoblock:hover .outsidebrackets {
    color: #3FA9F5;
}
.logoblock:hover .insidebrackets {
    color: #CCCCCC;
}
.bulbcontainer {
    display: block;
    background-color: black;
    height: 6em;
    position: 
}
.power {
    font: .65em Tahoma;
    display: inline-block;
    float: right;
    width:10%;
    margin-right:5%;
    text-align: right;
    color: white;
}
.turnOff {
    display: inline-block;
    float: left;
    width: 10%;
    opacity: 40;
}
.bulblabel {
    color: White;
    float: left;
    text-align: left;
    font: 1em/100% Tahoma;
    display: inline-block;
    margin-left: 5%;
    margin-top: 1.75em;
    margin-right: 45%;
    margin-bottom: .75em;
    width: 30%;
    border: none;
    background-color: Black
}
.bulblabel:focus {
    outline: none;
    color: #71bfeb;
}
.bulb {
    -webkit-appearance: none;
    width: 80%;
    display: block;
    margin: 0 auto;
    height: .4em;
    border-radius: .2em;
}
.bulb:focus {
    outline: none;
}
.bulb.on {
}
.bulb.off {
    background: gray;
    background-image: none;
}
.bulb.out-of-range {
    opacity: 0.25;
    background-image: none;
}
.bulb:hover {
    -webkit-appearance: none;
}

.bulb::-webkit-slider-thumb {
    -webkit-appearance:none !important;
    width: 1em;
    height: 1.5em;
    border-radius: .4em;
    background-color: red;
    border: 1px solid #CECECE;
}
.bulb.on::-webkit-slider-thumb {
    background-color:...

JavaScript

var devDB;    // The Device Database
    var roomDB;   // The Room Database

    function loadDB() {

        var txt = '{"node":[' +
            '{"bdaddr":"11:22:33:44:55:66", "name":"Sconce","roomName":"Library","lightswitch":"on","dimmer":"45","privacy":"False","power": "12.45", "rssi": "-65" },' +
            '{"bdaddr":"12:22:33:44:55:66", "name":"Lamp1","roomName":"Bedroom","lightswitch":"off","dimmer":"55","privacy":"False", "power": "3.60", "rssi": "-127" },' +
            '{"bdaddr":"13:22:33:44:55:66", "name":"Chandelier","roomName":"Dining Room","lightswitch":"on","dimmer":"65","privacy":"False", "power": "8.47", "rssi": "-55" },' +
            '{"bdaddr":"14:22:33:44:55:66", "name":"Ceiling","roomName":"Kitchen","lightswitch":"off","dimmer":"75","privacy":"False", "power": "9.62", "rssi": "-45" },' +
            '{"bdaddr":"15:22:33:44:55:66", "name":"Sconce","roomName":"Library","lightswitch":"on","dimmer":"45","privacy":"False","power": "12.45", "rssi": "-65" },' +
            '{"bdaddr":"16:22:33:44:55:66", "name":"Lamp2","roomName":"Library","lightswitch":"off","dimmer":"55","privacy":"False", "power": "3.60", "rssi": "-127" },' +
            '{"bdaddr":"17:22:33:44:55:66", "name":"Sconce","roomName":"Dining Room","lightswitch":"on","dimmer":"65","privacy":"False", "power": "8.47", "rssi": "-55" },' +
            '{"bdaddr":"18:22:33:44:55:66", "name":"UnderCabinet","roomName":"","lightswitch":"off","dimmer":"75","privacy":"False", "power": "9.62", "rssi": "-45" } ]}';

        devDB = JSON.parse(txt);
        console.log("Loaded Database");
    
    }

    // Reorganize the devDB by Rooms
    
    function updateRoomDB() {
        for (var i in devDB.node) {
            console.log("Testing node " + i);
            if (roomDB.indexOf(devDB.node[i].roomName) == -1) {
                console.log("Adding room " + devDB.node[i].roomName);
                var j = roomDB.push(devDB.node[i].roomName);
            }
            console.log("Adding node...