We Keep Coding

Multiple SUB in a mqtt JS file

So, im making a project for a subject, and i have a file (weather.js) that publishes two variables, one in local/temperature and another in local/time. I'm making a file that subscribes to both of them and operates with the values (blinds.js), but it mixes them. I send temperature and the hour at the same time, and in the subscriber it gives the 1st value to the temperature local variable (inside blinds.js) and then to the time local variable. What can i do?
Here's the weather.js file.
//Variables
var mqtt = require('mqtt')
var client = mqtt.connect('mqtt://localhost:1884')
var topic_temp = 'local/temperature'
var topic_time = 'local/time'
//Publisher (topic)
client.on('connect',() => {
setInterval(() => {
console.log('--------------------');
//creating random temperatures between -5 and 5
var temperature = Math.floor((Math.random() * 30) + 5);
var msg1 = temperature.toString();
//sending the temperature values
client.publish(topic_temp,msg1);
console.log('Temperature is ' + msg1 + 'ºC');
//Console log sent message
console.log('Temperature sent!');
setTimeout(function(){
//creating random time value 24h format
var time = Math.floor((Math.random() * 24));
var msg2 = time.toString();
//sending time value
client.publish(topic_time,msg2);
console.log('Time is ' + msg2 + 'h');
//Console log sent message
console.log('Time sent!');
console.log('--------------------');
}, 3000);
},15000)
})
And this is the blinds.js file.
//Variables
var mqtt = require('mqtt')
var client = mqtt.connect('mqtt://localhost:1884')
var topic_sub1 = 'local/temperature'
var msg1 = false;
var topic_sub2 = 'local/time'
msg2 = false;
var topic_post = 'appliances/blinds'
var blinds = false;
//Subscribing to the topic_sub1
client.on('connect',() => {
client.subscribe(topic_sub1)
})
//Receiving temp messages
client.on('message',(topic_sub1,temperature) => {
if (msg2 == false) {
msg1 = true;
temp = temperature.toString();
console.log('--------------------');
console.log(temp + 'ºC');
}
})
//Subscribing to the topic_sub2
client.on('connect',() => {
client.subscribe(topic_sub2)
})
//Receiving time messages
client.on('message',(topic_sub2,times) => {
if (msg1) {
msg2 = true;
time = times.toString();
console.log(time + 'h');
console.log('--------------------');
blind();
}
})
//blinds function
function blind() {
if (temp > 28 || time < 9) {
blinds = true;
console.log('Blinds are CLOSED');
}else if (temp > 28 || time > 19){
blinds = true;
console.log('Blinds are CLOSED');
}else{
blinds = false;
console.log('Blinds are OPEN');
}
//sending the temperature values
client.publish(topic_post,blinds.toString());
msg2 = false;
msg1 = false;
}

You can't add multiple client.on('message') listeners, there can only be one.
So just add an if statement in the callback to check what topic the message arrived on.
client.on('message', (topic, message) => {
if (topic == topic_sub1) {
//handle temp
} else if ( topic == topic_sub2) {
//handle time
}
})

How to execute a JS function if the parameters do not match?

I took this code from internet to modify, to practice JS, though I fail to call the function when the input length is equal 0. So basically I click on the "Add a column" and it opens the console to give the name of the column you want to make, though when the input length as I said is equal to 0, it raises and alert, but it doesn't ask again for the input (I don't know how to call the function so the input console will show up again).
Down below you have the JS code, for the whole code (html, css, js) click here.
function Column(name) {
if (name.length > 0) {
var self = this; // useful for nested functions
this.id = randomString();
this.name = name;
this.$element = createColumn();
function createColumn() {
var $column = $("<div>").addClass("column");
var $columnTitle = $("<h2>")
.addClass("column-title")
.text(self.name);
var $columnCardList = $("<ul>").addClass("column-card-list");
var $columnDelete = $("<button>")
.addClass("btn-delete")
.text("x");
var $columnAddCard = $("<button>")
.addClass("add-card")
.text("Add a card");
$columnDelete.click(function() {
self.removeColumn();
});
$columnAddCard.click(function(event) {
self.addCard(new Card(prompt("Enter the name of the card")));
});
$column
.append($columnTitle)
.append($columnDelete)
.append($columnAddCard)
.append($columnCardList);
return $column;
}
} else if (name.length == 0) {
alert("please type something");
} else {
return;
}
}
Column.prototype = {
addCard: function(card) {
this.$element.children("ul").append(card.$element);
},
removeColumn: function() {
this.$element.remove();
}
};
function Card(description) {
var self = this;
this.id = randomString();
this.description = description;
this.$element = createCard();
function createCard() {
var $card = $("<li>").addClass("card");
var $cardDescription = $("<p>")
.addClass("card-description")
.text(self.description);
var $cardDelete = $("<button>")
.addClass("btn-delete")
.text("x");
$cardDelete.click(function() {
self.removeCard();
});
$card.append($cardDelete).append($cardDescription);
return $card;
}
}
Card.prototype = {
removeCard: function() {
this.$element.remove();
}
};
var board = {
name: "Kanban Board",
addColumn: function(column) {
this.$element.append(column.$element);
initSortable();
},
$element: $("#board .column-container")
};
function initSortable() {
$(".column-card-list")
.sortable({
connectWith: ".column-card-list",
placeholder: "card-placeholder"
})
.disableSelection();
}
$(".create-column").click(function() {
var name = prompt("Enter a column name");
var column = new Column(name);
board.addColumn(column);
});
// ADDING CARDS TO COLUMNS
todoColumn.addCard(card1);
doingColumn.addCard(card2);
});

