Skip to content

Commit 76abf23

Browse files
committed
feature list of days. part 1. days with summary time
1 parent c56e9e2 commit 76abf23

File tree

3 files changed

+66
-10
lines changed

3 files changed

+66
-10
lines changed

scripts/ui.js

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -158,10 +158,25 @@ class UI {
158158
calendarTwo.type = 'date';
159159
calendarTwo.valueAsDate = new Date(Date.UTC(dateNow.getFullYear(), dateNow.getMonth(), dateNow.getDate()));
160160

161+
var header = document.createElement('div');
162+
header.classList.add('table-header');
163+
164+
var headerTitleDate = document.createElement('span');
165+
headerTitleDate.innerHTML = 'Day';
166+
headerTitleDate.classList.add('header-title-day');
167+
var headerTitleTime = document.createElement('span');
168+
headerTitleTime.innerHTML = 'Summary time';
169+
headerTitleTime.classList.add('header-title-time');
170+
171+
header.appendChild(headerTitleDate);
172+
header.appendChild(headerTitleTime);
173+
161174
div.appendChild(from);
162175
div.appendChild(calendarFirst);
163176
div.appendChild(to);
164177
div.appendChild(calendarTwo);
178+
179+
div.append(header);
165180
}
166181

167182
getDateRange() {
@@ -175,10 +190,16 @@ class UI {
175190
var parent = document.getElementById('byDays');
176191
for (var i = 0; i < days.length; i++) {
177192
var div = document.createElement('div');
178-
div.classList.add('day');
193+
div.classList.add('day-block');
179194
var span = document.createElement('span');
180-
span.innerHTML = days[i];
195+
span.classList.add('day');
196+
span.innerHTML = days[i].date;
197+
var spanTime = document.createElement('span');
198+
spanTime.classList.add('day-time');
199+
spanTime.innerHTML = convertSummaryTimeToString(days[i].total);
200+
181201
div.appendChild(span);
202+
div.appendChild(spanTime);
182203

183204
parent.appendChild(div);
184205
}

scripts/webact.js

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ function getDataFromStorage() {
3737
storage.load(STORAGE_TABS, getTabsFromStorage);
3838
}
3939

40-
function getDataFromStorageByDays(){
40+
function getDataFromStorageByDays() {
4141
storage.load(STORAGE_TABS, getTabsByDays);
4242
}
4343

@@ -46,7 +46,7 @@ function getTabsFromStorage(tabs) {
4646
targetTabs = [];
4747

4848
ui.clearUI();
49-
if (tabs === null){
49+
if (tabs === null) {
5050
ui.fillEmptyBlock();
5151
return;
5252
}
@@ -173,17 +173,26 @@ function getFirstDay() {
173173
};
174174
}
175175

176-
function getTabsByDays(tabs){
176+
function getTabsByDays(tabs) {
177177
var range = ui.getDateRange();
178178
var listOfDays = [];
179179
tabs.map(function (a) {
180180
return a.days.map(function (a) {
181-
if (listOfDays.indexOf(a.date) === -1 && isDateInRange(a.date, range))
182-
return listOfDays.push(a.date);
181+
var item = listOfDays.find(x => x.date == a.date);
182+
if (item !== undefined){
183+
return item.total += a.summary;
184+
}
185+
if (item === undefined && isDateInRange(a.date, range))
186+
return listOfDays.push(
187+
{
188+
'date': a.date,
189+
'total': a.summary
190+
}
191+
);
183192
});
184193
});
185194
listOfDays = listOfDays.sort(function (a, b) {
186-
return new Date(a) - new Date(b);
195+
return new Date(a.date) - new Date(b.date);
187196
});
188197

189198
ui.fillListOfDays(listOfDays);

style/webact.css

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -143,11 +143,37 @@ input[type="date"]{
143143
font-size: 13px;
144144
padding: 4px;
145145
background-color: rgb(223, 221, 221);
146+
}
147+
148+
p.table-header{
146149
text-align: center;
147150
}
148151

149-
.day{
150-
width: 500px;
152+
.day-block{
153+
display: inline-flex;
154+
width: 100%;
151155
height: 25px;
152156
cursor: pointer;
157+
border-bottom: 1px solid rgb(223, 221, 221);
158+
}
159+
160+
.day{
161+
width: 415px;
162+
font-size: 13px;
163+
padding-left:5px;
164+
margin:auto;
165+
}
166+
167+
.day-time{
168+
width: 80px;
169+
margin:auto;
170+
}
171+
172+
.header-title-day{
173+
margin-left: 5px;
174+
}
175+
176+
.header-title-time{
177+
margin-right: 5px;
178+
float: right;
153179
}

0 commit comments

Comments
 (0)