Skip to content

Commit 6da7ba1

Browse files
StigmatozStigmatoz
committed
Add notifications list to settings
1 parent 4c688d6 commit 6da7ba1

File tree

6 files changed

+147
-53
lines changed

6 files changed

+147
-53
lines changed

‎src/options.html‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
<div id='nav' class="nav">
2424
<a id='settingsBtn' class="active">Settings</a>
2525
<a id='restrictionsBtn'>Limits</a>
26+
<a id='notifyBtn'>Notifications</a>
2627
<a id='aboutBtn'>About</a>
2728
</div>
2829
<div id='block'>
@@ -112,19 +113,38 @@
112113
to the site will be blocked.</span>
113114
</div>
114115
<div class="margin-top-10">
115-
<input type="text" placeholder="Enter site name..." id='addRestrictionSiteLbl' />
116+
<input type="text" class="label-with-list" placeholder="Enter site name..." id='addRestrictionSiteLbl' />
116117
<div class="inline-block clockpicker" data-placement="left" data-align="top" data-autoclose="true">
117118
<input type="text" class="clock" placeholder="Time..." readonly id="addRestrictionTimeLbl">
118119
</div>
119-
<input type="button" value="+" id='addRestrictionSiteBtn' />
120+
<input type="button" value="+" class="btn-with-list" id='addRestrictionSiteBtn' />
120121
</div>
121122
<div class="margin-top-10">
122-
<ul id='restrictionsList' class="listbox" size="10"></ul>
123+
<ul id='restrictionsList' class="listbox list" size="10"></ul>
123124
</div>
124125
<div class="notify warning" id='notifyForRestrictionList' hidden>
125126
The site is already in the list
126127
</div>
127128
</div>
129+
<div id='notifyBlock' hidden>
130+
<label>List of sites with notifications: </label>
131+
<div class="tooltip"><img src="/icons/information.svg" height="18" />
132+
<span class="tooltiptext">Show notifications every time you spend a specified time interval on the site</span>
133+
</div>
134+
<div class="margin-top-10">
135+
<input type="text" class="label-with-list" placeholder="Enter site name..." id='addNotifySiteLbl' />
136+
<div class="inline-block clockpicker" data-placement="left" data-align="top" data-autoclose="true">
137+
<input type="text" class="clock" placeholder="Time..." readonly id="addNotifyTimeLbl">
138+
</div>
139+
<input type="button" class="btn-with-list" value="+" id='addNotifySiteBtn' />
140+
</div>
141+
<div class="margin-top-10">
142+
<ul id='notifyList' class="listbox list" size="10"></ul>
143+
</div>
144+
<div class="notify warning" id='notifyForNotifyList' hidden>
145+
The site is already in the notify list
146+
</div>
147+
</div>
128148
<div id='aboutBlock' hidden>
129149
<div><label id='version'></label></div>
130150
<div class="margin-top-20"><label>GitHub: <a href="https://github.com/Stigmatoz/web-activity-time-tracker"

‎src/scripts/common.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ var TypeListEnum = {
3030
var STORAGE_TABS = 'tabs';
3131
var STORAGE_BLACK_LIST = 'black_list';
3232
var STORAGE_RESTRICTION_LIST = 'restriction_list';
33+
var STORAGE_NOTIFICATION_LIST = 'notification_list';
3334
var STORAGE_TIMEINTERVAL_LIST = 'time_interval';
3435

3536
var SETTINGS_INTERVAL_INACTIVITY_DEFAULT = InactivityInterval.second30;

‎src/scripts/restriction.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,11 @@ class Restriction {
55
this.domain = domain;
66
this.time = convertTimeToSummaryTime(time);
77
}
8+
};
9+
10+
class Notification{
11+
constructor(domain, time) {
12+
this.domain = domain;
13+
this.time = convertTimeToSummaryTime(time);
14+
}
815
};

‎src/scripts/settings.js‎

Lines changed: 110 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
var storage = new LocalStorage();
22
var blackList = [];
33
var restrictionList = [];
4-
var blockBtnList = ['settingsBtn', 'restrictionsBtn', 'aboutBtn'];
5-
var blockList = ['settingsBlock', 'restrictionsBlock', 'aboutBlock'];
4+
var notifyList = [];
5+
var blockBtnList = ['settingsBtn', 'restrictionsBtn', 'notifyBtn', 'aboutBtn'];
6+
var blockList = ['settingsBlock', 'restrictionsBlock', 'notifyBlock', 'aboutBlock'];
7+
68