After the line:
alert("please type something");
Add the following:
$(".create-column").click();
That programmatically "clicks" the Create Column button.

If you want to prompt the user to enter column name if length is 0, just add this lines of code to your if-stament:
var name = prompt("Enter a column name");
var column = new Column(name);
board.addColumn(column);.
As shown below:
else if (name.length == 0) {
alert("please type something");
var name = prompt("Enter a column name");
var column = new Column(name);
board.addColumn(column);
} else {
return;
}
If that was your question, this should be able to fix it.

Reset event.preventDefault()

I'm building validation for form fields for a form. So, I need to do a validation which I do like this :
$(document).ready(function() {
$('#submitbutton').click(function() {
if (validateField()) {
$('form.checkout_form_validate').submit(function(event) {
return true;
});
}
else {
$('form.checkout_form_validate').submit(function(event) {
event.preventDefault();
return false;
});
}
});
function validateField() {
var first_name = $('#first_name').val();
var last_name = $('#last_name').val();
var shipping_address = $('#shipping_address_1').val();
var city = $('#city').val();
var state = $('#state').val();
var phone = $('#phone').val();
if (first_name == "" || last_name == "" || shipping_address == "" || city == "" || state == "" || phone == "") {
$('#errorcontainer').html('Fill out all the required fields <br/>');
$('#errorcontainer').fadeIn('fast');
return false;
} else {
return true;
}
}
});
So, If a user just press the submit button, it will throw an error and Form will not submit, But, If after doing this, the user fills out the entire form and then hit submit, Nothing will happen even when validateField() is true.
How to "reset" it? Any ideas ?

On each click on submit button, you are binding new form submit
handler. Don't nest events...
You validation logic should be:
$(function() {
$('form.checkout_form_validate').submit(function(event) {
return validateField();
});
});
function validateField() {
var first_name = $('#first_name').val();
var last_name = $('#last_name').val();
var shipping_address = $('#shipping_address_1').val();
var city = $('#city').val();
var state = $('#state').val();
var phone = $('#phone').val();
if (first_name == "" || last_name == "" || shipping_address == "" || city == "" || state == "" || phone == "") {
$('#errorcontainer').html('Fill out all the required fields <br/>');
$('#errorcontainer').fadeIn('fast');
return false;
} else {
return true;
}
}

You don't need e.preventDefault(); and a return false; statement, they do the same thing
return false within a jQuery event handler = e.preventDefault() and e.stopPropagation()

Validation gets removed after calling event.preventDefault()

Validation gets removed from SSN textbox after calling event.preventDefault(); in $("form").submit(function (event)
Validation gets fired and than removed
function CheckSSN() {
var sender = $("#SSN");
var value = $(sender).val();
var errorSpan = $(sender).siblings("span[data-valmsg-for='SSN']");
var message = "SSN is required.";
var validAliasPatt = /^[0-9]{9}$/;
if (!value || value == "" || value == null) {
enableValidationUI(sender, errorSpan, message);
return false;
}
else if (!validAliasPatt.test(value)) {
message = "SSN should be a 9 digit number.";
enableValidationUI(sender, errorSpan, message);
return false;
}
else {
disableValidationUI(sender, errorSpan);
return true;
}
}
----------
("form").submit(function (event) {
var submit = true;
if (!CheckSSN()) {
event.preventDefault();
var submit = false;
}
if (submit) {
$("form").submit();
}
else {
event.preventDefault();
return;
}
});

The issue was with using ("form").submit(function (event) which ended up creating endless loop. After changing to ('button').click fixed this issue.

2 Javascript functions into 1 Form Input Box

HEAVILY EDITED:
I have a form which has this input field:
<input id="RR_No" type="text" size="15" name="RR_No" readonly></div></TD>
In that field, I need to put the date in the format:
DDMMYYYY
And a Serial Number that is 6 numbers long to make a number like this:
DDMMYYYYABCDEF
Here is the Javascript to make the date:
function autoDate () {
var tDay = new Date();
var tMonth = tDay.getMonth()+1;
var tDate = tDay.getDate();
if ( tMonth < 10) tMonth = "0"+tMonth;
if ( tDate < 10) tDate = "0"+tDate;
document.getElementById("RR_Date").value = tDate+"/"+tMonth+"/"+tDay.getFullYear();
document.getElementById("RR_No").value = tDate+""+tMonth+""+tDay.getFullYear();
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
autoDate();
});
Which works.
I then have this JavaScript that copies the Serial Number into the same Input box:
$(function(){
$("#copyCheck").change(function() {
if ($("#copyCheck:checked").length > 0) {
bindGroups();
} else {
unbindGroups();
}
});
});
var bindGroups = function() {
// First copy values
$("input[name='RR_No']").val($("input[name='S_Serial_No']").val());
// Then bind fields
$("input[name='S_Serial_No']").keyup(function() {
$("input[name='RR_S_No']").val($(this).val());
});
};
var unbindGroups = function() {
$("input[name='SN_No0']").unbind("keyup");
};
But this second code overwrites the date already in the Input box.
I need it to show beside the Date within the same Input box.
Hope this makes more sense.
Chris

When you concatenate these two fields into a new 3rd field, you need to add the values together...
$("input[name='ID_field']").val($("input[name='Date_field']").val() + $("input[name='Other-value_field']").val());
If the date is being generated dynamically...
var d = new Date();
$("input[name='ID_field']").val(d.getTime() + $("input[name='Other-value_field']").val());