How can i remove duplicate entries in an html table - javascript

i'm using socket.io for a chat and stats web app. I have a problem figuring out on how to remove duplicate entries in my html table. The duplicate entries happen only because i fetch the api every time someone sends a message, so every time i fetch the api, the stats appear in the table and the table gets too much data.
var socket = io("ws://localhost:3000/");
document.getElementById("message").addEventListener("keydown", (e) => {
if (e.keyCode == 13) {
e.preventDefault();
setTimeout(() => {
document.getElementById("sendbtn").click();
}, 500);
}
});
window.onbeforeunload = function () {
return "Data will be lost if you leave the page, are you sure?";
};
document.getElementById("message").addEventListener("keydown", (e) => {
if (e.keyCode == 13) {
e.preventDefault();
document.getElementById("userbtn").click();
}
});
var send = () => {
if (
document.getElementById("username").value.length == 17 &&
username.length > 1
) {
socket.emit("message", document.getElementById("message").value);
document.getElementById("message").value = " ";
return false;
} else {
alert("Please enter and submit your steam ID");
}
};
var setusername = () => {
socket.emit("username", document.getElementById("username").value);
};
var stats = [];
socket.on("user", async (user) => {
username = user;
console.log(user);
});
socket.on("stats", (data) => {
var table = document.getElementById("users-table");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var kd = data.kd;
cell1.innerHTML = username;
cell2.innerHTML = kd.toFixed(2);
cell3.innerHTML = data.time.toFixed() + " h";
});
var username = "";
var message = " ";
socket.on("message", (msg) => {
message = msg;
document.getElementById("messages").innerHTML +=
"<span class=username-bx>" +
username +
"</span>" +
":" +
" " +
msg +
"<br>";
});
window.setInterval(function () {
var messagebox = document.getElementById("messages");
messagebox.scrollTop = messagebox.scrollHeight;
}, 50);
For more info you can ask me in the comments.

The fact that the global variable user is set by the socket is a bit weird (I would have expected the user to be part of the response).
Anyway, if you want to only add new messages and stats I would recommend you to work out an id for those (user + msg and user + data.kd? Or whatever will help you to determine that the message is a new one or duplicated) Then maintain a list/set of those. On new msg/stats only add them to your Dom if the id doesn't already exist.

Related

How to send a variable back from foreground.js to background.js

I tried to send my variable back from foreground.js to background.js by using an unchanged variable, and it works. Now I can't send some data that I use my AddEventListener syntax to store the data into the variable to call its back to background.js here are my code on foreground.js
foreground.js
console.log("foreground.js injected");
var pswdBtns = [];
let hrefLists = [];
var data = {};
var i;
function readUUID(){
var navigator_info = window.navigator;
var screen_info = window.screen;
var uid = navigator_info.mimeTypes.length;
uid += navigator_info.userAgent.replace(/\D+/g, '');
uid += navigator_info.plugins.length;
uid += screen_info.height || '';
uid += screen_info.width || '';
uid += screen_info.pixelDepth || '';
return uid;
}
async function passwordProtected(pointerList){
const date = new Date();
const uid = readUUID();
alert("You are in dangerous on \'"+ pointerList.title + "\' row = " + pointerList.id.slice(20));
data = {
"Webtitle": pointerList.href,
"Title": pointerList.title,
"Time": date.toString(),
"UUID": uid
}
console.log("foreground = ", data);
return data;
}
console.log("Start loop")
//This function made for collect each id in passwordShowPasswordButton
for(i = 0; i<=pswdBtns.length; i++){
if(document.querySelector("#passwordShowPasswordButton_"+ i) == null){
console.log("This is your limit!!");
}
else{
hrefLists[i] = document.querySelector("#passwordWebsitelink_"+ i);
pswdBtns[i] = document.querySelector("#passwordShowPasswordButton_"+ i);;
data = pswdBtns[i].addEventListener('click', passwordProtected.bind(pswdBtns[i], hrefLists[i]));
console.log(hrefLists[i].title); /* Title VARCHAR(30) */
console.log(hrefLists[i].href); /* Website VARCHAR(50) */
}
}
console.log("End");
and these are my code on background.js
background.js
const edgePswd = "edge://settings/passwords";
const settingPage = "edge://settings/";
chrome.tabs.onActivated.addListener(async (tab) => {
await chrome.tabs.get(tab.tabId, (current_tab_info) => {
var pswdPageChecked = 1;
while(pswdPageChecked < 2) {
if (edgePswd == current_tab_info.url) {
chrome.tabs.executeScript(null, { file: "/extension/foreground.js" }, (data) => {
console.log("Coming to foreground");
console.log(data);
});
pswdPageChecked++;
}
}
});
});
It would be a pleasure if someone can figure this.

