Как сделать так, чтобы кнопка меняла цвет в зависимости от текстового файла?

Question

Я создаю веб-приложение и хочу, чтобы кнопка состояния меняла цвет с красного на зеленый в зависимости от «включено» или «выключено» в текстовом файле. Я использую Raspberry Pi и Ubuntu, чтобы «контролировать» Raspberry Pi. Текстовый файл находится на Raspberry Pi, и я заставляю веб-сервер читать код Raspberry Pi с помощью кода.

Для включения / выключения телевизора у меня есть эти строки кода (в данном случае)

        screen = screenDAO.findById(screenCode);
        String[] args = new String[] { "/bin/bash", "-c", "ssh pi@172.19.xx.xxx 'echo \"on 0\" | cec-client -s'",
                "with", "args" };
        try {
            Process proc = new ProcessBuilder(args).start();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

        File f = new File("/tmp/status.txt");
        if(f.exists()){
            f.delete();
            try {
                f.createNewFile();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

        File file = new File("/tmp/status.txt");
        FileWriter fr = null;
        BufferedWriter br = null;
        try {
            // to append to file, you need to initialize FileWriter using below constructor
            fr = new FileWriter(file, true);
            br = new BufferedWriter(fr);
            for (int i = 0; i < 1; i++) {
                br.newLine();
                // you can use write or append method
                br.write("on");
            }

        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            try {
                br.close();
                fr.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

        return SUCCESS;
    }

Для обновления статуса кнопки у меня в данный момент есть

        screen = screenDAO.findById(screenCode);
        String[] args = new String[] { "/bin/bash", "-c",
                "ssh pi@172.19.67.177 /tmp/status.txt", "with", "args" };

        try {
            Process proc = new ProcessBuilder(args).start();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        String content = "";
        try {
            content = new String(Files.readAllBytes(Paths.get("/tmp/status.txt")));
            if (content.contains("on")) {
                System.out.println("The screen is turned on.");
                Boolean screenStatusOn = true;
            } else if (content.contains("off")) {
                System.out.println("The screen is turned off.");
                Boolean screenStatusOn = false;
            }
        } catch (IOException e1) {
            // TODO Auto-generated catch block
            e1.printStackTrace();
        } 
        return SUCCESS;
    }

Вот что у меня в js

    $('.screen-status').on('click', function(event) {
        var $onButton= $(this);

        $.ajax({
            url : 'updateScreenStatus',
            type : 'POST',
            data : "screenCode=" + $onButton.data('code'),
            success : function(data) {
                console.log(data);
            },
            error : function(data) {
            },
        });
    });
}

function initScreenControls() {
    $('.screen-on').on('click', function(event) {
        var $onButton= $(this);

        $.ajax({
            url : 'turnOnScreen',
            type : 'POST',
            data : "screenCode=" + $onButton.data('code'),
            success : function(data) {
                console.log(data);
            },
            error : function(data) {
            },
        });
    });

    $('.screen-off').on('click', function(event) {
        var $onButton= $(this);

        $.ajax({
            url : 'turnOffScreen',
            type : 'POST',
            data : "screenCode=" + $onButton.data('code'),
            success : function(data) {
                console.log(data);
            },
            error : function(data) {
            },
        });
    });
}

Я хочу, чтобы кнопка стала красной, когда телевизор выключен, и зеленой, когда он включен. В настоящее время у меня есть только отправить «Экран включен». (или выключен) к консоли.

Answer 1

Вы можете подробно рассказать о том, что происходит в случае успеха, в части «javascript» кода «при нажатии» (ниже, где вы регистрируете консоль).

Например: (вне примера)

 $('.screen-off').on('click', function(event) {
    var $onButton= $(this);

    $.ajax({
        url : 'turnOffScreen',
        type : 'POST',
        data : "screenCode=" + $onButton.data('code'),
        success : function(data) {
            console.log(data);
            /*document.getElementById("OnButton").style.backgroundColor = "red"; */
            $(this).css('background-color', 'red');
        },
        error : function(data) {
        },
    });
});