Skip to content

Commit

Permalink
Remove in some files the withStyles
Browse files Browse the repository at this point in the history
  • Loading branch information
@GermanBluefox
GermanBluefox committed Jul 19, 2024
1 parent e991a77 commit 7e02a7e
Show file tree
Hide file tree
Showing 2 changed files with 53 additions and 58 deletions.
47 changes: 23 additions & 24 deletions engine/front-end/src/Footer.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@mui/styles';

import {
FaGithubSquare as IconGithub,
Expand All @@ -12,13 +11,14 @@ import LogoIoBroker from './assets/iobroker-logo-small.png';

import Utils from './Utils';
import I18n from './i18n';
import {Box} from "@mui/material";

const styles = theme => ({
footer: {
const styles = {
footer: theme => ({
background: theme.palette.primary.light,
textAlign: 'center',
padding: 20,
},
p: '20px',
}),
footerIconDiv: {
width: 54,
height: 54,
Expand Down Expand Up @@ -51,51 +51,50 @@ const styles = theme => ({
color: '#b1b1b1',
paddingRight: 10,
},
});
};

class Loader extends React.Component {
render() {
return <div className={this.props.classes.footer}>
<div title="Repository" className={this.props.classes.footerIconDiv}>
return <Box sx={styles.footer}>
<div title="Repository" style={styles.footerIconDiv}>
<IconGithub
className={this.props.classes.footerIcon}
style={styles.footerIcon}
onClick={() => Utils.openLink('https://github.com/ioBroker')}
/>
</div>
<div title="Community adapters repository" className={this.props.classes.footerIconDiv}>
<div title="Community adapters repository" style={styles.footerIconDiv}>
<IconGithub
className={this.props.classes.footerIcon}
style={styles.footerIcon}
onClick={() => Utils.openLink('https://github.com/iobroker-community-adapters')}
/>
<div className={this.props.classes.footerIconText}>Community</div>
<div style={styles.footerIconText}>Community</div>
</div>
<div title="Unofficial Facebook group" className={this.props.classes.footerIconDiv}>
<div title="Unofficial Facebook group" style={styles.footerIconDiv}>
<IconFacebook
className={this.props.classes.footerIcon}
style={styles.footerIcon}
onClick={() => Utils.openLink('https://www.facebook.com/groups/440499112958264')}
/>
</div>
<div title="Discord Server" className={this.props.classes.footerIconDiv}>
<div title="Discord Server" style={styles.footerIconDiv}>
<IconDiscord
className={this.props.classes.footerIcon}
style={{ height: 50 }}
style={{ ...styles.footerIcon, height: 50 }}
onClick={() => Utils.openLink('https://discord.gg/HwUCwsH')}
/>
</div>
<br />

<div className={this.props.classes.footerLink} onClick={() => this.props.onNavigate(null, 'imprint')}>{I18n.t('Imprint')}</div>
<div className={this.props.classes.footerLink} style={{ cursor: 'inherit' }}> | </div>
<div className={this.props.classes.footerLink} onClick={() => this.props.onNavigate(null, 'privacy')}>{I18n.t('Privacy policy')}</div>
<div style={styles.footerLink} onClick={() => this.props.onNavigate(null, 'imprint')}>{I18n.t('Imprint')}</div>
<div style={{ ...styles.footerLink, cursor: 'inherit' }}> | </div>
<div style={styles.footerLink} onClick={() => this.props.onNavigate(null, 'privacy')}>{I18n.t('Privacy policy')}</div>

<p className={this.props.classes.footerCopyright}>Copyright © 2014-2024 by the ioBroker Community and the ioBroker GmbH.</p>
<img src={LogoIoBroker} className={this.props.classes.footerLogo} alt="logo" />
</div>;
<p style={styles.footerCopyright}>Copyright © 2014-2024 by the ioBroker Community and the ioBroker GmbH.</p>
<img src={LogoIoBroker} style={styles.footerLogo} alt="logo" />
</Box>;
}
}

Loader.propTypes = {
onNavigate: PropTypes.func,
};

export default withStyles(styles)(Loader);
export default Loader;
64 changes: 30 additions & 34 deletions engine/front-end/src/Pages/Statistics.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React, { Component } from 'react';
import { withStyles } from '@mui/styles';
import PropTypes from 'prop-types';

import {
Expand All @@ -24,17 +23,14 @@ import {

import { MdFullscreen as IconZoom } from 'react-icons/md';

import { Utils as ARUtils } from '@iobroker/adapter-react-v5';

import I18n from '../i18n';
import Utils from '../Utils';
import PieStats from '../Components/PieStats';
import Footer from '../Footer';

echarts.use([LineChart, TooltipComponent, LegendComponent, GridComponent, SVGRenderer]);

const styles = theme => ({
content: theme.content,
const styles = {
iframe: {
border: 0,
overflow: 'hidden',
Expand Down Expand Up @@ -127,7 +123,7 @@ const styles = theme => ({
tableColumnPercent: {

},
});
};
const MAX_MOBILE_WIDTH = 1000;
class Statistics extends Component {
constructor(props) {
Expand Down Expand Up @@ -156,15 +152,15 @@ class Statistics extends Component {
}

renderMap() {
return <Paper key="map" className={ARUtils.clsx(this.props.classes.paper, this.props.classes.paperMap)}>
return <Paper key="map" style={{ ...styles.paper, ...styles.paperMap }}>
<IconButton
className={this.props.classes.iframeButton}
style={styles.iframeButton}
title={I18n.t('Open in new window')}
onClick={() => Utils.openLink('data/map.html')}
>
<IconZoom />
</IconButton>
<iframe title="googleMaps" className={this.props.classes.iframe} src="data/map.html" />
<iframe title="googleMaps" style={styles.iframe} src="data/map.html" />
</Paper>;
}

Expand All @@ -175,20 +171,20 @@ class Statistics extends Component {
const keys = Object.keys(countries);
keys.forEach(c => sum += countries[c]);

return <Table key="table" padding="none" className={this.props.classes.table}>
return <Table key="table" padding="none" style={styles.table}>
<TableHead>
<TableRow style={{ background: 'grey', color: 'white' }}>
<TableCell className={ARUtils.clsx(this.props.classes.tableCell, this.props.classes.tableColumnVersion)} align="left">{I18n.t('Country')}</TableCell>
<TableCell className={ARUtils.clsx(this.props.classes.tableCell, this.props.classes.tableColumnCount)} align="left">{I18n.t('Count')}</TableCell>
<TableCell className={ARUtils.clsx(this.props.classes.tableCell, this.props.classes.tableColumnPercent)} align="left">%</TableCell>
<TableCell style={{ ...styles.tableCell, ...styles.tableColumnVersion }} align="left">{I18n.t('Country')}</TableCell>
<TableCell style={{ ...styles.tableCell, ...styles.tableColumnCount }} align="left">{I18n.t('Count')}</TableCell>
<TableCell style={{ ...styles.tableCell, ...styles.tableColumnPercent }} align="left">%</TableCell>
</TableRow>
</TableHead>
<TableBody>
{keys.map((c, i) =>
<TableRow key={i} className={this.props.classes.tableRow}>
<TableCell className={ARUtils.clsx(this.props.classes.tableCell, this.props.classes.tableColumnVersion)}>{c}</TableCell>
<TableCell className={ARUtils.clsx(this.props.classes.tableCell, this.props.classes.tableColumnCount)}>{countries[c]}</TableCell>
<TableCell className={ARUtils.clsx(this.props.classes.tableCell, this.props.classes.tableColumnPercent)}>
<TableRow key={i} sx={styles.tableRow}>
<TableCell style={{ ...styles.tableCell, ...styles.tableColumnVersion }}>{c}</TableCell>
<TableCell style={{ ...styles.tableCell, ...styles.tableColumnCount }}>{countries[c]}</TableCell>
<TableCell style={{ ...styles.tableCell, ...styles.tableColumnPercent }}>
{Math.round((countries[c] / sum) * 10000) / 100}
%
</TableCell>
Expand All @@ -202,7 +198,7 @@ class Statistics extends Component {
return null;
}

return <Paper key="countries" className={ARUtils.clsx(this.props.classes.paper, this.props.classes.paperCountries, this.state.mobile ? this.props.classes.paperMobile : '')}>
return <Paper key="countries" style={{ ...styles.paper, ...styles.paperCountries, ...(this.state.mobile ? styles.paperMobile : undefined) }}>
{this.renderCountriesTable()}
</Paper>;
}
Expand All @@ -212,8 +208,8 @@ class Statistics extends Component {
return null;
}

return <Paper key="plattform" className={ARUtils.clsx(this.props.classes.paper, this.props.classes.paperPlatforms, this.state.mobile ? this.props.classes.paperMobile : '')}>
<div className={this.props.classes.paperHeader} title={this.state.date}>{I18n.t('Platforms')}</div>
return <Paper key="plattform" style={{ ...styles.paper, ...styles.paperPlatforms, ...(this.state.mobile ? styles.paperMobile : undefined) }}>
<div style={styles.paperHeader} title={this.state.date}>{I18n.t('Platforms')}</div>
<PieStats
data={this.state.statistics.platforms}
height="380px"
Expand All @@ -228,8 +224,8 @@ class Statistics extends Component {
return null;
}

return <Paper key="language" className={ARUtils.clsx(this.props.classes.paper, this.props.classes.paperLanguages, this.state.mobile ? this.props.classes.paperMobile : '')}>
<div className={this.props.classes.paperHeader} title={this.state.date}>{I18n.t('Languages')}</div>
return <Paper key="language" style={{ ...styles.paper, ...styles.paperLanguages, ...(this.state.mobile ? styles.paperMobile : undefined) }}>
<div style={styles.paperHeader} title={this.state.date}>{I18n.t('Languages')}</div>
<PieStats
data={this.state.statistics.languages}
startFromPercent={0}
Expand All @@ -244,8 +240,8 @@ class Statistics extends Component {
return null;
}

return <Paper key="nodes" className={ARUtils.clsx(this.props.classes.paper, this.props.classes.paperNodes, this.state.mobile ? this.props.classes.paperMobile : '')}>
<div className={this.props.classes.paperHeader} title={this.state.date}>{I18n.t('Node versions')}</div>
return <Paper key="nodes" style={{ ...styles.paper, ...styles.paperNodes, ...(this.state.mobile ? styles.paperMobile : undefined) }}>
<div style={styles.paperHeader} title={this.state.date}>{I18n.t('Node versions')}</div>
<PieStats
data={this.state.statistics.nodes}
height="380px"
Expand Down Expand Up @@ -321,10 +317,10 @@ class Statistics extends Component {
}],
};

return <Paper key="counters" className={ARUtils.clsx(this.props.classes.paper, this.props.classes.paperCounters, this.state.mobile ? this.props.classes.paperMobile : '')}>
return <Paper key="counters" style={{ ...styles.paper, ...styles.paperCounters, ...(this.state.mobile ? styles.paperMobile : undefined) }}>
<div
title={this.state.date}
className={this.props.classes.paperHeader}
style={styles.paperHeader}
>
{`${I18n.t('Installations')} ${counts[labels[labels.length - 1]]} - ${labels[labels.length - 1]}`}
</div>
Expand All @@ -345,8 +341,8 @@ class Statistics extends Component {
return null;
}

return <Paper key="types" className={ARUtils.clsx(this.props.classes.paper, this.props.classes.paperPlatforms, this.state.mobile ? this.props.classes.paperMobile : '')}>
<div className={this.props.classes.paperHeader} title={this.state.date}>{I18n.t('State DB Types')}</div>
return <Paper key="types" style={{ ...styles.paper, ...styles.paperPlatforms, ...(this.state.mobile ? styles.paperMobile : undefined) }}>
<div style={styles.paperHeader} title={this.state.date}>{I18n.t('State DB Types')}</div>
<PieStats
data={this.state.statistics.dbTypeStates}
height="380px"
Expand All @@ -361,8 +357,8 @@ class Statistics extends Component {
return null;
}

return <Paper key="dbs" className={ARUtils.clsx(this.props.classes.paper, this.props.classes.paperPlatforms, this.state.mobile ? this.props.classes.paperMobile : '')}>
<div className={this.props.classes.paperHeader} title={this.state.date}>{I18n.t('Object DB Types')}</div>
return <Paper key="dbs" style={{ ...styles.paper, ...styles.paperPlatforms, ...(this.state.mobile ? styles.paperMobile : undefined) }}>
<div style={styles.paperHeader} title={this.state.date}>{I18n.t('Object DB Types')}</div>
<PieStats
data={this.state.statistics.dbTypeObjects}
height="380px"
Expand All @@ -377,8 +373,8 @@ class Statistics extends Component {
return null;
}

return <Paper key="plattform" className={ARUtils.clsx(this.props.classes.paper, this.props.classes.paperPlatforms, this.state.mobile ? this.props.classes.paperMobile : '')}>
<div className={this.props.classes.paperHeader} title={this.state.date}>{I18n.t('Docker vs Normal')}</div>
return <Paper key="plattform" style={{ ...styles.paper, ...styles.paperPlatforms, ...(this.state.mobile ? styles.paperMobile : undefined) }}>
<div style={styles.paperHeader} title={this.state.date}>{I18n.t('Docker vs Normal')}</div>
<PieStats
data={this.state.statistics.docker}
height="380px"
Expand All @@ -391,7 +387,7 @@ class Statistics extends Component {
render() {
return [
this.renderMap(),
<div key="stat" className={this.props.classes.root}>
<div key="stat" style={styles.root}>
{this.renderPlatforms()}
{this.renderLanguages()}
{this.renderNodes()}
Expand All @@ -413,4 +409,4 @@ Statistics.propTypes = {
contentWidth: PropTypes.number,
};

export default withStyles(styles)(Statistics);
export default Statistics;

0 comments on commit 7e02a7e

Please sign in to comment.