Add debug tranlsations

web/public/locales/en/translation.json

@@ -2,23 +2,29 @@
     "all": "All",
     "all_cameras": "All Cameras",
     "all_labels": "All Labels",
-    "all_sub_labels": "All Sub Labels"
+    "all_sub_labels": "All Sub Labels",
     "all_zones": "All Zones",
     "are_you_sure": "Are you sure?",
     "auto_dark_mode": "Auto Dark Mode",
     "best_image": "Best Image",
     "birdseye": "Birdseye",
+    "_camera": "camera",
+    "camera": "Camera",
     "cameras": "Cameras",
     "cancel": "Cancel",
     "clip": "Clip",
     "close": "Close",
     "_confidence": "confidence",
+    "config": "Config",
+    "copy_clipboard": "Copy To Clipboard",
     "custom_range": "Custom Range",
     "dark": "Dark",
     "debug": "Debug",
+    "debug_update_interval": "Debug stats update automatically every {interval} seconds.",
     "delete": "Delete",
     "desc_delete_saved_event": "Confirm deletion of saved event.",
     "desc_no_recordings": "Make sure you have enabled the record role in your configuration for the {camera} camera.",
+    "_detector": "detector",
     "documentation": "Documentation",
     "download_clip": "Download Clip",
     "download_snapshot": "Download Snapshot",

web/src/routes/Debug.jsx

@@ -7,10 +7,12 @@ import { useMqtt } from '../api/mqtt';
 import useSWR from 'swr';
 import { Table, Tbody, Thead, Tr, Th, Td } from '../components/Table';
 import { useCallback } from 'preact/hooks';
+import { useTranslation } from 'react-i18next';
 
 const emptyObject = Object.freeze({});
 
 export default function Debug() {
+  const { t } = useTranslation();
   const { data: config } = useSWR('config');
 
   const {
@@ -35,7 +37,7 @@ export default function Debug() {
   return (
     <div className="space-y-4 p-2 px-4">
       <Heading>
-        Debug <span className="text-sm">{service.version}</span>
+        {t('debug')} <span className="text-sm">{service.version}</span>
       </Heading>
 
       {!detectors ? (
@@ -48,7 +50,7 @@ export default function Debug() {
             <Table className="w-full">
               <Thead>
                 <Tr>
-                  <Th>detector</Th>
+                  <Th>{t('_detector')}</Th>
                   {detectorDataKeys.map((name) => (
                     <Th key={name}>{name.replace('_', ' ')}</Th>
                   ))}
@@ -71,7 +73,7 @@ export default function Debug() {
             <Table className="w-full">
               <Thead>
                 <Tr>
-                  <Th>camera</Th>
+                  <Th>{t('_camera')}</Th>
                   {cameraDataKeys.map((name) => (
                     <Th key={name}>{name.replace('_', ' ')}</Th>
                   ))}
@@ -92,14 +94,14 @@ export default function Debug() {
             </Table>
           </div>
 
-          <p>Debug stats update automatically every {config.mqtt.stats_interval} seconds.</p>
+          <p>{t('debug_update_interval').replace("{interval}", config.mqtt.stats_interval)}</p>
         </Fragment>
       )}
 
       <div className="relative">
-        <Heading size="sm">Config</Heading>
+        <Heading size="sm">{t('config')}</Heading>
         <Button className="absolute top-8 right-4" onClick={handleCopyConfig}>
-          Copy to Clipboard
+          {t('copy_clipboard')}
         </Button>
         <pre className="overflow-auto font-mono text-gray-900 dark:text-gray-100 rounded bg-gray-100 dark:bg-gray-800 p-2 max-h-96">
           {JSON.stringify(config, null, 2)}