message.js ➔ sendTo - Code Metrics - Inspection of "fix bugs" - ankitjain28may/openchat - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Push — master ( da46fb...91cc27 )

by Ankit

created 2017-01-17 14:41 UTC

message.js ➔ sendTo A

↳ Parent: public/assests/js/message.js

Complexity

Conditions	1
Paths	1

Size

Total Lines

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
cc	1
nc	1
nop	1
dl	0
loc	4
rs	10
c	0
b	0
f	0


// Websocket Connection Open
var conn = new WebSocket("ws://localhost:8080");


// For send Message to Web Socket Server
function sendTo(data)
{
  conn.send(JSON.stringify(data));
}

// For First time
function init()
{
  var msg = {
    "type": "OpenChat initiated..!"
  };
  sendTo(msg);
}

conn.onopen = function() {
  console.log("Connection established!");

  init();
};

// SideBar Load Request
function sidebarRequest()
{
  var msg = {
    "type": "Load Sidebar"
  };
  sendTo(msg);
}

// Create Sidebar
function createSidebarElement(data, eleId)
{
  // organising content according to time
  $("#"+eleId).html("");
  var condition = data.length;
  for (var i = 0; i < condition; i++)
  {

    var div1 = $("<div></div>").addClass("row sideBar-body");

    div1.attr({
      "id" : data[i].username
    });

    var div2 = $("<div></div>").addClass("col-sm-3 col-xs-3 sideBar-avatar");
    var div3 = $("<div></div>").addClass("avatar-icon");
    var imgElement = $("<img>").attr({
      "src": "../public/assests/img/bg.png"
    });
    div3.append(imgElement);
    div2.append(div3);
    div1.append(div2);

    div2 = $("<div></div>").addClass("col-sm-9 col-xs-9 sideBar-main");
    div3 = $("<div></div>").addClass("row");
    var div4 = $("<div></div>").addClass("col-sm-8 col-xs-8 sideBar-name");
    var spanE = $("<span></span>").addClass("name-meta").text(data[i].name);
    div4.append(spanE);
    div3.append(div4);

    div4 = $("<div></div>").addClass("col-sm-4 col-xs-4 pull-right sideBar-time");
    spanE = $("<span></span>").addClass("time-meta pull-right").text(data[i].time);
     div4.append(spanE);
    div3.append(div4);
    div2.append(div3);

    div1.append(div2);
    $("#"+eleId).append(div1);

    if(eleId === "message" && $("#text_reply").attr("name") == data[i].login_id)
    {
      $("#"+data[i].username).addClass("active");
    }
  }
}


// For updating Sidebar
function SideBar(msg) {
  // Getting Div
  if (msg != null) {
    createSidebarElement(msg, "message");
  }
}

function toConversation() {
  $(".side").addClass("hide");
  $(".message").addClass("show");
  $(".lowerBar").addClass("show");
  $(".reply-emojis").addClass("hide");
  $(".reply-recording").addClass("hide");
}

function toSidebar() {
  $(".side").removeClass("hide");
  $(".message").removeClass("show");
  $(".lowerBar").removeClass("show");
  $(".reply-emojis").removeClass("hide");
  $(".reply-recording").removeClass("hide");
}

function width() {
  if (window.innerWidth < 768) {
    return true;
  }
  return false;
}

// Creating new Conversation or Loading Conversation
function newConversation(element, load)
{

  if(width())
  {
    toConversation();
  }

  var msg = {
    "username": element.id,
    "load": load,
    "type": "Initiated"
  };
  sendTo(msg);
}

