feat(dashboard): improve main dashboard page localization

twirapp · Sep 7, 2023 · 48fb09e · 48fb09e
1 parent f2d1f3c
commit 48fb09e
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 37 deletions.
diff --git a/frontend/dashboard/src/components/dashboard/card.vue b/frontend/dashboard/src/components/dashboard/card.vue
@@ -2,6 +2,7 @@
 import { IconGripVertical, IconEyeOff } from '@tabler/icons-vue';
 import { NCard, NButton } from 'naive-ui';
 import { type CSSProperties, useAttrs } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 import { useWidgets, type WidgetItem } from './widgets.js';
 
@@ -26,6 +27,8 @@ const hideItem = () => {
 	if (!item) return;
 	item.visible = false;
 };
+
+const { t } = useI18n();
 </script>
 
 <template>
@@ -42,7 +45,7 @@ const hideItem = () => {
 		<template #header>
 			<div class="widgets-draggable-handle" style="display: flex; align-items: center">
 				<IconGripVertical style="width: 20px; height: 20px;" />
-				{{ attrs.item.i }}
+				{{ t(`dashboard.widgets.${attrs.item.i}.title`) }}
 			</div>
 		</template>
 

diff --git a/frontend/dashboard/src/components/dashboard/stats.ts b/frontend/dashboard/src/components/dashboard/stats.ts
@@ -1,17 +1,17 @@
 import { useLocalStorage } from '@vueuse/core';
 import { type LayoutItem } from 'grid-layout-plus';
 
-const version = '2';
+const version = '3';
 
 export type StatsItem = LayoutItem & { visible: boolean }
 
 export const useStats = () => useLocalStorage<StatsItem[]>(`twirDashboardStatsPositions-v${version}`, [
-	{ 'x': 0, 'y': 0, 'w': 4, 'h': 1, 'i': 'Stats', 'visible': true, 'moved': false },
-	{ 'x': 4, 'y': 0, 'w': 1, 'h': 1, 'i': 'Uptime', 'visible': true, 'moved': false },
-	{ 'x': 9, 'y': 0, 'w': 1, 'h': 1, 'i': 'Viewers', 'visible': true, 'moved': false },
-	{ 'x': 5, 'y': 0, 'w': 1, 'h': 1, 'i': 'Followers', 'visible': true, 'moved': false },
-	{ 'x': 6, 'y': 0, 'w': 1, 'h': 1, 'i': 'Messages', 'visible': true, 'moved': false },
-	{ 'x': 8, 'y': 0, 'w': 1, 'h': 1, 'i': 'Used emotes', 'visible': true, 'moved': false },
-	{ 'x': 10, 'y': 0, 'w': 2, 'h': 1, 'i': 'Requested songs', 'visible': true, 'moved': false },
-	{ 'x': 7, 'y': 0, 'w': 1, 'h': 1, 'i': 'Subs', 'visible': true, 'moved': false },
+	{ 'x': 0, 'y': 0, 'w': 4, 'h': 1, 'i': 'streamInfo', 'visible': true, 'moved': false },
+	{ 'x': 4, 'y': 0, 'w': 1, 'h': 1, 'i': 'uptime', 'visible': true, 'moved': false },
+	{ 'x': 9, 'y': 0, 'w': 1, 'h': 1, 'i': 'viewers', 'visible': true, 'moved': false },
+	{ 'x': 5, 'y': 0, 'w': 1, 'h': 1, 'i': 'followers', 'visible': true, 'moved': false },
+	{ 'x': 6, 'y': 0, 'w': 1, 'h': 1, 'i': 'messages', 'visible': true, 'moved': false },
+	{ 'x': 8, 'y': 0, 'w': 1, 'h': 1, 'i': 'usedEmotes', 'visible': true, 'moved': false },
+	{ 'x': 10, 'y': 0, 'w': 2, 'h': 1, 'i': 'requestedSongs', 'visible': true, 'moved': false },
+	{ 'x': 7, 'y': 0, 'w': 1, 'h': 1, 'i': 'subs', 'visible': true, 'moved': false },
 ]);
diff --git a/frontend/dashboard/src/components/dashboard/stats.vue b/frontend/dashboard/src/components/dashboard/stats.vue
@@ -5,6 +5,7 @@ import { intervalToDuration } from 'date-fns';
 import { GridLayout, GridItem } from 'grid-layout-plus';
 import { NButton, NDropdown, useThemeVars, NCard } from 'naive-ui';
 import { computed, onBeforeUnmount, ref, watchEffect } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 import { useStats } from './stats.js';
 import ChannelInfo from './statsChannelInfo.vue';
@@ -45,13 +46,13 @@ const statsItems = computed(() => {
 	const u = uptime.value;
 
 	const items: Record<string, any> = {
-		Uptime: u ?? 'Offline',
-		Viewers: s.viewers,
-		Followers: s.followers,
-		Messages: s.chatMessages,
-		'Used emotes': s.usedEmotes,
-		'Requested songs': s.requestedSongs,
-		'Subs': s.subs,
+		uptime: u ?? '',
+		viewers: s.viewers,
+		followers: s.followers,
+		messages: s.chatMessages,
+		usedEmotes: s.usedEmotes,
+		requestedSongs: s.requestedSongs,
+		subs: s.subs,
 	};
 
 	return items;
@@ -68,7 +69,7 @@ watchEffect(() => {
 });
 
 const statsWidgets = useStats();
-const channelInfoWidget = computed(() => statsWidgets.value.find(v => v.i === 'Stats'));
+const channelInfoWidget = computed(() => statsWidgets.value.find(v => v.i === 'streamInfo'));
 const hideWidget = (key: string | number) => {
 	const item = statsWidgets.value.find(i => i.i === key);
 	if (!item) return;
@@ -93,6 +94,8 @@ const addWidget = (key: string) => {
 };
 
 const theme = useThemeVars();
+
+const { t } = useI18n();
 </script>
 
 <template>
@@ -117,7 +120,7 @@ const theme = useThemeVars();
 		</GridItem>
 
 		<GridItem
-			v-for="widget of statsWidgets.filter(w => w.visible && w.i !== 'Stats')"
+			v-for="widget of statsWidgets.filter(w => w.visible && w.i !== 'streamInfo')"
 			:key="widget.i"
 			:x="widget.x"
 			:y="widget.y"
@@ -138,7 +141,7 @@ const theme = useThemeVars();
 				<n-space vertical>
 					<div style="display: flex; justify-content: space-between;">
 						<div style="white-space: nowrap; overflow: hidden;text-overflow: ellipsis">
-							<span>{{ widget.i }}</span>
+							<span>{{ t(`dashboard.statsWidgets.${widget.i}`) }}</span>
 						</div>
 						<n-button text @click="hideWidget(widget.i)">
 							<IconEyeOff />

diff --git a/frontend/dashboard/src/components/dashboard/statsChannelInfo.vue b/frontend/dashboard/src/components/dashboard/statsChannelInfo.vue
@@ -82,7 +82,7 @@ async function saveChannelInformation() {
 	const { title, categoryId } = form.value;
 	await informationUpdater.mutateAsync({ categoryId, title });
 	isEditInformationModalShowed.value = false;
-	messages.success('Channel information updated');
+	messages.success(t('sharedTexts.saved'));
 }
 
 </script>
@@ -99,10 +99,10 @@ async function saveChannelInformation() {
 			<div style="display: flex; justify-content: space-between; align-items: center">
 				<div style="display: flex; font-size:15px; flex-direction: column; white-space: nowrap; overflow: hidden;text-overflow: ellipsis">
 					<span style="font-size:15px;">
-						{{ props?.title || 'cannot get title' }}
+						{{ props?.title || t('dashboard.statsWidgets.streamInfo.noTitle') }}
 					</span>
 					<span style="font-size:15px;">
-						{{ props?.categoryName || 'cannot get category' }}
+						{{ props?.categoryName || t('dashboard.statsWidgets.streamInfo.noCategory') }}
 					</span>
 				</div>
 
@@ -117,18 +117,18 @@ async function saveChannelInformation() {
 		:bordered="false"
 		:segmented="true"
 		style="width: 500px"
-		title="Edit stream information"
+		:title="t('dashboard.statsWidgets.streamInfo.modalTitle')"
 	>
 		<n-form>
-			<n-form-item label="Title">
-				<n-input v-model:value="form.title" placeholder="channel title" />
+			<n-form-item :label="t('dashboard.statsWidgets.streamInfo.title')">
+				<n-input v-model:value="form.title" :placeholder="t('dashboard.statsWidgets.streamInfo.title')" />
 			</n-form-item>
 
-			<n-form-item label="Category">
+			<n-form-item :label="t('dashboard.statsWidgets.streamInfo.category')">
 				<n-select
 					v-model:value="form.categoryId"
 					filterable
-					placeholder="Search Songs"
+					placeholder="Search..."
 					:options="categoriesOptions"
 					remote
 					:render-label="renderCategory"

diff --git a/frontend/dashboard/src/components/dashboard/widgets.ts b/frontend/dashboard/src/components/dashboard/widgets.ts
@@ -1,7 +1,7 @@
 import { useLocalStorage } from '@vueuse/core';
 import { type LayoutItem } from 'grid-layout-plus';
 
-const version = '4';
+const version = '5';
 
 export type WidgetItem = LayoutItem & { visible: boolean }
 
@@ -11,7 +11,7 @@ export const useWidgets = () => useLocalStorage<WidgetItem[]>(`twirWidgetsPositi
 		y: 0,
 		w: 4,
 		h: 13,
-		i: 'Chat',
+		i: 'chat',
 		minW: 3,
 		minH: 8,
 		visible: true,
@@ -21,7 +21,7 @@ export const useWidgets = () => useLocalStorage<WidgetItem[]>(`twirWidgetsPositi
 		y: 0,
 		w: 4,
 		h: 4,
-		i: 'Bot',
+		i: 'bot',
 		minW: 3,
 		minH: 4,
 		visible: true,
@@ -31,7 +31,7 @@ export const useWidgets = () => useLocalStorage<WidgetItem[]>(`twirWidgetsPositi
 		y: 0,
 		w: 4,
 		h: 13,
-		i: 'Events',
+		i: 'events',
 		minW: 3,
 		minH: 8,
 		visible: true,
@@ -41,7 +41,7 @@ export const useWidgets = () => useLocalStorage<WidgetItem[]>(`twirWidgetsPositi
 		y: 4,
 		w: 4,
 		h: 9,
-		i: 'Stream',
+		i: 'stream',
 		minW: 3,
 		minH: 8,
 		visible: true,

diff --git a/frontend/dashboard/src/locales/en.json b/frontend/dashboard/src/locales/en.json
@@ -152,6 +152,36 @@
 			"notModerator": "We have found that the bot is not a moderator on this channel. Please, use <b>/mod {botName}</b>, otherwise bot won't send messages in chat.",
 			"leave": "Leave",
 			"join": "Join"
+		},
+		"statsWidgets": {
+			"streamInfo": {
+				"noTitle": "Cannot get title",
+				"noCategory": "Cannot get category",
+				"modalTitle": "Edit stream information",
+				"title": "Title",
+				"category": "Category"
+			},
+			"uptime": "Uptime",
+			"followers": "Followers",
+			"messages": "Messages",
+			"subs": "Subs",
+			"usedEmotes": "Used emotes",
+			"viewers": "Viewers",
+			"requestedSongs": "Requested songs"
+		},
+		"widgets": {
+			"chat": {
+				"title": "Chat"
+			},
+			"stream": {
+				"title": "Stream"
+			},
+			"events": {
+				"title": "Events"
+			},
+			"bot": {
+				"title": "Bot managment and information"
+			}
 		}
 	},
 	"integrations": {

diff --git a/frontend/dashboard/src/pages/Dashboard.vue b/frontend/dashboard/src/pages/Dashboard.vue
@@ -55,10 +55,10 @@ const statsBackground = computed(() => theme.value.tabColor);
 				:min-h="item.minH"
 				drag-allow-from=".widgets-draggable-handle"
 			>
-				<Chat v-if="item.i === 'Chat'" :item="item" class="item" />
-				<Bot v-if="item.i === 'Bot'" :item="item" class="item" />
-				<Stream v-if="item.i === 'Stream'" :item="item" class="item" />
-				<Events v-if="item.i === 'Events'" :item="item" class="item" />
+				<Chat v-if="item.i === 'chat'" :item="item" class="item" />
+				<Bot v-if="item.i === 'bot'" :item="item" class="item" />
+				<Stream v-if="item.i === 'stream'" :item="item" class="item" />
+				<Events v-if="item.i === 'events'" :item="item" class="item" />
 			</GridItem>
 		</GridLayout>
 		<div v-if="dropdownOptions.length" style="position: fixed; bottom: 10px; right: 25px">