root/java/sql-vyuka/web/hlavni.js @ 49:083966fa9d9d

Revision 49:083966fa9d9d, 5.7 KB (checked in by František Kučera <franta-hg@…>, 15 years ago)

Model databáze: javascript, css a obrázky pro zobrazování stromové struktury.

RevLine 
[3]1/** ID html prvků */
2const vstupniPole = 'vstupniPole';
3const vystupniPole = 'vystupniPole';
4const napovedniPole = 'napovedniPole';
[20]5const stavovePole = 'stavovePole';
[3]6
7
[2]8/**
9 * Aby to fungovalo i v MSIE 6.
10 * @return AJAXový objekt.
11 */
12function getXmlHttpRequestObject() {
13    if (window.XMLHttpRequest) {
14        return new XMLHttpRequest();
15    } else if(window.ActiveXObject) {
16        return new ActiveXObject("Microsoft.XMLHTTP");
17    } else {
[48]18        alert(document.getElementById('lokalizace').nepodporovany.value);
[2]19        return null;
20    }
21}
22
[22]23
[2]24/** Náš AJAXový objekt. */
25var ajax = getXmlHttpRequestObject();
26
[22]27
[2]28/**
[3]29 * Vrací vstup od uživatele.
30 * @return SQL příkaz zadaný uživatelem.
31 **/
32function getSQL() {
[48]33    return document.getElementById('aplikace').vstupniPole.value;
[3]34}
35
[22]36
[3]37/**
[2]38 * Zobrazí text na požadovaném místě.
[22]39 * @param text text k zobrazení. V případě formulářů prostý text, v ostatních případech HTML text.
40 * @param kde id prvku, do kterého se má text vypsat.
[2]41 **/
42function zobraz(text, kde) {
[19]43    if (kde == vstupniPole) {
[48]44        document.getElementById('aplikace').vstupniPole.value = text;
[20]45    } else if (kde == stavovePole)  {
[48]46        document.getElementById('aplikace').stavovePole.value = text;
[19]47    } else {
48        document.getElementById(kde).innerHTML = text + '<p>&nbsp;<!-- Šťastné hackování ;-) --></p>';
49    }
[2]50}
51
52
53/** Jednoduchá AJAXová funkce, načte obsah souboru a zobrazí ho ve výstupním okně. */
[5]54function ajaxVykonatSQL() {
[2]55    if (ajax.readyState == 4 || ajax.readyState == 0) {
[48]56        zobraz(document.getElementById('lokalizace').probihaSQL.value, stavovePole);
[24]57        ajax.open("POST", 'ajax.jspx?akce=vykonat&sql=' + encodeURIComponent(getSQL()), true);
[19]58        ajax.onreadystatechange = function() {
59            if (ajax.readyState == 4) {
[22]60                zobraz(ajax.responseText, vystupniPole);
61                zobraz('', stavovePole);
[19]62            }
63        };
[2]64        ajax.send(null);
65    }
[39]66    ulozURL();
[2]67}
[5]68
69
70/** Jednoduchá AJAXová funkce, načte obsah souboru a zobrazí ho ve výstupním okně. */
71function ajaxZobrazitHistorii() {
72    if (ajax.readyState == 4 || ajax.readyState == 0) {
[48]73        zobraz(document.getElementById('lokalizace').probihaHistorie.value, stavovePole);
[24]74        ajax.open("POST", 'ajax.jspx?akce=historie', true);
[19]75        ajax.onreadystatechange = function() {
76            if (ajax.readyState == 4) {
[22]77                zobraz(ajax.responseText, vystupniPole);
78                zobraz('', stavovePole);
[19]79            }
80        };
[5]81        ajax.send(null);
82    }
83}
[38]84
85var pruvodceAktualniId = 0;
[39]86var urlOdkaz = new Array();
87urlOdkaz['pruvodce'] = null;
[38]88
89function ajaxPruvodcePredchozi() {
90    ajaxPruvodceNaviguj('predchozi', pruvodceAktualniId, null);
91}
92
93function ajaxPruvodceZpet() {
[42]94    /** TODO: historie navigace */
95    alert('Tato funkce se teprve připravuje.');
[38]96}
97
98function ajaxPruvodceVpred() {
[42]99    /** TODO: historie navigace */
100    alert('Tato funkce se teprve připravuje.');
[38]101}
102
103function ajaxPruvodceNasledujici() {
104    ajaxPruvodceNaviguj('nasledujici', pruvodceAktualniId, null);
105}
106
107function ajaxPruvodceKod(kod) {
108    ajaxPruvodceNaviguj('podleKodu', 0, kod);
109}
110
111function ajaxPruvodceId(id) {
112    ajaxPruvodceNaviguj('podleId', id, null);
113
114}
115
[42]116function ajaxPruvodceNaviguj(akcePruvodce, id, kod) {   
[38]117    if (ajax.readyState == 4 || ajax.readyState == 0) {
118        ajax.open("POST", 'ajax.jspx?akce=napoveda&pruvodce=' + encodeURIComponent(akcePruvodce) + '&idPruvodce=' + encodeURIComponent(id) + '&kodPruvodce=' + encodeURIComponent(kod), true);
119        ajax.onreadystatechange = function() {
120            if (ajax.readyState == 4) {
121                zobraz(ajax.responseText, napovedniPole);
[39]122                /** Uložíme si do paměti ID aktuální stránky */
[38]123                if (document.pruvodceData) {
124                    pruvodceAktualniId = document.pruvodceData.id.value
125                } else {
126                    pruvodceAktualniId = 0;
127                }
[39]128                /** Změníme URL v prohlížeči */
[40]129                urlOdkaz['pruvodce']  = 'pruvodce=' + encodeURIComponent(pruvodceAktualniId);
[39]130                ulozURL();
[49]131                sestavStromy();
132                }
[38]133        };
134        ajax.send(null);
135    }
136}
[39]137
138/**
[40]139 * Parametry si ukládáme za # do URL (window.location.hash)
140 * Můžeme měnit URL, aniž by prohlížeč obnovoval stránku.
141 * Uživatel si může URL zkopírovat a obnovit si příště stav aplikace.
[39]142 * @param parametr jméno parametru, který hledáme
143 * @return hodnota parametr
144 */
145function getParametr(parametr) {
146    parametr = parametr.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
147    //var regexS = "[\\?&]"+parametr+"=([^&#]*)";
[45]148    var regexS = "[\\#&]"+parametr+"=([^&]*)";
[39]149    var regex = new RegExp( regexS );
150    var results = regex.exec(window.location.hash);
151    if( results == null )
152        return "";
153    else
154        return decodeURIComponent(results[1]);
155}
156
157/**
158 * Uloží parametry (jako je SQL příkaz a stránka průvodce) do URL (za #),
159 * aby si uživatel mohl URL zkopírovat a příště si obnovit stav aplikace.
160 */
161function ulozURL() {
162    if (urlOdkaz['pruvodce']) {
163        window.location.hash = urlOdkaz['pruvodce'] + '&sql=' + encodeURIComponent(getSQL());
164    } else {
165        window.location.hash = 'sql=' + encodeURIComponent(getSQL());
166    }
167}
168/**
169 * Načte uložený stav aplikace z URL (SQL příkaz, průvodce).
170 */
[42]171function nactiURL() {
[40]172    /** Načteme uživatelův SQL příkaz z URL do vstupního pole */
[42]173    if (getParametr('sql')) {
[39]174        zobraz(getParametr('sql'), vstupniPole);
175    }
[40]176   
177    /** Načteme pozici v nápovědě */
178    if (getParametr('pruvodce')) {
179        ajaxPruvodceId(getParametr('pruvodce'));
180    } else {
181        ajaxPruvodceKod('vitejte');
182    }
[39]183}
184
185window.onload = function() {
[42]186    nactiURL();
187}
Note: See TracBrowser for help on using the browser.