// Set Details
function setConversationDetails(details)
{
  $("#conversationHeading").html("");

  var headingEle = $("<div></div>").addClass("col-sm-2 col-md-1 col-xs-3 heading-avatar");
  var headingAva = $("<div></div>").addClass("heading-avatar-icon");
  var headingImg = $("<img>").attr({"src" : "../public/assests/img/ankit.png"});
  headingAva.append(headingImg);
  headingEle.append(headingAva);

  var headingEleName = $("<div></div>").addClass("col-sm-8 col-xs-7 heading-name");
  var headingNameMeta = $("<a></a>").addClass("heading-name-meta").text(details.name);
  headingNameMeta.attr({
    "href": location.href.substring(0, location.href.lastIndexOf("/") + 1) + "account.php/" + details.username
  });
  var headingOnline = $("<span></span>").addClass("heading-online");
  headingOnline.text("");
  if (details.login_status === "1") {
    headingOnline.text("Online");
  }
  headingEleName.append(headingNameMeta);
  headingEleName.append(headingOnline);

  var headingDot = $("<div></div>").addClass("col-sm-1 col-xs-1  heading-dot pull-right");
  var headingDotIcon = $("<i></i>").addClass("fa fa-ellipsis-v fa-2x  pull-right").attr({"aria-hidden" : "true"});
  headingDot.append(headingDotIcon);


  $("#conversationHeading").append(headingEle);
  $("#conversationHeading").append(headingEleName);
  $("#conversationHeading").append(headingDot);

  $("#text_reply").attr({
    "name": details.id
  });
}


// Update Current Conversation
function updateConversation(data)
{

  var ele = document.getElementById("conversation");
  ele.innerHTML = "";

  if (data[0].type === 1) {
    // For showing previous message
    if (data[0].load > 10)
    {
      var divE1 = $("<div></div>").addClass("row message-previous");
      var divE2 = $("<div></div>").addClass("col-sm-12 previous");
      var aElement = $("<a></a>").text("Show Previous Message!");
      aElement.attr({
        "id": data[0].username,
        "name": data[0].load
      });
      divE2.append(aElement);
      divE1.append(divE2);
      $("#conversation").append(divE1);
    }

    for (var i = data.length - 1; i >= 1; i--) {
      // create element
      var divElement1 = $("<div></div>").addClass("row message-body");
      var divElement2 = $("<div></div>").addClass("col-sm-12");
      var divElement3 = $("<div></div>");
      var messageText = $("<div></div>").addClass("message-text").text(data[i].message);
      var spanElement = $("<span></span>").addClass("message-time pull-right").text(data[i].time);

      if (data[i]["sent_by"] !== data[i].start)
      {
       divElement2.addClass("message-main-receiver");
       divElement3.addClass("receiver");
      }
      else
      {
        divElement2.addClass("message-main-sender");
       divElement3.addClass("sender");
      }
      divElement3.append(messageText);
      divElement3.append(spanElement);
      divElement2.append(divElement3);
      divElement1.append(divElement2);
      $("#conversation").append(divElement1);
    }

    setConversationDetails(data[0]);

    ele.scrollTop = ele.scrollHeight;
  } else {
    setConversationDetails(data[0]);
  }
}

// For reply to other messages
function reply() {

  var message = [$("#text_reply").val()];
  var id = $("#text_reply").attr("name");
  $("#text_reply").val("");
  // console.log(message);
  var msg = {
    "name": id,
    "reply": message,
    "type": "reply"
  };
  sendTo(msg);
}

function notFound(eleId)
{
  eleId = "#"+eleId;
  $(eleId).text("");
  var divElement = $("<div></div>").addClass("notFound").text("Not Found");
  $(eleId).append(divElement);
}

function composeChoose() {
  var text = document.getElementById("composeText").value;
  if (text !== "")
  {
    var msg =
    {
      "value": text,
      "type": "Compose"
    };
    sendTo(msg);
  }
  else
  {
    $("#compose").html("");
  }
}

//compose messages
function composeResult(arr)
{
  var ele = document.getElementById("compose");
  ele.innerHTML = "";

  if (arr !== "Not Found")
  {
    createSidebarElement(arr, "compose");
  }
  else
  {
    notFound("compose");
  }
}

function searchChoose() {
  var text = $("#searchText").val();
  if (text !== "") {
    var msg = {
      "value": text,
      "type": "Search"
    };

    sendTo(msg);
  }
  else
  {
    sidebarRequest();
  }

}