Delay for messages in node-telegram-bot-api

I am working on a telegram bot with the node-telegram-bot-api library. I made 2 buttons using keyboard. But when you click on them a lot, the bot will spam and sooner or later it will freeze. Is it possible to somehow put a delay for the user on messages.
if (text === '/start') {
return bot.sendMessage(chatId, 'hello', keyboardMain);
}
export const keyboardMain = {
reply_markup: JSON.stringify({
keyboard: [
[{
text: '/start',
},
],
resize_keyboard: true
})
};
You can create a user throttler using Javascript Map
/*
* #param {number} waitTime Seconds to wait
*/
function throttler(waitTime) {
const users = new Map()
return (chatId) => {
const now = parseInt(Date.now()/1000)
const hitTime = users.get(chatId)
if (hitTime) {
const diff = now - hitTime
if (diff < waitTime) {
return false
}
users.set(chatId, now)
return true
}
users.set(chatId, now)
return true
}
}
How to use:
You'll get the user's chatId from telegram api. You can use that id as an identifier and stop the user for given specific time.
For instance I'm gonna stop the user for 10seconds once the user requests.
// global 10 second throttler
const throttle = throttler(10) // 10 seconds
// in your code
const allowReply = throttle(chatId) // chatId obtained from telegram
if (allowReply) {
// reply to user
} else {
// dont reply
}
I tried using this code, put the function code in my function file, connected everything to the required file, and I don’t understand what to do next and where to insert the last code and what to do with it. I'm new to JavaScript and just learning.
import {
bot
} from '../token.js';
import {
throttler
} from '../functions/functions.js';
import {
keyboardMain
} from '../keyboards/keyboardsMain.js';
export function commands() {
bot.on('message', msg => {
const text = msg.text;
const chatId = msg.chat.id;
const throttle = throttler(10);
if (text === '/start') {
const allowReply = throttle(chatId) // chatId obtained from telegram
if (allowReply) {
return bot.sendMessage(chatId, 'hello', keyboardMain);
} else {
// dont reply
}
}
return bot.sendMessage(chatId, 'error');
});
}
Get the time when he pressed the button
Get the time of the next click
Take away the difference and set the condition (if, for example, more than 3 seconds have passed between clicks, then the user will not be frozen).
var token = ""; // FILL IN YOUR OWN TOKEN
var telegramUrl = "https://api.telegram.org/bot" + token;
var webAppUrl = ""; // FILLINYOUR GOOGLEWEBAPPADDRESS
var ssId = ""; // FILL IN THE ID OF YOUR SPREADSHEET
function getMe() {
var url = telegramUrl + "/getMe";
var response = UrlFetchApp.fetch(url);
Logger.log(response.getContentText());
}
function setWebhook() {
var url = telegramUrl + "/setWebhook?url=" + webAppUrl;
var response = UrlFetchApp.fetch(url);
Logger.log(response.getContentText());
}
function sendText(id,text) {
var url = telegramUrl + "/sendMessage?chat_id=" + id + "&text=" + text;
var response = UrlFetchApp.fetch(url);
Logger.log(response.getContentText());
}
function doGet(e) {
return HtmlService.createHtmlOutput("Hi there");
}
function doPost(e){
var data = JSON.parse(e.postData.contents);
var text = data.message.text;
var id = data.message.chat.id;
var msgbegan = SpreadsheetApp.openById(ssId).getSheets()[1].getRange("A7").getValue();
var msginfo = SpreadsheetApp.openById(ssId).getSheets()[1].getRange("A9").getValue();
var answer = "%0A" + msgbegan + "%0A" ;
///////////////////////
/*
* #param {number} waitTime Seconds to wait
*/
function throttler(waitTime) {
const users = new Map()
return (chatId) => {
const now = parseInt(Date.now()/1000)
const hitTime = users.get(chatId)
if (hitTime) {
const diff = now - hitTime
if (diff < waitTime) {
return false
}
users.set(chatId, now)
return true
}
users.set(chatId, now)
return true
}
}
// global 10 second throttler
const throttle = throttler(500) // 10 seconds
// in your code
const allowReply = throttle(chatId) // chatId obtained from telegram
if (allowReply) {
// reply to user
} else {
// dont reply
}
///////////////////////////////////////
if(text == "/start"){
sendText(id, answer);
} else if (text == "/info"){
sendText(id, msginfo);
}else{
if (text.length == 10){
var found = false;
var total_rows = SpreadsheetApp.openById(ssId).getSheets()[0].getMaxRows();
for(i=1; i<=total_rows; i++){
var loop_id = SpreadsheetApp.openById(ssId).getSheets()[0].getRange(i,2).getValue();
if(text == loop_id){
found = true;
found_at = i; // employee row
break;
}
}
if(found){
sendText(id, work_message);
}else{
var msgerrror = SpreadsheetApp.openById(ssId).getSheets()[1].getRange("A6").getValue();
var not_found = "%0A" + msgerrror+ "%0A" ;
sendText(id, not_found);
}
} else {
sendText(id, "eroor");
}
}
/////////////
var emp_name = SpreadsheetApp.openById(ssId).getSheets()[0].getRange(found_at,1).getValue();
var emp_work = SpreadsheetApp.openById(ssId).getSheets()[0].getRange(found_at,3).getValue();
var homeloc = SpreadsheetApp.openById(ssId).getSheets()[0].getRange(found_at,4).getValue();
var emp_location = SpreadsheetApp.openById(ssId).getSheets()[0].getRange(found_at,8).getValue();
var emp_data = SpreadsheetApp.openById(ssId).getSheets()[0].getRange(found_at,5).getValue();
var emp_day = SpreadsheetApp.openById(ssId).getSheets()[0].getRange(found_at,6).getValue();
var emp_clock = SpreadsheetApp.openById(ssId).getSheets()[0].getRange(found_at,7).getValue();
var emp_location = SpreadsheetApp.openById(ssId).getSheets()[0].getRange(found_at,8).getValue();
var welcome = SpreadsheetApp.openById(ssId).getSheets()[1].getRange("A2").getValue();
var msgemp = SpreadsheetApp.openById(ssId).getSheets()[1].getRange("A3").getValue();
var msgloc = SpreadsheetApp.openById(ssId).getSheets()[1].getRange("A4").getValue();
var msgbay = SpreadsheetApp.openById(ssId).getSheets()[1].getRange("A5").getValue();
var msghome = SpreadsheetApp.openById(ssId).getSheets()[1].getRange("A8").getValue();
var msmobil = SpreadsheetApp.openById(ssId).getSheets()[1].getRange("A11").getValue();
var mstoday = SpreadsheetApp.openById(ssId).getSheets()[1].getRange("A13").getValue();
var msdata = SpreadsheetApp.openById(ssId).getSheets()[1].getRange("A14").getValue();
var msclock = SpreadsheetApp.openById(ssId).getSheets()[1].getRange("A15").getValue();
var work_message = welcome + emp_name +
"%0A" + msgemp + emp_work +
"%0A" + mstoday + emp_day +
"%0A" + msdata + emp_data +
"%0A" + msclock + emp_clock +
"%0A" + msghome + homeloc +
"%0A" + msgloc+ emp_location +
"%0A" + msgbay +
"%0A" + msmobil ;
}
Excuse me . I am a beginner
Is this the correct way

Email is not sending

Code Runs No Errors But I Do Not Receive and email when I check my gmail
This line is the issue I believe I am writing this incorrectly so its not sending the email help please
if(values.getDisplayValues() === "On-going" || values.getDisplayValues() === "" && values1.getDisplayValues() >= 80)
Rest of the code:
function sendEmail(){
var ss = SpreadsheetApp.getActiveSpreadsheet();
var SpreadsheetID = ss.getSheetId();
var spreadsheetURL = ss.getUrl();
var SpreadsheetID = spreadsheetURL.split("/")[5];
var filterViewName = 'PO_Log Precentage';
var filterViewID = filterId(SpreadsheetID, filterViewName);
var url = createURL(spreadsheetURL, filterViewID);
Logger.log(url);// Testing to see the correct url is created
var po_numID = ss.getSheetByName("Purchase Orders List").getRange("A2").getDisplayValue().substr(0,3);
Logger.log(po_numID);
var email_va = ss.getSheetByName("Purchase Orders List");
var values = email_va.getRange("Q2:Q");
var values1 = email_va.getRange("T2:T");
Logger.log(values)
var emailDataSheet = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/17G0QohHxjuAcZzwRtQ6AUW3aMTEvLnmTPs_USGcwvDA/edit#gid=1242890521").getSheetByName("TestA");
Logger.log(emailDataSheet.getSheetName());
var emailData = emailDataSheet.getRange("A2:A").getDisplayValues().flat().map(po => po.substr(0,3));
Logger.log(emailData)
var subject = po_numID + " Po Log Daily Notification ";
var options = {}
options.htmlBody = "Hi All, " + "The following" + '<a href=\"' +url+ '" > Purchase Orders </a>' + "are over 80% spent" + "";
// I believe this if statement is the problem I am writing it in correctly
if(values.getDisplayValues() === "On-going" || values.getDisplayValues() === "" && values1.getDisplayValues() >= "80%"){
emailData.every((po, index) => {
if (po == po_numID){
const email = emailDataSheet.getRange(index + 2,7).getValue();
console.log(email);
MailApp.sendEmail(email, subject, '', options);
return false;
} else {
return true;
}
});
}
}
https://docs.google.com/spreadsheets/d/1QW5PIGzy_NSh4MT3j_7PggxXq4XcW4dCKr4wKqIAp0E/edit#gid=611584429
Here is the spread sheet
values.getDisplayValues() gives you an array.
Basically it makes no sense to compare an array and a string with === and >= etc.
You need to decide which element of the array there should be. May be something like values.getDisplayValues()[0][0] (because it's likely an 2D-array). I can't check your code, so just a guess.

Firebase Database console.log() returning Null in Javascript

I hope to seek help from someone if possible. In the following code. Im trying to console.log() data from My Firebase reference as you can see in my code below. But the Console.log() is returning null instead of the values that are there in Firebase Realtime Database. I have also provided the code for adding which is working well. Please have a look the image of my database if it helps. I am not getting any other error in my console except the fact that this is returning null.
function addFamilyMember() {
var NameOfMember = document.getElementById("newFamilyMemberName").value;
var DoBOfMember = document.getElementById("newFamilyMemberDoB").value;
var EmailOfMember = document.getElementById("newFamilyMemberEmail").value;
var ContactOfMember = document.getElementById("newFamilyMemberContactNo").value;
if (
NameOfMember.length == "" ||
DoBOfMember.length == "" ||
EmailOfMember.length == "" ||
ContactOfMember.length == ""
) {
alert("Please enter all details of your Family Member");
} else {
var user = firebase.auth().currentUser;
var uid;
if (user != null) {
uid = user.uid;
}
firebase
.database()
.ref("/Users/" + uid + "/Family/" + NameOfMember)
.set({
MemberName: NameOfMember,
MemberDOB: DoBOfMember,
MemberEmail: EmailOfMember,
MemberContact: ContactOfMember,
});
}
}
var user = firebase.auth().currentUser;
var uid;
if (user != null) {
uid = user.uid;
}
firebase
.database()
.ref("/Users/" + uid + "/Family/")
.on("value", function (snap) {
var mName = snap.child("MemberName").val();
var mDOB = snap.child("MemberDOB").val();
var mEmail = snap.child("MemberEmail").val();
var mContact = snap.child("MemberContact").val();
console.log(mName + " " + mEmail + " " + mContact + " " + mDOB);
});
The problem is you are fetching the whole Family node and trying to access data of each member.
I tried to recreate your database structure and got this in console on running the code.
{
"Name One": {"MemberContact":10000,"MemberName":"Name Two"},
"Name Two": {"MemberContact":10002,"MemberName":"Name Two"}
}
so if you want to get data of each user from that then try using forEach this way.
Object.keys(snap.val()).forEach(key => {
const memberData = snap.val()[key]
//Data of each member
var mName = memberData["MemberName"]
var mDOB = memberData["MemberDOB"]
var mEmail = memberData["MemberEmail"]
var mContact = memberData["MemberContact"]
console.log(mName + " " + mEmail + " " + mContact + " " + mDOB);
})
When loading the page for the first time, firebase.auth().currentUser shouldn't be used because Firebase Auth needs to check if the user's login session is valid first.
let currentUserFamilyRef = null;
// for use with .on("value") and .off("value")
function onValueFamilyListener(snapshot) {
const familyMembers = [];
snapshot.forEach((familyMemberSnapshot) => {
const MemberName = snap.child("MemberName").val();
const MemberDOB = snap.child("MemberDOB").val();
const MemberEmail = snap.child("MemberEmail").val();
const MemberContact = snap.child("MemberContact").val();
familyMembers.push({ MemberName, MemberDOB, MemberEmail, MemberContact });
console.log(MemberName + " " + MemberDOB + " " + MemberEmail + " " + MemberContact);
}
// TODO: do something with the array of family members familyMembers
}
// for showing loading state
function showLoadingIcon(visible) {
if (visible) {
// TODO: show the icon
// TODO: disable the submit button
} else {
// TODO: hide the icon
// TODO: enable the submit button
}
}
// for when addFamilyMember() is called while signed out
function addFamilyMemberSignedOut() {
alert('You need to sign in first!');
return false;
}
// for when addFamilyMember() is called while signed in
function addFamilyMemberSignedIn() {
const NameOfMember = document.getElementById("newFamilyMemberName").value;
const DoBOfMember = document.getElementById("newFamilyMemberDoB").value;
const EmailOfMember = document.getElementById("newFamilyMemberEmail").value;
const ContactOfMember = document.getElementById("newFamilyMemberContactNo").value;
if (
NameOfMember.length == "" ||
DoBOfMember.length == "" ||
EmailOfMember.length == "" ||
ContactOfMember.length == ""
) {
alert("Please enter all details of your Family Member");
return false;
}
const user = firebase.auth().currentUser;
if (user === null) {
// shouldn't get here, but just in case.
alert('You need to sign in first!');
return false;
}
const uid = user.uid;
showLoadingIcon(true);
firebase
.database()
.ref("/Users/" + uid + "/Family/" + encodeURIComponent(NameOfMember)) // escape names as they may contain symbols, etc.
.set({
MemberName: NameOfMember,
MemberDOB: DoBOfMember,
MemberEmail: EmailOfMember,
MemberContact: ContactOfMember,
})
.then(
() => {
// saved family member's data successfully
showLoadingIcon(false);
// reset form
document.getElementById("newFamilyMemberName").value = "";
document.getElementById("newFamilyMemberDoB").value = "";
document.getElementById("newFamilyMemberEmail").value = "";
document.getElementById("newFamilyMemberContactNo").value = "";
alert('Information saved!');
},
(err) => {
// failed to save family member's data
showLoadingIcon(false);
// err.code may lead to more specific error information
console.error(err);
alert('Failed to save information!');
}
);
}
// for calling the correct addFamilyMember version
let addFamilyMember = addFamilyMemberSignedOut;
showLoadingIcon(true); // while loading the user's info, show a loading icon
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// A user is (newly/already) signed in.
// create a reference for this user's family
const newUserFamilyRef = firebase.database()
.ref("/Users/" + user.uid + "/Family");
if (currentUserFamilyRef !== null) {
// if the old user and new user are the same, do nothing
// but if they've changed, remove the old listener and update currentUserFamilyRef
if (!currentUserFamilyRef.isEqual(newUserFamilyRef)) {
currentUserFamilyRef.off("value", onValueFamilyListener);
currentUserFamilyRef = newUserFamilyRef;
}
} else {
currentUserFamilyRef = newUserFamilyRef;
}
// use the "signed in" version of addFamilyMember
addFamilyMember = addFamilyMemberSignedIn;
// attach listener to "/users/{user.uid}/Family"
currentUserFamilyRef.on("value", onValueFamilyListener);
} else {
// no user is signed in.
// use the "not signed in" version of addFamilyMember
addFamilyMember = addFamilyMemberSignedOut;
// if a user was logged in, clean up it's listener to prevent errors
if (currentUserFamilyRef !== null) {
currentUserFamilyRef.off("value", onValueFamilyListener);
}
// no user, so set the reference to null
currentUserFamilyRef = null;
}
showLoadingIcon(false);
});
You can't directly use firebase.auth().currentUser. First you need to check the authentication state of the user. Then only you can ask for the current user. So to do this you need to wrap it using authentication state observer.You can read more about it on firebase documentation: [https://firebase.google.com/docs/auth/web/start][1]
function addFamilyMember() {
var NameOfMember = document.getElementById("newFamilyMemberName").value;
var DoBOfMember = document.getElementById("newFamilyMemberDoB").value;
var EmailOfMember = document.getElementById("newFamilyMemberEmail").value;
var ContactOfMember = document.getElementById("newFamilyMemberContactNo").value;
firebase.auth().onAuthStateChanged((user) => {
if (user) {
if (
NameOfMember.length == "" ||
DoBOfMember.length == "" ||
EmailOfMember.length == "" ||
ContactOfMember.length == ""
) {
alert("Please enter all details of your Family Member");
} else {
var user = firebase.auth().currentUser;
var uid;
if (user != null) {
uid = user.uid;
}
firebase
.database()
.ref("/Users/" + uid + "/Family/" + NameOfMember)
.set({
MemberName: NameOfMember,
MemberDOB: DoBOfMember,
MemberEmail: EmailOfMember,
MemberContact: ContactOfMember,
});
}
}
var user = firebase.auth().currentUser;
var uid;
if (user != null) {
uid = user.uid;
}
firebase
.database()
.ref("/Users/" + uid + "/Family/")
.on("value", function (snap) {
var mName = snap.child("MemberName").val();
var mDOB = snap.child("MemberDOB").val();
var mEmail = snap.child("MemberEmail").val();
var mContact = snap.child("MemberContact").val();
console.log(mName + " " + mEmail + " " + mContact + " " + mDOB);
})
})}

