Skip to content

Commit 10bccfd

Browse files
StigmatozStigmatoz
committed
view list of site for day's
1 parent edc0407 commit 10bccfd

File tree

5 files changed

+157
-29
lines changed

5 files changed

+157
-29
lines changed

‎index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,9 @@
1919
<p class="title">Web Activity Time Tracker</p>
2020
</div>
2121
<div id="buttons" class="btn-block">
22-
<input type="button" value="Today" class="active" id="btnToday"/>
23-
<input type="button" value="All" id="btnAll"/>
24-
<input type="button" value="By days" id="btnByDays"/>
22+
<input type="button" value="Today" class="active" id="btnToday" />
23+
<input type="button" value="All" id="btnAll" />
24+
<input type="button" value="By days" id="btnByDays" />
2525
</div>
2626
<div id="chart"></div>
2727
<div id="resultTable" class="list-of-site"></div>

‎scripts/tab.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,23 +9,23 @@ class Tab {
99
}
1010

1111
incSummaryTime() {
12+
this.summaryTime += 1;
13+
1214
var today = new Date().toLocaleDateString();
1315
var day = this.days.find(x => x.date == today);
1416
if (day === undefined) {
1517
this.addNewDay(today);
1618
}
1719
else {
18-
this.summaryTime += 1;
1920
day['summary'] += 1;
2021
}
2122
}
2223

2324
addNewDay(today){
24-
this.summaryTime += 1;
2525
this.days.push(
2626
{
2727
'date': today,
28-
'summary': this.summaryTime
28+
'summary': 1
2929
}
3030
);
3131
}

‎scripts/ui.js‎

Lines changed: 44 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ class UI {
110110
this.getTableOfSite().appendChild(p);
111111
}
112112

