Among other things the below code updates the contents of <div id=”status-p> with the status Waiting / Idle or Control What im looking to do is change the class of that dive based on the same status – so i can change the colour of the div based on the status (Red amber green etc)
<script type="text/javascript">
function _log(msg) {
if (document.location.search.toLowerCase().indexOf("log=true") >= 0) {
document.getElementById("error-log").innerText += msg + "nn";
}
}
document.addEventListener("DOMContentLoaded", function () {
status_p = document.getElementById("status-p");
queue_pos_p = document.getElementById("queue-pos");
time_left_p = document.getElementById("time-left");
join_queue_btn = document.getElementById("join-queue");
leave_queue_btn = document.getElementById("leave-queue");
controls_svg = document.getElementById("controls-svg");
preset_btn = document.getElementById("preset-btn");
preset_select = document.getElementById("preset-select");
stream = document.getElementById("stream");
cmdlist_btn = document.getElementById("cmdlist-btn");
cmdlist_input = document.getElementById("cmdlist-input");
auto_joined = false;
on_state_changed("LOADING");
try {
connect();
}
catch (ex) {
_log(ex);
}
});
function connect() {
try{
ws = new WebSocket("wss://starcross-fcc.co.uk/ptz/");
ws.onerror = function (ex) {
_log("WS errorn" + ex + "nn");
};
}
catch (ex) {
_log(ex);
}
ws.onopen = console.log;
on_state_changed("CONNECTING");
ws.onclose = function (ev) {
on_state_changed("TIMED OUT");
setTimeout(connect, 3000);
};
ws.onmessage = on_message;
queue_pos = -1;
}
function on_message(event) {
var data = JSON.parse(event.data);
console.log(data);
var type = data.type;
if (type == "state-changed") {
on_state_changed(data.state);
}
else if (type == "queue-pos-changed") {
queue_pos = data.queue_pos;
queue_pos_p.style.display = (state == "WAITING" && queue_pos != -1) ? "" : "none";
queue_pos_p.innerText = "Queue Pos: " + queue_pos;
}
else if (type == "countdown-update") {
on_countdown_update_recv(data.time_left);
}
else if (type == "settings") {
control_time = data.control_time;
}
else if (type == "countdown-update") {
control_time = data.control_time;
}
}
function on_state_changed(newState) {
state = newState;
status_p.innerText = "Status: " + state;
join_queue_btn.style.display = state == "IDLE" ? "" : "none";
leave_queue_btn.style.display = (state == "WAITING" || state == "CONTROL") ? "" : "none";
leave_queue_btn.innerText = state == "WAITING" ? "Leave Queue" : "Release Control";
queue_pos_p.style.display = (state == "WAITING" && queue_pos != -1) ? "" : "none";
var inControl = state == "CONTROL";
controls_svg.classList = inControl ? "" : "disabled";
cmdlist_btn.disabled = cmdlist_input.disabled = preset_btn.disabled = preset_select.disabled = !inControl;
time_left_p.style.display = (state == "WAITING" || state == "CONTROL") ? "" : "none";
if (!auto_joined && state == "IDLE") {
auto_joined = true;
join_queue();
}
}
function on_countdown_update_recv(timeLeft) {
endTime = new Date().getTime() + (timeLeft*1000);
update_countdown();
}
function update_countdown() {
if (state != "CONTROL" && state != "WAITING") { return; }
var timeLeft = Math.round((endTime - new Date().getTime())/1000);
if (state == "WAITING") {
timeLeft += (queue_pos - 1) * control_time;
}
time_left_p.innerText = "Time left: " + timeLeft + "s";
setTimeout(update_countdown, ((endTime - new Date().getTime()) % 1000));
}
function clear_dropdown() {
while (dropdown.lastChild) {
dropdown.removeChild(dropdown.lastChild);
}
}
function send_json(json) {
ws.send(JSON.stringify(json));
}
function join_queue() {
if (state != "IDLE") { return; }
send_json({ "type": "join-queue" });
}
function leave_queue() {
send_json({ "type": "leave-queue" });
}
function on_run_clicked() {
if (state != "CONTROL") { return; }
send_cmdlist(dropdown.value);
}
function send_move(dir, time, speed) {
if (speed == undefined) { speed = 50; }
if (time == undefined) { time = 0.12; }
if (state != "CONTROL") { return; }
send_json({
type: "control",
action: "move",
direction: dir,
speed: speed,
duration: time
});
}
function send_zoom(direction) {
if (state != "CONTROL") { return; }
send_json({
type: "control",
action: "zoom",
direction: direction
});
}
function send_goto() {
if (state != "CONTROL") { return; }
v = parseInt(preset_select.value);
send_json({
type: "control",
action: "goto",
preset: v
});
}
function send_cmdlist(name) {
if (state != "CONTROL") { return; }
name = cmdlist_input.value;
send_json({
type: "cmdlist",
name: name
});
}
</script>
Dont even know where to start ive tried adding tags to ther staus’s but that fails