Skip to content

Commit 09370c8

Browse files
StigmatozStigmatoz
committed
New component for website stats
1 parent 2585a0b commit 09370c8

File tree

9 files changed

+149
-56
lines changed

9 files changed

+149
-56
lines changed

‎src/assets/icons/details-link.svg‎

Lines changed: 3 additions & 5 deletions
Loading

‎src/components/Dashboad.vue‎

Lines changed: 21 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,27 @@
11
<template>
2-
<div class="main">
3-
<div class="settings-item">
4-
<label class="title"> {{ t('dashboard.message') }} </label>
5-
</div>
6-
<div class="chart chartByHours">
7-
<div class="mt-10 mb-20">
8-
<input
9-
type="button"
10-
:class="['chart-btn', chart == TypeOfChart.Horly ? 'active' : '']"
11-
:value="t('byHours.message')"
12-
@click="openChart(TypeOfChart.Horly)"
13-
/>
14-
<input
15-
type="button"
16-
:class="['ml-10', 'chart-btn', chart == TypeOfChart.Interval ? 'active' : '']"
17-
:value="t('intervals.message')"
18-
@click="openChart(TypeOfChart.Interval)"
19-
/>
20-
</div>
21-
<HourlyChart v-if="chart == TypeOfChart.Horly" />
22-
<TimeIntervalChart v-if="chart == TypeOfChart.Interval" />
23-
</div>
24-
<div class="tab-items">
25-
<TabList
26-
:type="TypeOfList.Dashboard"
27-
:showAllStats="false"
28-
v-if="chart == TypeOfChart.Horly"
2+
<div class="settings-item">
3+
<label class="title"> {{ t('dashboard.message') }} </label>
4+
</div>
5+
<div class="chart chartByHours">
6+
<div class="mt-10 mb-20">
7+
<input
8+
type="button"
9+
:class="['chart-btn', chart == TypeOfChart.Horly ? 'active' : '']"
10+
:value="t('byHours.message')"
11+
@click="openChart(TypeOfChart.Horly)"
12+
/>
13+
<input
14+
type="button"
15+
:class="['ml-10', 'chart-btn', chart == TypeOfChart.Interval ? 'active' : '']"
16+
:value="t('intervals.message')"
17+
@click="openChart(TypeOfChart.Interval)"
2918
/>
3019
</div>
20+
<HourlyChart v-if="chart == TypeOfChart.Horly" />
21+
<TimeIntervalChart v-if="chart == TypeOfChart.Interval" />
22+
</div>
23+
<div class="tab-items">
24+
<TabList :type="TypeOfList.Dashboard" :showAllStats="false" v-if="chart == TypeOfChart.Horly" />
3125
</div>
3226
</template>
3327

‎src/components/DashboadContainer.vue‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<template>
2+
<div class="main">
3+
<Dashboad v-if="type == SettingsTab.Dashboard" />
4+
<WebsiteStats v-if="type == SettingsTab.WebsiteStats" :domain="domain!" />
5+
</div>
6+
</template>
7+
8+
<script lang="ts">
9+
export default {
10+
name: 'DashboadContainer',
11+
};
12+
</script>
13+
14+
<script lang="ts" setup>
15+
import { SettingsTab } from '../utils/enums';
16+
import WebsiteStats from './WebsiteStats.vue';
17+
import Dashboad from './Dashboad.vue';
18+
19+
defineProps<{
20+
type: SettingsTab;
21+
domain: string | undefined;
22+
}>();
23+
</script>
24+
25+
<style scoped>
26+
.main {
27+
width: 80%;
28+
margin: auto;
29+
}
30+
</style>

‎src/components/TabItem.vue‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,12 @@
1111
<p class="url">{{ url }}</p>
1212
<BadgeIcons :url="url" :type="typeOfUrl" :listType="listType" />
1313
<p class="links" v-if="isShowCmdButtons" title="Statistics">
14-
<img class="link" src="../assets/icons/details-link.svg" height="18" />
14+
<img
15+
class="link"
16+
src="../assets/icons/details-link.svg"
17+
height="18"
18+
@click="openStats(item.url)"
19+
/>
1520
</p>
1621

1722
<p class="links" v-if="isShowCmdButtons" title="Open website">
@@ -49,12 +54,12 @@ export default {
4954
import { computed, ref } from 'vue';
5055
import { useI18n } from 'vue-i18n';
5156
import Favicon from './Favicon.vue';
52-
import TabItemLink from './TabItemLink.vue';
5357
import BadgeIcons from './BadgeIcons.vue';
5458
import { convertSummaryTimeToString } from '../utils/converter';
5559
import { getPercentage } from '../utils/common';
5660
import { CurrentTabItem } from '../dto/currentTabItem';
57-
import { TypeOfList, TypeOfUrl } from '../utils/enums';
61+
import { SettingsTab, TypeOfList, TypeOfUrl } from '../utils/enums';
62+
import { openPage } from '../utils/open-page';
5863
5964
const { t } = useI18n();
6065
@@ -94,6 +99,10 @@ function openUrl(url: string) {
9499
} else showWarningMessage.value = true;
95100
}
96101
102+
async function openStats(url: string) {
103+
await openPage(SettingsTab.WebsiteStats, url);
104+
}
105+
97106
const showWarningMessage = ref<boolean>();
98107
</script>
99108

