add placeholders to text editors FrigateHostsPage.tsx

src/locales/en.ts

@@ -83,11 +83,15 @@ const en = {
         hostsConfig: 'Frigate servers',
         acessSettings: 'Access settings',
     }, 
-    hostArr: {
-        host: 'Host',
-        name: 'Host name',
-        url: 'Address',
-        enabled: 'Enabled',
+    frigateHostTableTitles: {
+        host: 'Хост',
+        name: 'Имя хоста',
+        url: 'Адрес',
+        enabled: 'Включен',
+    },
+    frigateHostTablePlaceholders: {
+        host: 'http://host.docker.internal:5000 or http://192.168.1.1:5000',
+        name: 'YourFrigateHostName',
     },
     player: {
         startVideo: 'Enable Video',

src/locales/ru.ts

@@ -81,12 +81,16 @@ const ru = {
         hostsConfig: 'Серверы Frigate',
         acessSettings: 'Настройка доступа',
     },
-    hostArr: {
+    frigateHostTableTitles: {
         host: 'Хост',
         name: 'Имя хоста',
         url: 'Адрес',
         enabled: 'Включен',
     },
+    frigateHostTablePlaceholders: {
+        host: 'http://host.docker.internal:5000 or http://192.168.1.1:5000',
+        name: 'YourFrigateHostName',
+    },
     player: {
         startVideo: 'Вкл. Видео',
         stopVideo: 'Выкл. Видео',

src/widgets/SelectedHostList.tsx

@@ -60,7 +60,7 @@ const SelectedHostList = ({
 
     return (
         <Flex w='100%' h='100%' direction='column' align='center'>
-            <Text>{t('hostArr.host')}: {camerasQuery[0].frigateHost?.name}</Text>
+            <Text>{t('frigateHostTableTitles.host')}: {camerasQuery[0].frigateHost?.name}</Text>
             <Accordion
                 mt='1rem'
                 variant='separated'

src/widgets/hosts.table/FrigateHostsTable.tsx

@@ -30,7 +30,7 @@ const FrigateHostsTable = ({ data, showAddButton = false, saveCallback, changedC
 
     useEffect(() => {
         setTableData(data);
-      }, [data]);
+    }, [data]);
 
     useEffect(() => {
         if (!isProduction) console.log('TableData', tableData)
@@ -48,9 +48,9 @@ const FrigateHostsTable = ({ data, showAddButton = false, saveCallback, changedC
     }
 
     const headTitle = [
-        { propertyName: 'name', title: t('hostArr.host') },
-        { propertyName: 'host', title: t('hostArr.url') },
-        { propertyName: 'enabled', title: t('hostArr.enabled') },
+        { propertyName: 'name', title: t('frigateHostTableTitles.host') },
+        { propertyName: 'host', title: t('frigateHostTableTitles.url') },
+        { propertyName: 'enabled', title: t('frigateHostTableTitles.enabled') },
         { title: '', sorting: false },
     ]
 
@@ -108,8 +108,22 @@ const FrigateHostsTable = ({ data, showAddButton = false, saveCallback, changedC
     const rows = tableData.map(item => {
         return (
             <tr key={item.id}>
-                <TextInputCell text={item.name} width='40%' id={item.id} propertyName='name' onChange={handleTextChange} />
-                <TextInputCell text={item.host} width='40%' id={item.id} propertyName='host' onChange={handleTextChange} />
+                <TextInputCell
+                    text={item.name}
+                    width='40%'
+                    id={item.id}
+                    propertyName='name'
+                    onChange={handleTextChange}
+                    placeholder={t('frigateHostTablePlaceholders.name')}
+                />
+                <TextInputCell
+                    text={item.host}
+                    width='40%'
+                    id={item.id}
+                    propertyName='host'
+                    onChange={handleTextChange}
+                    placeholder={t('frigateHostTablePlaceholders.host')}
+                    />
                 <SwitchCell value={item.enabled} width='5%' id={item.id} propertyName='enabled' toggle={handleSwitchChange} />
                 <StateCell id={item.id} width='5%' />
                 <td align='right' style={{ width: '10%', padding: '0', }}>

src/widgets/hosts.table/TextInputCell.tsx

@@ -12,9 +12,10 @@ interface TextImputCellProps {
         propertyName: string,
         value?: string | number | boolean,
     ) => void,
+    placeholder?: string | undefined
 }
 
-const TextInputCell = ({ text, width, id, propertyName, onChange }: TextImputCellProps) => {
+const TextInputCell = ({ text, width, id, propertyName, onChange, placeholder }: TextImputCellProps) => {
     const [value, setValue] = useState(text);
     const [debouncedValue] = useDebouncedValue(value, 300)
     useEffect(() => {
@@ -28,7 +29,12 @@ const TextInputCell = ({ text, width, id, propertyName, onChange }: TextImputCel
     }
     return (
         <td style={{ width: width, textAlign: 'center' }}>
-            <TextInput onChange={handleChange} size='sm' value={String(value)} />
+            <TextInput
+                onChange={handleChange}
+                size='sm'
+                value={String(value)}
+                placeholder={placeholder}
+            />
         </td>
     )
 }