Skip to content

Commit ca5cd13

Browse files
StigmatozStigmatoz
committed
White list in settings
1 parent c74eb02 commit ca5cd13

File tree

7 files changed

+111
-58
lines changed

7 files changed

+111
-58
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"script:zip": "powershell scripts/zip.ps1"
1111
},
1212
"dependencies": {
13+
"@kyvg/vue3-notification": "^2.9.1",
1314
"chart.js": "^4.3.0",
1415
"date-fns": "^2.30.0",
1516
"vue": "^3.2.47",

‎pnpm-lock.yaml‎

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/assets/css/general.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,12 @@
44
.d-inline-block {
55
display: inline-block;
66
}
7+
.mt-0{
8+
margin-top: 0;
9+
}
10+
.mt-20{
11+
margin-top: 20px;
12+
}
713
.ml-10 {
814
margin-left: 10px;
915
}

‎src/assets/css/settings.css‎

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,35 @@ body {
2323
font-size: 13px;
2424
color: grey;
2525
margin: 7px 0 15px 0;
26+
font-weight: normal;
27+
}
28+
29+
.url-list{
30+
border-radius: 3px;
31+
border: 1px solid #ccc;
32+
width: 515px;
33+
min-height: 150px;
34+
cursor: pointer;
35+
list-style: none;
36+
padding:10px
37+
}
38+
39+
.url-list li{
40+
line-height: 20px;
41+
font-size: 13px;
42+
}
43+
44+
input[type="text"]{
45+
height: 32px;
46+
padding: 0 0 0 5px;
47+
width: 400px;
48+
border-radius: 3px;
49+
border: 1px solid #ccc;
50+
}
51+
52+
input[type="button"].small-btn{
53+
padding: 0 5px;
54+
width: 120px;
2655
}
2756

2857
.option {
@@ -155,7 +184,7 @@ label{
155184
}
156185

157186
input[type="button"]{
158-
background: #3477db;
187+
background: #428bff;
159188
color: #fff;
160189
border-radius: 3px;
161190
height: 35px;
@@ -292,7 +321,7 @@ input[type="button"]:hover {
292321
background: white;
293322
right: 0;
294323
bottom: 0;
295-
padding: 20px;
324+
padding: 10px 20px;
296325
}
297326
.content {
298327
opacity: 0;

‎src/components/ByDays.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
No data
88
</div>
99
<div v-else-if="noData">
10-
<div class="no-data">No data for selected period</div>
10+
<div class="no-data">No data for the selected period</div>
1111
</div>
1212
<div v-else>
1313
<div class="stats-block block">

‎src/pages/Settings.vue‎

Lines changed: 58 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<template>
2+
<notifications position="bottom right" />
23
<div class="container">
34
<div class="header">
45
<p class="title">Web Activity Time Tracker - Settings</p>
@@ -41,7 +42,7 @@
4142
<label class="setting-header">
4243
<input type="checkbox" class="filled-in" id="darkMode" v-model="darkMode" />
4344
<span>Dark mode</span>
44-
<p class="description"></p>
45+
<p class="description">Dark theme</p>
4546
</label>
4647
</div>
4748
<div class="settings-item">
@@ -62,46 +63,6 @@
6263
</div>
6364
<p class="description">These are any actions with the mouse or keyboard</p>
6465
</div>
65-
<!-- <div class="margin-top-10">
66-
<label class="setting-header">Default range for days:</label>
67-
</div>
68-
<div class="margin-top-10">
69-
<select id="rangeToDays" class="option">
70-
<option value="days2">2 days</option>
71-
<option value="days3">3 days</option>
72-
<option value="days4">4 days</option>
73-
<option value="days5">5 days</option>
74-
<option value="days6">6 days</option>
75-
<option value="days7">7 days</option>
76-
<option value="month1">1 month</option>
77-
<option value="month2">2 month</option>
78-
<option value="month3">3 month</option>
79-
</select>
80-
</div>
81-
<br />
82-
<div class="margin-top-10">
83-
<br />
84-
<div class="margin-top-10">
85-
<input type="button" value="Backup" id="backup" />
86-
<input type="button" value="Restore" id="restore" />
87-
<input id="file-input-backup" class="hidden" type="file" name="backupFile" />
88-
</div>
89-
<div class="notify" id="notify-backup" hidden>Backup completed successfully</div>
90-
<div class="notify" id="notify-restore" hidden>Restore completed successfully</div>
91-
<div class="notify warning" id="notify-restore-failed" hidden>
92-
Backup file is not valid
93-
</div>
94-
<div class="notify warning" id="notify-periodic-save-failed" hidden>
95-
Please select hour and minute
96-
</div>
97-
<div class="notify" id="notify-periodic-saved" hidden>Saved!</div>
98-
<br />
99-
<div class="margin-top-10">
100-
<input type="button" value="Clear all data" id="clearAllData" />
101-
</div>
102-
<div class="notify" id="notify" hidden>Data successfully deleted</div>
103-
</div>
104-
</div> -->
10566
</div>
10667
</div>
10768

@@ -110,26 +71,44 @@
11071
<label for="tab-whitelist">White List</label>
11172

11273
<div class="content">
113-
<span>tabik 123123</span>
74+
<div>
75+
<p class="setting-header mt-0">
76+
Activity and time for these domains will not be tracked
77+
</p>
78+
<ul readonly class="url-list">
79+
<li v-for="(url, i) of whiteList" :key="i">{{ url }}</li>
80+
</ul>
81+
<div class="mt-20">
82+
<input
83+
type="text"
84+
class="d-inline-block"
85+
placeholder="Enter website name..."
86+
v-model="newWebsiteForWhiteList"
87+
/>
88+
<input
89+
type="button"
90+
class="d-inline-block small-btn ml-10"
91+
value="Add Website"
92+
:disabled="newWebsiteForWhiteList == null || newWebsiteForWhiteList == ''"
93+
@click="addWebsite()"
94+
/>
95+
</div>
96+
</div>
11497
</div>
11598
</div>
11699

117100
<div class="tab">
118101
<input type="radio" id="tab-limits" name="tab-settings" />
119102
<label for="tab-limits">Limits</label>
120103

121-
<div class="content">
122-
<span>tabik 3</span>
123-
</div>
104+
<div class="content"></div>
124105
</div>
125106

126107
<div class="tab">
127108
<input type="radio" id="tab-notifications" name="tab-settings" />
128109
<label for="tab-notifications">Notifications</label>
129110

130-
<div class="content">
131-
<span>tabik 4</span>
132-
</div>
111+
<div class="content"></div>
133112
</div>
134113

135114
<div class="tab about">
@@ -173,6 +152,7 @@
173152

174153
<script lang="ts" setup>
175154
import { watchEffect, onMounted, ref } from 'vue';
155+
import { useNotification } from '@kyvg/vue3-notification';
176156
import {
177157
BLOCK_DEFERRAL_DEFAULT,
178158
DARK_MODE_DEFAULT,
@@ -182,14 +162,22 @@ import {
182162
} from '../storage/storage-params';
183163
import { injecStorage } from '../storage/inject-storage';
184164
import { InactivityInterval } from '../storage/storage-params';
165+
import { isInBlackList } from '../compositions/black-list';
166+
import { isDomainEquals } from '../utils/common';
167+
import { extractHostname } from '../compositions/extract-hostname';
168+
169+
const notification = useNotification();
185170
186171
const settingsStorage = injecStorage();
187172
188173
const viewTimeInBadge = ref<boolean>();
189174
const intervalInactivity = ref<InactivityInterval>();
190175
const allowDeferringBlock = ref<boolean>();
176+
const whiteList = ref<string[]>();
191177
const darkMode = ref<boolean>();
192178
179+
const newWebsiteForWhiteList = ref<string>();
180+
193181
onMounted(async () => {
194182
viewTimeInBadge.value = await settingsStorage.getValue(
195183
StorageParams.VIEW_TIME_IN_BADGE,
@@ -204,15 +192,31 @@ onMounted(async () => {
204192
StorageParams.BLOCK_DEFERRAL,
205193
BLOCK_DEFERRAL_DEFAULT,
206194
);
195+
whiteList.value = await settingsStorage.getValue(StorageParams.BLACK_LIST, []);
207196
});
208197
209-
watchEffect(() => save(StorageParams.VIEW_TIME_IN_BADGE, viewTimeInBadge.value));
210-
watchEffect(() => save(StorageParams.INTERVAL_INACTIVITY, intervalInactivity.value));
211-
watchEffect(() => save(StorageParams.DARK_MODE, darkMode.value));
212-
watchEffect(() => save(StorageParams.BLOCK_DEFERRAL, allowDeferringBlock.value));
198+
watchEffect(async () => await save(StorageParams.VIEW_TIME_IN_BADGE, viewTimeInBadge.value));
199+
watchEffect(async () => await save(StorageParams.INTERVAL_INACTIVITY, intervalInactivity.value));
200+
watchEffect(async () => await save(StorageParams.DARK_MODE, darkMode.value));
201+
watchEffect(async () => await save(StorageParams.BLOCK_DEFERRAL, allowDeferringBlock.value));
202+
watchEffect(async () => await save(StorageParams.BLACK_LIST, whiteList.value));
203+
204+
async function save(storageParam: StorageParams, value: any) {
205+
await settingsStorage.saveValue(storageParam, value);
206+
}
213207
214-
function save(storageParam: StorageParams, value: any) {
215-
settingsStorage.saveValue(storageParam, value);
208+
async function addWebsite() {
209+
const existingItem = whiteList.value?.find(x =>
210+
isDomainEquals(extractHostname(x), extractHostname(newWebsiteForWhiteList.value!)),
211+
);
212+
if (existingItem !== undefined) {
213+
notification.notify({
214+
title: 'You have already added this site',
215+
type: 'error',
216+
});
217+
} else {
218+
whiteList.value?.push(newWebsiteForWhiteList.value!);
219+
}
216220
}
217221
</script>
218222

‎src/settings.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
import Settings from './pages/Settings.vue';
2+
import Notifications from '@kyvg/vue3-notification';
23
import { createApp } from 'vue';
34

4-
createApp(Settings).mount('body');
5+
const app = createApp(Settings);
6+
app.use(Notifications);
7+
app.mount('body');

0 commit comments

Comments
 (0)