client-server/client.js at master · ItsKarlito/client-server · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
const socket = io.connect('http://192.168.2.219:3000')

const box = document.getElementById('box')

function start() {
  socket.emit('start')
}

function stop() {
  socket.emit('stop')
}

function formatTimestamp(timeStamp) {
  const dateTime = new Date(timeStamp)
  const formatedDate = `${dateTime.getDate()}/${dateTime.getMonth() + 1}/${dateTime.getFullYear()}`
  const formatedTime = dateTime.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: false })
  return String(formatedTime + ' - ' + formatedDate)
}

function formatTotalTime(ms) {
  var delta = Math.abs(ms) / 1000
  var days = Math.floor(delta / 86400)
  delta -= days * 86400
  var hours = Math.floor(delta / 3600) % 24
  delta -= hours * 3600
  if (hours < 10) hours = '0' + hours
  var minutes = Math.floor(delta / 60) % 60
  delta -= minutes * 60
  if (minutes < 10) minutes = '0' + minutes
  var seconds = Math.floor(delta) % 60
  if (seconds < 10) seconds = '0' + seconds
  return hours + ':' + minutes + ':' + seconds
}

socket.on('connect', function () {
  socket.emit('join')
})

socket.on('broad', function (data) {
  const p = document.createElement('p')
  p.textContent = data
  box.appendChild(p)
  box.scrollTop = box.scrollHeight
})

socket.on('clearBox', function () {
  box.innerHTML = ''
})

socket.on('updateInfo', function (data) {
  if (data.isRecording !== '') document.getElementById('dot').style.background = data.isRecording ? 'green' : 'red'
  if (data.fillingLine !== '') document.getElementById('line').value = data.fillingLine
  if (data.product !== '') document.getElementById('product').value = data.product
  if (data.startTimestamp !== '') document.getElementById('start').value = formatTimestamp(data.startTimestamp)
  if (data.endTimestamp !== '') document.getElementById('end').value = formatTimestamp(data.endTimestamp)
  if (data.count !== '') document.getElementById('count').value = data.count
  if (data.totalTime !== '') document.getElementById('totalTime').value = formatTotalTime(data.totalTime)
  if (data.average !== '') document.getElementById('average').value = data.average
  if (data.runningAverage !== '') document.getElementById('runningAverage').value = data.runningAverage
  if (data.bracketSizeRunningAverage !== '') document.getElementById('bracketSizeRunningAverage').value = data.bracketSizeRunningAverage
})