Skip to content

Commit b162d19

Browse files
StigmatozStigmatoz
committed
UI and functionality
1 parent 4046368 commit b162d19

File tree

6 files changed

+175
-7
lines changed

6 files changed

+175
-7
lines changed

‎src/assets/css/dashboard.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ body {
4949
margin-left: 10px;
5050
}
5151

52-
input[type='text'] {
52+
input[type='number'],input[type='text'] {
5353
height: 36px;
5454
padding: 0 0 0 5px;
5555
width: 400px;

‎src/assets/css/general.css‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,9 @@
2929
.mb-20 {
3030
margin-bottom: 20px;
3131
}
32+
.ml-5 {
33+
margin-left: 5px;
34+
}
3235
.ml-10 {
3336
margin-left: 10px;
3437
}
@@ -57,6 +60,10 @@
5760
text-align: center;
5861
}
5962

63+
.mt-10 {
64+
margin-top: 10px;
65+
}
66+
6067
.mt-15 {
6168
margin-top: 15px;
6269
}
@@ -67,7 +74,7 @@ select {
6774
.w-100 {
6875
width: 100%;
6976
}
70-
input[type='button'] {
77+
button, input[type='button'] {
7178
background: #428bff;
7279
color: #fff;
7380
border-radius: 3px;
@@ -83,22 +90,22 @@ input[type='button'] {
8390
width: 200px;
8491
}
8592

86-
input[type='button']:hover {
93+
button, input[type='button']:hover {
8794
background: #5c9dfe;
8895
text-decoration: none;
8996
}
9097

91-
input[type='button'].alert {
98+
button, input[type='button'].alert {
9299
background: #fe5c5c !important;
93100
}
94101

95-
input[type='button'].info {
102+
button, input[type='button'].info {
96103
background: #ffffff !important;
97104
color: black;
98105
border: 1px solid black;
99106
}
100107

101-
input[type='button'][disabled] {
108+
button, input[type='button'][disabled] {
102109
border: 1px solid #999999;
103110
background-color: #cccccc;
104111
color: #666666;

‎src/components/Pomodoro.vue‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<template>
2+
<p class="title mt-0">{{ t('pomodoro.message') }}</p>
3+
<p class="description">
4+
{{ t('pomodoro.description') }}
5+
</p>
6+
<div class="pomodoro-block mt-20">
7+
<p class="title">{{ t('pomodoroWork.message') }}</p>
8+
<VueDatePicker v-model="workTime" time-picker class="date-picker" />
9+
</div>
10+
<div class="pomodoro-block">
11+
<p class="title">{{ t('pomodoroRest.message') }}</p>
12+
<VueDatePicker v-model="restTime" time-picker class="date-picker" />
13+
</div>
14+
<div class="pomodoro-block">
15+
<p class="title">{{ t('pomodoroFrequency.message') }}</p>
16+
<input type="number" class="frequency" v-model="frequency" />
17+
</div>
18+
<button
19+
class="d-inline-block mt-15"
20+
:class="isEnabled ? 'stop' : 'start'"
21+
@click="changeStatus()"
22+
>
23+
<img v-if="isEnabled" class="ml-5" src="../assets/icons/stop.svg" height="20" />
24+
<img v-if="!isEnabled" class="ml-5" src="../assets/icons/start.svg" height="22" />
25+
{{ !isEnabled ? t('start.message') : t('stop.message') }}
26+
</button>
27+
</template>
28+
29+
<script lang="ts"></script>
30+
31+
<script lang="ts" setup>
32+
import { onMounted, ref } from 'vue';
33+
import { convertHHMMToSeconds, convertSecondsToHHMM } from '../utils/converter';
34+
import { useI18n } from 'vue-i18n';
35+
import { injecStorage } from '../storage/inject-storage';
36+
import {
37+
IS_POMODORO_ENABLED_DEFAULT,
38+
POMODORO_FREQUENCY_DEFAULT,
39+
POMODORO_INTERVAL_REST_DEFAULT,
40+
POMODORO_INTERVAL_WORK_DEFAULT,
41+
StorageParams,
42+
} from '../storage/storage-params';
43+
import { Time } from '../utils/time';
44+
import { logger } from '../utils/logger';
45+
46+
const { t } = useI18n();
47+
const settingsStorage = injecStorage();
48+
49+
const workTime = ref<Time>({
50+
hours: 0,
51+
minutes: 25,
52+
});
53+
const restTime = ref<Time>({
54+
hours: 0,
55+
minutes: 5,
56+
});
57+
const frequency = ref<number>(3);
58+
const isEnabled = ref<boolean>();
59+
60+
onMounted(async () => {
61+
isEnabled.value = await settingsStorage.getValue(
62+
StorageParams.IS_POMODORO_ENABLED,
63+
IS_POMODORO_ENABLED_DEFAULT,
64+
);
65+
workTime.value = convertSecondsToHHMM(
66+
await settingsStorage.getValue(
67+
StorageParams.POMODORO_INTERVAL_WORK,
68+
POMODORO_INTERVAL_WORK_DEFAULT,
69+
),
70+
);
71+
restTime.value = convertSecondsToHHMM(
72+
await settingsStorage.getValue(
73+
StorageParams.POMODORO_INTERVAL_REST,
74+
POMODORO_INTERVAL_REST_DEFAULT,
75+
),
76+
);
77+
frequency.value = await settingsStorage.getValue(
78+
StorageParams.POMODORO_FREQUENCY,
79+
POMODORO_FREQUENCY_DEFAULT,
80+
);
81+
});
82+
83+
async function changeStatus() {
84+
await settingsStorage.saveValue(StorageParams.IS_POMODORO_ENABLED, !isEnabled.value);
85+
await settingsStorage.saveValue(
86+
StorageParams.POMODORO_INTERVAL_WORK,
87+
convertHHMMToSeconds(workTime.value.hours, workTime.value.minutes),
88+
);
89+
await settingsStorage.saveValue(
90+
StorageParams.POMODORO_INTERVAL_REST,
91+
convertHHMMToSeconds(restTime.value.hours, restTime.value.minutes),
92+
);
93+
await settingsStorage.saveValue(StorageParams.POMODORO_START_TIME, new Date());
94+
await settingsStorage.saveValue(StorageParams.POMODORO_FREQUENCY, frequency.value);
95+
96+
isEnabled.value = !isEnabled.value;
97+
98+
logger.log(`Change pomodoro status to ${String(isEnabled.value).toUpperCase()}`);
99+
}
100+
</script>
101+
102+
<style scoped>
103+
.pomodoro-block {
104+
display: flex;
105+
justify-content: start;
106+
}
107+
.date-picker {
108+
width: 120px;
109+
margin: 0 15px;
110+
vertical-align: center;
111+
padding: 10px 0;
112+
}
113+
.frequency {
114+
width: 50px;
115+
padding: 5px 10px;
116+
height: 20px;
117+
margin: auto 0;
118+
margin-left: 15px;
119+
}
120+
.blocked {
121+
display: inline-block;
122+
font-size: 13px;
123+
color: gray;
124+
margin-left: 55px;
125+
margin-top: 5px;
126+
}
127+
button {
128+
color: white !important;
129+
border: none;
130+
}
131+
button.start {
132+
background-color: rgb(62, 148, 62) !important;
133+
}
134+
button.stop {
135+
background-color: rgb(191, 59, 59) !important;
136+
}
137+
</style>

‎src/storage/storage-params.ts‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Tab } from '../entity/tab';
22
import { TimeInterval } from '../entity/time-interval';
3-
import { HOUR } from '../utils/time';
3+
import { HOUR, MINUTE_IN_SECONDS } from '../utils/time';
44

55
export enum StorageParams {
66
BLACK_LIST = 'black_list',
@@ -20,6 +20,11 @@ export enum StorageParams {
2020
INSTALL_DATE = 'install-date',
2121
PROMO_CLEAR_YOUTUBE_ON_LIMITS = 'promo-clear-youtube-on-limits',
2222
PROMO_CLEAR_YOUTUBE_ON_BLOCK = 'promo-clear-youtube-on-block',
23+
IS_POMODORO_ENABLED = 'is-pomodoro-enabled',
24+
POMODORO_START_TIME = 'pomodoro-start-time',
25+
POMODORO_INTERVAL_WORK = 'pomodoro-interval-work',
26+
POMODORO_INTERVAL_REST = 'pomodoro-interval-rest',
27+
POMODORO_FREQUENCY = 'pomodoro-frequency',
2328
}
2429

2530
export enum StorageDeserializeParam {
@@ -63,6 +68,10 @@ export const DAILY_SUMMARY_NOTIFICATION_TIME_DEFAULT = (20 * HOUR) / 1000;
6368
export const DAILY_NOTIFICATION_DEFAULT = true;
6469
export const SHOW_CHANGELOG_DEFAULT = false;
6570
export const SHOW_PROMO_CLEAR_YOUTUBE_DEFAULT = false;
71+
export const IS_POMODORO_ENABLED_DEFAULT = false;
72+
export const POMODORO_INTERVAL_WORK_DEFAULT = 25 * MINUTE_IN_SECONDS;
73+
export const POMODORO_INTERVAL_REST_DEFAULT = 5 * MINUTE_IN_SECONDS;
74+
export const POMODORO_FREQUENCY_DEFAULT = 3;
6675

6776
export function getDefaultValue(param: StorageParams) {
6877
switch (param) {
@@ -93,5 +102,13 @@ export function getDefaultValue(param: StorageParams) {
93102
case StorageParams.PROMO_CLEAR_YOUTUBE_ON_BLOCK:
94103
case StorageParams.PROMO_CLEAR_YOUTUBE_ON_LIMITS:
95104
return SHOW_PROMO_CLEAR_YOUTUBE_DEFAULT;
105+
case StorageParams.IS_POMODORO_ENABLED:
106+
return IS_POMODORO_ENABLED_DEFAULT;
107+
case StorageParams.POMODORO_INTERVAL_WORK:
108+
return POMODORO_INTERVAL_WORK_DEFAULT;
109+
case StorageParams.POMODORO_INTERVAL_REST:
110+
return POMODORO_INTERVAL_REST_DEFAULT;
111+
case StorageParams.POMODORO_FREQUENCY:
112+
return POMODORO_FREQUENCY_DEFAULT;
96113
}
97114
}

‎src/tracker.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { Settings } from './functions/settings';
1616
import { useNotificationList } from './functions/useNotificationList';
1717
import { NotificationType, useNotification } from './functions/useNotification';
1818
import { Messages } from './utils/messages';
19+
import { checkPomodoro } from './functions/pomodoro';
1920

2021
const activeTabInstance = ActiveTab.getInstance();
2122

@@ -39,6 +40,8 @@ async function trackTime() {
3940
if (isValidPage(activeTab)) {
4041
const activeDomain = extractHostname(activeTab!.url);
4142

43+
await checkPomodoro();
44+
4245
if (await isInBlackList(activeDomain)) {
4346
await useBadge({
4447
tabId: activeTab?.id,

‎src/utils/time.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,3 +29,7 @@ export function daysBetween(startDate: Date, endDate: Date): number {
2929
const millisecondsPerDay = 24 * 60 * 60 * 1000;
3030
return (treatAsUTC(endDate).valueOf() - treatAsUTC(startDate).valueOf()) / millisecondsPerDay + 1;
3131
}
32+
33+
export function timeToSeconds(time: Time) {
34+
return time.hours * HOUR_IN_SECONDS + time.minutes * MINUTE_IN_SECONDS;
35+
}

0 commit comments

Comments
 (0)