Skip to content

Commit 894ae98

Browse files
hai-altx-softhai-altx-soft
committed
refact
1 parent 5ab2489 commit 894ae98

File tree

3 files changed

+131
-111
lines changed

3 files changed

+131
-111
lines changed

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
<script src="scripts/chart/chart-core.js"></script>
1111
<script src="scripts/storage.js"></script>
1212
<script src="scripts/common.js"></script>
13+
<script src="scripts/ui.js"></script>
1314
<script src="scripts/webact.js"></script>
1415
</head>
1516

‎scripts/ui.js‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
'use strict';
2+
3+
class UI {
4+
getTableOfSite() {
5+
return document.getElementById('resultTable');
6+
}
7+
8+
setUIForToday() {
9+
document.getElementById('btnToday').classList.add('active');
10+
document.getElementById('btnAll').classList.remove('active');
11+
document.getElementById('btnByDays').classList.remove('active');
12+
}
13+
14+
setUIForAll() {
15+
document.getElementById('btnAll').classList.add('active');
16+
document.getElementById('btnToday').classList.remove('active');
17+
document.getElementById('btnByDays').classList.remove('active');
18+
}
19+
20+
setUIForByDays() {
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;
27+
}
28+
29+
clearUI() {
30+
document.getElementById('resultTable').innerHTML = null;
31+
document.getElementById('chart').innerHTML = null;
32+
document.getElementById('total').innerHTML = null;
33+
}
34+
35+
createTotalBlock(totalTime) {
36+
var totalElement = document.getElementById('total');
37+
38+
var spanTitle = document.createElement('span');
39+
spanTitle.classList.add('span-total');
40+
spanTitle.innerHTML = 'Total';
41+
42+
var spanTime = document.createElement('span');
43+
spanTime.classList.add('span-time');
44+
spanTime.innerHTML = convertSummaryTimeToString(totalTime);
45+
46+
totalElement.appendChild(spanTitle);
47+
totalElement.appendChild(spanTime);
48+
}
49+
50+
fillEmptyBlock() {
51+
document.getElementById('chart').innerHTML = '<p class="no-data">No data</p>';
52+
}
53+
54+
addHrAfterChart() {
55+
document.getElementById('chart').appendChild(document.createElement('hr'));
56+
}
57+
58+
addHrAfterTableOfSite() {
59+
this.getTableOfSite().appendChild(document.createElement('hr'));
60+
}
61+
62+
setActiveTooltipe(currentTab) {
63+
if (currentTab !== '') {
64+
var element = document.getElementById(currentTab);
65+
if (element !== null) {
66+
var event = new Event("mouseenter");
67+
document.getElementById(currentTab).dispatchEvent(event);
68+
}
69+
}
70+
}
71+
72+
drawChart(tabs) {
73+
var donut = donutChart()
74+
.width(480)
75+
.height(280)
76+
.cornerRadius(5) // sets how rounded the corners are on each slice
77+
.padAngle(0.020) // effectively dictates the gap between slices
78+
.variable('percentage')
79+
.category('url');
80+
81+
d3.select('#chart')
82+
.datum(tabs) // bind data to the div
83+
.call(donut); // draw chart in div
84+
85+
ui.addHrAfterChart();
86+
}
87+
88+
addLineToTableOfSite(tab, currentTab, summaryTime){
89+
var div = document.createElement('div');
90+
div.classList.add('inline-flex');
91+
92+
var img = document.createElement('img');
93+
img.classList.add('favicon');
94+
img.setAttribute('height', 15);
95+
img.setAttribute('src', tab.favicon);
96+
97+
var spanUrl = document.createElement('span');
98+
spanUrl.classList.add('span-url');
99+
spanUrl.innerText = tab.url;
100+
if (tab.url == currentTab) {
101+
spanUrl.classList.add('span-active-url');
102+
}
103+
104+
var spanPercentage = document.createElement('span');
105+
spanPercentage.classList.add('span-percentage');
106+
spanPercentage.innerText = getPercentage(summaryTime);
107+
108+
var spanTime = document.createElement('span');
109+
spanTime.classList.add('span-time');
110+
spanTime.innerText = convertSummaryTimeToString(summaryTime);
111+
112+
div.appendChild(img);
113+
div.appendChild(spanUrl);
114+
div.appendChild(spanPercentage);
115+
div.appendChild(spanTime);
116+
this.getTableOfSite().appendChild(div);
117+
}
118+
}

‎scripts/webact.js‎

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

33
var storage = new LocalStorage();
4+
var ui = new UI();
45
var totalTime;
56
var tabsFromStorage;
6-
var donut;
77
var targetTabs;
88
var currentTypeOfList;
99
var today = new Date().toLocaleDateString();
1010

1111
document.addEventListener('DOMContentLoaded', function () {
1212
document.getElementById('btnToday').addEventListener('click', function () {
1313
currentTypeOfList = TypeListEnum.ToDay;
14-
setUIForToday();
14+
ui.setUIForToday();
1515
getDataFromStorageToday();
1616
});
1717
document.getElementById('btnAll').addEventListener('click', function () {
1818
currentTypeOfList = TypeListEnum.All;
19-
setUIForAll();
19+
ui.setUIForAll();
2020
getDataFromStorageAll();
2121
});
2222
document.getElementById('btnByDays').addEventListener('click', function () {
2323
currentTypeOfList = TypeListEnum.ByDays;
24-
setUIForByDays();
24+
ui.setUIForByDays();
2525
});
2626
});
2727

