Skip to content

Commit 99d96d0

Browse files
StigmatozStigmatoz
committed
Add preloader for loading data from storage
1 parent 183b4a9 commit 99d96d0

File tree

5 files changed

+132
-82
lines changed

5 files changed

+132
-82
lines changed

‎src/icons/preloader.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@
1515
</head>
1616

1717
<body>
18+
<div id="preloader" class="preloader">
19+
<div class="preloader__image"><div class="title">Loading...</div></div>
20+
</div>
1821
<svg class="height-0">
1922
<filter id="dropShadow">
2023
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
@@ -28,6 +31,7 @@
2831
<div id="extensionTitle">
2932
<p class="title">Web Activity Time Tracker</p>
3033
</div>
34+
<div id="preloader" class="preloader hide"></div>
3135
<div id="buttons" class="btn-block">
3236
<a class="active" id="btnToday">Today</a>
3337
<a id="btnAll">All-time</a>

‎src/scripts/ui.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -395,4 +395,13 @@ class UI {
395395

396396
return element;
397397
}
398+
399+
setPreloader(){
400+
document.getElementById('preloader').classList.add('preloader');
401+
}
402+
403+
removePreloader(){
404+
document.getElementById('preloader').classList.remove('preloader');
405+
document.getElementById('preloader').classList.add('hide');
406+
}
398407
}

‎src/scripts/webact.js‎

