coze_training/socket/public/device.js

$(document).ready( function(){

  var socket = io();
  socket.on('message', getMessage);
  socket.on('pushMessage', pushMessage);

  var baseUrl = 'http://' + window.location.hostname;
  var content = $('.content');
  var urlString = window.location.href;
  var sid = getParameterByName("sid", urlString);

  $.getJSON( baseUrl + '/apis/getMessages.php', {
    sid: sid
  }).done( function(session){

    if(session.enabled){
      var currentDate = new Date();
      var timezoneOffset = (currentDate.getTimezoneOffset() * 60000);

      $.each(session.messages, function(index,item){
        if(item.timer != session.start){


          var now = new Date(Date.UTC(currentDate.getFullYear(),
                                      currentDate.getMonth(),
                                      currentDate.getDate(),
                                      currentDate.getHours(),
                                      currentDate.getMinutes(),
                                      currentDate.getSeconds()
                                     )).getTime() + timezoneOffset + (1000 * 60 * 60 * 2);


          var timerValue = item.timer.split(' ');
          var timerDate = timerValue[0].split('-');
          var timerHours = timerValue[1].split(':');
          var timer = new Date(Date.UTC(parseInt(timerDate[0]),
                                        parseInt(timerDate[1]) - 1,
                                        parseInt(timerDate[2]),
                                        parseInt(timerHours[0]),
                                        parseInt(timerHours[1]),
                                        parseInt(timerHours[2]))).getTime();

          var startValue = session.start.split(' ');
          var startDate = startValue[0].split('-');
          var startHours = startValue[1].split(':');
          var start = new Date(Date.UTC(parseInt(startDate[0]),
                                        parseInt(startDate[1]) - 1,
                                        parseInt(startDate[2]),
                                        parseInt(startHours[0]),
                                        parseInt(startHours[1]),
                                        parseInt(startHours[2]))).getTime();

          //console.log('NOW ',now, timer, start);

          if(now > timer){
            showCloud(item.title, [item.short_text, item.long_text], item.image, item.actions, session.messages);
            notify(true);
          } else {
            var delay = (timer - now);
            setTimeout(  function(){
              showCloud(item.title, [item.short_text, item.long_text], item.image, item.actions, session.messages);
              notify(true);
            },delay);
          }
        }
      });
    }
  });


  function showCloud(title, text, img, actions, messages){

    var image = img ? '<img src="' + img : '';
    var long_text = text[1] ? '<div class="long-text"> <button class="toggle button confirm">More...</button> <div class="text-content">' + text[1] + '</div> </div>' : '';

    var cloud = $('<div class="cloud left"> <div class="title">' + title + '</div> <div class="short-text">' + text[0] + '</div>' + long_text + image + '</div>');

    cloud.find('.toggle').on('click', function(e){
      var button = $(e.currentTarget);
      var text = button.siblings('.text-content');
      if(text.is(':visible')){
        button.text('More...');
        text.slideUp();
      }else{
        button.text('Less...');
        text.slideDown();
      }
    });
    content.append(cloud);

    if(actions.length){

      var actionsContainer = $('<div class="actions"></div>');
      $.each(actions, function(index, value){
        var button = $('<button class="goto button dotted" data-goto="' + value.mid + '">' + value.label + '</button>');

        button.on('click', function(e){
          var goto = $(e.currentTarget);
          var messageId = goto.data('goto');
          var fullMessage = messages.filter( function(m){m.id == messageId});
          showCloud(fullMessage[0].title, [fullMessage[0].short_text, fullMessage[0].long_text], fullMessage[0].image, fullMessage[0].actions, messages);
          notify(false);
        });

        actionsContainer.append(button);
      });

      content.append(actionsContainer);
    }

    scrollBottom();
  }

  function scrollBottom(){
    $('html, body').stop().animate({
      scrollTop: $('.cloud').last().offset().top
    }, 1000);
  }

  function notify(vibrate){
    if(vibrate){
      var canVibrate = (navigator.vibrate ||
                     navigator.webkitVibrate ||
                     navigator.mozVibrate ||
                     navigator.msVibrate);
      if(canVibrate){
        navigator.vibrate(500);
      }
    }
    $('#notify1')[0].play();
  }


  function getMessage(message){
    if(sid == message.sid){
      showCloud(message.title, [message.short_text, message.long_text], message.image, '', '');
      notify(true);
    }
  }


  function pushMessage(mid) {

    var urlString = window.location.href;
    var sid = getParameterByName("sid", urlString);
    $.getJSON( baseUrl + '/apis/getMessages.php', {
      sid: sid
    }).done( function(session){

      if(session.enabled){

        var allMessages = session.messages;

        $.each(allMessages, function(index, value){
          if(value.id == mid){
            showCloud(value.title, [value.short_text, value.long_text], value.image, value.actions, session.messages);
            notify(true);
          }
        });
      }
    });
  }

  function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
  }


  var noSleep = new NoSleep();
  var wakeLockEnabled = false;

  var toggleEl = document.querySelector(".lock-toggle");
  toggleEl.addEventListener('click', function() {
    if (!wakeLockEnabled) {
      noSleep.enable();
      wakeLockEnabled = true;
      $(".lock-toggle img").attr('src', '/images/lock.svg');
      toggleEl
    } else {
      noSleep.disable();
      wakeLockEnabled = false;
      $(".lock-toggle img").attr('src', '/images/unlock.svg');
    }
  }, false);

});