‎src/components/WebsiteStats.vue‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<template>
2+
<div class="settings-item">
3+
<label class="title link" @click="openPage(SettingsTab.Dashboard)">
4+
{{ t('dashboard.message') }}
5+
</label>
6+
<!-- <Favicon :favicon="item.favicon" :type="typeOfUrl" /> -->
7+
</div>
8+
<div class="chart chartByHours"></div>
9+
</template>
10+
11+
<script lang="ts">
12+
export default {
13+
name: 'WebsiteStats',
14+
};
15+
</script>
16+
17+
<script lang="ts" setup>
18+
import { useI18n } from 'vue-i18n';
19+
// import Favicon from './Favicon.vue';
20+
import { openPage } from '../utils/open-page';
21+
import { onMounted, ref } from 'vue';
22+
import { SettingsTab } from '../utils/enums';
23+
24+
const props = defineProps<{
25+
domain: string;
26+
}>();
27+
28+
const { t } = useI18n();
29+
30+
onMounted(() => {});
31+
</script>
32+
33+
<style scoped>
34+
.link {
35+
cursor: pointer;
36+
color: grey;
37+
text-decoration: underline;
38+
}
39+
</style>

‎src/pages/Dashboard.vue‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
type="radio"
1111
id="timeIntervalChart-tab"
1212
name="settings-group"
13-
:checked="selectedTab == SettingsTab.Dashboard"
13+
:checked="selectedTab == SettingsTab.Dashboard || selectedTab == SettingsTab.WebsiteStats"
1414
v-on:change="selectTab(SettingsTab.Dashboard)"
1515
/>
1616
<label name="tabName" for="timeIntervalChart-tab"
@@ -20,7 +20,11 @@
2020
>
2121

2222
<div class="settings-content">
23-
<Dashboad v-if="selectedTab == SettingsTab.Dashboard" />
23+
<DashboadContainer
24+
v-if="selectedTab == SettingsTab.Dashboard || selectedTab == SettingsTab.WebsiteStats"
25+
:type="selectedTab"
26+
:domain="selectedWebsite"
27+
/>
2428
</div>
2529
</div>
2630

@@ -129,11 +133,12 @@ import Limits from '../components/Limits.vue';
129133
import DailyNotifications from '../components/Notifications.vue';
130134
import About from '../components/About.vue';
131135
import { SettingsTab } from '../utils/enums';
132-
import Dashboad from '../components/Dashboad.vue';
136+
import DashboadContainer from '../components/DashboadContainer.vue';
133137
134138
const { t } = useI18n();
135139
136140
const selectedTab = ref<SettingsTab>();
141+
const selectedWebsite = ref<string>();
137142
138143
onMounted(() => {
139144
const urlObj = new URL(location.href);
@@ -146,6 +151,12 @@ onMounted(() => {
146151
case 'settings':
147152
selectedTab.value = SettingsTab.GeneralSettings;
148153
break;
154+
case 'website-stats':
155+
selectedTab.value = SettingsTab.WebsiteStats;
156+
const domain = urlObj.searchParams.get('website');
157+
if (domain != null && domain != '') selectedWebsite.value = domain;
158+
else selectedTab.value = SettingsTab.Dashboard;
159+
break;
149160
}
150161
} else selectedTab.value = selectedTab.value = SettingsTab.Dashboard;
151162
});

‎src/pages/Popup.vue‎

Lines changed: 1 addition & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -74,31 +74,14 @@
7474
<script lang="ts" setup>
7575
import { onMounted, ref } from 'vue';
7676
import { useI18n } from 'vue-i18n';
77-
import Browser from 'webextension-polyfill';
7877
import TabList from '../components/TabList.vue';
7978
import ByDays from '../components/ByDays.vue';
8079
import Review from '../components/Review.vue';
80+
import { openPage } from '../utils/open-page';
8181
import { SettingsTab, TypeOfList } from '../utils/enums';
8282
8383
const { t } = useI18n();
8484
85-
async function openPage(tab: SettingsTab) {
86-
let tabName = '';
87-
switch (tab) {
88-
case SettingsTab.Dashboard:
89-
tabName = 'dashboard';
90-
break;
91-
case SettingsTab.GeneralSettings:
92-
tabName = 'settings';
93-
break;
94-
}
95-
const url = Browser.runtime.getURL(`src/dashboard.html${tabName != '' ? `?tab=${tabName}` : ''}`);
96-
await Browser.tabs.create({
97-
url: url,
98-
active: true,
99-
});
100-
}
101-
10285
const activeTab = ref<TypeOfList>();
10386
10487
onMounted(() => {

‎src/utils/enums.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export enum SortingBy {
1212

1313
export enum SettingsTab {
1414
Dashboard,
15+
WebsiteStats,
1516
GeneralSettings,
1617
WhiteList,
1718
Limits,

‎src/utils/open-page.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import Browser from 'webextension-polyfill';
2+
import { SettingsTab } from './enums';
3+
4+
export async function openPage(tab: SettingsTab, domain?: string) {
5+
function getDomain() {
6+
return domain != undefined && tab == SettingsTab.WebsiteStats ? `&website=${domain}` : '';
7+
}
8+
9+
let tabName = '';
10+
switch (tab) {
11+
case SettingsTab.Dashboard:
12+
tabName = 'dashboard';
13+
break;
14+
case SettingsTab.WebsiteStats:
15+
tabName = 'website-stats';
16+
break;
17+
case SettingsTab.GeneralSettings:
18+
tabName = 'settings';
19+
break;
20+
}
21+
const url = Browser.runtime.getURL(
22+
`src/dashboard.html${tabName != '' ? `?tab=${tabName}` : ''}${getDomain()}`,
23+
);
24+
await Browser.tabs.create({
25+
url: url,
26+
active: true,
27+
});
28+
}

0 commit comments

Comments
 (0)