Lines changed: 87 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -10,43 +10,44 @@ var today = new Date().toLocaleDateString("en-US");
1010
var setting_range_days;
1111
var restrictionList;
1212
var stat = {
13-
set firstDay(value){
13+
set firstDay(value) {
1414
document.getElementById('statFirstDay').innerHTML = value;
1515
},
16-
set lastDay(value){
16+
set lastDay(value) {
1717
document.getElementById('statLastDay').innerHTML = value;
1818
},
19-
set activeDays(value){
19+
set activeDays(value) {
2020
document.getElementById('statActiveDays').innerHTML = value;
2121
},
22-
set totalDays(value){
22+
set totalDays(value) {
2323
document.getElementById('statTotalDays').innerHTML = value;
2424
},
25-
set inActiveDay(value){
25+
set inActiveDay(value) {
2626
document.getElementById('statInActiveDay').innerHTML = value;
2727
},
28-
set inActiveDayTime(value){
28+
set inActiveDayTime(value) {
2929
document.getElementById('statInActiveDayTime').innerHTML = '';
3030
ui.createElementsForTotalTime(value, TypeListEnum.ToDay, document.getElementById('statInActiveDayTime'));
3131
},
32-
set activeDay(value){
32+
set activeDay(value) {
3333
document.getElementById('statActiveDay').innerHTML = value;
3434
},
35-
set activeDayTime(value){
35+
set activeDayTime(value) {
3636
document.getElementById('statActiveDayTime').innerHTML = '';
3737
ui.createElementsForTotalTime(value, TypeListEnum.ToDay, document.getElementById('statActiveDayTime'));
3838
},
39-
set todayTime(value){
39+
set todayTime(value) {
4040
document.getElementById('statTodayTime').innerHTML = '';
4141
ui.createElementsForTotalTime(value, TypeListEnum.ToDay, document.getElementById('statTodayTime'));
4242
},
43-
set allDaysTime(value){
43+
set allDaysTime(value) {
4444
document.getElementById('statAllDaysTime').innerHTML = '';
4545
ui.createElementsForTotalTime(value, TypeListEnum.All, document.getElementById('statAllDaysTime'));
4646
},
4747
};
4848

4949
document.addEventListener('DOMContentLoaded', function () {
50+
ui.setPreloader();
5051
storage.getValue(SETTINGS_INTERVAL_RANGE, function (item) { setting_range_days = item; });
5152
document.getElementById('btnToday').addEventListener('click', function () {
5253
currentTypeOfList = TypeListEnum.ToDay;
@@ -111,87 +112,91 @@ function fillEmptyBlock() {
111112
}
112113

113114
function getTabsFromStorage(tabs) {
114-
tabsFromStorage = tabs;
115-
targetTabs = [];
116-
117-
ui.clearUI();
118-
if (tabs === null) {
119-
ui.fillEmptyBlock('chart');
120-
return;
121-
}
115+
setTimeout(function () {
116+
tabsFromStorage = tabs;
117+
targetTabs = [];
122118

123-
var counterOfSite;
124-
if (currentTypeOfList === TypeListEnum.All) {
125-
targetTabs = tabs.sort(function (a, b) {
126-
return b.summaryTime - a.summaryTime;
127-
});
128-
129-
if (targetTabs.length > 0) {
130-
totalTime = getTotalTime(targetTabs);
131-
stat.allDaysTime = totalTime;
132-
}
133-
else {
119+
ui.clearUI();
120+
if (tabs === null) {
134121
ui.fillEmptyBlock('chart');
135122
return;
136123
}
137124

138-
counterOfSite = tabs.length;
139-
}
140-
if (currentTypeOfList === TypeListEnum.ToDay) {
141-
targetTabs = tabs.filter(x => x.days.find(s => s.date === today));
142-
counterOfSite = targetTabs.length;
143-
if (targetTabs.length > 0) {
144-
targetTabs = targetTabs.sort(function (a, b) {
145-
return b.days.find(s => s.date === today).summary - a.days.find(s => s.date === today).summary;
125+
var counterOfSite;
126+
if (currentTypeOfList === TypeListEnum.All) {
127+
targetTabs = tabs.sort(function (a, b) {
128+
return b.summaryTime - a.summaryTime;
146129
});
147130

148-
totalTime = getTotalTime(targetTabs);
149-
stat.todayTime = totalTime;
150-
}
151-
else {
152-
ui.fillEmptyBlock('chart');
153-
return;
131+
if (targetTabs.length > 0) {
132+
totalTime = getTotalTime(targetTabs);
133+
stat.allDaysTime = totalTime;
134+
}
135+
else {
136+
ui.fillEmptyBlock('chart');
137+
return;
138+
}
139+
140+
counterOfSite = tabs.length;
154141
}
155-
}
142+
if (currentTypeOfList === TypeListEnum.ToDay) {
143+
targetTabs = tabs.filter(x => x.days.find(s => s.date === today));
144+
counterOfSite = targetTabs.length;
145+
if (targetTabs.length > 0) {
146+
targetTabs = targetTabs.sort(function (a, b) {
147+
return b.days.find(s => s.date === today).summary - a.days.find(s => s.date === today).summary;
148+
});
156149

157-
if (currentTypeOfList === TypeListEnum.All)
158-
ui.addTableHeader(currentTypeOfList, counterOfSite, getFirstDay());
159-
if (currentTypeOfList === TypeListEnum.ToDay)
160-
ui.addTableHeader(currentTypeOfList, counterOfSite);
150+
totalTime = getTotalTime(targetTabs);
151+
stat.todayTime = totalTime;
152+
}
153+
else {
154+
ui.fillEmptyBlock('chart');
155+
return;
156+
}
157+
}
161158

162-
var currentTab = getCurrentTab();
159+
if (currentTypeOfList === TypeListEnum.All)
160+
ui.addTableHeader(currentTypeOfList, counterOfSite, getFirstDay());
161+
if (currentTypeOfList === TypeListEnum.ToDay)
162+
ui.addTableHeader(currentTypeOfList, counterOfSite);
163+
164+
var currentTab = getCurrentTab();
165+
166+
var tabsForChart = [];
167+
var summaryCounter = 0;
168+
for (var i = 0; i < targetTabs.length; i++) {
169+
var summaryTime;
170+
var counter;
171+
if (currentTypeOfList === TypeListEnum.ToDay) {
172+
summaryTime = targetTabs[i].days.find(x => x.date == today).summary;
173+
if (targetTabs[i].days.find(x => x.date == today))
174+
counter = targetTabs[i].days.find(x => x.date == today).counter;
175+
}
176+
if (currentTypeOfList === TypeListEnum.All) {
177+
summaryTime = targetTabs[i].summaryTime;
178+
counter = targetTabs[i].counter;
179+
}
163180

164-
var tabsForChart = [];
165-
var summaryCounter = 0;
166-
for (var i = 0; i < targetTabs.length; i++) {
167-
var summaryTime;
168-
var counter;
169-
if (currentTypeOfList === TypeListEnum.ToDay) {
170-
summaryTime = targetTabs[i].days.find(x => x.date == today).summary;
171-
if (targetTabs[i].days.find(x => x.date == today))
172-
counter = targetTabs[i].days.find(x => x.date == today).counter;
173-
}
174-
if (currentTypeOfList === TypeListEnum.All) {
175-
summaryTime = targetTabs[i].summaryTime;
176-
counter = targetTabs[i].counter;
177-
}
181+
summaryCounter += counter;
178182

179-
summaryCounter += counter;
183+
if (currentTypeOfList === TypeListEnum.ToDay || (currentTypeOfList === TypeListEnum.All && i <= 30))
184+
ui.addLineToTableOfSite(targetTabs[i], currentTab, summaryTime, currentTypeOfList, counter);
185+
else
186+
ui.addExpander();
180187

181-
if (currentTypeOfList === TypeListEnum.ToDay || (currentTypeOfList === TypeListEnum.All && i <= 30))
182-
ui.addLineToTableOfSite(targetTabs[i], currentTab, summaryTime, currentTypeOfList, counter);
183-
else
184-
ui.addExpander();
188+
if (i <= 8)
189+
addTabForChart(tabsForChart, targetTabs[i].url, summaryTime, counter);
190+
else addTabOthersForChart(tabsForChart, summaryTime);
191+
}
185192

186-
if (i <= 8)
187-
addTabForChart(tabsForChart, targetTabs[i].url, summaryTime, counter);
188-
else addTabOthersForChart(tabsForChart, summaryTime);
189-
}
193+
ui.addHrAfterTableOfSite();
194+
ui.createTotalBlock(totalTime, currentTypeOfList, summaryCounter);
195+
ui.drawChart(tabsForChart);
196+
ui.setActiveTooltipe(currentTab);
190197

191-
ui.addHrAfterTableOfSite();
192-
ui.createTotalBlock(totalTime, currentTypeOfList, summaryCounter);
193-
ui.drawChart(tabsForChart);
194-
ui.setActiveTooltipe(currentTab);
198+
ui.removePreloader();
199+
}, 4000);
195200
}
196201

197202
function getTabsForTimeChart(timeIntervals) {
@@ -319,7 +324,7 @@ function getFirstDay() {
319324
return array.push(a.date);
320325
});
321326
});
322-
327+
323328
array = array.sort(function (a, b) {
324329
return new Date(a) - new Date(b);
325330
});
@@ -331,7 +336,7 @@ function getFirstDay() {
331336
};
332337
}
333338

334-
function setStatData(array){
339+
function setStatData(array) {
335340
var arrayAscByTime = [];
336341
tabsFromStorage.forEach(tab => {
337342
return tab.days.forEach(day => {
@@ -351,13 +356,13 @@ function setStatData(array){
351356
return a.total - b.total;
352357
});
353358
stat.inActiveDay = new Date(arrayAscByTime[0].date).toLocaleDateString('ru-RU');
354-
stat.activeDay = new Date(arrayAscByTime[arrayAscByTime.length-1].date).toLocaleDateString('ru-RU');;
359+
stat.activeDay = new Date(arrayAscByTime[arrayAscByTime.length - 1].date).toLocaleDateString('ru-RU');;
355360
stat.inActiveDayTime = arrayAscByTime[0].total;
356-
stat.activeDayTime = arrayAscByTime[arrayAscByTime.length-1].total;
361+
stat.activeDayTime = arrayAscByTime[arrayAscByTime.length - 1].total;
357362
stat.firstDay = new Date(array[0]).toLocaleDateString('ru-RU');;
358-
stat.lastDay = new Date(array[array.length-1]).toLocaleDateString('ru-RU');;
363+
stat.lastDay = new Date(array[array.length - 1]).toLocaleDateString('ru-RU');;
359364
stat.activeDays = array.length;
360-
stat.totalDays = daysBetween(array[0], array[array.length-1]);
365+
stat.totalDays = daysBetween(array[0], array[array.length - 1]);
361366
}
362367

363368
function getTabsByDays(tabs) {

‎src/style/webact.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -442,4 +442,35 @@ p.table-header{
442442
color: #9b9b9b;
443443
font-size: 13px;
444444
text-align: center;
445+
}
446+
447+
.preloader {
448+
position: fixed;
449+
left: 0;
450+
top: 0;
451+
right: 0;
452+
bottom: 0;
453+
overflow: hidden;
454+
background: #fff;
455+
z-index: 1001;
456+
}
457+
458+
.preloader__image {
459+
position: relative;
460+
top: 50%;
461+
left: 50%;
462+
width: 64px;
463+
height: 64px;
464+
margin-top: -32px;
465+
margin-left: -32px;
466+
background: url(/icons/preloader.svg) no-repeat 50% 50%;
467+
}
468+
469+
.loaded_hiding .preloader {
470+
transition: 0.3s opacity;
471+
opacity: 0;
472+
}
473+
474+
.loaded .preloader {
475+
display: none;
445476
}

0 commit comments

Comments
 (0)