main.pug 1.29 KB
extends layout

block content
  .timeline
    h2 거래 진행 목록
    table#good-list
      tr
        th 상품명
        th 이미지
        th 시작 가격
        th 남은 시간
        th 입장
      for good in goods
        tr
          td= good.name
          td: img(src='/img/' + good.img)
          td= good.price
          td.time(data-start=good.createdAt) 00:00:00
          td: a.enter.btn(href='/good/' + good.id) 입장
  script(src='https://cdnjs.cloudflare.com/ajax/libs/event-source-polyfill/0.0.9/eventsource.min.js')
  script.
    var es = new EventSource('/sse');
    es.onmessage = function (e) {
      document.querySelectorAll('.time').forEach(function(td) {
        var end = new Date(td.dataset.start);
        var server = new Date(parseInt(e.data, 10));
        end.setDate(end.getDate() + 1);
        if (server >= end) {
          return td.textContent = '00:00:00';
        } else {
          var t = end - server;
          var seconds = ('0' + Math.floor((t / 1000) % 60)).slice(-2);
          var minutes = ('0' + Math.floor((t / 1000 / 60) % 60)).slice(-2);
          var hours = ('0' + Math.floor((t / (1000 * 60 * 60)) % 24)).slice(-2);
          return td.textContent = hours + ':' + minutes + ':' + seconds ;
        }
      });
    };