diff --git a/src/_locales/de/messages.json b/src/_locales/de/messages.json index fc89df6..b3a4408 100644 --- a/src/_locales/de/messages.json +++ b/src/_locales/de/messages.json @@ -114,7 +114,7 @@ "message": "Im letzten Monat" }, "generalSettings": { - "message": "Grundlegende Einstellungen" + "message": "Einstellungen" }, "whiteListSettings": { "message": "Weiße Liste" @@ -130,7 +130,7 @@ }, "viewTimeInBadge": { "message": "Zeitindikator anzeigen", - "description": "Sie können die aktuellen Informationen zur verbrauchten Zeit im Kurzformat auf dem Erweiterungssymbol anzeigen" + "description": "Sie können die aktuellen Informationen zur \"verbrauchten Zeit\" im Kurzformat anzeigen" }, "deferringDescription": { "message": "Sie können die Sperre nur einmal während des Tages um 5 Minuten verschieben" @@ -194,7 +194,7 @@ "description": "Dieser Text wird in der Benachrichtigung für Websites angezeigt" }, "notificationTimeSetting": { - "message": "Zeigt eine Benachrichtigung an, die eine Zusammenfassung Ihrer täglichen Nutzung enthält" + "message": "Benachrichtigungszeit mit zusammenfassenden Informationen zur täglichen Nutzung" }, "github": { "message": "Wenn Sie eine Frage haben oder ein Problem melden möchten, können Sie dies tun" @@ -225,5 +225,11 @@ }, "mostVisited": { "message": "Die meistbesuchte Website " + }, + "dashboard": { + "message": "Dashboard" + }, + "timeChartDescription": { + "message": "Dies ist eine stundenweise Zeitleiste für den Tag" } } diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json index 0043047..8becda8 100644 --- a/src/_locales/en/messages.json +++ b/src/_locales/en/messages.json @@ -114,7 +114,7 @@ "message": "Last month" }, "generalSettings": { - "message": "General Settings" + "message": "Settings" }, "whiteListSettings": { "message": "WhiteList" @@ -137,10 +137,10 @@ }, "allowDeferringBlock": { "message": "Allow deferring block for 5 minutes", - "description": "After the site is blocked, you can postpone the blocking for 5 minutes once during the day" + "description": "After the site is blocked, you can postpone the blocking for 5 minutes during the day only once" }, "intervalInactivity": { - "message": "Stop the tracker if there is no action during:", + "message": "Stop the tracker if there is no action for", "description": "These are any actions with the mouse or keyboard" }, "exportToCsvSetting": { @@ -172,8 +172,8 @@ "message": "Enter notification message..." }, "limits": { - "message": "Daily restrictions on access to websites", - "description": "Set the maximum time allowed to visit the site per day. After this time, the site will be blocked." + "message": "Daily access restrictions for the websites", + "description": "Set the maximum time allowed to visit the website per day. After this time, the site will be blocked." }, "limitsTip": { "message": "If you set the blocking time to 0 hours 0 minutes, the website will be blocked immediately" @@ -197,33 +197,39 @@ "message": "Notification time with summary information about your daily usage" }, "github": { - "message": "If you have feedback or would like to report an issue, you can do so on the" + "message": "Leave your feedback or report an issue on " }, "question": { - "message": "You can also ask questions or leave your suggestions here" + "message": "You can also ask questions and leave your suggestions" }, "supportForm": { "message": "support form" }, "doYouEnjoy": { - "message": "Do you enjoy using Web Activity Time Tracker?" + "message": "Do you enjoy Web Activity Time Tracker?" }, "review": { "message": "Leave a review!" }, "block": { - "message": "You've reached your limit today on " + "message": "You've reached your limit for today on " }, "5mins": { "message": "+ 5 minutes" }, "todayUsageTime": { - "message": "Today's total usage time " + "message": "Total usage time for today " }, "comparedToYesterday": { "message": " compared to yesterday " }, "mostVisited": { "message": "Most visited website " + }, + "dashboard": { + "message": "Dashboard" + }, + "timeChartDescription": { + "message": "This is a chart of time during the day by the hour" } } diff --git a/src/_locales/ru/messages.json b/src/_locales/ru/messages.json index 0e763cd..3e1aa2e 100644 --- a/src/_locales/ru/messages.json +++ b/src/_locales/ru/messages.json @@ -114,7 +114,7 @@ "message": "Последний месяц" }, "generalSettings": { - "message": "Основные настройки" + "message": "Настройки" }, "whiteListSettings": { "message": "Белый список" @@ -176,7 +176,7 @@ "description": "Установите максимальное время, разрешенное для посещения сайта в день. По истечении этого времени сайт будет заблокирован." }, "limitsTip": { - "message": "Если вы установите время блокировки равным 0 часам 0 минутам, сайт будет немедленно заблокирован" + "message": "Если вы установите время блокировки на 0 часов 0 минут, сайт будет немедленно заблокирован" }, "save": { "message": "Сохранить" @@ -200,13 +200,13 @@ "message": "Если \u0443 вас есть вопрос или вы хотели бы сообщить \u043E проблеме, вы можете сделать это на" }, "question": { - "message": "Также вы можете задать вопросы или оставить свои предложения здесь" + "message": "Также вы можете задать вопросы или оставить свои предложения " }, "supportForm": { "message": "поддержка" }, "doYouEnjoy": { - "message": "Вам нравится использовать Web Activity Time Tracker?" + "message": "Вам нравится Web Activity Time Tracker?" }, "review": { "message": "Оставьте отзыв!" @@ -225,5 +225,11 @@ }, "mostVisited": { "message": "Самый посещаемый сайт " + }, + "dashboard": { + "message": "Дашборд" + }, + "timeChartDescription": { + "message": "Это график времени в течение дня по часам" } } diff --git a/src/assets/css/dashboard.css b/src/assets/css/dashboard.css index 32a2f14..e84c3a4 100644 --- a/src/assets/css/dashboard.css +++ b/src/assets/css/dashboard.css @@ -288,6 +288,7 @@ label { bottom: 0; padding: 50px; border-left: 1px solid #ccc; + overflow-y: auto; } .settings-content span { animation: 0.5s ease-out 0s 1 slideInFromTop; diff --git a/src/assets/css/general.css b/src/assets/css/general.css index 3da15dd..94d2e40 100644 --- a/src/assets/css/general.css +++ b/src/assets/css/general.css @@ -1,3 +1,16 @@ +:root { + --main-color: #6ebf5d; + --popup-header: #efefef; + --progress-bar: #428bff; +} + +.no-data { + text-align: center; + font-size: 16px; + font-weight: 600; + margin-top: 30%; +} + .float-right { float: right; } diff --git a/src/assets/css/main.css b/src/assets/css/main.css index e804281..955b6c4 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -1,8 +1,3 @@ -:root { - --main-color: #6ebf5d; - --popup-header: #efefef; - --progress-bar: #428bff; -} ::-webkit-scrollbar-track { border-radius: 10px; background-color: #f5f5f5; @@ -24,12 +19,6 @@ body { padding: 0; margin: 0; } -.no-data { - text-align: center; - font-size: 16px; - font-weight: 600; - margin-top: 30%; -} .tabs { } .tabs input[name='tab-control'] { @@ -37,6 +26,7 @@ body { } .tabs .content section h2, .tabs ul li label { + font-size: 15px; color: #428bff; } diff --git a/src/assets/icons/dashboard.svg b/src/assets/icons/dashboard.svg new file mode 100644 index 0000000..8789249 --- /dev/null +++ b/src/assets/icons/dashboard.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/src/assets/icons/settings.svg b/src/assets/icons/settings.svg index 9b86d3e..206e8a9 100644 --- a/src/assets/icons/settings.svg +++ b/src/assets/icons/settings.svg @@ -1,2 +1,2 @@ - - \ No newline at end of file + + \ No newline at end of file diff --git a/src/components/BadgeIcons.vue b/src/components/BadgeIcons.vue index d9ab734..cf44a3f 100644 --- a/src/components/BadgeIcons.vue +++ b/src/components/BadgeIcons.vue @@ -31,7 +31,11 @@ const isLimit = computedAsync(async () => { }, false); const showDocumentBadge = computed(() => props.type == TypeOfUrl.Document); -const showLimitBadge = computed(() => props.listType == TypeOfList.Today && isLimit.value == true); +const showLimitBadge = computed( + () => + (props.listType == TypeOfList.Today || props.listType == TypeOfList.Dashboard) && + isLimit.value == true, +); diff --git a/src/components/TabItemHeader.vue b/src/components/TabItemHeader.vue index 92da4fb..d2c6311 100644 --- a/src/components/TabItemHeader.vue +++ b/src/components/TabItemHeader.vue @@ -43,7 +43,8 @@ const emit = defineEmits<{ }>(); const title = computed(() => { - if (props.listType == TypeOfList.Today) return t('today.message'); + if (props.listType == TypeOfList.Today || props.listType == TypeOfList.Dashboard) + return t('today.message'); if (props.listType == TypeOfList.All) { let countOfActiveDays = props.countOfActiveDays > 1 ? `(${props.countOfActiveDays} ${t('days.message')})` : ''; diff --git a/src/components/TabList.vue b/src/components/TabList.vue index 26b7981..f07c84a 100644 --- a/src/components/TabList.vue +++ b/src/components/TabList.vue @@ -8,7 +8,11 @@
- + day.date === todayLocalDate())!.summary : tab.summaryTime, favicon: tab.favicon, url: tab.url, sessions: - props.type == TypeOfList.Today + props.type == TypeOfList.Today || props.type == TypeOfList.Dashboard ? tab.days.find(day => day.date === todayLocalDate())!.counter : tab.counter, }; diff --git a/src/components/TimeIntervalChart.vue b/src/components/TimeIntervalChart.vue new file mode 100644 index 0000000..f890cb4 --- /dev/null +++ b/src/components/TimeIntervalChart.vue @@ -0,0 +1,208 @@ + + + + + diff --git a/src/dashboard.html b/src/dashboard.html index e62fae6..1bd0d52 100644 --- a/src/dashboard.html +++ b/src/dashboard.html @@ -1,4 +1,4 @@ - + diff --git a/src/manifest.json b/src/manifest.json index fd0a524..7cd92f2 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -2,7 +2,7 @@ "manifest_version": 3, "name": "__MSG_extName__", "short_name": "Web Tracker", - "version": "2.0.0", + "version": "2.0.1", "description": "__MSG_extDescription__", "options_page": "src/dashboard.html", "default_locale": "en", diff --git a/src/pages/Dashboard.vue b/src/pages/Dashboard.vue index cdf2053..815d96b 100644 --- a/src/pages/Dashboard.vue +++ b/src/pages/Dashboard.vue @@ -5,12 +5,28 @@