function searchResult(arr) {
  if (arr !== "Not Found") {
    createSidebarElement(arr, "message");
  }
  else
  {
    notFound("message");
  }

}

// Load previous messages
function previous(element)
{
  var user = element.id;

  var lo = element.name;
  newConversation(element, lo);
}

function hideComposeScreen() {
  $(".side-two").css({
    "left": "-100%"
  });
}

// Audio Recognization

function startDictation() {

  if (window.hasOwnProperty("webkitSpeechRecognition")) {

    var recognition = new webkitSpeechRecognition();


    recognition.continuous = false;
    recognition.interimResults = false;

    recognition.lang = "en-IN";
    recognition.start();

    recognition.onresult = function(e) {
      document.getElementById("text_reply").value = e.results[0][0].transcript;
      recognition.stop();
      reply();
    };

    recognition.onerror = function() {
      recognition.stop();
    }

  }
}


// On Message
conn.onmessage = function(e)
{
  var msg = JSON.parse(e.data);
  // console.log(msg);
  if (!width())
  {
    SideBar(msg.sidebar);
  } else
  {
    if (!$(".side").hasClass("hide")) {
      SideBar(msg.sidebar);
    }
  }

  if (msg.initial !== undefined) {
    SideBar(msg.initial);
  }

  if (msg.conversation !== undefined) {
    updateConversation(msg.conversation);
  }

  if (msg.reply !== undefined) {
    var textAreaId = $("#text_reply").attr("name");
    if (msg.reply[0].id === textAreaId) {
      updateConversation(msg.reply);
    }
  }

  if (msg.Search !== undefined) {
    searchResult(msg.Search);
  }

  if (msg.Compose !== undefined) {
    composeResult(msg.Compose);
  }
};

// Event Listeners
$(document).ready(function(){
  $("body").on("click", ".sideBar-body", function() {
    newConversation(this,10);
    hideComposeScreen();
  });

  $("body").on("click", ".reply-send",
   function() {
    reply();
  });

  $("body").on("click", ".reply-recording",
   function() {
    startDictation();
  });

  $("body").on("click", ".lowerBar-recording",
   function() {
    startDictation();
  });

  $("body").on("click", ".lowerBar-back",
   function() {
    toSidebar();
    sidebarRequest();
  });

  $("body").on("click", ".previous a",
   function() {
    previous(this);
  });

  $("body").on("keyup", "#searchText",
   function() {
    searchChoose();
  });

  $("body").on("keyup", "#composeText",
   function() {
    composeChoose();
  });

  $(".heading-compose").click(function() {
    $(".side-two").css({
      "left": "0"
    });
  });

  $(".newMessage-back").click(function() {
    hideComposeScreen();
  });

});

console.log("Hello, Contact me at [email protected]");


