Skip to content

Commit 384ed73

Browse files
StigmatozStigmatoz
committed
Add initial info for details page
1 parent 5e15e45 commit 384ed73

File tree

9 files changed

+158
-34
lines changed

9 files changed

+158
-34
lines changed

‎src/assets/css/general.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,12 @@
3535
.mr-10 {
3636
margin-right: 10px;
3737
}
38+
.ml-20 {
39+
margin-left: 20px;
40+
}
41+
.mr-20 {
42+
margin-right: 20px;
43+
}
3844
.mr-5 {
3945
margin-right: 5px;
4046
}
@@ -137,3 +143,13 @@ input[type='button'][disabled] {
137143
text-decoration: none;
138144
cursor: pointer;
139145
}
146+
.no-data .date-picker {
147+
font-weight: normal;
148+
text-align: center;
149+
width: 250px;
150+
margin: auto;
151+
margin-top: 15px;
152+
}
153+
.date-block .date-picker {
154+
width: 250px;
155+
}

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

Lines changed: 8 additions & 4 deletions
Loading

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

Lines changed: 2 additions & 3 deletions
Loading

‎src/components/ByDays.vue‎

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,7 @@
33
<img height="55" src="../assets/icons/preloader.gif" />
44
</div>
55
<div v-else>
6-
<div class="no-data" v-if="countOfDays == undefined || (countOfDays == 0 && !noData)">
7-
{{ t('noData.message') }}
8-
</div>
6+
<no-data-by-days v-if="countOfDays == undefined || (countOfDays == 0 && !noData)" />
97
<div v-else-if="noData">
108
<div class="no-data">
119
{{ t('noDataForPeriod.message') }}
@@ -43,7 +41,9 @@
4341
<div class="header">{{ t('averageTimeByDays.message') }}</div>
4442
<p>{{ convertSummaryTimeToString(tabsByDays!.averageTime) }}</p>
4543
</div>
46-
<ByDaysChart :data="tabsByDays!" />
44+
<div class="ml-20 mr-20">
45+
<ByDaysChart :data="tabsByDays!" />
46+
</div>
4747
<div>
4848
<Expander
4949
v-for="(tabDay, i) of tabsByDays?.days"
@@ -73,6 +73,7 @@ export default {
7373
import { computed, onMounted, ref } from 'vue';
7474
import { useI18n } from 'vue-i18n';
7575
import TabItem from '../components/TabItem.vue';
76+
import NoDataByDays from './NoDataByDays.vue';
7677
import ByDaysChart from '../components/ByDaysChart.vue';
7778
import Expander from '../components/Expander.vue';
7879
import { TabListByDays } from '../dto/tabListSummary';
@@ -160,14 +161,4 @@ async function exportToCsv() {
160161
justify-content: space-between;
161162
margin: 0 25px;
162163
}
163-
.date-block .date-picker {
164-
width: 250px;
165-
}
166-
.no-data .date-picker {
167-
font-weight: normal;
168-
text-align: center;
169-
width: 250px;
170-
margin: auto;
171-
margin-top: 15px;
172-
}
173164
</style>

‎src/components/ByDaysChart.vue‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -95,10 +95,9 @@ function refreshChart() {
9595

9696
<style scoped>
9797
.chart {
98-
height: 230px;
98+
min-height: 230px;
9999
margin: auto;
100-
width: 80%;
101-
margin-top: -10px;
100+
margin-top: 10px;
102101
margin-bottom: 10px;
103102
}
104103
</style>

‎src/components/NoDataByDays.vue‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<template>
2+
<div class="no-data">
3+
{{ t('noData.message') }}
4+
</div>
5+
</template>
6+
7+
<script lang="ts">
8+
export default {
9+
name: 'NoDataByDays',
10+
};
11+
</script>
12+
13+
<script lang="ts" setup>
14+
import { useI18n } from 'vue-i18n';
15+
16+
const { t } = useI18n();
17+
</script>

‎src/components/TabItem.vue‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<img
1515
class="link"
1616
src="../assets/icons/details-link.svg"
17-
height="18"
17+
height="21"
1818
@click="openStats(item.url)"
1919
/>
2020
</p>
@@ -23,7 +23,7 @@
2323
<img
2424
class="link"
2525
src="../assets/icons/open-link.svg"
26-
height="18"
26+
height="21"
2727
@click="openUrl(item.url)"
2828
/>
2929
</p>
@@ -60,6 +60,7 @@ import { getPercentage } from '../utils/common';
6060
import { CurrentTabItem } from '../dto/currentTabItem';
6161
import { SettingsTab, TypeOfList, TypeOfUrl } from '../utils/enums';
6262
import { openPage } from '../utils/open-page';
63+
import { getTypeOfUrl } from '../utils/get-type-of-url';
6364
6465
const { t } = useI18n();
6566
@@ -71,9 +72,7 @@ const props = defineProps<{
7172
7273
const isShowCmdButtons = ref<boolean>();
7374
74-
const typeOfUrl = computed(() =>
75-
props.item.url.startsWith('file:') ? TypeOfUrl.Document : TypeOfUrl.WebSite,
76-
);
75+
const typeOfUrl = computed(() => getTypeOfUrl(props.item.url));
7776
7877
const url = computed(() =>
7978
typeOfUrl.value == TypeOfUrl.Document

‎src/components/WebsiteStats.vue‎

Lines changed: 99 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,54 @@
33
<label class="title link" @click="openPage(SettingsTab.Dashboard)">
44
{{ t('dashboard.message') }}
55
</label>
6-
<!-- <Favicon :favicon="item.favicon" :type="typeOfUrl" /> -->
6+
<div class="no-data" v-if="isLoading">
7+
<img height="55" src="../assets/icons/preloader.gif" />
8+
</div>
9+
<div v-else>
10+
<no-data-by-days v-if="countOfDays == undefined || (countOfDays == 0 && !noData)" />
11+
<div v-else-if="noData">
12+
<div class="no-data">
13+
{{ t('noDataForPeriod.message') }}
14+
<VueDatePicker
15+
range
16+
:enable-time-picker="false"
17+
class="date-picker"
18+
v-model="selectedDate"
19+
:preset-ranges="presetRanges"
20+
@update:model-value="handleDate"
21+
>
22+
<template #yearly="{ label, range, presetDateRange }">
23+
<span @click="presetDateRange(range)">{{ label }}</span>
24+
</template></VueDatePicker
25+
>
26+
</div>
27+
</div>
28+
<div v-else>
29+
<div class="date-block">
30+
<div>
31+
<Favicon :favicon="tab?.favicon" :type="getTypeOfUrl(tab?.url!)" />
32+
<span class="title"> {{ tab?.url }}</span>
33+
</div>
34+
35+
<VueDatePicker
36+
range
37+
:enable-time-picker="false"
38+
class="date-picker mt-10"
39+
v-model="selectedDate"
40+
:preset-ranges="presetRanges"
41+
@update:model-value="handleDate"
42+
>
43+
<template #yearly="{ label, range, presetDateRange }">
44+
<span @click="presetDateRange(range)">{{ label }}</span>
45+
</template></VueDatePicker
46+
>
47+
</div>
48+
<div class="mt-20 ml-10 mr-10">
49+
<ByDaysChart :data="tabInfoByDays!" />
50+
</div>
51+
</div>
52+
</div>
753
</div>
8-
<div class="chart chartByHours"></div>
954
</template>
1055

1156
<script lang="ts">
@@ -16,18 +61,63 @@ export default {
1661

1762
<script lang="ts" setup>
1863
import { useI18n } from 'vue-i18n';
19-
// import Favicon from './Favicon.vue';
64+
import Favicon from './Favicon.vue';
65+
import NoDataByDays from './NoDataByDays.vue';
66+
import ByDaysChart from '../components/ByDaysChart.vue';
2067
import { openPage } from '../utils/open-page';
21-
import { onMounted, ref } from 'vue';
68+
import { computed, onMounted, ref } from 'vue';
2269
import { SettingsTab } from '../utils/enums';
70+
import { ThisWeekRange, ranges } from '../utils/date';
71+
import { useDomainStatsByDays } from '../compositions/useDomainStatsByDays';
72+
import { TabListByDays } from '../dto/tabListSummary';
73+
import { Tab } from '../entity/tab';
74+
import { getTypeOfUrl } from '../utils/get-type-of-url';
75+
import { injectTabsRepository } from '../repository/inject-tabs-repository';
2376
2477
const props = defineProps<{
2578
domain: string;
2679
}>();
2780
2881
const { t } = useI18n();
82+
const presetRanges = ranges();
83+
84+
const tabInfoByDays = ref<TabListByDays>();
85+
const isLoading = ref<boolean>();
86+
const noData = ref<boolean>(false);
87+
const selectedDate = ref<Date[]>();
88+
const tab = ref<Tab>();
89+
90+
const countOfDays = computed(() =>
91+
tabInfoByDays.value != undefined ? tabInfoByDays.value.days.length : 0,
92+
);
93+
94+
onMounted(async () => {
95+
isLoading.value = true;
96+
selectedDate.value = ThisWeekRange;
97+
const dateFrom = selectedDate.value?.[0] as Date;
98+
const dateTo = selectedDate.value?.[1] as Date;
99+
const repo = await injectTabsRepository();
100+
tab.value = repo.getTab(props.domain);
101+
102+
await loadList(dateFrom, dateTo);
103+
});
29104
30-
onMounted(() => {});
105+
async function loadList(dateFrom: Date, dateTo: Date) {
106+
const tabList = await useDomainStatsByDays(dateFrom, dateTo);
107+
if (tabList != null) {
108+
tabInfoByDays.value = tabList;
109+
if (tabList.days.length == 0 && tabList.summaryTime == 0) noData.value = true;
110+
else noData.value = false;
111+
}
112+
isLoading.value = false;
113+
}
114+
115+
async function handleDate(modelData: Date[]) {
116+
selectedDate.value = modelData;
117+
const dateFrom = selectedDate.value?.[0] as Date;
118+
const dateTo = selectedDate.value?.[1] as Date;
119+
await loadList(dateFrom, dateTo);
120+
}
31121
</script>
32122

33123
<style scoped>
@@ -36,4 +126,8 @@ onMounted(() => {});
36126
color: grey;
37127
text-decoration: underline;
38128
}
129+
.date-block {
130+
display: flex;
131+
justify-content: space-between;
132+
}
39133
</style>

‎src/utils/get-type-of-url.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { TypeOfUrl } from './enums';
2+
3+
export function getTypeOfUrl(url: string) {
4+
return url.startsWith('file:') ? TypeOfUrl.Document : TypeOfUrl.WebSite;
5+
}

0 commit comments

Comments
 (0)