SECS 2014 - pewne ułatwienie do wprowadzania danych ;]

[zegarek84]

Witam wszystkich.

Na poniższym obrazku który załączyłem także jako załącznik prezentuję funkcjonalność skryptozakładki (Wikipedia) mojego autorstwa względem harmonogramu/grafiku/stanu faktycznego. Została ona napisana ze względu na oczopląs przy większej ilości danych 

Pisałem do programistów już ponad 2 miesiące temu jednak nie było żadnego odzewu by wprowadzić tak prostą i wygodną funkcjonalność. Początkowo było to tylko podkreślenie linii (pierwsza część kodu), ale jako, iż czasem te tabelki rozjeżdżają się dodałem także zmianę tła na strażaku oraz na dacie...

kod nie zaciemniony pod obrazkiem pisany na kolanie (dostęp tylko z pracy przez blokady ip  ) - możecie go dowolnie modyfikować

Kod: [Zaznacz]

javascript: (function(d, s, t) {
  s = d.createElement("style");
  s.setAttribute("type", "text/css");
  t = d.createTextNode("#main-table tr:hover td {border-bottom-color: red;}");
  s.appendChild(t);
  d.body.appendChild(s);
})(document);
(function() {
  function loadScript(url, callback) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    if (script.readyState) {
      script.onreadystatechange = function() {
        if (script.readyState === "loaded" || script.readyState === "complete") {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else {
      script.onload = function() {
        callback();
      };
    }
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
  }
  loadScript("https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js", function() {
    console.log("jquery loaded");
    Harmonogram(jQuery.noConflict(true));
  });
  function Harmonogram($) {
    var SECS_$, SECS_e;
    SECS_$ = $("[id]").first();
    SECS_e = SECS_$[0];
    var $style = $('<style type="text/css" />');
    $style.appendTo("body");
    function clearStyl() {
      $style.text("");
    }
    function setStyl(obj) {
      $style.text(["#col_", obj.x, ", #row_", obj.y, "{background-color:red}"].join(""));
    }
    var main_table_DOM, main_table_$, header_table_$, content_table, content_table_$;
    function ini_harmonogram_dane() {
      $("[id=freeze-pane] table.v-table-table td", SECS_$).each(function(y_index) {
        $(this).attr("id", ["row", y_index].join("_"));
      });
      header_table_$ = $("table", main_table_DOM).first();
      header_table_$.find("td").each(function(index) {
        $(this).attr("id", ["col", index].join("_"));
      });
      var $trs = $("tr", content_table);
      $trs.each(function(y_index) {
        var $this = $(this);
        $this.find("td").each(function(x_index) {
          $(this).data("pos", {x:x_index, y:y_index});
        });
        $this = null;
      });
      $trs = null;
    }
    function ini_harmonogram_sledzenie() {
      if (this === content_table) {
        return;
      }
      content_table = this;
      console.log("content table", this);
      ini_harmonogram_dane();
      if (!!content_table_$) {
        content_table_$.off();
      }
      content_table_$ = $(content_table);
      content_table_$.on("mouseenter", "td", function() {
        var obj = $(this).data("pos");
        if (!obj) {
          console.warn("TODO !obj");
          ini_harmonogram_dane();
          return;
        }
        setStyl(obj);
        obj = null;
      }).on("mouseleave", clearStyl);
    }
    SECS_$.on("mouseenter mouseleave", "#main-table", function() {
      if (main_table_DOM === this) {
        return;
      }
      if (!!main_table_$) {
        main_table_$.off();
      }
      main_table_DOM = this;
      main_table_$ = $(this);
      console.log("#main-table", this);
      ini_harmonogram_sledzenie.call(main_table_$.find("table.v-table-table")[0]);
      main_table_$.on("mouseenter", "table.v-table-table", ini_harmonogram_sledzenie);
    });
  }
})();

ten sam kod ale zmniejszony przy pomocy https://closure-compiler.appspot.com/home

Kod: [Zaznacz]

javascript:(function(b,c,e){c=b.createElement("style");c.setAttribute("type","text/css");e=b.createTextNode("#main-table tr:hover td {border-bottom-color: red;}");c.appendChild(e);b.body.appendChild(c)})(document);
(function(){function b(c){function e(){h.text("")}function a(){c("[id=freeze-pane] table.v-table-table td",k).each(function(a){c(this).attr("id",["row",a].join("_"))});m=c("table",l).first();m.find("td").each(function(a){c(this).attr("id",["col",a].join("_"))});var a=c("tr",f);a.each(function(a){var b=c(this);b.find("td").each(function(b){c(this).data("pos",{x:b,y:a})});b=null});a=null}function b(){this!==f&&(f=this,console.log("content table",this),a(),g&&g.off(),g=c(f),g.on("mouseenter","td",function(){var b=
c(this).data("pos");b?h.text(["#col_",b.x,", #row_",b.y,"{background-color:red}"].join("")):(console.warn("TODO !obj"),a())}).on("mouseleave",e))}var k;k=c("[id]").first();var h=c('<style type="text/css" />');h.appendTo("body");var l,d,m,f,g;k.on("mouseenter mouseleave","#main-table",function(){l!==this&&(d&&d.off(),l=this,d=c(this),console.log("#main-table",this),b.call(d.find("table.v-table-table")[0]),d.on("mouseenter","table.v-table-table",b))})}(function(c,b){var a=document.createElement("script");
a.type="text/javascript";a.readyState?a.onreadystatechange=function(){if("loaded"===a.readyState||"complete"===a.readyState)a.onreadystatechange=null,b()}:a.onload=function(){b()};a.src=c;document.getElementsByTagName("head")[0].appendChild(a)})("https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js",function(){console.log("jquery loaded");b(jQuery.noConflict(!0))})})();
wystarczy tylko edytować dowolną zakładkę w przeglądarce, skasować adres strony i wkleić powyższy skrypt, po czym będąc na stronie SECS 2014 kliknąć taką zakładkę tylko raz.

Pozdrawiam

[załącznik usunięty przez administratora]

[adrianek998]

Super.  Wielkie dzięki za pracę    na pewno się przyda. 

[deejayslonio]

Do tej "firmy" pisane było już nie raz w sprawie wielu poprawek i usterek - większość nie została przez nich uwzględniona i program działa jak chce. Użytkownik nie jest ważny.
Powiedz jak się to ma do danych zapisanych w programie? To tylko nakładka czy oddzielna baza?

[zegarek84]

...
Powiedz jak się to ma do danych zapisanych w programie? To tylko nakładka czy oddzielna baza?

Dane w tym programie nie są zmieniane, możesz to traktować jako nakładkę, choć ten kod w sumie nie wiele robi.

Ich program tak naprawdę jest interaktywną stroną internetową napisaną w JAVA, a dokładniej korzystają z biblioteki VAADIN

o ile ktoś zna trochę HTML'a to pierwszy fragment kodu który odpowiada za tą czerwoną linię wstawia do strony dokładnie

Kod: [Zaznacz]

<style type="text/css">
#main-table tr:hover td {border-bottom-color: red;}
</style>
reszta kodu jest trochę bardziej skomplikowana więc skorzystałem z jQuery, dokładniej potrzebowałem metody .delegate() (nie chciało mi się jej pisać w natywnym JavaScript)

skrypt działa na chrome i mozilli, nie sprawdzałem IE - powinno też działać...

ogólnie w dalszej części kodu sprawdzam nad którym polem "TD" tabelki znajduje się myszka i zmieniam tło odpowiednich nagłówków w dużym skrócie...

jeśli kiedyś na służbie będę miał znowu więcej czasu to mogę dopisać jakieś kolejne drobne funkcjonalności (nie mam dostępu do strony z domu a nie zamierzam też tunelować połączenia z jednostką - nie ja administruję tutaj siecią ;P ), ale na pewno nie zamierzam bawić się w poprawianie tych rozjeżdżających się tabelek (widoczne po przesuwaniu strony) - to jest ich błąd projektowy...

[adrianek998]

Wzięli za to gruba kasę i długo będą jeszcze brać to nie ma co się za bardzo wychylac.  Mowa o licencji secs  dzięki raz jeszcze

[maniek1086]

przyznam, że nie mogę tego odpalić, mogę jakaś szerszą instrukcję..

[rastafarai]

Otwórz przeglądarkę, stwórz nową zakładkę i w jej ustawieniach w polu adresu wklej ten skrypt, zapisz.
Otwórz stronę z SECS, zaloguj się i wtedy tylko jeden raz kliknij w stworzoną wcześniej zakładkę, gotowe

[zegarek84]

Witam

Pamięta ktoś ten temat  
Logował ktoś się dziś do SECS   

Widzę, iż tą funkcjonalność wprowadzili już 

Pytanie z ciekawości, które kolory były bardziej wyraziste?? te powyżej  czy może tak jak to teraz zrobili biała linia i pomarańczowe komórki 

[lupus78]

Używam co służbę. Twoja wersja jest bardziej przejrzysta.

[deejayslonio]

Dziś się nie logowałem - jutro sprawdzę.
Pytanie czy zrobili te poprawki (o których pisałem do nich daawno temu) dla wszystkich czy tylko dla części użytkowników...

[deejayslonio]

Poprawka wprowadzona. Prosta sprawa, a jest wielkim ułatwieniem przy wprowadzaniu danych. SUPER sprawa!

[zegarek84]

.