1
2			// Websocket Connection Open
3			var conn = new WebSocket("ws://localhost:8080");
			0 ignored issues – show Bug introduced 2017-01-09 19:33 UTC by Report Bug Copy Issue Report The variable `WebSocket` seems to be never declared. If this is a global, consider adding a `/** global: WebSocket */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
4
5			// For send Message to Web Socket Server
6			function sendTo(data)
7			{
8			conn.send(JSON.stringify(data));
9			}
10
11			// For First time
12			function init()
13			{
14			var msg = {
15			"type": "OpenChat initiated..!"
16			};
17			sendTo(msg);
18			}
19
20			conn.onopen = function() {
21			console.log("Connection established!");
			0 ignored issues – show Debugging Code introduced 2017-01-09 19:33 UTC by Report Bug Copy Issue Report `console.log` looks like debug code. Are you sure you do not want to remove it? Loading history...
22			init();
23			};
24
25			// SideBar Load Request
26			function sidebarRequest()
27			{
28			var msg = {
29			"type": "Load Sidebar"
30			};
31			sendTo(msg);
32			}
33
34			// Create Sidebar
35			function createSidebarElement(data, eleId)
36			{
37			// organising content according to time
38			$("#"+eleId).html("");
39			var condition = data.length;
40			for (var i = 0; i < condition; i++)
41			{
42
43			var div1 = $("<div></div>").addClass("row sideBar-body");
44
45			div1.attr({
46			"id" : data[i].username
47			});
48
49			var div2 = $("<div></div>").addClass("col-sm-3 col-xs-3 sideBar-avatar");
50			var div3 = $("<div></div>").addClass("avatar-icon");
51			var imgElement = $("<img>").attr({
52			"src": "../public/assests/img/bg.png"
53			});
54			div3.append(imgElement);
55			div2.append(div3);
56			div1.append(div2);
57
58			div2 = $("<div></div>").addClass("col-sm-9 col-xs-9 sideBar-main");
59			div3 = $("<div></div>").addClass("row");
60			var div4 = $("<div></div>").addClass("col-sm-8 col-xs-8 sideBar-name");
61			var spanE = $("<span></span>").addClass("name-meta").text(data[i].name);
62			div4.append(spanE);
63			div3.append(div4);
64
65			div4 = $("<div></div>").addClass("col-sm-4 col-xs-4 pull-right sideBar-time");
66			spanE = $("<span></span>").addClass("time-meta pull-right").text(data[i].time);
67			div4.append(spanE);
68			div3.append(div4);
69			div2.append(div3);
70
71			div1.append(div2);
72			$("#"+eleId).append(div1);
73
74			if(eleId === "message" && $("#text_reply").attr("name") == data[i].login_id)
75			{
76			$("#"+data[i].username).addClass("active");
77			}
78			}
79			}
80
81
82			// For updating Sidebar
83			function SideBar(msg) {
84			// Getting Div
85			if (msg != null) {
86			createSidebarElement(msg, "message");
87			}
88			}
89
90			function toConversation() {
91			$(".side").addClass("hide");
92			$(".message").addClass("show");
93			$(".lowerBar").addClass("show");
94			$(".reply-emojis").addClass("hide");
95			$(".reply-recording").addClass("hide");
96			}
97
98			function toSidebar() {
99			$(".side").removeClass("hide");
100			$(".message").removeClass("show");
101			$(".lowerBar").removeClass("show");
102			$(".reply-emojis").removeClass("hide");
103			$(".reply-recording").removeClass("hide");
104			}
105
106			function width() {
107			if (window.innerWidth < 768) {
108			return true;
109			}
110			return false;
111			}
112
113			// Creating new Conversation or Loading Conversation
114			function newConversation(element, load)
115			{
116
117			if(width())
118			{
119			toConversation();
120			}
121
122			var msg = {
123			"username": element.id,
124			"load": load,
125			"type": "Initiated"
126			};
127			sendTo(msg);
128			}
129
130			// Set Details
131			function setConversationDetails(details)
132			{
133			$("#conversationHeading").html("");
134
135			var headingEle = $("<div></div>").addClass("col-sm-2 col-md-1 col-xs-3 heading-avatar");
136			var headingAva = $("<div></div>").addClass("heading-avatar-icon");
137			var headingImg = $("<img>").attr({"src" : "../public/assests/img/ankit.png"});
138			headingAva.append(headingImg);
139			headingEle.append(headingAva);
140
141			var headingEleName = $("<div></div>").addClass("col-sm-8 col-xs-7 heading-name");
142			var headingNameMeta = $("<a></a>").addClass("heading-name-meta").text(details.name);
143			headingNameMeta.attr({
144			"href": location.href.substring(0, location.href.lastIndexOf("/") + 1) + "account.php/" + details.username
145			});
146			var headingOnline = $("<span></span>").addClass("heading-online");
147			headingOnline.text("");
148			if (details.login_status === "1") {
149			headingOnline.text("Online");
150			}
151			headingEleName.append(headingNameMeta);
152			headingEleName.append(headingOnline);
153
154			var headingDot = $("<div></div>").addClass("col-sm-1 col-xs-1 heading-dot pull-right");
155			var headingDotIcon = $("<i></i>").addClass("fa fa-ellipsis-v fa-2x pull-right").attr({"aria-hidden" : "true"});
156			headingDot.append(headingDotIcon);
157
158
159			$("#conversationHeading").append(headingEle);
160			$("#conversationHeading").append(headingEleName);
161			$("#conversationHeading").append(headingDot);
162
163			$("#text_reply").attr({
164			"name": details.id
165			});
166			}
167
168
169			// Update Current Conversation
170			function updateConversation(data)
171			{
172
173			var ele = document.getElementById("conversation");
174			ele.innerHTML = "";
175
176			if (data[0].type === 1) {
177			// For showing previous message
178			if (data[0].load > 10)
179			{
180			var divE1 = $("<div></div>").addClass("row message-previous");
181			var divE2 = $("<div></div>").addClass("col-sm-12 previous");
182			var aElement = $("<a></a>").text("Show Previous Message!");
183			aElement.attr({
184			"id": data[0].username,
185			"name": data[0].load
186			});
187			divE2.append(aElement);
188			divE1.append(divE2);
189			$("#conversation").append(divE1);
190			}
191
192			for (var i = data.length - 1; i >= 1; i--) {
193			// create element
194			var divElement1 = $("<div></div>").addClass("row message-body");
195			var divElement2 = $("<div></div>").addClass("col-sm-12");
196			var divElement3 = $("<div></div>");
197			var messageText = $("<div></div>").addClass("message-text").text(data[i].message);
198			var spanElement = $("<span></span>").addClass("message-time pull-right").text(data[i].time);
199
200			if (data[i]["sent_by"] !== data[i].start)
201			{
202			divElement2.addClass("message-main-receiver");
203			divElement3.addClass("receiver");
204			}
205			else
206			{
207			divElement2.addClass("message-main-sender");
208			divElement3.addClass("sender");
209			}
210			divElement3.append(messageText);
211			divElement3.append(spanElement);
212			divElement2.append(divElement3);
213			divElement1.append(divElement2);
214			$("#conversation").append(divElement1);
215			}
216
217			setConversationDetails(data[0]);
218
219			ele.scrollTop = ele.scrollHeight;
220			} else {
221			setConversationDetails(data[0]);
222			}
223			}
224
225			// For reply to other messages
226			function reply() {
227
228			var message = [$("#text_reply").val()];
229			var id = $("#text_reply").attr("name");
230			$("#text_reply").val("");
231			// console.log(message);
232			var msg = {
233			"name": id,
234			"reply": message,
235			"type": "reply"
236			};
237			sendTo(msg);
238			}
239
240			function notFound(eleId)
241			{
242			eleId = "#"+eleId;
243			$(eleId).text("");
244			var divElement = $("<div></div>").addClass("notFound").text("Not Found");
245			$(eleId).append(divElement);
246			}
247
248			function composeChoose() {
249			var text = document.getElementById("composeText").value;
250			if (text !== "")
251			{
252			var msg =
253			{
254			"value": text,
255			"type": "Compose"
256			};
257			sendTo(msg);
258			}
259			else
260			{
261			$("#compose").html("");
262			}
263			}
264
265			//compose messages
266			function composeResult(arr)
267			{
268			var ele = document.getElementById("compose");
269			ele.innerHTML = "";
270
271			if (arr !== "Not Found")
272			{
273			createSidebarElement(arr, "compose");
274			}
275			else
276			{
277			notFound("compose");
278			}
279			}
280
281			function searchChoose() {
282			var text = $("#searchText").val();
283			if (text !== "") {
284			var msg = {
285			"value": text,
286			"type": "Search"
287			};
288
289			sendTo(msg);
290			}
291			else
292			{
293			sidebarRequest();
294			}
295
296			}
297
298			function searchResult(arr) {
299			if (arr !== "Not Found") {
300			createSidebarElement(arr, "message");
301			}
302			else
303			{
304			notFound("message");
305			}
306
307			}
308
309			// Load previous messages
310			function previous(element)
311			{
312			var user = element.id;
			0 ignored issues – show Unused Code introduced 2017-01-09 19:33 UTC by Report Bug Copy Issue Report The variable `user` seems to be never used. Consider removing it. Loading history...
313			var lo = element.name;
314			newConversation(element, lo);
315			}
316
317			function hideComposeScreen() {
318			$(".side-two").css({
319			"left": "-100%"
320			});
321			}
322
323			// Audio Recognization
324
325			function startDictation() {
326
327			if (window.hasOwnProperty("webkitSpeechRecognition")) {
328
329			var recognition = new webkitSpeechRecognition();
			0 ignored issues – show Coding Style Best Practice introduced 2017-01-09 19:33 UTC by Report Bug Copy Issue Report By convention, constructors like `webkitSpeechRecognition` should be capitalized. Loading history... Bug introduced 2017-01-09 19:33 UTC by Report Bug Copy Issue Report The variable `webkitSpeechRecognition` seems to be never declared. If this is a global, consider adding a `/** global: webkitSpeechRecognition */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