Web Activity Time Tracker

+ +
+ + + +
+ +
+
+
@@ -25,6 +41,7 @@ type="radio" id="white-list-tab" name="settings-group" + :checked="selectedTab == SettingsTab.WhiteList" v-on:change="selectTab(SettingsTab.WhiteList)" /> @@ -39,6 +56,7 @@ type="radio" id="limits-tab" name="settings-group" + :checked="selectedTab == SettingsTab.Limits" v-on:change="selectTab(SettingsTab.Limits)" /> @@ -52,6 +70,7 @@ type="radio" id="notification-tab" name="settings-group" + :checked="selectedTab == SettingsTab.Notifications" v-on:change="selectTab(SettingsTab.Notifications)" /> @@ -66,6 +85,7 @@ type="radio" id="about-tab" name="settings-group" + :checked="selectedTab == SettingsTab.About" v-on:change="selectTab(SettingsTab.About)" /> @@ -86,12 +106,26 @@ import Limits from '../components/Limits.vue'; import DailyNotifications from '../components/Notifications.vue'; import About from '../components/About.vue'; import { SettingsTab } from '../utils/enums'; +import Dashboad from '../components/Dashboad.vue'; const { t } = useI18n(); const selectedTab = ref(); -onMounted(() => (selectedTab.value = SettingsTab.GeneralSettings)); +onMounted(() => { + const urlObj = new URL(location.href); + const tabName = urlObj.searchParams.get('tab'); + if (tabName != null && tabName != '') { + switch (tabName) { + case 'dashboard': + selectedTab.value = SettingsTab.Dashboard; + break; + case 'settings': + selectedTab.value = SettingsTab.GeneralSettings; + break; + } + } else selectedTab.value = selectedTab.value = SettingsTab.Dashboard; +}); function selectTab(value: SettingsTab) { selectedTab.value = value; @@ -112,4 +146,9 @@ function selectTab(value: SettingsTab) { .header-block .logo { margin: 10px 20px; } +.tab-separator { + margin-left: 10px; + font-size: 13px; + font-weight: 600; +} diff --git a/src/pages/Popup.vue b/src/pages/Popup.vue index 77df4c6..d15a681 100644 --- a/src/pages/Popup.vue +++ b/src/pages/Popup.vue @@ -6,7 +6,10 @@
- {{ t('dashboard.message') }} + {{ t('settings.message') }}
@@ -74,13 +77,23 @@ import { useI18n } from 'vue-i18n'; import Browser from 'webextension-polyfill'; import TabList from '../components/TabList.vue'; import ByDays from '../components/ByDays.vue'; -import { TypeOfList } from '../utils/enums'; +import { SettingsTab, TypeOfList } from '../utils/enums'; const { t } = useI18n(); -async function openDashboard() { +async function openPage(tab: SettingsTab) { + let tabName = ''; + switch (tab) { + case SettingsTab.Dashboard: + tabName = 'dashboard'; + break; + case SettingsTab.GeneralSettings: + tabName = 'settings'; + break; + } + const url = Browser.runtime.getURL(`src/dashboard.html${tabName != '' ? `?tab=${tabName}` : ''}`); await Browser.tabs.create({ - url: Browser.runtime.getURL('src/dashboard.html'), + url: url, active: true, }); } diff --git a/src/tracker.ts b/src/tracker.ts index 29d3d62..054ea9e 100644 --- a/src/tracker.ts +++ b/src/tracker.ts @@ -63,14 +63,18 @@ async function trackTime() { await mainTrackerWrapper(activeTab!, activeDomain, tab); } } - } + } else await closeOpenInterval(); } else { - await closeInterval(activeTabInstance.getActiveTabDomain()); - activeTabInstance.setActiveTab(null); - currentObj = null; + await closeOpenInterval(); } } +async function closeOpenInterval() { + await closeInterval(activeTabInstance.getActiveTabDomain()); + activeTabInstance.setActiveTab(null); + currentObj = null; +} + async function mainTracker( state: Browser.Idle.IdleState, activeTab: Browser.Tabs.Tab, @@ -134,7 +138,7 @@ async function mainTracker( text: '', color: BadgeColor.red, }); - } + } else await closeOpenInterval(); } async function mainTrackerWrapper(activeTab: Browser.Tabs.Tab, activeDomain: string, tab: Tab) { diff --git a/src/utils/converter.ts b/src/utils/converter.ts index fc48e4b..06ac8f5 100644 --- a/src/utils/converter.ts +++ b/src/utils/converter.ts @@ -1,5 +1,5 @@ import i18n, { getMessagesFromLocale } from '../plugins/i18n'; -import { HOUR, MINUTE, Time } from './time'; +import { HOUR, HOUR_IN_SECONDS, MINUTE, MINUTE_IN_SECONDS, Time } from './time'; export function convertHHMMToSeconds(hours: number, minutes: number) { return hours * 3600 + minutes * 60; @@ -82,3 +82,13 @@ function zeroAppend(time: number) { if (time < 10) return `0${time}`; else return time; } + +export function convertStringTimeIntervalToSeconds(timeInterval: string) { + const time = timeInterval.split(':'); + return Number(time[0]) * HOUR_IN_SECONDS + Number(time[1]) * MINUTE_IN_SECONDS + Number(time[2]); +} + +export function convertHoursToTime(time: number) { + const timeInSeconds = Math.floor(time * MINUTE_IN_SECONDS); + return convertSummaryTimeToString(timeInSeconds); +} diff --git a/src/utils/enums.ts b/src/utils/enums.ts index de0bd6e..c5ba351 100644 --- a/src/utils/enums.ts +++ b/src/utils/enums.ts @@ -2,6 +2,7 @@ export enum TypeOfList { Today, All, ByDays, + Dashboard, } export enum SortingBy { @@ -10,6 +11,7 @@ export enum SortingBy { } export enum SettingsTab { + Dashboard, GeneralSettings, WhiteList, Limits, diff --git a/src/utils/time.ts b/src/utils/time.ts index 8a8259b..1c779c9 100644 --- a/src/utils/time.ts +++ b/src/utils/time.ts @@ -5,6 +5,9 @@ export type Time = { minutes: number; }; +export const MINUTE_IN_SECONDS = 60; +export const HOUR_IN_SECONDS = 60 * MINUTE_IN_SECONDS; + //Every day - 60 minutes * 24 hours export const DAY_MINUTES = 1440; export const SECOND = 1000;