1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
import React from 'react';
import ElectricalServicesIcon from '@mui/icons-material/ElectricalServices';
import { makeStyles } from '@mui/styles';
import {
Autocomplete, Button, Container, createFilterOptions, TextField,
} from '@mui/material';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from '../common/components/LocalizationProvider';
const currentServer = `${window.location.protocol}//${window.location.host}`;
const officialServers = [
currentServer,
'https://demo.traccar.org',
'https://demo2.traccar.org',
'https://demo3.traccar.org',
'https://demo4.traccar.org',
'https://server.traccar.org',
'http://localhost:8082',
'http://localhost:3000',
];
const useStyles = makeStyles((theme) => ({
icon: {
textAlign: 'center',
fontSize: '128px',
color: theme.palette.colors.neutral,
},
container: {
textAlign: 'center',
padding: theme.spacing(5, 3),
},
field: {
margin: theme.spacing(3, 0),
},
}));
const ChangeServerPage = () => {
const classes = useStyles();
const navigate = useNavigate();
const t = useTranslation();
const filter = createFilterOptions();
const handleSubmit = (url) => {
if (window.webkit && window.webkit.messageHandlers.appInterface) {
window.webkit.messageHandlers.appInterface.postMessage(`server|${url}`);
} else if (window.appInterface) {
window.appInterface.postMessage(`server|${url}`);
} else {
window.location.replace(url);
}
};
return (
<Container maxWidth="xs" className={classes.container}>
<ElectricalServicesIcon className={classes.icon} />
<Autocomplete
freeSolo
className={classes.field}
options={officialServers}
renderInput={(params) => <TextField {...params} label={t('settingsServer')} />}
value={currentServer}
onChange={(_, value) => value && handleSubmit(value)}
filterOptions={(options, params) => {
const filtered = filter(options, params);
if (params.inputValue && !filtered.includes(params.inputValue)) {
filtered.push(params.inputValue);
}
return filtered;
}}
/>
<Button
onClick={() => navigate(-1)}
color="secondary"
>
{t('sharedCancel')}
</Button>
</Container>
);
};
export default ChangeServerPage;
|
