Skip to content

Commit b546ab3

Browse files
StigmatozStigmatoz
committed
Add/remove limits
1 parent 408e7c2 commit b546ab3

File tree

7 files changed

+204
-50
lines changed

7 files changed

+204
-50
lines changed

‎src/components/Limits.vue‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
<template>
2+
<div>
3+
<p class="setting-header mt-0">Daily restrictions on access to websites:</p>
4+
<p class="descrition">
5+
Set the maximum time allowed to visit the site per day. After this time, the site will be
6+
blocked.
7+
</p>
8+
<ul readonly class="url-list">
9+
<li v-for="(limit, i) of limitList" :key="i">
10+
<div>
11+
<img
12+
src="../assets/icons/delete.png"
13+
height="16"
14+
@click="deleteFromLimitList(limit.domain)"
15+
/>
16+
{{ limit.domain }}
17+
<p class="time-value">{{ getTimeForLimit(limit.time) }}</p>
18+
</div>
19+
</li>
20+
</ul>
21+
<div class="limits-time-block mt-20">
22+
<input
23+
type="text"
24+
class="d-inline-block height"
25+
placeholder="Enter website name..."
26+
v-model="newWebsiteForLimitList"
27+
/>
28+
<VueDatePicker v-model="time" time-picker class="date-picker height" />
29+
<input
30+
type="button"
31+
class="d-inline-block small-btn height"
32+
value="Add Website"
33+
:disabled="newWebsiteForLimitList == null || newWebsiteForLimitList == '' || time == null"
34+
@click="addToLimitList()"
35+
/>
36+
</div>
37+
</div>
38+
</template>
39+
40+
<script lang="ts">
41+
export default {
42+
name: 'Limits',
43+
};
44+
</script>
45+
46+
<script lang="ts" setup>
47+
import { onMounted, ref } from 'vue';
48+
import { useNotification } from '@kyvg/vue3-notification';
49+
import { injecStorage } from '../storage/inject-storage';
50+
import { StorageParams } from '../storage/storage-params';
51+
import { isDomainEquals } from '../utils/common';
52+
import { extractHostname } from '../compositions/extract-hostname';
53+
import { Restriction } from '../entity/restriction';
54+
import { convertSecondsToHHMM } from '../utils/converter';
55+
import { Time } from '../utils/time';
56+
57+
const notification = useNotification();
58+
59+
const settingsStorage = injecStorage();
60+
61+
const limitList = ref<Restriction[]>();
62+
const time = ref({
63+
hours: 0,
64+
minutes: 30,
65+
});
66+
const newWebsiteForLimitList = ref<string>();
67+
68+
onMounted(async () => {
69+
limitList.value = Object.values(
70+
await settingsStorage.getValue(StorageParams.RESTRICTION_LIST, []),
71+
);
72+
});
73+
74+
function addToLimitList() {
75+
const existingItem = limitList.value?.find(x =>
76+
isDomainEquals(extractHostname(x.domain), extractHostname(newWebsiteForLimitList.value!)),
77+
);
78+
if (existingItem !== undefined) {
79+
notification.notify({
80+
title: 'You have already added this site',
81+
type: 'error',
82+
});
83+
} else {
84+
const newLimit = new Restriction(
85+
extractHostname(newWebsiteForLimitList.value!),
86+
time.value.hours,
87+
time.value.minutes,
88+
);
89+
limitList.value?.push(newLimit);
90+
save(limitList.value);
91+
newWebsiteForLimitList.value = '';
92+
}
93+
}
94+
95+
function getTimeForLimit(time: number) {
96+
const timeObj = convertSecondsToHHMM(time);
97+
return `${timeObj.hours}:${timeObj.minutes < 10 ? '0' + timeObj.minutes : timeObj.minutes}`;
98+
}
99+
100+
function deleteFromLimitList(url: string) {
101+
limitList.value = limitList.value!.filter(x => x.domain != url);
102+
save(limitList.value);
103+
}
104+
105+
async function save(value: any) {
106+
if (value != undefined) await settingsStorage.saveValue(StorageParams.RESTRICTION_LIST, value);
107+
}
108+
</script>
109+
110+
<style scoped>
111+
.about .about-label {
112+
font-size: 14px;
113+
margin-bottom: 30px;
114+
display: block;
115+
}
116+
117+
.limits-time-block {
118+
display: flex;
119+
justify-content: start;
120+
}
121+
122+
.limits-time-block .date-picker {
123+
width: 120px;
124+
margin: 0 15px;
125+
}
126+
127+
.height {
128+
height: 36px;
129+
}
130+
131+
.url-list {
132+
width: 655px !important;
133+
}
134+
135+
.url-list .time-value {
136+
margin-top: 5px;
137+
margin-left: 30px;
138+
}
139+
</style>

