coze_training/socket/public/device.js

$(document).ready( function(){

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

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

    var session = {"name":"Test session 1","start":"2018-04-28 11:30:00","stop":"2018-04-28 13:00:00","enabled":1,"progress_n":"0","progress_max":"0","duration":5400,"step_duration":5400,"messages":[{"id":"51","title":"1_welcome","short_text":"<p>Benvenuti in <strong>COZe<\/strong>, il vostro assistente teorico per discutere ancora meglio il caso.<\/p>\r\nOgni 3 minuti controllate il vostro cellulare.","long_text":"","image":"","actions":[],"timer":"2018-04-28 11:30:20"},{"id":"52","title":"2_perf","short_text":"<p><strong>gruppi --&gt; output --&gt; indicatori<\/strong><\/p>\r\n<p>Non dimenticatevi di tenere sotto controllo:<\/p>\r\n<p><strong>Efficacia <\/strong><\/p>\r\n<p><strong>Efficienza<\/strong><\/p>\r\n<p><strong>Apprendimento<\/strong><\/p>\r\n<p><strong>Durata<\/strong><\/p>","long_text":"","image":"","actions":[],"timer":"2018-04-28 11:32:00"},{"id":"53","title":"3_indicatori","short_text":"<p><strong>Efficacia <\/strong>&egrave; la capacit&agrave; da parte del team di raggiungere l&rsquo;obiettivo stabilito<\/p>\r\n<p><strong>Efficienza<\/strong> &egrave; la capacit&agrave; di raggiungere l&rsquo;obiettivo nel rispetto delle risorse a disposizione, tempi, budget, risorse materiali<\/p>\r\n<p><strong>Apprendimento<\/strong> &egrave; la capacit&agrave; degli individui di aver sviluppato maggiore conoscenza derivante dalla interazione con gli altri membri<\/p>\r\n<p><strong>Durata<\/strong> &egrave; la capacit&agrave; del team di creare un contesto in cui &egrave; possibile generare valore aggiunto dall&rsquo;interazione di membri che hanno gi&agrave; lavorato insieme<\/p>","long_text":"","image":"","actions":[],"timer":"2018-04-28 11:33:00"},{"id":"54","title":"4_status","short_text":"<p><strong>gruppi --&gt; input --&gt; status<\/strong><\/p>\r\n<p>Ricordate:<\/p>\r\n<p><strong>Status:<\/strong> l&rsquo;esplicita o implicita posizione gerarchica di ciascun individuo all&rsquo;interno del team in relazione a quella degli altri membri (dovuto a esperienza, anzianit&agrave; aziendale, posizione gerarchica, competenze)<\/p>\r\n<p>Gruppi composti da membri con status differenti tendono a sviluppare processi meno efficaci<\/p>\r\nAd esempio: mancanza di rappresentativit&agrave; delle idee di tutti","long_text":"","image":"","actions":[],"timer":"2018-04-28 11:34:00"},{"id":"55","title":"5_ruoli","short_text":"<p><strong>gruppi --&gt; input --&gt; ruoli<\/strong><\/p>\r\n<p>Ricordate:<\/p>\r\n<p>Il <strong>ruolo<\/strong> costituisce un&rsquo;aspettativa di comportamento che i membri del team nutrono nei confronti di ciascuno dei membri del team stesso.<\/p>\r\n<p>La definizione dei ruoli all&rsquo;interno del team &egrave; un&rsquo;attivit&agrave; fondamentale poich&eacute; fornisce i punti di riferimento relativi alle varie tipologie di attivit&agrave; che devono essere svolte<\/p>\r\n<p>Ruolo definito in base:<\/p>\r\n<p>all&rsquo;<strong>orientamento a relazioni<\/strong> interne o esterne al gruppo<\/p>\r\n<p>all&rsquo;<strong>orientamento al compito<\/strong> (dove devo andare, come arrivo all&rsquo;obiettivo)<\/p>\r\nOccorre presidiale la <strong>diversity<\/strong> dei ruoli per avere prestazioni positive in un team","long_text":"","image":"","actions":[],"timer":"2018-04-28 11:36:00"},{"id":"56","title":"6_comunicazione","short_text":"<p><strong>gruppi --&gt; processi --&gt; compito<\/strong><\/p>\r\n<p>Ricordate: input eccellenti non necessariamente portano a risultati eccellenti. &Egrave; necessario che i <strong>processi<\/strong> tra i membri siano a loro volta efficaci nel trasformare gli input in output.<\/p>\r\n<p>Processi <strong>orientati al compito<\/strong>: interazioni finalizzate a contribuire direttamente al raggiungimento dell&rsquo;obiettivo<\/p>\r\n<p>Processo 1: <strong>comunicazione<\/strong><\/p>\r\nCostituisce il mezzo attraverso cui i membri di un team si scambiano informazioni rilevanti per lo svolgimento del compito (osservate <strong>frequenza e formalizzazione<\/strong>)","long_text":"","image":"","actions":[],"timer":"2018-04-28 11:38:00"},{"id":"57","title":"7_coordinamento","s


    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;


          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(currentDate.getFullYear(),
              currentDate.getMonth(),
              currentDate.getDate(),
              currentDate.getHours(),
              currentDate.getMinutes(),
              currentDate.getSeconds()
              );*/

          //console.log(now - timer);
          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){
    showCloud(message.title, [message.short_text, message.long_text], message.image, '', '');
    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, " "));
  }

});