@@ -40,16 +40,10 @@ class UI {
4040 createTotalBlock ( totalTime ) {
4141 var totalElement = document . getElementById ( 'total' ) ;
4242
43- var spanTitle = document . createElement ( 'span' ) ;
44- spanTitle . classList . add ( 'span-total' ) ;
45- spanTitle . innerHTML = 'Total' ;
43+ var spanTitle = this . createElement ( 'span' , [ 'span-total' ] , 'Total' ) ;
44+ var spanTime = this . createElement ( 'span' , [ 'span-time' ] , convertSummaryTimeToString ( totalTime ) ) ;
4645
47- var spanTime = document . createElement ( 'span' ) ;
48- spanTime . classList . add ( 'span-time' ) ;
49- spanTime . innerHTML = convertSummaryTimeToString ( totalTime ) ;
50-
51- totalElement . appendChild ( spanTitle ) ;
52- totalElement . appendChild ( spanTime ) ;
46+ totalElement = this . appendChild ( totalElement , [ spanTitle , spanTime ] ) ;
5347 }
5448
5549 fillEmptyBlock ( elementName ) {
@@ -158,53 +152,32 @@ class UI {
158152 divForImg . classList . add ( 'block-img' ) ;
159153 divForImg . appendChild ( img ) ;
160154
161- var spanUrl = document . createElement ( 'span' ) ;
162- spanUrl . classList . add ( 'span-url' ) ;
163- spanUrl . innerText = tab . url ;
155+ var spanUrl = this . createElement ( 'span' , [ 'span-url' ] , tab . url ) ;
164156
165157 if ( typeOfList !== undefined && typeOfList === TypeListEnum . ToDay ) {
166158 if ( restrictionList !== undefined && restrictionList . length > 0 ) {
167159 var item = restrictionList . find ( x => isDomainEquals ( x . domain , tab . url ) ) ;
168160 if ( item !== undefined ) {
169- var divLimit = document . createElement ( 'div' ) ;
170- divLimit . classList . add ( 'tooltip' , 'inline-block' ) ;
171- var limitIcon = document . createElement ( 'img' ) ;
161+ var divLimit = this . createElement ( 'div' , [ 'tooltip' , 'inline-block' ] ) ;
162+ var limitIcon = this . createElement ( 'img' , [ 'margin-left-5' , 'tooltip' ] ) ;
172163 limitIcon . height = 15 ;
173- limitIcon . classList . add ( 'margin-left-5' , 'tooltip' ) ;
174164 limitIcon . src = '/icons/limit.png' ;
175- var tooltip = document . createElement ( 'span' ) ;
176- tooltip . classList . add ( 'tooltiptext' ) ;
177- tooltip . innerText = "Dayly limit is " + convertShortSummaryTimeToLongString ( item . time ) ;
178- divLimit . appendChild ( limitIcon ) ;
179- divLimit . appendChild ( tooltip ) ;
165+ var tooltip = this . createElement ( 'span' , [ 'tooltiptext' ] , "Dayly limit is " + convertShortSummaryTimeToLongString ( item . time ) ) ;
166+ divLimit = this . appendChild ( divLimit , [ limitIcon , tooltip ] ) ;
180167 spanUrl . appendChild ( divLimit ) ;
181168 }
182169 }
183170 }
184171
185- var spanVisits = document . createElement ( 'span' ) ;
186- spanVisits . classList . add ( 'span-visits' , 'tooltip' , 'visits' ) ;
187- spanVisits . innerText = counter !== undefined ? counter : 0 ;
188-
189- var visitsTooltip = document . createElement ( 'span' ) ;
190- visitsTooltip . classList . add ( 'tooltiptext' ) ;
191- visitsTooltip . innerText = 'Count of visits' ;
172+ var spanVisits = this . createElement ( 'span' , [ 'span-visits' , 'tooltip' , 'visits' ] , counter !== undefined ? counter : 0 ) ;
173+ var visitsTooltip = this . createElement ( 'span' , [ 'tooltiptext' ] , 'Count of visits' ) ;
192174
193175 spanVisits . appendChild ( visitsTooltip ) ;
194176
195- var spanPercentage = document . createElement ( 'span' ) ;
196- spanPercentage . classList . add ( 'span-percentage' ) ;
197- spanPercentage . innerText = getPercentage ( summaryTime ) ;
177+ var spanPercentage = this . createElement ( 'span' , [ 'span-percentage' ] , getPercentage ( summaryTime ) ) ;
178+ var spanTime = this . createElement ( 'span' , [ 'span-time' ] , convertSummaryTimeToString ( summaryTime ) ) ;
198179
199- var spanTime = document . createElement ( 'span' ) ;
200- spanTime . classList . add ( 'span-time' ) ;
201- spanTime . innerText = convertSummaryTimeToString ( summaryTime ) ;
202-
203- div . appendChild ( divForImg ) ;
204- div . appendChild ( spanUrl ) ;
205- div . appendChild ( spanVisits ) ;
206- div . appendChild ( spanPercentage ) ;
207- div . appendChild ( spanTime ) ;
180+ div = this . appendChild ( div , [ divForImg , spanUrl , spanVisits , spanPercentage , spanTime ] ) ;
208181 if ( blockName !== undefined )
209182 document . getElementById ( blockName ) . appendChild ( div ) ;
210183 else
@@ -213,10 +186,8 @@ class UI {
213186
214187 addExpander ( ) {
215188 if ( document . getElementById ( 'expander' ) === null ) {
216- var div = document . createElement ( 'div' ) ;
189+ var div = this . createElement ( 'div' , [ 'expander' ] , 'Show all ') ;
217190 div . id = 'expander' ;
218- div . innerText = 'Show all' ;
219- div . classList . add ( 'expander' ) ;
220191 div . addEventListener ( 'click' , function ( ) {
221192 ui . expand ( ) ;
222193 } ) ;
@@ -234,10 +205,8 @@ class UI {
234205 var barChart = document . createElement ( 'div' ) ;
235206 barChart . id = 'barChart' ;
236207
237- var from = document . createElement ( 'span' ) ;
238- from . innerHTML = 'From' ;
239- var to = document . createElement ( 'span' ) ;
240- to . innerHTML = 'To' ;
208+ var from = this . createElement ( 'span' , null , 'From' ) ;
209+ var to = this . createElement ( 'span' , null , 'To' ) ;
241210
242211 var dateNow = new Date ( ) ;
243212 var calendarFirst = document . createElement ( 'input' ) ;
@@ -255,11 +224,7 @@ class UI {
255224 var tableForDaysBlock = document . createElement ( 'div' ) ;
256225 tableForDaysBlock . id = 'tableForDaysBlock' ;
257226
258- div . appendChild ( barChart ) ;
259- div . appendChild ( from ) ;
260- div . appendChild ( calendarFirst ) ;
261- div . appendChild ( to ) ;
262- div . appendChild ( calendarTwo ) ;
227+ div = this . appendChild ( div , [ barChart , from , calendarFirst , to , calendarTwo ] ) ;
263228
264229 div . append ( tableForDaysBlock ) ;
265230
@@ -287,47 +252,29 @@ class UI {
287252 var daysForBarChart = this . fillDaysForBarChart ( days , allDays ) ;
288253 this . drawBarChart ( daysForBarChart ) ;
289254
290- var header = document . createElement ( 'div' ) ;
291- header . classList . add ( 'table-header' ) ;
292-
293- var headerTitleDate = document . createElement ( 'span' ) ;
294- headerTitleDate . innerHTML = 'Day' ;
295- headerTitleDate . classList . add ( 'header-title-day' ) ;
296- var headerTitleTime = document . createElement ( 'span' ) ;
297- headerTitleTime . innerHTML = 'Summary time' ;
298- headerTitleTime . classList . add ( 'header-title-time' ) ;
255+ var header = this . createElement ( 'div' , [ 'table-header' ] ) ;
299256
300- header . appendChild ( headerTitleDate ) ;
301- header . appendChild ( headerTitleTime ) ;
257+ var headerTitleDate = this . createElement ( 'span' , [ 'header-title-day' ] , 'Day' ) ;
258+ var headerTitleTime = this . createElement ( 'span' , [ 'header-title-time' ] , 'Summary time' ) ;
302259
260+ header = this . appendChild ( header , [ headerTitleDate , headerTitleTime ] ) ;
303261 parent . appendChild ( header ) ;
304262
305263 for ( var i = 0 ; i < days . length ; i ++ ) {
306- var check = document . createElement ( 'input' ) ;
264+ var check = this . createElement ( 'input' , [ 'toggle' ] ) ;
307265 check . type = 'checkbox' ;
308266 check . id = days [ i ] . date ;
309- check . classList . add ( 'toggle' ) ;
310267
311- var label = document . createElement ( 'label' ) ;
268+ var label = this . createElement ( 'label' , [ 'day-block' , 'lbl-toggle' ] ) ;
312269 label . setAttribute ( 'for' , days [ i ] . date ) ;
313- label . classList . add ( 'day-block' ) ;
314- label . classList . add ( 'lbl-toggle' ) ;
315- var span = document . createElement ( 'span' ) ;
316- span . classList . add ( 'day' ) ;
317- span . innerHTML = days [ i ] . date ;
318- var spanTime = document . createElement ( 'span' ) ;
319- spanTime . classList . add ( 'day-time' ) ;
320- spanTime . innerHTML = convertSummaryTimeToString ( days [ i ] . total ) ;
321-
322- label . appendChild ( span ) ;
323- label . appendChild ( spanTime ) ;
324-
325- parent . appendChild ( check ) ;
326- parent . appendChild ( label ) ;
327-
328- var div = document . createElement ( 'div' ) ;
270+ var span = this . createElement ( 'span' , [ 'day' ] , days [ i ] . date ) ;
271+ var spanTime = this . createElement ( 'span' , [ 'day-time' ] , convertSummaryTimeToString ( days [ i ] . total ) ) ;
272+
273+ label = this . appendChild ( label , [ span , spanTime ] ) ;
274+ parent = this . appendChild ( parent , [ check , label ] ) ;
275+
276+ var div = this . createElement ( 'div' , [ 'collapsible-content' ] , convertSummaryTimeToString ( days [ i ] . total ) ) ;
329277 div . id = days [ i ] . date + '_block' ;
330- div . classList . add ( 'collapsible-content' ) ;
331278 parent . appendChild ( div ) ;
332279
333280 document . getElementById ( days [ i ] . date ) . addEventListener ( 'click' , function ( ) {
@@ -360,4 +307,23 @@ class UI {
360307
361308 return resultList ;
362309 }
310+
311+ createElement ( type , css , innerText ) {
312+ var element = document . createElement ( type ) ;
313+ if ( css !== undefined && css !== null ) {
314+ for ( let i = 0 ; i <= css . length ; i ++ )
315+ element . classList . add ( css [ i ] ) ;
316+ }
317+ if ( innerText !== undefined )
318+ element . innerHTML = innerText ;
319+
320+ return element ;
321+ }
322+
323+ appendChild ( element , children ) {
324+ for ( let i = 0 ; i < children . length ; i ++ )
325+ element . appendChild ( children [ i ] ) ;
326+
327+ return element ;
328+ }
363329}
0 commit comments