Skip to content

Commit cbc8d5b

Browse files
HoangTran0410HoangTran0410
committed
query web_timer
1 parent 573f75c commit cbc8d5b

File tree

2 files changed

+126
-72
lines changed

2 files changed

+126
-72
lines changed

‎scripts/web_timer.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@ <h1>Webtimer - Useful scripts</h1>
3434
<button type="button" id="back" title="Go Back">⬅️</button>
3535
<a href="/scripts/web_timer.html" target="_blank" title="Open in new tab" id="new-tab">↗</a>
3636

37-
<script src="./content-scripts/ufs_global.js"></script>
3837
<script type="module" src="./web_timer_main.js"></script>
3938
</body>
4039

‎scripts/web_timer_main.js‎

Lines changed: 126 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const guide = document.querySelector("#guide");
1212
const dataContainer = document.querySelector("#timer-data");
1313

1414
let web_timer;
15-
let curDate = new Date();
15+
1616
const FormatCache = new Map();
1717
const DATE_TYPE = {
1818
DAY: "day",
@@ -23,8 +23,12 @@ const DISPLAY_TYPE = {
2323
AVERAGE: "average",
2424
TOTAL: "total",
2525
};
26-
27-
init();
26+
const config = {
27+
fromDate: new Date(),
28+
endDate: new Date(),
29+
dateType: DATE_TYPE.DAY,
30+
displayType: DISPLAY_TYPE.TOTAL,
31+
};
2832

2933
chrome.storage.local.get("web_timer", function (result) {
3034
web_timer = result.web_timer;
@@ -37,14 +41,13 @@ chrome.storage.local.get("web_timer", function (result) {
3741
});
3842
// }
3943

40-
showData({ fromDate: new Date() });
44+
init();
4145
});
4246

4347
function getOldestDate() {
4448
try {
4549
let dateKeys = Object.keys(web_timer);
4650
dateKeys.sort();
47-
console.log(dateKeys);
4851
return dateKeys[0];
4952
} catch (e) {
5053
console.log(e);
@@ -75,13 +78,18 @@ function init() {
7578
name: t({ vi: "Tất cả", en: "All" }),
7679
},
7780
].forEach((o) => {
78-
dateTypeSelect.options.add(new Option(o.name, o.value));
81+
let selected = config.dateType === o.value;
82+
dateTypeSelect.options.add(new Option(o.name, o.value, selected, selected));
7983
});
8084

8185
dateTypeSelect.addEventListener("change", (e) => {
8286
let type = e.target.value;
8387
switch (type) {
8488
case "day":
89+
displayTypeSelect.style.display = "none";
90+
config.dateType = DATE_TYPE.DAY;
91+
showData(config);
92+
8593
datePickerContainer.innerHTML = `
8694
<button type="button">◀</button>
8795
<button class="date-selector"></button>
@@ -90,52 +98,96 @@ function init() {
9098
const [preBtn, dateBtn, nextBtn] =
9199
datePickerContainer.querySelectorAll("button");
92100

93-
dateBtn.innerText = formatDate(curDate);
101+
dateBtn.innerText = formatDate(config.fromDate);
94102
dateBtn.addEventListener("click", (e) => {
95103
let x = dateBtn.offsetLeft - document.documentElement.scrollLeft;
96104
let y = dateBtn.offsetTop - document.documentElement.scrollTop;
97-
openDatePicker(x, y, curDate, getOldestDate(), new Date()).then(
98-
(selectedDate) => {
99-
if (selectedDate) {
100-
let success = showData({ fromDate: selectedDate });
101-
if (success) {
102-
curDate = selectedDate;
103-
dateBtn.innerText = formatDate(curDate);
104-
}
105-
}
105+
openDatePicker(
106+
x,
107+
y,
108+
config.fromDate,
109+
getOldestDate(),
110+
new Date()
111+
).then((selectedDate) => {
112+
if (selectedDate) {
113+
dateBtn.innerText = formatDate(selectedDate);
114+
config.fromDate = selectedDate;
115+
showData(config);
106116
}
107-
);
117+
});
108118
});
109119
preBtn.addEventListener("click", () => {
110-
let preDate = new Date(curDate);
120+
let preDate = new Date(config.fromDate);
111121
preDate.setDate(preDate.getDate() - 1);
112-
let success = showData({ fromDate: preDate });
113-
if (success) {
114-
curDate = preDate;
115-
dateBtn.innerText = formatDate(curDate);
116-
}
122+
dateBtn.innerText = formatDate(preDate);
123+
config.fromDate = preDate;
124+
showData(config);
117125
});
118126
nextBtn.addEventListener("click", () => {
119-
let nextDate = new Date(curDate);
127+
let nextDate = new Date(config.fromDate);
120128
nextDate.setDate(nextDate.getDate() + 1);
121-
let success = showData({ fromDate: nextDate });
122-
if (success) {
123-
curDate = nextDate;
124-
dateBtn.innerText = formatDate(curDate);
125-
}
129+
dateBtn.innerText = formatDate(nextDate);
130+
config.fromDate = nextDate;
131+
showData(config);
126132
});
127133

128134
break;
129135
case "range":
136+
displayTypeSelect.style.display = "block";
137+
config.dateType = DATE_TYPE.RANGE;
138+
showData(config);
139+
130140
datePickerContainer.innerHTML = `
131141
<button class="date-selector"></button>
142+
<span>→</span>
132143
<button class="date-selector"></button>`;
133-
const [fromDate, toDate] =
144+
const [fromDateBtn, endDateBtn] =
134145
datePickerContainer.querySelectorAll("button");
146+
147+
fromDateBtn.innerText = formatDate(config.fromDate);
148+
endDateBtn.innerText = formatDate(config.endDate || new Date());
149+
150+
fromDateBtn.addEventListener("click", (e) => {
151+
let x = fromDateBtn.offsetLeft - document.documentElement.scrollLeft;
152+
let y = fromDateBtn.offsetTop - document.documentElement.scrollTop;
153+
openDatePicker(
154+
x,
155+
y,
156+
config.fromDate,
157+
getOldestDate(),
158+
config.endDate || new Date()
159+
).then((selectedDate) => {
160+
if (selectedDate) {
161+
fromDateBtn.innerText = formatDate(selectedDate);
162+
config.fromDate = selectedDate;
163+
showData(config);
164+
}
165+
});
166+
});
167+
168+
endDateBtn.addEventListener("click", (e) => {
169+
let x = endDateBtn.offsetLeft - document.documentElement.scrollLeft;
170+
let y = endDateBtn.offsetTop - document.documentElement.scrollTop;
171+
openDatePicker(
172+
x,
173+
y,
174+
config.endDate,
175+
config.fromDate,
176+
new Date()
177+
).then((selectedDate) => {
178+
if (selectedDate) {
179+
endDateBtn.innerText = formatDate(selectedDate);
180+
config.endDate = selectedDate;
181+
showData(config);
182+
}
183+
});
184+
});
135185
break;
136186
case "all":
187+
displayTypeSelect.style.display = "block";
137188
datePickerContainer.innerHTML = "";
138-
showData({ type: DISPLAY_TYPE.TOTAL });
189+
config.dateType = DATE_TYPE.ALL;
190+
showData(config);
139191
break;
140192
}
141193
});
@@ -146,20 +198,23 @@ function init() {
146198
group.label = t({ vi: "Kiểu hiển thị:", en: "Display type:" });
147199
displayTypeSelect.appendChild(group);
148200
displayTypeSelect.addEventListener("change", (e) => {
149-
let type = e.target.value;
150-
showData(type);
201+
config.displayType = e.target.value;
202+
showData(config);
151203
});
152204
[
153205
{
154206
value: DISPLAY_TYPE.AVERAGE,
155-
name: t({ vi: "Trung bình", en: "Average" }),
207+
name: t({ vi: "Trung bình ngày", en: "Day average" }),
156208
},
157209
{
158210
value: DISPLAY_TYPE.TOTAL,
159211
name: t({ vi: "Tổng cộng", en: "Total" }),
160212
},
161213
].forEach((o) => {
162-
displayTypeSelect.options.add(new Option(o.name, o.value));
214+
let selected = config.displayType === o.value;
215+
displayTypeSelect.options.add(
216+
new Option(o.name, o.value, selected, selected)
217+
);
163218
});
164219
}
165220

@@ -203,9 +258,8 @@ function showData({
203258
dateType = DATE_TYPE.DAY,
204259
displayType = DISPLAY_TYPE.TOTAL,
205260
}) {
206-
const { chartData, allData } =
261+
const { chartData = [], allData = [] } =
207262
getData({ fromDate, endDate, dateType, displayType }) || {};
208-
if (!allData?.length) return false;
209263

210264
// draw chart
211265
let chart = Donut(280, chartData, 50, 2);
@@ -258,59 +312,56 @@ function showData({
258312
return true;
259313
}
260314

261-
function creatWebsiteeDetail(website, allData) {}
262-
263315
function getData({
264316
fromDate = new Date(),
265317
endDate,
266318
dateType = DATE_TYPE.DAY,
267319
displayType = DISPLAY_TYPE.TOTAL,
268320
}) {
269321
let allData = [],
270-
chartData = [];
322+
chartData = [],
323+
totalDays = 1,
324+
oldestDate = getOldestDate();
271325

272326
// single day
273327
if (dateType === DATE_TYPE.DAY) {
274-
console.log(fromDate);
275328
let date = fromDate;
276329
let dateKey = formatDate(date);
277-
if (!web_timer[dateKey]) {
278-
alert(
279-
t({
280-
vi: "không có dữ liệu cho ngày " + formatDate(date),
281-
en: "No data for this date " + formatDate(date),
282-
})
283-
);
284-
return null;
330+
if (web_timer[dateKey]) {
331+
allData = Object.entries(web_timer[dateKey]);
332+
totalDays = 1;
333+
guide.innerText = t({
334+
vi: `Dữ liệu ngày ${dateKey} (${allData.length} websites)`,
335+
en: `Data for ${dateKey} (${allData.length} websites)`,
336+
});
285337
}
286-
allData = Object.entries(web_timer[dateKey]).filter((_) => _[1] > 0);
287-
guide.innerText = t({
288-
vi: `Dữ liệu ngày ${dateKey} (${allData.length} websites)`,
289-
en: `Data for ${dateKey} (${allData.length} websites)`,
290-
});
291338
}
292339

293-
// all days
294-
if (dateType === DATE_TYPE.ALL) {
340+
// range of days / all days
341+
if (dateType === DATE_TYPE.RANGE || dateType === DATE_TYPE.ALL) {
342+
totalDays = 0;
295343
let web = {},
296-
oldestDate = formatDate(new Date()),
297-
totalDays = 0;
344+
_fromDate = formatDate(fromDate),
345+
_endDate = formatDate(endDate);
298346

299347
for (let date in web_timer) {
300-
totalDays++;
301-
if (date < oldestDate) oldestDate = date;
302-
for (let website in web_timer[date]) {
303-
if (!web[website]) web[website] = 0;
304-
if (web_timer[date][website]) {
305-
web[website] += web_timer[date][website];
348+
if (
349+
dateType === DATE_TYPE.ALL ||
350+
(date >= _fromDate && date <= _endDate)
351+
) {
352+
totalDays++;
353+
for (let website in web_timer[date]) {
354+
if (!web[website]) web[website] = 0;
355+
if (web_timer[date][website]) {
356+
web[website] += web_timer[date][website];
357+
}
306358
}
307359
}
308360
}
309361
allData = Object.entries(web);
310-
311362
guide.innerText = t({
312-
vi: `Dữ liệu tổng hợp từ ${oldestDate} (${totalDays} ngày)`,
313-
en: `Aggregate data since ${oldestDate} (${totalDays} days)`,
363+
vi: `Dữ liệu từ ${_fromDate} → ${_endDate} (${totalDays} ngày, ${allData.length} websites)`,
364+
en: `Data from ${_fromDate} → ${_endDate} (${totalDays} days, ${allData.length} websites)`,
314365
});
315366
}
316367

@@ -319,10 +370,6 @@ function getData({
319370
for (let d of allData) {
320371
d[1] /= totalDays;
321372
}
322-
guide.innerText = t({
323-
vi: `Trung bình hằng ngày từ ${oldestDate} (${totalDays} ngày)`,
324-
en: `Daily averages since ${oldestDate} (${totalDays} days)`,
325-
});
326373
}
327374

328375
// data structure
@@ -368,6 +415,14 @@ function getData({
368415
}
369416
}
370417

418+
// no data
419+
if (!allData.length) {
420+
guide.innerText = t({
421+
vi: `Không có dữ liệu`,
422+
en: `No data`,
423+
});
424+
}
425+
371426
return { chartData, allData };
372427
}
373428

0 commit comments

Comments
 (0)