‎src/components/WhiteList.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,18 +64,18 @@ function addToWhiteList() {
6464
} else {
6565
const newWebsite = extractHostname(newWebsiteForWhiteList.value!);
6666
whiteList.value?.push(newWebsite);
67-
save(StorageParams.BLACK_LIST, whiteList.value);
67+
save(whiteList.value);
6868
newWebsiteForWhiteList.value = '';
6969
}
7070
}
7171
7272
function deleteFromWhiteList(url: string) {
7373
whiteList.value = whiteList.value!.filter(x => x != url);
74-
save(StorageParams.BLACK_LIST, whiteList.value);
74+
save(whiteList.value);
7575
}
7676
77-
async function save(storageParam: StorageParams, value: any) {
78-
if (value != undefined) await settingsStorage.saveValue(storageParam, value);
77+
async function save(value: any) {
78+
if (value != undefined) await settingsStorage.saveValue(StorageParams.BLACK_LIST, value);
7979
}
8080
</script>
8181

‎src/compositions/limit-list.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ export async function isLimitExceeded(url: string, tab: Tab): Promise<boolean> {
88
const limitList = (await Settings.getInstance().getSetting(
99
StorageParams.RESTRICTION_LIST,
1010
)) as Restriction[];
11-
const item = limitList?.find(x => x.domain == url);
11+
const array = Object.values(limitList);
12+
const item = array?.find(x => x.domain == url);
1213
if (item != undefined) {
1314
const date = tab.days.find(x => x.date == todayLocalDate());
1415
if (date != undefined) {

‎src/entity/restriction.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import { convertStringTimeToSummaryTime } from "../utils/converter";
1+
import { convertHHMMToSeconds } from '../utils/converter';
22

33
export class Restriction {
4-
domain: string;
5-
time: number;
4+
domain: string;
5+
time: number;
66

7-
constructor(domain: string, time: string) {
8-
this.domain = domain;
9-
this.time = convertStringTimeToSummaryTime(time);
10-
}
11-
}
7+
constructor(domain: string, hours: number, minutes: number) {
8+
this.domain = domain;
9+
this.time = convertHHMMToSeconds(hours, minutes);
10+
}
11+
}

‎src/pages/Dashboard.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@
8181
import { onMounted, ref } from 'vue';
8282
import GeneralSettings from '../components/GeneralSettings.vue';
8383
import WhiteList from '../components/WhiteList.vue';
84+
import Limits from '../components/Limits.vue';
8485
import About from '../components/About.vue';
8586
import { SettingsTab } from '../utils/enums';
8687

‎src/utils/converter.ts‎

Lines changed: 45 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,54 @@
1-
export function convertStringTimeToSummaryTime(time: string) {
2-
const timeValue = time.split(':');
3-
const hour = Number(timeValue[0]);
4-
const min = Number(timeValue[1]);
5-
let resultTimeValue = 0;
6-
if (hour > 0)
7-
resultTimeValue = hour * 3600;
8-
resultTimeValue += min * 60;
9-
10-
return resultTimeValue;
1+
import { min } from 'date-fns';
2+
import { Time } from './time';
3+
4+
export function convertHHMMToSeconds(hours: number, minutes: number) {
5+
return hours * 3600 + minutes * 60;
116
}
127

13-
export function convertSummaryTimeToBadgeString(summaryTime: number): string {
14-
const sec = summaryTime;
15-
const min = Number((summaryTime / 60).toFixed(0));
16-
const hours = Number((summaryTime / (60 * 60)).toFixed(1));
8+
export function convertSecondsToHHMM(seconds: number): Time {
9+
const hours = Math.floor(seconds / 3600);
10+
const totalSeconds = seconds % 3600;
11+
const mins = Math.floor(totalSeconds / 60);
1712

18-
if (sec < 60) return `${sec}s`;
19-
else if (min < 60) return `${min}m`;
20-
else return `${hours}h`;
13+
return {
14+
hours: hours,
15+
minutes: mins,
16+
};
2117
}
2218

23-
export function convertSummaryTimeToString(summaryTime:number) {
24-
let days = Math.floor(summaryTime / 3600 / 24);
25-
const totalHours = summaryTime % (3600 * 24);
26-
let hours = Math.floor(totalHours / 3600);
27-
const totalSeconds = summaryTime % 3600;
28-
let mins = Math.floor(totalSeconds / 60);
29-
let seconds = totalSeconds % 60;
30-
31-
hours = zeroAppend(hours);
32-
mins = zeroAppend(mins);
33-
seconds = zeroAppend(seconds);
19+
export function convertSummaryTimeToBadgeString(summaryTime: number): string {
20+
const sec = summaryTime;
21+
const min = Number((summaryTime / 60).toFixed(0));
22+
const hours = Number((summaryTime / (60 * 60)).toFixed(1));
3423

35-
function appendTime(value:number, stringPrefix:string){
36-
return value > 0 ? `${value} ${stringPrefix}` : '';
37-
}
24+
if (sec < 60) return `${sec}s`;
25+
else if (min < 60) return `${min}m`;
26+
else return `${hours}h`;
27+
}
3828

39-
return `${appendTime(days, 'd')} ${appendTime(hours, 'h')} ${appendTime(mins, 'm')} ${appendTime(seconds, 's')}`;
29+
export function convertSummaryTimeToString(summaryTime: number) {
30+
let days = Math.floor(summaryTime / 3600 / 24);
31+
const totalHours = summaryTime % (3600 * 24);
32+
let hours = Math.floor(totalHours / 3600);
33+
const totalSeconds = summaryTime % 3600;
34+
let mins = Math.floor(totalSeconds / 60);
35+
let seconds = totalSeconds % 60;
36+
37+
hours = zeroAppend(hours);
38+
mins = zeroAppend(mins);
39+
seconds = zeroAppend(seconds);
40+
41+
function appendTime(value: number, stringPrefix: string) {
42+
return value > 0 ? `${value} ${stringPrefix}` : '';
43+
}
44+
45+
return `${appendTime(days, 'd')} ${appendTime(hours, 'h')} ${appendTime(mins, 'm')} ${appendTime(
46+
seconds,
47+
's',
48+
)}`;
4049
}
4150

42-
function zeroAppend(time:number) {
43-
if (time < 10)
44-
return Number('0' + time);
45-
else return time;
46-
}
51+
function zeroAppend(time: number) {
52+
if (time < 10) return Number('0' + time);
53+
else return time;
54+
}

‎src/utils/time.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
import { getToday } from './date';
22

3+
export type Time = {
4+
hours: number;
5+
minutes: number;
6+
};
7+
38
//Every day - 60 minutes * 24 hours
49
export const DAY_MINUTES = 1440;
510

0 commit comments

Comments
 (0)