Tmobile Arcadyan Stats Injector

// ==UserScript==
// @name        Arcadyan Stats Injector
// @namespace   http://deadlybossmods.com
// @include     http://192.168.12.1/home
// @include     192.168.12.1/home
// @version     1
// ==/UserScript==

const holder = document.querySelector('#root > div > div:last-child > div:first-child > div:last-child');
holder.style.maxWidth = '100%';

const getBarStyle = (bars, i) => {
    return i > bars ? 'background-color: #9b9b9b;' : 'background-color: #e20074;';
}

const getTitle = (i) => {
    if (i === 0) {
        return 'Primary';
    }
    if (i === 1) {
        return 'Secondary';
    }
    return 'Terciary';
}

fetch('/TMI/v1/gateway?get=all')
    .then(data => data.json())
    .then(data => {
        const newElem = document.createElement('div');
        newElem.style.display = 'flex';
        newElem.style.flex = '1 1 0';

        let innerHTML = '';
        innerHTML +=
            '<div style="padding: 19px; border: 1px solid #979797; border-radius: 8px; margin: 14px; display: flex; flex: 1 1; flex-direction: column;">' +
                '<h2 style="margin-top: -0.2em; border-bottom: 1px solid #ccc; line-height: 2em; font-size: 1.17em;">Internet Connection</h2>' +
                    '<table style="border-spacing: 0;">';

        Object.keys(data.signal).filter(item => item !== 'generic').forEach((signal, signalNum) => {
            const dat = data.signal[signal];

            innerHTML +=
                '<tr>' +
                    '<td><b>' + getTitle(signalNum) + ' Signal</b><br/><small><b>' + signal + '</b></small></td>' +
                    '<td>' +
                        '<div style="justify-content: end; align-items: flex-end; display: flex">' +
                            '<div style="width: 4px; height: 5px; ' + getBarStyle(dat.bars, 1) + '"></div>' +
                            '<div style="width: 4px; height: 10px; margin-left: 2px;' + getBarStyle(dat.bars, 2) + '"></div>' +
                            '<div style="width: 4px; height: 15px; margin-left: 2px;' + getBarStyle(dat.bars, 3) + '"></div>' +
                            '<div style="width: 4px; height: 20px; margin-left: 2px;' + getBarStyle(dat.bars, 4) + '"></div>' +
                            '<div style="width: 4px; height: 25px; margin-left: 2px;' + getBarStyle(dat.bars, 5) + '"></div>' +
                        '</div>' +
                    '</td>' +
                '</tr>';
            if(dat.bands) {
                innerHTML +=
                    '<tr>' +
                        '<td style="border-bottom: 1px solid #979797">Band</td>' +
                        '<td style="text-align: right; border-bottom: 1px solid #979797">' + dat.bands +
                    '</tr>';
            }
            if(dat.cid) {
                innerHTML +=
                    '<tr>' +
                        '<td style="border-bottom: 1px solid #979797">cid</td>' +
                        '<td style="text-align: right; border-bottom: 1px solid #979797">' + dat.cid +
                    '</tr>';
            }
            if(dat.eNBID) {
                innerHTML +=
                    '<tr>' +
                        '<td style="border-bottom: 1px solid #979797">eNBID</td>' +
                        '<td style="text-align: right; border-bottom: 1px solid #979797">' + dat.eNBID +
                    '</tr>';
            }
            if(dat.gNBID) {
                innerHTML +=
                    '<tr>' +
                        '<td style="border-bottom: 1px solid #979797">gNBID</td>' +
                        '<td style="text-align: right; border-bottom: 1px solid #979797">' + dat.gNBID +
                    '</tr>';
            }
            if(dat.rsrp) {
                innerHTML +=
                    '<tr>' +
                        '<td style="border-bottom: 1px solid #979797">RSRP</td>' +
                        '<td style="text-align: right; border-bottom: 1px solid #979797">' + dat.rsrp + ' dBm</td>' +
                    '</tr>';
            }
            if(dat.sinr) {
                innerHTML +=
                    '<tr>' +
                        '<td style="border-bottom: 1px solid #979797">SNR</td>' +
                        '<td style="text-align: right; border-bottom: 1px solid #979797">' + dat.sinr + ' dB</td>' +
                    '</tr>';
            }
            if(dat.rsrq) {
                innerHTML +=
                    '<tr>' +
                        '<td style="border-bottom: 1px solid #979797">RSRQ</td>' +
                        '<td style="text-align: right; border-bottom: 1px solid #979797">' + dat.rsrq + ' dBm</td>' +
                    '</tr>';
            }
            if(dat.rssi) {
                innerHTML +=
                    '<tr>' +
                        '<td style="border-bottom: 1px solid #979797">RSSI</td>' +
                        '<td style="text-align: right; border-bottom: 1px solid #979797">' + dat.rssi + ' dBm</td>' +
                    '</tr>';
            }
            innerHTML += '<tr><td style="height: 10px;"></td></tr>';
        });

        innerHTML +=
                    '</table>' +
                '</div>' +
            '</div>';

        newElem.innerHTML = innerHTML;
        holder.appendChild(newElem);
    });