API tools faq
paste
Advertisement
Guest User

golos.io/@VIK

a guest
Feb 2nd, 2017
468
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 12.67 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <title>Voice Explorer</title>
  4. <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  5. <style>
  6. /* https://golos.io/@vik  */
  7. body {
  8.     max-width: 100%;
  9.     overflow-x: hidden;
  10.     font-family: Arial, Helvetica, sans-serif;
  11.     margin: 0;
  12.     padding: 0;
  13.     background: #2b2b2b url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Procaterol.svg/200px-Procaterol.svg.png);
  14.     background-position: center;
  15.     transition: 1s all ease;
  16.         background-attachment: fixed;
  17. }
  18. body:hover {
  19.  background-position: left;
  20. }
  21. body::-webkit-scrollbar,
  22. .scrl::-webkit-scrollbar{
  23. width:7px;height:9px
  24. }
  25. body::-webkit-scrollbar-track,
  26. .scrl::-webkit-scrollbar-track{
  27. background:#053363
  28. }
  29. body::-webkit-scrollbar-thumb,
  30. .scrl::-webkit-scrollbar-thumb{
  31. background:rgba(255,255,255,.4)
  32. }
  33. h1 {
  34.     color: #ffffff;
  35.     text-align: center;
  36.     text-transform: uppercase;
  37.     margin: 10px 0 0 0;
  38.     font-size: 5em;
  39.     text-shadow: 1px 3px 40px #22035a;
  40. }
  41. #blockexplr {
  42.     text-align: center;
  43.     font-size: 2rem;
  44.     color: #ffd121;
  45.     text-shadow: 1px 1px 6px black;
  46. }
  47. #sila {
  48.     display: block;
  49.     color: white;
  50.     text-align: center;
  51.     padding: 10px;
  52.     border-radius: 3px;
  53.     font-weight: 700;
  54. }
  55. #nicedata {
  56.    position:relative;
  57.     max-width: 960px;
  58.     width: 50%;
  59.     float: left;
  60. }
  61. #nicedata #item{
  62. transition:1s all ease;
  63. transform:translate3d(0px, -100px, 0px);
  64. position:absolute;
  65. opacity:0;
  66. }
  67. #nicedata #item.anim{
  68. transform:translate3d(0px, 0px, 0px);
  69. opacity:1;
  70. transition:1s all ease;
  71. position:relative;
  72. }
  73. header {
  74.     background: #0d0d0d url(https://s27.postimg.org/kj0ro3zcz/d941c938a01d450288d87fdba4e66af176f62c50_m.gif) no-repeat center;
  75.  text-align:center;
  76.     color: white;
  77.     margin: 0;
  78.     padding: 15px;
  79.         box-shadow: 0 0 20px black;
  80. }
  81. #result {
  82.    float:right;
  83.    width:50%;
  84.  position:relative;
  85. font-size:8pt;
  86.  
  87.      margin: 55px auto;
  88. }
  89.  
  90.  
  91. .static {
  92.     text-align: center;
  93.     margin-bottom: 25px;
  94. }
  95. #result #item {
  96.     background: black;
  97.     color: white;
  98.     padding: 5px;
  99.     line-height: 1;
  100.     margin: 10px 5px 0;
  101. }
  102.  
  103.  
  104.  
  105. .myJson span {
  106.     background: #315d9e;
  107.     color: white;
  108.     border-radius: 3px;
  109.     padding: 1px 8px;
  110.     font-weight: 700;
  111. }
  112.  
  113. .myJson {
  114.     background: #ffffff;
  115.     padding: 15px;
  116.     word-break: break-word;
  117.     color: #636363;
  118.     border-radius: 3px;
  119.     margin: 40px 15px 0;
  120.     box-shadow: 0 0 15px black;
  121.     transition: 1s all ease;
  122. }
  123.  
  124.  
  125.  
  126.  
  127. #witness a {
  128.    
  129.     color: white;
  130.     padding: 4px 10px;
  131.     border-radius: 10px;
  132.     text-decoration: none;
  133.     font-weight: 700;
  134. }
  135. #nicedata {
  136.    
  137.     max-width: 960px;
  138.     margin: 25px auto;
  139. }
  140. .myJson a {
  141.     text-decoration: none;
  142.     color: white;
  143.     background: #18d47e;
  144.     border-radius: 3px;
  145.     padding: 5px 10px;
  146.     font-weight: 700;
  147.     box-shadow: 0 0 10px -5px black;
  148.     text-transform: capitalize;
  149.     vertical-align: middle;
  150. }
  151. .textpost {
  152.     background: rgba(0, 0, 0, 0.42);
  153.     padding: 4px 15px;
  154.     margin: 2px 15px 0;
  155.     max-height: 100px;
  156.     border-radius: 3px;
  157.     color: #ffffff;
  158.     font-size: .8rem;
  159.     overflow: auto;
  160. }
  161. .textpost h4 {
  162.     margin: 0 0 3px 0;
  163. }
  164. .alert {
  165.     background: #ff4343;
  166.     color: white;
  167.     padding: 20px;
  168.     margin: 15px;
  169.     text-align: center;
  170.     box-shadow: 0 0 20px black;
  171.     border-radius: 3px;
  172.     font-size: 16px;
  173. }
  174.  
  175.  
  176. input[type="number"] {
  177.     border: 0;
  178.     font-size:1.3rem;
  179.     height:45px;
  180.     min-width: 200px;
  181.     border-radius: 3px;
  182.     box-shadow: inset 0 0px 5px 0px black;
  183.     background: rgba(130, 130, 130, 0.48);
  184.     color: white;
  185.     padding: 0 15px;
  186. }
  187. button {
  188.     background: #1ba77b;
  189.     box-shadow: 0 0 10px black;
  190.     border: 0;
  191.     height:45px;
  192.     font-weight: 700;
  193.     color: white;
  194.     padding: 10px;
  195.     border-radius: 3px;
  196.     font-size:1.3rem;
  197. }
  198. @media screen and (max-width: 700px) {
  199.  
  200. h1 {
  201.     font-size: 2em;
  202. }
  203. #blockexplr {
  204.     font-size: 1.5em;
  205. }
  206. #nicedata, #result {
  207.     width: 100%!important;
  208.     float: none!important;
  209. }
  210. button {
  211.     display: block;
  212.     margin: 10px auto;
  213. }
  214. }
  215. </style>
  216. </head>
  217. <body>
  218. <header>
  219. <h1>ws.golos.io</h1>
  220. <h2 id="blockexplr">Вычисление последнего блока... </h2>
  221. <div class="static">
  222. <input id="blockexplorer" type="number" name="quantity" min="1"><button onClick="searchBlock()">Задать стартовый блок</button>
  223. </div>
  224. <span id="witness">Выбираем ноду... </span> <span id="merkle">Определяем id блока...</span>
  225. </header>
  226. <div id="sila"><b>Вычисление силы голоса...</b></div>
  227. <div id="nicedata"></div><div id="result"></div>
  228. <script>
  229. var stream = document.getElementById('result'), nicestream = document.getElementById('nicedata'), oneitem = document.getElementById('item'),
  230. socket = new WebSocket('wss://ws.golos.io'), account = 'vik';
  231.     var movementTotal, silaTotal, lastblock, startblock;
  232.  
  233.    function connectGolos(){
  234.    socket.onopen = function(event) {
  235.      
  236.        setInterval(function() {
  237.       socket.send(JSON.stringify({ // Делаем запрос на возвращение глобальных динамических данных
  238.             id: 1,
  239.             method: 'get_dynamic_global_properties',
  240.             'params': []
  241.         }));
  242.        
  243.         lastblock++; // Увеличиваем номер блока на 1 каждый раз, когда происходит socket.onmessage
  244.        
  245.          
  246.         }, 3000);
  247.        
  248.         // Делаем такой запрос каждые 3000 милисикунд - частота генерации блока
  249.     };
  250.     } connectGolos();
  251.    
  252.      socket.onerror = function (event) {
  253.        stream.insertAdjacentHTML('afterbegin','<div class="alert">На сервере ноды произошла ошибка 502. Переподключение...</div>');
  254.         setTimeout(location.reload(), 1000); // На голосе часто ошибка 502 - в нашем случае перезагрузим страницу, если встретим такую ошибку.
  255.     };
  256. fixblock = true;
  257. function searchBlock()
  258.               {
  259.              
  260.                 var inputblock = document.getElementById("blockexplorer");
  261.                 var blocknum = inputblock.value;
  262.                 lastblock = blocknum;
  263.                 fixblock = false;
  264.                 connectGolos();
  265.               }
  266. function itemShow() {
  267.    
  268.     setTimeout(function(){ document.getElementById("item").classList.add('anim'); }, 500);
  269.         }
  270.    
  271.    
  272.    
  273.    
  274.    socket.onmessage = function(event) {
  275. // Указываем переменные перед функцией для того, что бы в будущем она стала глобальной и мы смогли иметь доступ к значению даже, если переменная внутри конкретной функции
  276.     var silaGolosa,powerMovement,
  277.         data = JSON.parse(event.data), // Полученные данные парсим в формат JSON
  278.         merkle = data.result.transaction_merkle_root;
  279.        
  280.         if (fixblock) { // Выполнять если fixblock = true (мы указали это за пределами onmessage)
  281.             startblock = data.result.last_irreversible_block_num; // Получаем номер блока и записываем в переменную
  282.             lastblock = startblock; // записываем в переменную номер начального блока
  283.             fixblock = false; //теперь переводим условие в false, и мы больше не сможем менять номер начального блока
  284.         }
  285.        
  286.        
  287.            if (data.id === 1  ) { // Если ответ на наш socket.send id 1
  288.                 movementTotal = data.result.total_vesting_shares.split(' ')[0];  /// Движения силы
  289.                 silaTotal = data.result.total_vesting_fund_steem.split(' ')[0];  /// Общее количество силы
  290.                
  291.                 socket.send(JSON.stringify({ // Отправляем запрос на получение аккаунта
  292.                     id: 2,
  293.                     method: 'get_accounts',
  294.                     params: [
  295.                         [account] // Переменная с ранее указаным ником
  296.                     ]
  297.                 }));
  298.                 socket.send(JSON.stringify({ // Отправляем запрос на получение текущего блока
  299.                     id: 3,
  300.                     method: 'get_block',
  301.                     'params': [lastblock]
  302.                 }));
  303.                 document.getElementById('blockexplr').innerHTML = ('Исследуемый блок '+lastblock);
  304.              }
  305.           if (data.id === 2) {
  306.                 powerMovement = data.result[0].vesting_shares.split(' ')[0];
  307.                 silaGolosa = silaTotal * (powerMovement / movementTotal);
  308.                 document.getElementById('sila').innerHTML = ('Ваша сила голоса <span>'+silaGolosa+'</span>');
  309.                
  310.                 }
  311.            
  312.             if (data.id === 3 && merkle !== "0000000000000000000000000000000000000000" ) { // если блок не пустой
  313.            
  314.            
  315.            
  316.             var fulldata = JSON.stringify(data.result);
  317.             stream.insertAdjacentHTML('afterbegin','<div id="item" class="myJson fulldata">'+fulldata+'</div>');
  318.             itemShow(); // анимация
  319.                  
  320.                
  321.    
  322.            
  323.             tx = data.result.transactions[0].operations[0][1]; // Транзакция > Операция  > пропускаем первое значение... > Массив (не json)
  324.             txJson = JSON.stringify(tx);    // Переводим в json и получаем: Транзакция > Операция  >  Массив в json формате
  325.            
  326.                 trigger = data.result.transactions[0].operations[0][0];// JSON.stringify(data.result.transactions[0].operations[0][0]); // Первое значение операции - поможет в идентификации события
  327.                 type = trigger;
  328.                 $witness = data.result.witness;
  329.                 $timestamp = data.result.timestamp;
  330.                 $voter = tx.voter;
  331.                 $power = tx.weight;
  332.                 $author = tx.author;
  333.                 $permlink = tx.permlink;
  334.                 $parent = tx.parent_author;
  335.                 $body = tx.body;
  336.                 $title = tx.title;
  337.                 $newbie = tx.new_account_name;
  338.                
  339.                 $mentionfrom = JSON.stringify(tx.from);
  340.                         $mention = JSON.stringify(tx.to);
  341.                         $mentmemo = JSON.stringify(tx.memo);
  342.                         $amount = JSON.stringify(tx.amount);
  343.                  //$memocut = mentmemo.slice(26); - обрезаем первые 26 символов в упоминании
  344.                
  345.                  
  346.                 document.getElementById('merkle').innerHTML = ('id <span>'+merkle+'</span> Время блока '+$timestamp);
  347.                  document.getElementById('witness').innerHTML = ('Владелец текущей ноды <a href="https://golos.io/@'+$witness+'">@'+$witness+'</a>');
  348.                
  349.                
  350.                
  351.                  
  352.                  if (typeof $voter !== 'undefined' && typeof $author !== 'undefined'){
  353.                  nicestream.insertAdjacentHTML('afterbegin','<p id="item" class="myJson '+type+'"> <a href="https://golos.io/@'+$voter+'/">'+$voter+'</a> голосует за <a href="https://golos.io/@'+$author+'/">'+$author+'</a> сила '+$power+'.</p>');
  354.                 itemShow();
  355.                  }
  356.                  
  357.                  if (trigger = 'comment' && typeof $author!== 'undefined'&& typeof $title!== 'undefined'){
  358.            
  359.                 nicestream.insertAdjacentHTML('afterbegin','<p id="item" class="myJson '+type+'"><a href="https://golos.io/@'+$author+'/">'+$author+'</a> пишет    <a href="https://golos.io/@'+$parent+'/"> '+$parent+' </a> </p>  <div class="textpost scrl"><h4>'+$title+'</h4> '+$body+'</div>');
  360.             itemShow();
  361.                  }
  362.                  
  363.                  if (trigger = 'custom_json'){
  364.                  $df = JSON.stringify(txJson.json);
  365.                    $dfollower = $df[1].follower;
  366.                     $dfollowin = $df[1].following;
  367.                  
  368.                  nicestream.insertAdjacentHTML('afterbegin','<p id="item" class="myJson '+type+'"> <span>'+$dfollower+'</span> подписывается на <span>'+$dfollowin+'</span></p>');
  369.             itemShow();
  370.                  }
  371.                  
  372.             /* Условия ниже оставим на потом.
  373.                  
  374.                  if (trigger = 'transfer'){
  375.                  //nicestream.insertAdjacentHTML('afterbegin','<p id="item" class="myJson '+trigger+'"> Трансфер '+$amount+' от <span>'+$mentionfrom+'</span> к <span>'+$mention+'</span> примечание: <em>'+$mentmemo+'</em></p>');
  376.                  }
  377.                  
  378.                  if (trigger = 'feed_publish'){
  379.                  
  380.                  }
  381.                  
  382.                  if (trigger = 'pow2'){
  383.                  
  384.                  }
  385.                  
  386.                  if (trigger = 'account_create'){
  387.                  
  388.                  }
  389.                  
  390.                  if (trigger = 'account_update'){
  391.                
  392.                  } */
  393.                        
  394.                
  395.             }  
  396.     };
  397. </script>
  398. </body>
  399. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!