e-cosplay/assets/class/ServerCard.js

export class ServerCard extends HTMLDivElement{
    connectedCallback() {
        let element = this;

        this.s = element.querySelector('.s');
        this.cpu = element.querySelector('.cpu');
        this.ram = element.querySelector('.ram');
        this.hdd = element.querySelector('.hdd');

        setInterval(()=>{
            this.update()
        },5000)
        this.update()
    }
    update() {
        let mqttClient =  mqtt.connect('wss://wsmqtt.esy-web.dev');
        mqttClient.on("connect", () => {
            mqttClient.subscribe('server/'+this.getAttribute('id')+'/metric')
            mqttClient.subscribe('server/'+this.getAttribute('id')+'/online')
        });

        mqttClient.on("message", (topic, message) => {
            if(topic == "server/"+this.getAttribute('id')+"/online") {
                console.log(topic,message.toString());
                let json = JSON.parse(message.toString());
                if(json.status) {
                    this.s.classList = "s font-semibold bg-RUNNING";
                    this.s.innerText = "RUNNING";
                } else {
                    this.s.classList = "s font-semibold bg-STOPPED";
                    this.s.innerText = "STOPPED";
                }
            }
            if(topic == "server/"+this.getAttribute('id')+"/metric") {
                let json = JSON.parse(message.toString());

                this.cpu.querySelector('.p').innerText = json.cpu + "%";
                this.cpu.querySelector('.gauge >div').style.width = json.cpu + "%";
                if (json.cpu <= 70) {
                    this.cpu.querySelector('.gauge >div').classList = "bg-green-500 h-2 rounded-l-full";
                }
                if (json.cpu>=71 && json.cpu <=90) {
                    this.cpu.querySelector('.gauge >div').classList = "bg-orange-500 h-2 rounded-l-full";
                }
                if (json.cpu>=91) {
                    this.cpu.querySelector('.gauge >div').classList = "bg-red-500 h-2 rounded-l-full";
                }

                this.ram.querySelector('.p').innerText = json.memory + "%";
                this.ram.querySelector('.gauge >div').style.width = json.memory + "%";
                if (json.memory <= 70) {
                    this.ram.querySelector('.gauge >div').classList = "bg-green-500 h-2 rounded-l-full";
                }
                if (json.memory>=71 && json.memory <=90) {
                    this.ram.querySelector('.gauge >div').classList = "bg-orange-500 h-2 rounded-l-full";
                }
                if (json.ram>=91) {
                    this.ram.querySelector('.gauge >div').classList = "bg-red-500 h-2 rounded-l-full";
                }

                this.hdd.querySelector('.p').innerText = json.disk + "%";
                this.hdd.querySelector('.gauge >div').style.width = json.disk + "%";
                if (json.disk <= 70) {
                    this.hdd.querySelector('.gauge >div').classList = "bg-green-500 h-2 rounded-l-full";
                }
                if (json.disk>=71 && json.disk <=90) {
                    this.hdd.querySelector('.gauge >div').classList = "bg-orange-500 h-2 rounded-l-full";
                }
                if (json.disk>=91) {
                    this.hdd.querySelector('.gauge >div').classList = "bg-red-500 h-2 rounded-l-full";
                }
            }
        });
    }
}