1
1
"use client" ;
2
2
3
3
import React , { useEffect , useRef , useState } from "react" ;
4
+ import { useTranslation } from "react-i18next" ;
4
5
5
6
import Home from "../components/Home/Home" ;
6
7
@@ -78,6 +79,7 @@ const fromDraft = (d: DraftConfig): ConfigurationsPageProps => ({
78
79
const formatNum = formatSig2 ;
79
80
80
81
export default function ConfigurationsPage ( ) {
82
+ const { t } = useTranslation ( ) ;
81
83
const [ configurations , setConfigurations ] = useState < StoredConfig [ ] > ( [ ] ) ;
82
84
const [ index , setIndex ] = useState ( 0 ) ;
83
85
const [ dragX , setDragX ] = useState ( 0 ) ;
@@ -179,7 +181,7 @@ export default function ConfigurationsPage() {
179
181
if ( typeof window === 'undefined' ) return ;
180
182
const item = configurations [ i ] ;
181
183
if ( ! item ) return ;
182
- const confirmed = window . confirm ( 'Delete this configuration? This cannot be undone.' ) ;
184
+ const confirmed = window . confirm ( t ( 'configurations.delete_confirmation' ) ) ;
183
185
if ( ! confirmed ) return ;
184
186
try {
185
187
window . localStorage . removeItem ( item . key ) ;
@@ -219,8 +221,8 @@ export default function ConfigurationsPage() {
219
221
{ configurations . length === 0 ? (
220
222
< section className = "card" key = "empty" >
221
223
< div className = "card-inner" >
222
- < h2 > No configurations</ h2 >
223
- < p > Add a configuration to see it here. </ p >
224
+ < h2 > { t ( ' configurations.no_configurations' ) } </ h2 >
225
+ < p > { t ( 'configurations.add_configuration_message' ) } </ p >
224
226
</ div >
225
227
</ section >
226
228
) : (
@@ -229,35 +231,35 @@ export default function ConfigurationsPage() {
229
231
< div className = "card-inner" >
230
232
< div style = { { display : 'flex' , width : '100%' , alignItems : 'center' } } >
231
233
< h2 style = { { flex : 1 } } >
232
- { cfg . chlorinationConfigName ?? `Configuration ${ i + 1 } ` }
234
+ { cfg . chlorinationConfigName ?? `${ t ( 'configurations.configuration' ) } ${ i + 1 } ` }
233
235
</ h2 >
234
236
{ editingIndex === i ? (
235
237
< > </ >
236
238
) : (
237
- < button onClick = { ( ) => beginEdit ( i ) } className = "blue-btn" > Edit </ button >
239
+ < button onClick = { ( ) => beginEdit ( i ) } className = "blue-btn" > { t ( 'configurations.edit' ) } </ button >
238
240
) }
239
241
</ div >
240
242
241
243
{ editingIndex === i ? (
242
244
< div style = { { marginTop : 12 , display : 'flex' , flexDirection : 'column' , gap : 12 , width : '100%' , flex : 1 } } >
243
245
< label style = { { display : 'flex' , flexDirection : 'column' , alignItems : 'flex-start' } } >
244
- < span > Name </ span >
246
+ < span > { t ( 'configurations.name' ) } </ span >
245
247
< input
246
248
value = { draft ?. chlorinationConfigName ?? '' }
247
249
onChange = { ( e ) => setDraft ( ( d ) => ( { ...( d as DraftConfig ) , chlorinationConfigName : e . target . value } ) ) }
248
250
style = { { background : '#111' , color : '#fff' , border : '1px solid #fff' , padding : 6 , borderRadius : 4 , width : '100%' , textAlign : 'left' } }
249
251
/>
250
252
</ label >
251
253
< label style = { { display : 'flex' , flexDirection : 'column' , alignItems : 'flex-start' } } >
252
- < span > Description </ span >
254
+ < span > { t ( 'configurations.description' ) } </ span >
253
255
< input
254
256
value = { draft ?. chlorinationConfigDescription ?? '' }
255
257
onChange = { ( e ) => setDraft ( ( d ) => ( { ...( d as DraftConfig ) , chlorinationConfigDescription : e . target . value } ) ) }
256
258
style = { { background : '#111' , color : '#fff' , border : '1px solid #fff' , padding : 6 , borderRadius : 4 , width : '100%' , textAlign : 'left' } }
257
259
/>
258
260
</ label >
259
261
< label style = { { display : 'flex' , flexDirection : 'column' , alignItems : 'flex-start' } } >
260
- < span > MS Volume </ span >
262
+ < span > { t ( 'configurations.ms_volume' ) } </ span >
261
263
< input
262
264
type = "number"
263
265
step = "any"
@@ -267,7 +269,7 @@ export default function ConfigurationsPage() {
267
269
/>
268
270
</ label >
269
271
< label style = { { display : 'flex' , flexDirection : 'column' , alignItems : 'flex-start' } } >
270
- < span > Chlorine % </ span >
272
+ < span > { t ( 'configurations.chlorine_percentage' ) } </ span >
271
273
< input
272
274
type = "number"
273
275
step = "any"
@@ -277,7 +279,7 @@ export default function ConfigurationsPage() {
277
279
/>
278
280
</ label >
279
281
< label style = { { display : 'flex' , flexDirection : 'column' , alignItems : 'flex-start' } } >
280
- < span > Reservoir Ingress </ span >
282
+ < span > { t ( 'configurations.reservoir_ingress' ) } </ span >
281
283
< input
282
284
type = "number"
283
285
step = "any"
@@ -287,7 +289,7 @@ export default function ConfigurationsPage() {
287
289
/>
288
290
</ label >
289
291
< label style = { { display : 'flex' , flexDirection : 'column' , alignItems : 'flex-start' } } >
290
- < span > Chlorine Weight </ span >
292
+ < span > { t ( 'configurations.chlorine_weight' ) } </ span >
291
293
< input
292
294
type = "number"
293
295
step = "any"
@@ -297,7 +299,7 @@ export default function ConfigurationsPage() {
297
299
/>
298
300
</ label >
299
301
< label style = { { display : 'flex' , flexDirection : 'column' , alignItems : 'flex-start' } } >
300
- < span > Desired Drip Rate </ span >
302
+ < span > { t ( 'configurations.desired_drip_rate' ) } </ span >
301
303
< input
302
304
type = "number"
303
305
step = "any"
@@ -307,7 +309,7 @@ export default function ConfigurationsPage() {
307
309
/>
308
310
</ label >
309
311
< label style = { { display : 'flex' , flexDirection : 'column' , alignItems : 'flex-start' } } >
310
- < span > MS Concentration </ span >
312
+ < span > { t ( 'configurations.ms_concentration' ) } </ span >
311
313
< input
312
314
type = "number"
313
315
step = "any"
@@ -317,7 +319,7 @@ export default function ConfigurationsPage() {
317
319
/>
318
320
</ label >
319
321
< label style = { { display : 'flex' , flexDirection : 'column' , alignItems : 'flex-start' } } >
320
- < span > Desired Concentration </ span >
322
+ < span > { t ( 'configurations.desired_concentration' ) } </ span >
321
323
< input
322
324
type = "number"
323
325
step = "any"
@@ -327,7 +329,7 @@ export default function ConfigurationsPage() {
327
329
/>
328
330
</ label >
329
331
< label style = { { display : 'flex' , flexDirection : 'column' , alignItems : 'flex-start' } } >
330
- < span > Refill Time </ span >
332
+ < span > { t ( 'configurations.refill_time' ) } </ span >
331
333
< input
332
334
type = "number"
333
335
step = "any"
@@ -337,9 +339,9 @@ export default function ConfigurationsPage() {
337
339
/>
338
340
</ label >
339
341
< div style = { { marginTop : 'auto' , display : 'flex' , flexDirection : 'column' , gap : 10 , width : '100%' } } >
340
- < button onClick = { saveEdit } className = "success-btn" style = { { width : '100%' } } > Save </ button >
341
- < button onClick = { ( ) => deleteConfig ( i ) } className = "danger-btn" style = { { width : '100%' } } > Delete </ button >
342
- < button onClick = { cancelEdit } className = "blue-btn" style = { { width : '100%' } } > Cancel </ button >
342
+ < button onClick = { saveEdit } className = "success-btn" style = { { width : '100%' } } > { t ( 'configurations.save' ) } </ button >
343
+ < button onClick = { ( ) => deleteConfig ( i ) } className = "danger-btn" style = { { width : '100%' } } > { t ( 'configurations.delete' ) } </ button >
344
+ < button onClick = { cancelEdit } className = "blue-btn" style = { { width : '100%' } } > { t ( 'configurations.cancel' ) } </ button >
343
345
</ div >
344
346
</ div >
345
347
) : (
@@ -351,7 +353,7 @@ export default function ConfigurationsPage() {
351
353
) }
352
354
{ cfg . chlorinationConfigTimeCreated && (
353
355
< p style = { { marginTop : 8 , opacity : 0.8 } } >
354
- Created : { new Date ( cfg . chlorinationConfigTimeCreated ) . toLocaleString ( ) }
356
+ { t ( 'configurations.created' ) } : { new Date ( cfg . chlorinationConfigTimeCreated ) . toLocaleString ( ) }
355
357
</ p >
356
358
) }
357
359
< div
@@ -366,28 +368,28 @@ export default function ConfigurationsPage() {
366
368
} }
367
369
>
368
370
< div >
369
- < strong > MS Volume :</ strong > { formatNum ( cfg . msVolume ) }
371
+ < strong > { t ( 'configurations.ms_volume' ) } :</ strong > { formatNum ( cfg . msVolume ) }
370
372
</ div >
371
373
< div >
372
- < strong > Chlorine % :</ strong > { formatNum ( cfg . chlorinePercentage ) }
374
+ < strong > { t ( 'configurations.chlorine_percentage' ) } :</ strong > { formatNum ( cfg . chlorinePercentage ) }
373
375
</ div >
374
376
< div >
375
- < strong > Reservoir Ingress :</ strong > { formatNum ( cfg . reservoirIngress ) }
377
+ < strong > { t ( 'configurations.reservoir_ingress' ) } :</ strong > { formatNum ( cfg . reservoirIngress ) }
376
378
</ div >
377
379
< div >
378
- < strong > Chlorine Weight :</ strong > { formatNum ( cfg . chlorineWeight ) }
380
+ < strong > { t ( 'configurations.chlorine_weight' ) } :</ strong > { formatNum ( cfg . chlorineWeight ) }
379
381
</ div >
380
382
< div >
381
- < strong > Desired Drip Rate :</ strong > { formatNum ( cfg . desiredDripRate ) }
383
+ < strong > { t ( 'configurations.desired_drip_rate' ) } :</ strong > { formatNum ( cfg . desiredDripRate ) }
382
384
</ div >
383
385
< div >
384
- < strong > MS Concentration :</ strong > { formatNum ( cfg . msConcentration ) }
386
+ < strong > { t ( 'configurations.ms_concentration' ) } :</ strong > { formatNum ( cfg . msConcentration ) }
385
387
</ div >
386
388
< div >
387
- < strong > Desired Concentration :</ strong > { formatNum ( cfg . desiredConcentration ) }
389
+ < strong > { t ( 'configurations.desired_concentration' ) } :</ strong > { formatNum ( cfg . desiredConcentration ) }
388
390
</ div >
389
391
< div >
390
- < strong > Refill Time :</ strong > { formatNum ( cfg . refillTime ) }
392
+ < strong > { t ( 'configurations.refill_time' ) } :</ strong > { formatNum ( cfg . refillTime ) }
391
393
</ div >
392
394
</ div >
393
395
</ >
@@ -403,7 +405,7 @@ export default function ConfigurationsPage() {
403
405
< button
404
406
key = { i }
405
407
className = { "dot" + ( i === index ? " active" : "" ) }
406
- aria-label = { `Go to slide ${ i + 1 } ` }
408
+ aria-label = { `${ t ( 'configurations.go_to_slide' ) } ${ i + 1 } ` }
407
409
onClick = { ( ) => { if ( editingIndex === null ) setIndex ( i ) ; } }
408
410
/>
409
411
) ) }
0 commit comments