330
331			recognition.continuous = false;
332			recognition.interimResults = false;
333
334			recognition.lang = "en-IN";
335			recognition.start();
336
337			recognition.onresult = function(e) {
338			document.getElementById("text_reply").value = e.results[0][0].transcript;
339			recognition.stop();
340			reply();
341			};
342
343			recognition.onerror = function() {
344			recognition.stop();
345			}
346
347			}
348			}
349
350
351			// On Message
352			conn.onmessage = function(e)
353			{
354			var msg = JSON.parse(e.data);
355			// console.log(msg);
356			if (!width())
357			{
358			SideBar(msg.sidebar);
359			} else
360			{
361			if (!$(".side").hasClass("hide")) {
362			SideBar(msg.sidebar);
363			}
364			}
365
366			if (msg.initial !== undefined) {
367			SideBar(msg.initial);
368			}
369
370			if (msg.conversation !== undefined) {
371			updateConversation(msg.conversation);
372			}
373
374			if (msg.reply !== undefined) {
375			var textAreaId = $("#text_reply").attr("name");
376			if (msg.reply[0].id === textAreaId) {
377			updateConversation(msg.reply);
378			}
379			}
380
381			if (msg.Search !== undefined) {
382			searchResult(msg.Search);
383			}
384
385			if (msg.Compose !== undefined) {
386			composeResult(msg.Compose);
387			}
388			};
389
390			// Event Listeners
391			$(document).ready(function(){
392			$("body").on("click", ".sideBar-body", function() {
393			newConversation(this,10);
394			hideComposeScreen();
395			});
396
397			$("body").on("click", ".reply-send",
398			function() {
399			reply();
400			});
401
402			$("body").on("click", ".reply-recording",
403			function() {
404			startDictation();
405			});
406
407			$("body").on("click", ".lowerBar-recording",
408			function() {
409			startDictation();
410			});
411
412			$("body").on("click", ".lowerBar-back",
413			function() {
414			toSidebar();
415			sidebarRequest();
416			});
417
418			$("body").on("click", ".previous a",
419			function() {
420			previous(this);
421			});
422
423			$("body").on("keyup", "#searchText",
424			function() {
425			searchChoose();
426			});
427
428			$("body").on("keyup", "#composeText",
429			function() {
430			composeChoose();
431			});
432
433			$(".heading-compose").click(function() {
434			$(".side-two").css({
435			"left": "0"
436			});
437			});
438
439			$(".newMessage-back").click(function() {
440			hideComposeScreen();
441			});
442
443			});
444
445			console.log("Hello, Contact me at [email protected]");
			0 ignored issues – show Debugging Code introduced 2017-01-09 19:33 UTC by Report Bug Copy Issue Report `console.log` looks like debug code. Are you sure you do not want to remove it? Loading history...

ankitjain28may / openchat

Push — master ( da46fb...91cc27 )

message.js ➔ sendTo A

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like