Dashboard

Author: Stigmatoz

src/_locales/de/messages.json

@@ -226,8 +226,8 @@
   "mostVisited": {
     "message": "Die meistbesuchte Website "
   },
-  "timeChart": {
-    "message": "Die heutige Zeit"
+  "dashboard": {
+    "message": "Dashboard"
   },
   "timeChartDescription": {
     "message": "Dies ist eine stundenweise Zeitleiste für den Tag"

src/_locales/en/messages.json

@@ -226,8 +226,8 @@
   "mostVisited": {
     "message": "Most visited website "
   },
-  "timeChart": {
-    "message": "Today's time"
+  "dashboard": {
+    "message": "Dashboard"
   },
   "timeChartDescription": {
     "message": "This is a chart of time during the day by the hour"

src/_locales/ru/messages.json

@@ -226,8 +226,8 @@
   "mostVisited": {
     "message": "Самый посещаемый сайт "
   },
-  "timeChart": {
-    "message": "Время сегодня"
+  "dashboard": {
+    "message": "Дашборд"
   },
   "timeChartDescription": {
     "message": "Это график времени в течение дня по часам"

src/assets/css/general.css

@@ -1,3 +1,9 @@
+:root {
+  --main-color: #6ebf5d;
+  --popup-header: #efefef;
+  --progress-bar: #428bff;
+}
+
 .float-right {
   float: right;
 }

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;

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,
+);
 </script>
 
 <style scoped>

src/components/Dashboad.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="settings-item">
+    <label class="setting-header"> {{ t('dashboard.message') }} </label>
+    <p class="description">{{ t('timeChartDescription.message') }}</p>
+  </div>
+  <div class="chart chartByHours">
+    <TimeIntervalChart />
+  </div>
+  <div class="chart mt-20">
+    <TabList :type="TypeOfList.Dashboard" :showAllStats="false" />
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'Dashboard',
+};
+</script>
+
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
+import TimeIntervalChart from './TimeIntervalChart.vue';
+import TabList from '../components/TabList.vue';
+import { TypeOfList } from '../utils/enums';
+
+const { t } = useI18n();
+</script>
+
+<style scoped>
+.chart {
+  margin: 20px;
+  width: 80%;
+}
+.chartByHours {
+  height: 350px;
+}
+</style>

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')})` : '';

src/components/TabList.vue

@@ -8,7 +8,11 @@
     </div>
     <div v-else>
       <OverallStatistics v-if="isShowOverallStats" :data="dataForOvarallStats" />
-      <DonutChart :time="timeForChart" :labels="sitesForChart" />
+      <DonutChart
+        :time="timeForChart"
+        :labels="sitesForChart"
+        v-if="type != TypeOfList.Dashboard"
+      />
       <TabItemHeader
         :listType="type"
         :summaryTime="summaryTime"
@@ -86,7 +90,8 @@ function showAllWebSites() {
 
 async function loadList(sortingBy: SortingBy) {
   let tabSummary = null;
-  if (props.type == TypeOfList.Today) tabSummary = await useTodayTabListSummary(sortingBy);
+  if (props.type == TypeOfList.Today || props.type == TypeOfList.Dashboard)
+    tabSummary = await useTodayTabListSummary(sortingBy);
   if (props.type == TypeOfList.All) {
     tabSummary = await useAllTabListSummary(sortingBy);
 
@@ -127,13 +132,13 @@ async function sorting(sortingBy: SortingBy) {
 function getItem(tab: Tab): CurrentTabItem {
   return {
     summaryTime:
-      props.type == TypeOfList.Today
+      props.type == TypeOfList.Today || props.type == TypeOfList.Dashboard
         ? tab.days.find(day => 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,
   };

src/components/TimeIntervalChart.vue

@@ -1,11 +1,5 @@
 <template>
-  <div class="settings-item">
-    <label class="setting-header"> {{ t('timeChart.message') }} </label>
-    <p class="description">{{ t('timeChartDescription.message') }}</p>
-  </div>
-  <div class="chart">
-    <Bar :data="data" :options="options" v-if="isLoaded" />
-  </div>
+  <Bar :data="data" :options="options" v-if="isLoaded" />
 </template>
 
 <script lang="ts">
@@ -16,7 +10,6 @@ export default {
 
 <script lang="ts" setup>
 import { Bar } from 'vue-chartjs';
-import { useI18n } from 'vue-i18n';
 import {
   Chart as ChartJS,
   Title,
@@ -33,8 +26,6 @@ import { TimeInterval } from '../entity/time-interval';
 import { todayLocalDate } from '../utils/date';
 import { convertHoursToTime, convertStringTimeIntervalToSeconds } from '../utils/converter';
 
-const { t } = useI18n();
-
 type DataForChart = {
   summary: number;
   hour: number;
@@ -187,12 +178,3 @@ async function buildChart() {
 
 onMounted(async () => await buildChart());
 </script>
-
-<style scoped>
-.chart {
-  height: 350px;
-  margin: auto;
-  width: 80%;
-  margin: 20px;
-}
-</style>