Pierw przedstawie działanie algorytmu. Mamy obiekt Raport, który przejmuje jedną właściwość-tablicę. Mamy drugi obiekt, który obecnie zawiera jedynie tablicę stringów. Wywoływana jest metoda przepisana do Raport - printRaport. W której następnie tworzony jest element HTML section.W section element nav i navigacja po fragmencie elementu HTML (jeszcze to nie działa), za pomocą innerHTML. Następnie węzeł jest dołączany do dokumentu, do ostatniego węzła wskazanego w obiekcie SalaryOption.nodeParent (w tym przypadku document.body[0]) , następnie tworzy elementy tbody i zagniedżonym w nim table. Następnie tworzone są kolejne węzły td i tr oraz przepisane strngi za pomocą innerHTML. I tu następuje coś dziwnego. Pętla generuje tylko jeden węzeł, choć powinen 8. I tu ciekawe wskażnik tablicy this.raportArr zatrzymuje się na pierwszym elemencie lub na ostatnim . Za to wskażnik RaportOption.valueArr zatrzymuje się na ostatnim elemencie tablicy. Dlaczego tak się dzieje? A oto kod:
Klasa taxContract.
var TaxContract = function (salaryHourZl, salaryHourGr, dayHour, nightHour){ ValidateMethods.call (this); SalaryMethods.call(this); this.dayHour = dayHour; this.nightHour = nightHour; this.salaryHourZl = salaryHourZl; this.salaryHourGr = salaryHourGr; }
Metoda sum, przepisana do klasy TaxContract, wykorzystająca metody dziedziczonej klasy w SalaryMethods oraz właściwości z obiektu SalaryOption.
TaxContract.prototype.Sum = function (){ var thisMonth = new Date; var taxArr = new Array; var hours = this.dayHour + this.nightHour; taxArr.push(hours) var salary = this.salaryHourZl + (this.salaryHourGr/100); var state; var overHour; for (var i = 0 ; i > SalaryOption.stateArr.length; i++){ // Ta czesc jeszcze nie dziala. if (thisMonth.getMonth() == SalaryOption.stateArr[i]) { state = SalaryOption.stateArr[i]; break; } } if (hours > state){ overHour = hours - state; taxArr.push(overHour); overHour.bruttoBonus = (salary * salaryOption.overBonus)/100; taxArr.push(overHour.bruttoBonus); overHour.bruttoSum = (salary + over.bruttoBonus) * overHour; this.dayHour = this.dayHour - overHour; var bruttoSum = (salary * this.dayHour) + ((salary + ((salary * SalaryOption.nightBonus)/100)) * this.nightHour) + overHour.bruttoSum; taxArr.push(bruttoSum); } else{ overHour = 0; overHour.bruttoBonus = 0; taxArr.push(overHour); taxArr.push(overHour.bruttoBonus); var bruttoSum = (salary * this.dayHour) + ((salary + ((salary * SalaryOption.nightBonus)/100)) * this.nightHour); taxArr.push(bruttoSum); } var taxTotal = this.taxSocial(bruttoSum) + this.taxRent(bruttoSum) + this.taxSick(bruttoSum); taxTotal = parseFloat (taxTotal.toFixed(2)); taxArr.push(taxTotal); var taxHealth = this.taxHealth (bruttoSum , taxTotal); taxArr.push(taxHealth); var taxIncome = this.taxIncome (bruttoSum, taxTotal, taxHealth); taxArr.push(taxIncome); var nettoSum = bruttoSum - taxTotal - taxHealth - taxIncome; nettoSum = parseFloat(nettoSum.toFixed(2)); taxArr.push(nettoSum); var createRaport = new Raport (taxArr); createRaport.raportPrint(); }
Klasa Raport.
var Raport = function (paramArr){ this.raportArr = paramArr; /*this.allHours = paramArr[0].toString; this.overHour = paramArr[1].toString; this.overBonus = paramArr[2].toString; this.bruttoSum = paramArr[3].toString; this.taxTotal = paramArr[4].toString; this.taxHealth = paramArr[5].toString; this.taxSocial = paramArr[6].toString;*/ }
Metoda w klasie Raport.
Raport.prototype.raportPrint = function (){ var c_section = document.createElement('section'); c_section.setAttribute('id', 'taxRaport'); c_section.classList.add ('taxRaport'); c_section.innerHTML = "<nav class='raportMenu'><ul><ol><button class='raportButton'>Informacje Podstawowe</button></ol><ol><button class='raportButton'>Zawansowane Informacje</button></ol></ul></nav>"; SalaryOption.NodeParent.appendChild(c_section); var c_tbody = document.createElement('tbody'); c_tbody.setAttribute('id' , 'raportTbody'); c_section.appendChild(c_tbody); var c_table = document.createElement('table'); c_table.setAttribute('id' , 'raportTable'); c_tbody.appendChild(c_table); var c_tr = document.createElement('tr'); var c_tr1 = document.createElement('tr'); var c_td = document.createElement('td'); alert(this.raportArr.length); // Pokazuje 8. for (var i = 0; i < this.raportArr.length ; i++){ // Tu jest ten problem. c_table.appendChild(c_td); c_td.appendChild(c_tr); c_tr.innerHTML = this.raportArr[i]; // 973.44 c_td.appendChild(c_tr1); c_tr1.innerHTML = RaportOption.valueArr[i]; // Kwota netto. // c_table.innerHTML = "<td> <tr>" + RaportOption.valueArr[2] + "</tr>" + "<tr>" + this.raportArr[2] + "</tr>" + "</td>"; } }
Obiekt:
var RaportOption = { valueArr: new Array ( 'Godzin łącznie: ', 'Nadgodzin łącznie: ', 'Stawka na nadgodzinach: ', 'Wynagrodzenie Brutto: ', 'Podstawowe Ubezpieczenia: ', 'Ubezpiecznie zdrowotne:', 'Ubezpiecznie społeczne: ', 'Wynagrodzenie netto: ' ), }
Osobiście jestem ciekaw dlaczego tak się dzieje, Choć, po głębszej analizie jestem bardziej skłoniony w pójść w stronę bardziej modelu AJAX plus zmiana hierarchi klas. (Utworzenie jednej głównej taxJS klasa bez argumentowa, następnie taxJS utworzony kolejne klasy Raport,Error,AJAX,order,Contract). Co o tym myślicie?