Форум

kirsan94 · #1 (**permalink**) 29.12.2017, 03:50

Доброго времени суток!
Начал изучать JS(вот прям только-только начал, сегодня), с целью написать скрипт для легкого упрощения работы себе и коллегам (мониторинг).
Не прошу написать мне весь код(хотя против помощи любого размера я не буду уж точно), просто подсказку/наводку/хинт)
Цель изначально такая - есть некая система обработки входящих обращений/системных инцидентов HPSM(написана на JS по словам коллег), есть у нее интерфейс, и частью этого интерфейса является отображение обращений в определенном статусе (т.е. я вижу строки таблицы, на которые могу нажать и перейти к конкретному обращению). Так-же на этой-же странице есть кнопка, которая отдельно этот список обновляет, без обновления самой страницы. Задача - html страницу, которая будет выгружать код вкладки (допустим она всегда первая) браузера с этим всем HPSM, затем выделять из этого кода отдельный кусок, который всегда на своем месте лежит, и выводить на себя. Совсем уж мечта - что-бы этот скрипт раз в 5 минут "прожимал" кнопку обновления списка на той вкладке, а затем просматривать все тот-же кусок кода, и при изменениях алерт выводить.

Есть-ли вообще возможность реализовать все это на JS? Или нужно использовать что-то другое? Может подскажите направление/функции?
Буду очень благодарен за любую помощь) Очень хочется облегчить работу нашему мониторингу)

Aetae · #2 (**permalink**) 29.12.2017, 23:16

Всё возможно.
Прикрепи чтоль сохранённую ту самую страничку, посмотрим.

А так способа два: 1. userscript - для этого придётся ставить расширение для браузера, 2. букмарклет - закладка при клике на которую запускается код.

kirsan94 · #3 (**permalink**) 31.12.2017, 13:11

Aetae, странная тема, отображение в "просмотр кода" и "просмотр кода страницы"(который в новой вкладке открывается) несколько отличается.
Полностью я страницу не могу скинуть (у нас СБ очень злые, вонзят по самые гланды), но есть скрины нужной секции страницы.
На странице у меня отображаются обращения, подходящие по определенному шаблону.
Первый - когда этих "обращений" нет:

Второй - когда они есть:

По скринам видно, что при появлении в списке обращений, в класса "x-grid3-body" появляется вложенный класс (не знаю как на терминах это называется) с длиннющим названием, и кучей вложений (элементы таблицы разные, ссылки и т.д. что уже не важно. Важно что внутри "body" появляется класс, который является своеобразной строкой таблицы, по сути самим обращением в этом списке. Именно это место и интересно.
ID у класса меняется каждый раз при обновлении списка, так что от него отталкиваться не выйдет, нужно отталкиваться от наличия классов в классе "x-grid3-body".

Вот, кстати, код той самой кнопки "Обновить", которая обновляет список обращений:

P.S.: не работает
[spoiler] 1 [/spoiler]
как на этом форуме спойлеры ставить?

Aetae · #4 (**permalink**) 31.12.2017, 16:58

Это печально.
Приложение написано на ExtJS - овермайндном корпоративном бегемоте, "простенько" с ним нифига не сделаешь.

Вот накидал букмарклет который теоретически должен делать то что надо, но если там ещё и сложная структура вложенных фреймов, то без прямого доступа до той страницы уже ничего не поделаешь:

(function(){
  var w = window.open('', 'monitoring_window');
  w.document.open();
  w.document.write(`<!DOCTYPE html>
  <html>
  <head>
    <title>monitor</title>
    <style>
      #error{
        background:red;
        color:white;
      }
	  /* здесь придётся добавить стилей для нормального отображения результата */
    </style>
  </head>
  <body>
  <div id="error"></div>
  <div id="result"></div>
  <script>
    var buttonPressInterval = 5 * 60 * 1000; /* интервал повтора нажатия в мс */
    var contentUpdateInperval = 1000; /* интервал обновления данных */
    var errorElement = document.getElementById('error'); /* сюда выводим ошибки */
    var resultElement = document.getElementById('result');  /* сюда выводим результат */

    var buttonSelector = 'button[aria-label="Обновить"]'; /* селектор для кнопки */
    var contentSelector = '.x-grid3-body'; /* селектор для нужного */

    var lastButtonPress = 0;

    function simulateClick(window) {
      /*
        Имитация нажатия, поднятия и клика, 
        неизвестно на что именно прописано событие конкретно у вас,
        можно поэксперементировать и убрать лишнее.
      */
	  var button = window.document.querySelector(buttonSelector);
	  if(!button) return false;
	  
      var event = window.MouseEvent, options = {
        bubbles: true,
        cancelable: true,
        view: window
      };

      button.dispatchEvent(new event('mousedown', options));
      button.dispatchEvent(new event('mouseup', options));
      button.dispatchEvent(new event('click', options));
      return true;
    }

    function show(html, element){
      if(element.showHTML === html) return false;
      element.innerHTML = html;
    }

    (function update(){
      try{
        var element = opener.document.querySelector(contentSelector);
        if(element){
          show(element.innerHTML, resultElement);
        }  
      }catch(e){
        return show(
          'Потеряна связь с главной страницей, перезапустите букмарклет.', 
          errorElement
        );
      }
      
      if(new Date() - lastButtonPress >= buttonPressInterval){
        show(
          simulateClick(opener) ? '' : 'Не найдена кнопка обновления.', 
          errorElement
        );
        lastButtonPress = new Date().getTime();
      }
      
      setTimeout(update, contentUpdateInperval)
    }());
  </script>
  </body>
  <html>`);
  w.document.close();
}())

На всякий случай, букмарклет работает так: создаёте на панели закладку, в поле адрес пишете "javascript:" после чего вставляете вышеприведённый код. Далее заходите на нужную страницу и кликаете по созданной закладке.

kirsan94 · #5 (**permalink**) 31.12.2017, 17:50

Спасибо за помощь)
Сделал по вашей инструкции, но страница почему-то пустая, поле result пустое, при этом обращения есть.

Если активировать вкладку на другую страницу, то ошибка "Не найдена кнопка обновления." выдается, соответственно кнопку он как минимум видит.
Судя по всему он не активирует кнопку обновления, потестил с не обновленным списком уже изменившихся обращений - не реагирует(

Aetae · #6 (**permalink**) 31.12.2017, 18:11

document.querySelectorAll(".x-grid3-body").length что выдаёт?
Если больше 1, то значит класс не уникален, сделай в инструментах разработчика на нужном элементе Копировать -> Селектор и подставь полученное значение в contentSelector.

kirsan94 · #7 (**permalink**) 31.12.2017, 18:15

честно говоря не знаю где посмотреть(
в коде букмарклета такой строки нет, полагаю это какой-то параметр у страницы?

Aetae · #8 (**permalink**) 31.12.2017, 18:16

В консоли(соседняя вкладка в инструментах разраотчика).
Кстати если 0, то значит в деле замешаны фреймы и всё печально.

kirsan94 · #9 (**permalink**) 31.12.2017, 18:22

в консоли вот такая картина

Aetae · #10 (**permalink**) 31.12.2017, 18:23

Это всё фигня, открой консоль на главной странице, введи туда document.querySelectorAll(".x-grid3-body").length и нажми enter.

Форум

Справочник

Discord чат

Курсы javascript