113-
addLineToTableOfSite(tab, currentTab, summaryTime) {
113+
addLineToTableOfSite(tab, currentTab, summaryTime, blockName) {
114114
var div = document.createElement('div');
115115
div.classList.add('inline-flex');
116116

@@ -138,7 +138,10 @@ class UI {
138138
div.appendChild(spanUrl);
139139
div.appendChild(spanPercentage);
140140
div.appendChild(spanTime);
141-
this.getTableOfSite().appendChild(div);
141+
if (blockName !== undefined)
142+
document.getElementById(blockName).appendChild(div);
143+
else
144+
this.getTableOfSite().appendChild(div);
142145
}
143146

144147
addBlockForCalendar() {
@@ -164,20 +167,6 @@ class UI {
164167

165168
var tableForDaysBlock = document.createElement('div');
166169
tableForDaysBlock.id = 'tableForDaysBlock';
167-
var header = document.createElement('div');
168-
header.classList.add('table-header');
169-
170-
var headerTitleDate = document.createElement('span');
171-
headerTitleDate.innerHTML = 'Day';
172-
headerTitleDate.classList.add('header-title-day');
173-
var headerTitleTime = document.createElement('span');
174-
headerTitleTime.innerHTML = 'Summary time';
175-
headerTitleTime.classList.add('header-title-time');
176-
177-
header.appendChild(headerTitleDate);
178-
header.appendChild(headerTitleTime);
179-
180-
tableForDaysBlock.appendChild(header);
181170

182171
div.appendChild(from);
183172
div.appendChild(calendarFirst);
@@ -206,22 +195,56 @@ class UI {
206195
var parent = document.getElementById('tableForDaysBlock');
207196
parent.innerHTML = null;
208197
if (days.length > 0) {
198+
var header = document.createElement('div');
199+
header.classList.add('table-header');
200+
201+
var headerTitleDate = document.createElement('span');
202+
headerTitleDate.innerHTML = 'Day';
203+
headerTitleDate.classList.add('header-title-day');
204+
var headerTitleTime = document.createElement('span');
205+
headerTitleTime.innerHTML = 'Summary time';
206+
headerTitleTime.classList.add('header-title-time');
207+
208+
header.appendChild(headerTitleDate);
209+
header.appendChild(headerTitleTime);
210+
211+
parent.appendChild(header);
212+
209213
for (var i = 0; i < days.length; i++) {
210-
var div = document.createElement('div');
211-
div.classList.add('day-block');
214+
var check = document.createElement('input');
215+
check.type = 'checkbox';
216+
check.id = days[i].date;
217+
check.classList.add('toggle');
218+
219+
var label = document.createElement('label');
220+
label.setAttribute('for', days[i].date);
221+
label.classList.add('day-block');
222+
label.classList.add('lbl-toggle');
212223
var span = document.createElement('span');
213224
span.classList.add('day');
214225
span.innerHTML = days[i].date;
215226
var spanTime = document.createElement('span');
216227
spanTime.classList.add('day-time');
217228
spanTime.innerHTML = convertSummaryTimeToString(days[i].total);
218229

219-
div.appendChild(span);
220-
div.appendChild(spanTime);
230+
label.appendChild(span);
231+
label.appendChild(spanTime);
232+
233+
parent.appendChild(check);
234+
parent.appendChild(label);
221235

236+
var div = document.createElement('div');
237+
div.id = days[i].date + '_block';
238+
div.classList.add('collapsible-content');
222239
parent.appendChild(div);
240+
241+
document.getElementById(days[i].date).addEventListener('click', function () {
242+
var element = document.getElementById(this.id + '_block');
243+
element.innerHTML = null;
244+
getTabsFromStorageByDay(this.id, this.id + '_block')
245+
});
223246
}
224-
247+
225248
} else {
226249
this.fillEmptyBlock('tableForDaysBlock');
227250
}

‎scripts/webact.js‎

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,13 @@ function getTotalTime(tabs) {
116116
return total;
117117
}
118118

119+
function getTotalTimeForDay(day, tabs) {
120+
var total;
121+
var summaryTimeList = tabs.map(function (a) { return a.days.find(s => s.date === day).summary; });
122+
total = summaryTimeList.reduce(function (a, b) { return a + b; })
123+
return total;
124+
}
125+
119126
function getPercentage(time) {
120127
return ((time / totalTime) * 100).toFixed(2) + '%';
121128
}
@@ -198,7 +205,43 @@ function getTabsByDays(tabs) {
198205

199206
ui.fillListOfDays(listOfDays);
200207
}
201-
else{
208+
else {
202209
ui.fillEmptyBlockForDays();
203210
}
211+
}
212+
213+
function getTabsFromStorageByDay(day, blockName) {
214+
targetTabs = [];
215+
216+
if (tabsFromStorage === null) {
217+
ui.fillEmptyBlock(blockName);
218+
return;
219+
}
220+
221+
targetTabs = tabsFromStorage.filter(x => x.days.find(s => s.date === day));
222+
if (targetTabs.length > 0) {
223+
targetTabs = targetTabs.sort(function (a, b) {
224+
return b.days.find(s => s.date === day).summary - a.days.find(s => s.date === day).summary;
225+
});
226+
227+
totalTime = getTotalTimeForDay(day, targetTabs);
228+
}
229+
else {
230+
ui.fillEmptyBlock(blockName);
231+
return;
232+
}
233+
234+
var currentTab = getCurrentTab();
235+
236+
var tabsForChart = [];
237+
var content = document.createElement('div');
238+
content.classList.add('content-inner');
239+
content.id = blockName + '_content';
240+
document.getElementById(blockName).appendChild(content);
241+
for (var i = 0; i < targetTabs.length; i++) {
242+
var summaryTime;
243+
summaryTime = targetTabs[i].days.find(x => x.date == day).summary;
244+
245+
ui.addLineToTableOfSite(targetTabs[i], currentTab, summaryTime, blockName + '_content');
246+
}
204247
}

‎style/webact.css‎

Lines changed: 63 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ body {
99

1010
.inline-flex{
1111
display: inline-flex;
12+
height: 23px;
1213
}
1314

1415
.inline-flex:hover{
@@ -176,4 +177,65 @@ p.table-header{
176177
.header-title-time{
177178
margin-right: 5px;
178179
float: right;
179-
}
180+
}
181+
182+
183+
input[type='checkbox'] {
184+
display: none;
185+
}
186+
187+
.lbl-toggle {
188+
font-family: monospace;
189+
font-size: 12px;
190+
cursor: pointer;
191+
}
192+
193+
.lbl-toggle:hover {
194+
font-size: 13px;
195+
font-weight: 650;
196+
color: rgb(27, 27, 27);
197+
}
198+
199+
.lbl-toggle::before {
200+
content: ' ';
201+
display: table;
202+
203+
border-top: 5px solid transparent;
204+
border-bottom: 5px solid transparent;
205+
border-left: 5px solid currentColor;
206+
vertical-align: middle;
207+
margin-right: 3px;
208+
transform: translateY(6px);
209+
210+
transition: transform .2s ease-out;
211+
}
212+
213+
.toggle:checked + .lbl-toggle::before {
214+
transform: rotate(90deg) translateX(3px);
215+
}
216+
217+
.collapsible-content {
218+
max-height: 0px;
219+
overflow: hidden;
220+
transition: max-height .25s ease-in-out;
221+
}
222+
223+
.toggle:checked + .lbl-toggle + .collapsible-content {
224+
max-height: 200px;
225+
}
226+
227+
.toggle:checked + .lbl-toggle {
228+
border-bottom-right-radius: 0;
229+
border-bottom-left-radius: 0;
230+
}
231+
232+
.collapsible-content .content-inner {
233+
background: rgba(250, 224, 66, .2);
234+
border-bottom: 1px solid rgba(250, 224, 66, .45);
235+
border-bottom-left-radius: 7px;
236+
border-bottom-right-radius: 7px;
237+
padding: 7px;
238+
239+
240+
/* border-left: 3px solid rgb(151, 218, 52); */
241+
}

0 commit comments

Comments
 (0)