79
document.addEventListener('DOMContentLoaded', function () {
810
document.getElementById('settingsBtn').addEventListener('click', function () {
@@ -11,6 +13,9 @@ document.addEventListener('DOMContentLoaded', function () {
1113
document.getElementById('restrictionsBtn').addEventListener('click', function () {
1214
setBlockEvent('restrictionsBtn', 'restrictionsBlock');
1315
});
16+
document.getElementById('notifyBtn').addEventListener('click', function () {
17+
setBlockEvent('notifyBtn', 'notifyBlock');
18+
});
1419
document.getElementById('aboutBtn').addEventListener('click', function () {
1520
setBlockEvent('aboutBtn', 'aboutBlock');
1621
loadVersion();
@@ -22,10 +27,13 @@ document.addEventListener('DOMContentLoaded', function () {
2227
exportToCSV();
2328
});
2429
document.getElementById('addBlackSiteBtn').addEventListener('click', function () {
25-
addNewBlackSiteClickHandler();
30+
addNewSiteClickHandler('addBlackSiteLbl', null, actionAddBlackSiteToList, 'notifyForBlackList');
2631
});
2732
document.getElementById('addRestrictionSiteBtn').addEventListener('click', function () {
28-
addNewRestrictionSiteClickHandler();
33+
addNewSiteClickHandler('addRestrictionSiteLbl', 'addRestrictionTimeLbl', actionAddRectrictionToList, 'notifyForRestrictionList');
34+
});
35+
document.getElementById('addNotifySiteBtn').addEventListener('click', function () {
36+
addNewSiteClickHandler('addNotifySiteLbl', 'addNotifyTimeLbl', actionAddNotifyToList, 'notifyForNotifyList');
2937
});
3038
document.getElementById('viewTimeInBadge').addEventListener('change', function () {
3139
storage.saveValue(SETTINGS_VIEW_TIME_IN_BADGE, this.checked);
@@ -84,6 +92,12 @@ function loadSettings() {
8492
restrictionList = [];
8593
viewRestrictionList(items);
8694
});
95+
storage.getValue(STORAGE_NOTIFICATION_LIST, function (items) {
96+
notifyList = items;
97+
if (notifyList === undefined)
98+
notifyList = [];
99+
viewNotificationList(items);
100+
});
87101
checkPermissions();
88102
}
89103

@@ -128,10 +142,18 @@ function setUIForAnyPermission() {
128142
document.getElementById('grantPermission').setAttribute('disabled', 'true');
129143
}
130144

145+
function viewNotificationList(items){
146+
if (items !== undefined) {
147+
for (var i = 0; i < items.length; i++) {
148+
addDomainToEditableListBox(items[i], 'notifyList', actionEditSite, deleteNotificationSite, updateItemFromNotifyList, updateNotificationList);
149+
}
150+
}
151+
}
152+
131153
function viewRestrictionList(items) {
132154
if (items !== undefined) {
133155
for (var i = 0; i < items.length; i++) {
134-
addDomainToRestrictionListBox(items[i]);
156+
addDomainToEditableListBox(items[i], 'restrictionsList', actionEditSite, deleteRestrictionSite, updateItemFromResctrictoinList, updateRestrictionList);
135157
}
136158
}
137159
}
@@ -174,37 +196,60 @@ function viewNotify(elementName) {
174196
setTimeout(function () { document.getElementById(elementName).hidden = true; }, 3000);
175197
}
176198

177-
function addNewBlackSiteClickHandler() {
178-
var newBlackSite = document.getElementById('addBlackSiteLbl').value;
179-
if (newBlackSite !== '') {
180-
if (!isContainsBlackSite(newBlackSite)) {
181-
addDomainToListBox(newBlackSite);
182-
if (blackList === undefined)
183-
blackList = [];
184-
blackList.push(newBlackSite);
185-
document.getElementById('addBlackSiteLbl').value = '';
186-
187-
updateBlackList();
188-
} else viewNotify('notifyForBlackList');
189-
}
199+
function actionAddRectrictionToList(newSite, newTime) {
200+
if (!isContainsRestrictionSite(newSite)) {
201+
var restriction = new Restriction(newSite, newTime);
202+
addDomainToEditableListBox(restriction, 'restrictionsList', actionEditSite, deleteRestrictionSite, updateItemFromResctrictoinList, updateRestrictionList);
203+
if (restrictionList === undefined)
204+
restrictionList = [];
205+
restrictionList.push(restriction);
206+
document.getElementById('addRestrictionSiteLbl').value = '';
207+
document.getElementById('addRestrictionTimeLbl').value = '';
208+
209+
updateRestrictionList();
210+
211+
return true;
212+
} else return false;
190213
}
191214

192-
function addNewRestrictionSiteClickHandler() {
193-
var newRestrictionSite = document.getElementById('addRestrictionSiteLbl').value;
194-
var newRestrictionTime = document.getElementById('addRestrictionTimeLbl').value;
195-
if (newRestrictionSite !== '' && newRestrictionTime !== '') {
196-
if (!isContainsRestrictionSite(newRestrictionSite)) {
197-
var restriction = new Restriction(newRestrictionSite, newRestrictionTime);
198-
addDomainToRestrictionListBox(restriction);
199-
if (restrictionList === undefined)
200-
restrictionList = [];
201-
restrictionList.push(restriction);
202-
document.getElementById('addRestrictionSiteLbl').value = '';
203-
document.getElementById('addRestrictionTimeLbl').value = '';
204-
205-
updateRestrictionList();
206-
}
207-
else viewNotify('notifyForRestrictionList');
215+
function actionAddBlackSiteToList(newSite) {
216+
if (!isContainsBlackSite(newSite)) {
217+
addDomainToListBox(newSite);
218+
if (blackList === undefined)
219+
blackList = [];
220+
blackList.push(newSite);
221+
document.getElementById('addBlackSiteLbl').value = '';
222+
223+
updateBlackList();
224+
225+
return true;
226+
} else return false;
227+
}
228+
229+
function actionAddNotifyToList(newSite, newTime) {
230+
if (!isContainsNotificationSite(newSite)) {
231+
var notify = new Notification(newSite, newTime);
232+
addDomainToEditableListBox(notify, 'notifyList', actionEditSite, deleteNotificationSite, updateItemFromNotifyList, updateNotificationList);
233+
if (notifyList === undefined)
234+
notifyList = [];
235+
notifyList.push(notify);
236+
document.getElementById('addNotifySiteLbl').value = '';
237+
document.getElementById('addNotifyTimeLbl').value = '';
238+
239+
updateNotificationList();
240+
241+
return true;
242+
} else return false;
243+
}
244+
245+
function addNewSiteClickHandler(lblName, timeName, actionCheck, notifyBlock) {
246+
var newSite = document.getElementById(lblName).value;
247+
var newTime;
248+
if (timeName != null)
249+
newTime = document.getElementById(timeName).value;
250+
if (newSite !== '' && (newTime === undefined || (newTime !== undefined && newTime !== ''))) {
251+
if (!actionCheck(newSite, newTime))
252+
viewNotify(notifyBlock);
208253
}
209254
}
210255

@@ -220,13 +265,13 @@ function addDomainToListBox(domain) {
220265
document.getElementById('blackList').appendChild(li).appendChild(del);
221266
}
222267

223-
function addDomainToRestrictionListBox(resctiction) {
268+
function addDomainToEditableListBox(entity, elementId, actionEdit, actionDelete, actionUpdateTimeFromList, actionUpdateList){
224269
var li = document.createElement('li');
225270

226271
var domainLbl = document.createElement('input');
227272
domainLbl.type = 'text';
228-
domainLbl.classList.add('readonly-input', 'inline-block', 'restriction-item');
229-
domainLbl.value = resctiction.domain;
273+
domainLbl.classList.add('readonly-input', 'inline-block', 'element-item');
274+
domainLbl.value = entity.domain;
230275
domainLbl.readOnly = true;
231276
domainLbl.setAttribute('name', 'domain');
232277

@@ -235,15 +280,15 @@ function addDomainToRestrictionListBox(resctiction) {
235280
edit.height = 14;
236281
edit.src = '/icons/edit.png';
237282
edit.addEventListener('click', function (e) {
238-
editRestrictionSite(e);
283+
actionEdit(e, actionUpdateTimeFromList, actionUpdateList);
239284
});
240285

241286
var del = document.createElement('img');
242287
del.height = 12;
243288
del.src = '/icons/delete.png';
244289
del.classList.add('margin-left-5');
245290
del.addEventListener('click', function (e) {
246-
deleteRestrictionSite(e);
291+
actionDelete(e, actionUpdateTimeFromList, actionUpdateList);
247292
});
248293

249294
var bloc = document.createElement('div');
@@ -256,11 +301,11 @@ function addDomainToRestrictionListBox(resctiction) {
256301
timeInput.classList.add('clock', 'clock-li-readonly');
257302
timeInput.setAttribute('readonly', true);
258303
timeInput.setAttribute('name', 'time');
259-
timeInput.value = convertShortSummaryTimeToString(resctiction.time);
304+
timeInput.value = convertShortSummaryTimeToString(entity.time);
260305
bloc.appendChild(timeInput);
261306

262307
var hr = document.createElement('hr');
263-
var li = document.getElementById('restrictionsList').appendChild(li);
308+
var li = document.getElementById(elementId).appendChild(li);
264309
li.appendChild(domainLbl);
265310
li.appendChild(del);
266311
li.appendChild(edit);
@@ -284,7 +329,16 @@ function deleteRestrictionSite(e) {
284329
updateRestrictionList();
285330
}
286331

287-
function editRestrictionSite(e) {
332+
function deleteNotificationSite(e) {
333+
var targetElement = e.path[1];
334+
var itemValue = targetElement.querySelector("[name='domain']").value;
335+
var item = notifyList.find(x => x.domain == itemValue);
336+
notifyList.splice(notifyList.indexOf(item), 1);
337+
document.getElementById('notifyList').removeChild(targetElement);
338+
updateNotificationList();
339+
}
340+
341+
function actionEditSite(e, actionUpdateTimeFromList, actionUpdateList) {
288342
var targetElement = e.path[1];
289343
var domainElement = targetElement.querySelector('[name="domain"]');
290344
var timeElement = targetElement.querySelector('[name="time"]');
@@ -307,8 +361,8 @@ function editRestrictionSite(e) {
307361
var resultTime = convertShortSummaryTimeToString(convertTimeToSummaryTime(time));
308362
timeElement.value = resultTime;
309363

310-
updateItemFromResctrictoinList(domain, time);
311-
updateRestrictionList();
364+
actionUpdateTimeFromList(domain, time);
365+
actionUpdateList();
312366
}
313367
}
314368
}
@@ -317,6 +371,10 @@ function isContainsRestrictionSite(domain) {
317371
return restrictionList.find(x => x.domain == domain) != undefined;
318372
}
319373

374+
function isContainsNotificationSite(domain) {
375+
return notifyList.find(x => x.domain == domain) != undefined;
376+
}
377+
320378
function isContainsBlackSite(domain) {
321379
return blackList.find(x => x == domain) != undefined;
322380
}
@@ -325,10 +383,18 @@ function updateItemFromResctrictoinList(domain, time) {
325383
restrictionList.find(x => x.domain === domain).time = convertTimeToSummaryTime(time);
326384
}
327385

386+
function updateItemFromNotifyList(domain, time) {
387+
notifyList.find(x => x.domain === domain).time = convertTimeToSummaryTime(time);
388+
}
389+
328390
function updateBlackList() {
329391
storage.saveValue(STORAGE_BLACK_LIST, blackList);
330392
}
331393

332394
function updateRestrictionList() {
333395
storage.saveValue(STORAGE_RESTRICTION_LIST, restrictionList);
396+
}
397+
398+
function updateNotificationList() {
399+
storage.saveValue(STORAGE_NOTIFICATION_LIST, notifyList);
334400
}

‎src/style/settings.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -295,21 +295,21 @@ input[type="button"]:hover {
295295
width: 28px !important;
296296
}
297297

298-
#addRestrictionSiteLbl{
298+
.label-with-list{
299299
width: 333px;
300300
height: 15px;
301301
padding: 3px;
302302
}
303303

304-
#addRestrictionSiteBtn{
304+
.btn-with-list{
305305
height: 24px !important;
306306
line-height: 20px !important;
307307
padding: 0 5px !important;
308308
min-width: 20px !important;
309309
width: 28px !important;
310310
}
311311

312-
#restrictionsList{
312+
.list{
313313
width: 440px;
314314
height: 250px;
315315
}
@@ -339,7 +339,7 @@ input[type="button"]:hover {
339339
display: block;
340340
}
341341

342-
.restriction-item{
342+
.element-item{
343343
width: 380px;
344344
font-weight: 600;
345345
}

‎src/style/webact.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ a{
152152

153153
border-bottom: 2px solid rgb(195, 194, 194);
154154
background: transparent;
155-
width: 19%;
155+
width: 20%;
156156
}
157157

158158
a:hover {
@@ -351,7 +351,7 @@ p.table-header{
351351
}
352352

353353
.button{
354-
width: 40%;
354+
width: 42%;
355355
background-color: white;
356356
color: rgb(195, 194, 194);
357357
border: 2px solid rgb(209, 207, 207);

0 commit comments

Comments
 (0)