Skip to content

Commit bfb679e

Browse files
StigmatozStigmatoz
committed
fix view page, if list of site is null + small change css
1 parent e52a5ce commit bfb679e

File tree

5 files changed

+122
-47
lines changed

5 files changed

+122
-47
lines changed

‎index.html‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,8 @@
2323
<input type="button" value="By days" id="btnByDays"/>
2424
</div>
2525
<div id="chart" class="margin-top-7"></div>
26-
<hr>
27-
<div class="list-of-site" id="resultTable"></div>
28-
<hr>
29-
<div class="inline-flex" id="total">
30-
<span class="span-total">Total</span>
31-
<span class="span-time" id="totalTime"></span>
32-
</div>
26+
<div id="resultTable" class="list-of-site"></div>
27+
<div id="total" class="inline-flex"></div>
3328
</body>
3429

3530
</html>

‎scripts/common.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,12 @@ var SETTINGS_INTERVAL_CHECK = 1000;
44
var SETTINGS_INTERVAL_SAVE_STORAGE = 3000;
55
var SETTINGS_INTERVAL_CHECK_STORAGE = 3000;
66

7+
var TypeListEnum = {
8+
ToDay: 1,
9+
All: 2,
10+
ByDays: 3,
11+
};
12+
713
function isEmpty(obj) {
814
for (var prop in obj) {
915
if (obj.hasOwnProperty(prop))
@@ -47,7 +53,7 @@ function convertSummaryTimeToString(summaryTime) {
4753
else return hours + 'h ' + mins + 'm ' + seconds + 's';
4854
}
4955

50-
function zeroAppend(time){
56+
function zeroAppend(time) {
5157
if (time < 10)
5258
return '0' + time;
5359
else return time;

‎scripts/storage.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
'use strict';
22

33
class LocalStorage {
4-
load(name, callback, options){
4+
load(name, callback){
55
chrome.storage.local.get(name, function (item){
66
if (item[name] !== undefined){
77
var result = JSON.parse(item[name]);
88
if (result !== undefined)
9-
callback(result, options);
9+
callback(result);
1010
}
1111
});
1212
}

‎scripts/webact.js‎

Lines changed: 103 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -3,63 +3,97 @@
33
var storage = new LocalStorage();
44
var totalTime;
55
var tabsFromStorage;
6+
var donut;
7+
var targetTabs;
8+
var currentTypeOfList;
9+
var today = new Date().toLocaleDateString();
610

711
document.addEventListener('DOMContentLoaded', function () {
812
document.getElementById('btnToday').addEventListener('click', function () {
9-
document.getElementById('btnToday').classList.add('active');
10-
document.getElementById('btnAll').classList.remove('active');
11-
document.getElementById('btnByDays').classList.remove('active');
13+
currentTypeOfList = TypeListEnum.ToDay;
14+
setUIForToday();
1215
getDataFromStorageToday();
1316
});
1417
document.getElementById('btnAll').addEventListener('click', function () {
15-
document.getElementById('btnAll').classList.add('active');
16-
document.getElementById('btnToday').classList.remove('active');
17-
document.getElementById('btnByDays').classList.remove('active');
18+
currentTypeOfList = TypeListEnum.All;
19+
setUIForAll();
1820
getDataFromStorageAll();
1921
});
2022
document.getElementById('btnByDays').addEventListener('click', function () {
21-
document.getElementById('btnByDays').classList.add('active');
22-
document.getElementById('btnAll').classList.remove('active');
23-
document.getElementById('btnToday').classList.remove('active');
24-
25-
document.getElementById('resultTable').innerHTML = null;
26-
document.getElementById('chart').innerHTML = null;
23+
currentTypeOfList = TypeListEnum.ByDays;
24+
setUIForByDays();
2725
});
2826
});
2927

30-
getDataFromStorageToday();
28+
firstInitPage();
29+
30+
function firstInitPage() {
31+
currentTypeOfList = TypeListEnum.ToDay;
32+
getDataFromStorageToday();
33+
}
3134

3235
function getDataFromStorageToday() {
3336
storage.load(STORAGE_TABS, getTabsFromStorage);
3437
}
3538

3639
function getDataFromStorageAll() {
37-
storage.load(STORAGE_TABS, getTabsFromStorage, true);
40+
storage.load(STORAGE_TABS, getTabsFromStorage);
3841
}
3942

40-
function getTabsFromStorage(tabs, options) {
43+
function setUIForToday() {
44+
document.getElementById('btnToday').classList.add('active');
45+
document.getElementById('btnAll').classList.remove('active');
46+
document.getElementById('btnByDays').classList.remove('active');
47+
}
48+
49+
function setUIForAll() {
50+
document.getElementById('btnAll').classList.add('active');
51+
document.getElementById('btnToday').classList.remove('active');
52+
document.getElementById('btnByDays').classList.remove('active');
53+
}
54+
55+
function setUIForByDays() {
56+
document.getElementById('btnByDays').classList.add('active');
57+
document.getElementById('btnAll').classList.remove('active');
58+
document.getElementById('btnToday').classList.remove('active');
59+
60+
document.getElementById('resultTable').innerHTML = null;
61+
document.getElementById('chart').innerHTML = null;
62+
}
63+
64+
function clearUI(){
65+
document.getElementById('resultTable').innerHTML = null;
66+
document.getElementById('chart').innerHTML = null;
67+
document.getElementById('total').innerHTML = null;
68+
}
69+
70+
function getTabsFromStorage(tabs) {
4171
tabsFromStorage = tabs;
42-
var targetTabs = [];
72+
targetTabs = [];
4373

4474
var table = document.getElementById('resultTable');
45-
table.innerHTML = null;
46-
document.getElementById('chart').innerHTML = null;
75+
clearUI();
4776

48-
if (options !== undefined && options === true) {
77+
if (currentTypeOfList === TypeListEnum.All) {
4978
targetTabs = tabs.sort(function (a, b) {
5079
return b.summaryTime - a.summaryTime;
5180
});
5281

53-
totalTime = setTotalTime(targetTabs);
54-
} else {
55-
var today = new Date().toLocaleDateString();
56-
82+
totalTime = getTotalTime(targetTabs);
83+
}
84+
if (currentTypeOfList === TypeListEnum.ToDay) {
5785
targetTabs = tabs.filter(x => x.days.find(s => s.date === today));
58-
targetTabs = targetTabs.sort(function (a, b) {
59-
return b.days.find(s => s.date === today).summary - a.days.find(s => s.date === today).summary;
60-
});
86+
if (targetTabs.length > 0) {
87+
targetTabs = targetTabs.sort(function (a, b) {
88+
return b.days.find(s => s.date === today).summary - a.days.find(s => s.date === today).summary;
89+
});
6190

62-
totalTime = setTotalTime(targetTabs, today);
91+
totalTime = getTotalTime(targetTabs);
92+
}
93+
else {
94+
document.getElementById('chart').innerHTML = '<p class="no-data">No data</p>';
95+
return;
96+
}
6397
}
6498

6599
var currentTab = getCurrentTab();
@@ -82,9 +116,10 @@ function getTabsFromStorage(tabs, options) {
82116
}
83117

84118
var summaryTime;
85-
if (today !== undefined) {
119+
if (currentTypeOfList === TypeListEnum.ToDay) {
86120
summaryTime = targetTabs[i].days.find(x => x.date == today).summary;
87-
} else {
121+
}
122+
if (currentTypeOfList === TypeListEnum.All) {
88123
summaryTime = targetTabs[i].summaryTime;
89124
}
90125

@@ -107,21 +142,37 @@ function getTabsFromStorage(tabs, options) {
107142
table.appendChild(div);
108143
}
109144

145+
table.appendChild(document.createElement('hr'));
146+
addTotalBlock();
110147
drawChart(tabsForChart);
111148
setActiveTooltipe(currentTab);
112149
}
113150

114-
function setTotalTime(tabs, today) {
151+
function addTotalBlock(table){
152+
var totalElement = document.getElementById('total');
153+
154+
var spanTitle = document.createElement('span');
155+
spanTitle.classList.add('span-total');
156+
spanTitle.innerHTML = 'Total';
157+
158+
var spanTime = document.createElement('span');
159+
spanTime.classList.add('span-time');
160+
spanTime.innerHTML = convertSummaryTimeToString(totalTime);
161+
162+
totalElement.appendChild(spanTitle);
163+
totalElement.appendChild(spanTime);
164+
}
165+
166+
function getTotalTime(tabs) {
115167
var total;
116-
if (today !== undefined) {
168+
if (currentTypeOfList === TypeListEnum.ToDay) {
117169
var summaryTimeList = tabs.map(function (a) { return a.days.find(s => s.date === today).summary; });
118170
total = summaryTimeList.reduce(function (a, b) { return a + b; })
119-
} else {
171+
}
172+
if (currentTypeOfList === TypeListEnum.All) {
120173
var summaryTimeList = tabs.map(function (a) { return a.summaryTime; });
121174
total = summaryTimeList.reduce(function (a, b) { return a + b; })
122175
}
123-
document.getElementById('totalTime').innerText = convertSummaryTimeToString(total);
124-
125176
return total;
126177
}
127178

@@ -165,7 +216,7 @@ function addTabOthersForChart(tabsForChart, summaryTime) {
165216
}
166217

167218
function drawChart(tabs) {
168-
var donut = donutChart()
219+
donut = donutChart()
169220
.width(480)
170221
.height(280)
171222
.cornerRadius(5) // sets how rounded the corners are on each slice
@@ -176,11 +227,26 @@ function drawChart(tabs) {
176227
d3.select('#chart')
177228
.datum(tabs) // bind data to the div
178229
.call(donut); // draw chart in div
230+
231+
document.getElementById('chart').appendChild(document.createElement('hr'));
179232
}
180233

181234
function setActiveTooltipe(currentTab) {
182235
if (currentTab !== '') {
183-
var event = new Event("mouseenter");
184-
document.getElementById(currentTab).dispatchEvent(event);
236+
var element = document.getElementById(currentTab);
237+
if (element !== null) {
238+
var event = new Event("mouseenter");
239+
document.getElementById(currentTab).dispatchEvent(event);
240+
} else {
241+
var currentInfoForTab;
242+
if (currentTypeOfList === TypeListEnum.ToDay) {
243+
currentInfoForTab = targetTabs.find(x => x.url === currentTab).days.find(x => x.date === today)
244+
donut.viewToolTipe({
245+
'url': currentTab,
246+
'summary': currentInfoForTab.summary,
247+
'percentage': getPercentageForChart(currentInfoForTab.summary)
248+
});
249+
}
250+
}
185251
}
186252
}

‎style/webact.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ body {
1313

1414
.inline-flex{
1515
display: inline-flex;
16+
height: 25px;
1617
}
1718

1819
.inline-flex:hover{
@@ -118,4 +119,11 @@ input[type="button"]:hover {
118119
input[type="button"].active {
119120
background-color: #008CBA;
120121
color: white;
122+
}
123+
124+
.no-data{
125+
width: 500px;
126+
text-align: center;
127+
font-weight: 600;
128+
font-size: 14px;
121129
}

0 commit comments

Comments
 (0)