Jump to content
Sign in to follow this  
Graf

Виджет для сайта.

Recommended Posts

Это виджет для сайта, который в реальном времени отображает работу порталов на сервере : портал открыт/закрыт, время до закрытия/открытия.

Автор @Totoka. 

Взято тут: 

https://pkodev.net/index.php?/topic/923-jquery-plug-in-event-timer/

Скриншот:

d15b9c901b0a.png

Код:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/result-light.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/later/1.2.0/later.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <style type="text/css">
    *{
  margin: 0;
  padding: 0;
}
body {

}
.well.heading {
  padding-top: 4px;
  padding-bottom: 5px;
}
.row.template:hover {
  cursor: default;
  background-color: #ddd;
}
  </style>
  <title>Временной отсчет</title>
<script type='text/javascript'>
var VanillaRunOnDomReady = function() {
(function($) {
  later.date.UTC();
  var lastexec = Date.now();
  //-- Default Time Formatting
  var timeFormat = function(sec){
    var min = Math.floor( sec / 60 ) % 60;
    var hrs = Math.floor( sec / 60 / 60 );
    sec = sec % 60;
    return  (hrs < 10? '0'+hrs : hrs)
      +':'+ (min < 10? '0'+min : min)
      +':'+ (sec < 10? '0'+sec : sec);
  };
  var settings = {
    currentTime: Date.now(),
    container: null,
    eventList: [],
    template: {
      selector: null,
      selectors: {
        state:  null,
        name:   null,
        time:   {
          curr: null,
          next: null,
        },
      },
      format: {
        time: {
          curr: function(remaining,base,prev,next) {
            if( remaining > 0 ) {
              return timeFormat(remaining);
            } return '-- : -- : --';
          },
          next: function(dura,base,prev,next) {
            var now = Math.floor(settings.currentTime / 1000);
            var sec = Math.floor(next.getTime() / 1000);
            return timeFormat(sec - now);
          },
        },
      },
      onUpdate: function(dolly, info) {},
      onClone: function(dolly, info) {},
    }
  };

  var evt = function($info) {
    var $duration = [];
    var $state = '';
    var $opens = {
      exceptions: [],
      schedules:  []
    };
    var $template = $(settings.template.selector).clone();
    $template.find(settings.template.selectors.name)
      .text($info.name);
    $template.appendTo(settings.container);
    settings.template.onClone($template, $info);

    for (var i = 0; i < $info.time.length; ++i) {
      Array.prototype.push.apply(
        $opens.schedules,
        later.parse.cron(
          $info.time[i]
        ).schedules
      );
    }

    for(var i = 0; i < $info.states.length; ++i ) {
      var state = $info.states[i];
      if(typeof state.upto != 'undefined') {
        $duration.push( state.upto * 1000 );
        continue;
      } $state = state.value;
      break;
    }

    return {
      info: $info,
      clear: function() {
        $opens.exceptions.length = 0;
        $opens.exceptions = undefined;
        $opens.schedules.length = 0;
        $opens.schedules = undefined;
        $opens.length = 0;
        $opens = undefined;
        $template.remove();
        $duration.length = 0;
        $duration = undefined;
      },
      update: function() {
        var now = settings.currentTime;
        var state = $state;
        var sche = later.schedule($opens);
        var base = new Date(now);
        var prev = new Date(sche.prev(1,base));
        var next = new Date(sche.next(1,base));
        var dura = 0;

        for(var i = 0; i < $info.states.length; ++i ) {
          if( typeof $duration[i] == 'undefined' ) {
            break;
          }
          var diff = now - (prev.getTime() + $duration[i]);
          if( diff < 0 ) {
            state = $info.states[i].value;
            dura = Math.floor( Math.abs(diff / 1000) );
            break;
          }
        }

        if($template.find(settings.template.selectors.time.curr).is(':visible')){
          $template.find(settings.template.selectors.time.curr)
            .html(settings.template.format.time.curr(dura,base,prev,next));
        }

        if($template.find(settings.template.selectors.time.next).is(':visible')){
          $template.find(settings.template.selectors.time.next)
            .html(settings.template.format.time.next(dura,base,prev,next));
        }

        if($template.find(settings.template.selectors.state).is(':visible')){
          $template.find(settings.template.selectors.state)
            .html(state);
        }

        settings.template.onUpdate($info,$template);

        delete base;
        delete prev;
        delete next;
        return this;
      },
    }.update();
  };

  var events = [];

  var timer = undefined;

  var methods = {
    init: function($settings) {
      $.extend(true, settings, $settings);

      $(settings.container).empty();

      for (var i = 0; i < events.length; ++i) {
        events[i].clear();
      } events.length = 0;

      for (var k in settings.eventList) {
        var $evt = evt(settings.eventList[k]);
        events.push($evt);
      }

      return methods;
    },

    start: function() {

      if (timer) {
        clearInterval(timer);
      }
      timer = setInterval(function() {
        settings.currentTime += Date.now() - lastexec;
        for (var i = 0; i < events.length; ++i) {
          events[i].update();
        } lastexec = Date.now();
      }, 1000);
    },

    stop: function() {
      if (timer) {
        clearInterval(timer);
      }
    },
  };

  $.extend($, { eventTimer : function(value) {
    if (methods[value]) {
      return methods[value].apply(this,
        Array.prototype.slice.call(arguments, 1));
    }

    if (typeof value === 'object') {
      return methods.init(value);
    }

    $.error('Unhandled calling '+ typeof value +' @value on jQuery.eventTimer')
  }});
})(jQuery)

var timer = jQuery.eventTimer({
	currentTime: Date.now(),                 
  container: 'div#map-timers>.table.body',
  template: {
    selector:'div#map-timers>.template',
    selectors: {
      state:'.state',
      name: '.name',
      time: {
        curr: '.curr',
        next: '.next',
    	},
    },
    
    onUpdate: function(
       dolly,
       info) {
    },
    
    onClone: function(
      dolly,
       info) {
      dolly.removeClass('hidden');
    },
  },

  eventList: [
  	{
      name: 'Хаос Аргента',
      //-- Больше информации тут: https://en.wikipedia.org/wiki/Cron
      time: [ '0 1/2 * * *' ], /* Работает каждые 2 часа с 01:00 */
      states: [
        { upto: 30 * 60, value:'<span class="label label-success">Открыт</span>' },	//-- Время работы портала
        { upto: 45 * 60, value:'<span class="label label-warning">Активен</span>' },	//-- Время работы карты
        { value: '<span class="label label-danger">Закрыт</span>' },
      ],
    },
	]
});
timer.start();

}