JS user input function

So i am running a online chat function using js that currently sends and receives messages and has a user count in the top right corner that updates when a user leaves or joins. I need help with making a js function that you can submit a name to and it saves it and prints it alongside your own messages.
my current code on chat.js-
var WebSocketServer = require("ws").Server;
var wss = new WebSocketServer({port:3030});
var msgArray = new Array();
wss.on("connection", function(client) {
client.on("message", function(message) {
wss.clients.forEach(function(client) {
sendChat(client, message);
});
msgArray.push(message);
});
sendChat(client, `Welcome to chat :)`);
sendUC();
msgArray.forEach(function(item) {
sendChat(client, item);
})
});
function sendChat(client, message) {
var msg = ["chat", message];
client.send(JSON.stringify(msg));
}
function sendUC(){
wss.clients.forEach(function(client){
var UCmsg = ["uc",wss.clients.size];
client.send(JSON.stringify(UCmsg));
});
}
My current code on client.js-
var ws = new WebSocket("ws://jg.codesphere.net:3030");
ws.onmessage = function (payload) {
var msg = JSON.parse(payload.data);
if (msg[0] == "chat") {
addMessage(msg[1]);
}
if (msg[0] == "uc") {
addMessage("Another user joined");
adduc(msg[1]);
}
};
$(function () {
document.forms[0].onsubmit = function () {
var input = $("input#message").val();
$("input#message").val('');
ws.send(input);
};
});
function User() {
}
function addMessage(m) {
var html = "<p>" + m + "</p>";
$("div#messages").append(html);
}
function adduc(m) {
var html = "<p>" + m + "</p>";
$("span#1").html(m + " users online");
}
So i need help with where i would call a user entry function and how to make the function.

Categories

Resources