@@ -40,39 +40,12 @@ function getDataFromStorageAll() {
4040
storage.load(STORAGE_TABS, getTabsFromStorage);
4141
}
4242

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-
7043
function getTabsFromStorage(tabs) {
7144
tabsFromStorage = tabs;
7245
targetTabs = [];
7346

74-
var table = document.getElementById('resultTable');
75-
clearUI();
47+
var table = ui.getTableOfSite();
48+
ui.clearUI();
7649

7750
if (currentTypeOfList === TypeListEnum.All) {
7851
targetTabs = tabs.sort(function (a, b) {
@@ -91,7 +64,7 @@ function getTabsFromStorage(tabs) {
9164
totalTime = getTotalTime(targetTabs);
9265
}
9366
else {
94-
document.getElementById('chart').innerHTML = '<p class="no-data">No data</p>';
67+
ui.fillEmptyBlock();
9568
return;
9669
}
9770
}
@@ -100,21 +73,6 @@ function getTabsFromStorage(tabs) {
10073

10174
var tabsForChart = [];
10275
for (var i = 0; i < targetTabs.length; i++) {
103-
var div = document.createElement('div');
104-
div.classList.add('inline-flex');
105-
106-
var img = document.createElement('img');
107-
img.classList.add('favicon');
108-
img.setAttribute('height', 15);
109-
img.setAttribute('src', targetTabs[i].favicon);
110-
111-
var spanUrl = document.createElement('span');
112-
spanUrl.classList.add('span-url');
113-
spanUrl.innerText = targetTabs[i].url;
114-
if (targetTabs[i].url == currentTab) {
115-
spanUrl.classList.add('span-active-url');
116-
}
117-
11876
var summaryTime;
11977
if (currentTypeOfList === TypeListEnum.ToDay) {
12078
summaryTime = targetTabs[i].days.find(x => x.date == today).summary;
@@ -123,44 +81,17 @@ function getTabsFromStorage(tabs) {
12381
summaryTime = targetTabs[i].summaryTime;
12482
}
12583

126-
var spanPercentage = document.createElement('span');
127-
spanPercentage.classList.add('span-percentage');
128-
spanPercentage.innerText = getPercentage(summaryTime);
84+
ui.addLineToTableOfSite(targetTabs[i], currentTab, summaryTime);
12985

13086
if (i <= 5)
13187
addTabForChart(tabsForChart, targetTabs[i].url, summaryTime);
13288
else addTabOthersForChart(tabsForChart, summaryTime);
133-
134-
var spanTime = document.createElement('span');
135-
spanTime.classList.add('span-time');
136-
spanTime.innerText = convertSummaryTimeToString(summaryTime);
137-
138-
div.appendChild(img);
139-
div.appendChild(spanUrl);
140-
div.appendChild(spanPercentage);
141-
div.appendChild(spanTime);
142-
table.appendChild(div);
14389
}
14490

145-
table.appendChild(document.createElement('hr'));
146-
addTotalBlock();
147-
drawChart(tabsForChart);
148-
setActiveTooltipe(currentTab);
149-
}
150-
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);
91+
ui.addHrAfterTableOfSite();
92+
ui.createTotalBlock(totalTime);
93+
ui.drawChart(tabsForChart);
94+
ui.setActiveTooltipe(currentTab);
16495
}
16596

16697
function getTotalTime(tabs) {
@@ -213,34 +144,4 @@ function addTabOthersForChart(tabsForChart, summaryTime) {
213144
tab['summary'] += summaryTime;
214145
tab['percentage'] = getPercentageForChart(tab['summary']);
215146
}
216-
}
217-
218-
function drawChart(tabs) {
219-
donut = donutChart()
220-
.width(480)
221-
.height(280)
222-
.cornerRadius(5) // sets how rounded the corners are on each slice
223-
.padAngle(0.020) // effectively dictates the gap between slices
224-
.variable('percentage')
225-
.category('url');
226-
227-
d3.select('#chart')
228-
.datum(tabs) // bind data to the div
229-
.call(donut); // draw chart in div
230-
231-
document.getElementById('chart').appendChild(document.createElement('hr'));
232-
}
233-
234-
function setActiveTooltipe(currentTab) {
235-
if (currentTab !== '') {
236-
var element = document.getElementById(currentTab);
237-
if (element !== null) {
238-
var event = new Event("mouseenter");
239-
document.getElementById(currentTab).dispatchEvent(event);
240-
}
241-
// var currentInfoForTab;
242-
// if (currentTypeOfList === TypeListEnum.ToDay) {
243-
// currentInfoForTab = targetTabs.find(x => x.url === currentTab).days.find(x => x.date === today)
244-
// }
245-
}
246147
}

0 commit comments

Comments
 (0)