var alreadyrunflag = 0;

if (document.addEventListener)
    document.addEventListener("DOMContentLoaded", function(){
        alreadyrunflag=1; 
        VanillaRunOnDomReady();
    }, false);
else if (document.all && !window.opera) {
    document.write('<script type="text/javascript" id="contentloadtag" defer="defer" src="javascript:void(0)"><\/script>');
    var contentloadtag = document.getElementById("contentloadtag")
    contentloadtag.onreadystatechange=function(){
        if (this.readyState=="complete"){
            alreadyrunflag=1;
            VanillaRunOnDomReady();
        }
    }
}

window.onload = function(){
  setTimeout("if (!alreadyrunflag){VanillaRunOnDomReady}", 0);
}//]]> 

</script>

  
</head>

<body>
  <div id='map-timers'>
  <div class='hidden row template'>
    <div class='col-xs-4'>
      <h4 class='name text-left'>
      </h4>
    </div>
    <div class='col-xs-3'>
      <h4 class='next text-center'>
      </h4>
    </div>
    <div class='col-xs-3'>
      <h4 class='curr text-center'>
      </h4>
    </div>
    <div class='col-xs-2'>
      <h4 class='state text-center'>
      </h4>
    </div>
  </div>

  <div class='table well heading'>
    <div class='row'>
      <div class='col-xs-4'>
        <h4 class='text-left'>
          Название
        </h4>
      </div>
      <div class='col-xs-3'>
        <h4 class='text-center'>
          До следующего открытия
        </h4>
      </div>
      <div class='col-xs-3'>
        <h4 class='text-center'>
          До закрытия
        </h4>
      </div>
      <div class='col-xs-2'>
        <h4 class='text-center'>
          Статус
        </h4>
      </div>
    </div>
  </div>
  
  <div class='table well body'>
  </div>
  

</div>

  
  <script>
  if (window.parent && window.parent.parent){
    window.parent.parent.postMessage(["resultsFrame", {
      height: document.body.getBoundingClientRect().height,
      slug: "pm30r9c6"
    }], "*")
  }
</script>

</body>

</html>

 

Edited by Graf
  • Like 1

Share this post


Link to post
Share on other sites

Это виджет для сайта, который в реальном времени отображает работу порталов на сервере : портал открыт/закрыт, время до закрытия/открытия.

Автор @Totoka. За перевод - спасибо.


Share this post


Link to post
Share on other sites
11 минуту назад, V3ct0r сказал:

Это виджет для сайта, который в реальном времени отображает работу порталов на сервере : портал открыт/закрыт, время до закрытия/открытия.

Автор @Totoka. За перевод - спасибо.

Поправил)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...