Encode preset name: #740

ioBroker · Feb 1, 2025 · 743aece · 743aece
1 parent 300be10
commit 743aece
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 14 deletions.
diff --git a/src-chart/src/App.tsx b/src-chart/src/App.tsx
@@ -45,9 +45,9 @@ import plLang from './i18n/pl.json';
 import ukLang from './i18n/uk.json';
 import zhLang from './i18n/zh-cn.json';
 
-import ChartModel, { type SeriesData, type BarAndLineSeries } from './Components/ChartModel';
+import ChartModel, {type SeriesData, type BarAndLineSeries, ChartConfigOld} from './Components/ChartModel';
 import ChartView from './Components/ChartView';
-import type { ChartConfigMore } from '../../src/types';
+import type {ChartConfig, ChartConfigMore} from '../../src/types';
 
 const styles: Record<string, React.CSSProperties> = {
     root: {
@@ -249,7 +249,7 @@ class App extends Component<AppProps, AppState> {
         }
     }
 
-    createChartData(config?: any): void {
+    createChartData(config?: ChartConfig | ChartConfigOld | string): void {
         this.chartData = new ChartModel(this.socket, config, { compact: this.state.compact });
         this.chartData.onError(err => {
             if (err.toString().includes(ERRORS.NOT_CONNECTED)) {
@@ -294,7 +294,7 @@ class App extends Component<AppProps, AppState> {
     onReceiveMessage = (message?: { data: string }): void => {
         if (message && message.data !== 'chartReady') {
             try {
-                const config = JSON.parse(message.data);
+                const config: ChartConfig | ChartConfigOld = JSON.parse(message.data);
                 if (!this.chartData) {
                     this.createChartData(config);
                 } else {

diff --git a/src-chart/src/Components/ChartModel.ts b/src-chart/src/Components/ChartModel.ts
@@ -373,7 +373,7 @@ class ChartModel {
     constructor(
         socket: Connection,
         /** Config or preset ID */
-        config: ChartConfigOld | string,
+        config: ChartConfig | ChartConfigOld | string,
         options?: { updateTimeout?: number; serverSide?: boolean; compact?: boolean },
     ) {
         options = { updateTimeout: 300, ...(options || {}) };
@@ -407,12 +407,12 @@ class ChartModel {
             });
     }
 
-    async analyseAndLoadConfig(config?: string | ChartConfigOld): Promise<void> {
+    async analyseAndLoadConfig(config?: string | ChartConfigOld | ChartConfig): Promise<void> {
         if (config) {
             if (typeof config === 'string') {
                 this.preset = config;
             } else {
-                this.config = normalizeConfig(config);
+                this.config = normalizeConfig(config as ChartConfigOld);
             }
         } else if (!this.serverSide) {
             const query: Record<string, number | string | boolean> = parseQuery(window.location.search); // Utils.parseQuery

diff --git a/src-editor/src/Components/PresetTabs.tsx b/src-editor/src/Components/PresetTabs.tsx
@@ -2159,7 +2159,10 @@ class PresetTabs extends React.Component<PresetTabsProps, PresetTabsState> {
                         <IconButton
                             style={{ ...styles.button, ...styles.noPaddingOnSide }}
                             onClick={() =>
-                                window.open(`chart/index.html?preset=${this.props.selectedId}`, 'own-preset-echarts')
+                                window.open(
+                                    `chart/index.html?preset=${encodeURIComponent(this.props.selectedId)}`,
+                                    'own-preset-echarts',
+                                )
                             }
                             title={I18n.t('Open chart in own window')}
                         >

diff --git a/src-editor/src/MenuList.tsx b/src-editor/src/MenuList.tsx
@@ -151,12 +151,14 @@ class MenuList extends Component<MenuListProps, MenuListState> {
                         value={this.state.search}
                         style={styles.textInput}
                         onChange={e => this.setState({ search: e.target.value })}
-                        InputProps={{
-                            endAdornment: this.state.search ? (
-                                <IconButton onClick={() => this.setState({ search: '' })}>
-                                    <ClearIcon />
-                                </IconButton>
-                            ) : undefined,
+                        slotProps={{
+                            input: {
+                                endAdornment: this.state.search ? (
+                                    <IconButton onClick={() => this.setState({ search: '' })}>
+                                        <ClearIcon />
+                                    </IconButton>
+                                ) : undefined,
+                            },
                         }}
                     />
                 ) : null}