Techognito/starter-kit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: card hide funcionality

Browse source
This commit is contained in:
Cristopfer Luis Viana da Silva 2024-02-05 16:09:56 -03:00
parent 941147b1de
commit 7f3cb61940
1 changed files with 35 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

55
src/app.jsx
View file

@ -31,11 +31,13 @@ export class Application extends React.Component {
} }
componentDidMount() { componentDidMount() {
const storageHidedCards = localStorage.getItem('hidedCards');
const hidedCards = storageHidedCards != null && storageHidedCards !== '' ? storageHidedCards.split(',') : [];
const intervalId = setInterval(() => { const intervalId = setInterval(() => {
if (!this.state.isShowBtnInstall && !this.state.isError) if (!this.state.isShowBtnInstall && !this.state.isError)
this.loadSensors(); this.loadSensors();
}, 1000); }, 1000);
this.setState({ intervalId, hidedCards: localStorage.getItem('hidedCards') }); this.setState({ intervalId, hidedCards });
} }
componentWillUnmount() { componentWillUnmount() {
@ -142,7 +144,6 @@ export class Application extends React.Component {
Object.keys(isExpanded).forEach((element) => { Object.keys(isExpanded).forEach((element) => {
isExpanded[element] = checked; isExpanded[element] = checked;
}); });
console.log(this.state.isExpanded, isExpanded);
this.setState({ isExpanded, expandAllCards: checked }); this.setState({ isExpanded, expandAllCards: checked });
}; };
@ -176,7 +177,6 @@ export class Application extends React.Component {
this.setState({ isShowLoading: true }); this.setState({ isShowLoading: true });
cockpit.spawn(this.installCmd, { err: "message", superuser: "require" }) cockpit.spawn(this.installCmd, { err: "message", superuser: "require" })
.done((sucess) => { .done((sucess) => {
console.log('instalou ?');
this.setState({ isShowLoading: false, isShowBtnInstall: false, alert: null }); this.setState({ isShowLoading: false, isShowBtnInstall: false, alert: null });
cockpit.spawn(["sensors-detect", "--auto"], { err: "message", superuser: "require" }) cockpit.spawn(["sensors-detect", "--auto"], { err: "message", superuser: "require" })
.done((sucess) => { .done((sucess) => {
@ -189,7 +189,6 @@ export class Application extends React.Component {
}); });
}) })
.fail((err) => { .fail((err) => {
console.log('erro ?');
this.setState({ isShowLoading: false, isShowBtnInstall: false }); this.setState({ isShowLoading: false, isShowBtnInstall: false });
this.setAlert(err.message, 'warning'); this.setAlert(err.message, 'warning');
}); });
@ -215,22 +214,26 @@ export class Application extends React.Component {
}; };
handleOnExpand = (event, id) => { handleOnExpand = (event, id) => {
// eslint-disable-next-line no-console
const isExpanded = this.state.isExpanded; const isExpanded = this.state.isExpanded;
isExpanded[id] = !isExpanded[id]; isExpanded[id] = !isExpanded[id];
console.log(id, this.state.isExpanded, isExpanded);
this.setState({ isExpanded }); this.setState({ isExpanded });
}; };
hideCard(cardId) { hideCard(cardId) {
const hidedCards = this.state.hidedCards.push(cardId); const hidedCards = this.state.hidedCards;
localStorage.setItem('hidedCards', hidedCards) hidedCards.push(cardId);
localStorage.setItem('hidedCards', hidedCards);
this.setState({ hidedCards });
}
handleShowHidedCards() {
const hidedCards = [];
localStorage.setItem('hidedCards', hidedCards);
this.setState({ hidedCards }); this.setState({ hidedCards });
} }
render() { render() {
const { sensors, alert, fahrenheitChecked, isShowBtnInstall, isShowLoading, isExpanded, expandAllCards } = this.state; const { sensors, alert, fahrenheitChecked, isShowBtnInstall, isShowLoading, isExpanded, expandAllCards, hidedCards } = this.state;
return ( return (
<> <>
<Card> <Card>
@ -254,14 +257,24 @@ export class Application extends React.Component {
{isShowLoading ? <Spinner isSVG /> : <></>} {isShowLoading ? <Spinner isSVG /> : <></>}
{alert != null ? <Alert variant={alert.variant}>{alert.msg}</Alert> : <></>} {alert != null ? <Alert variant={alert.variant}>{alert.msg}</Alert> : <></>}
{isShowBtnInstall ? <Button onClick={this.handleInstallSensors}>{_('Install')}</Button> : <></>} {isShowBtnInstall ? <Button onClick={this.handleInstallSensors}>{_('Install')}</Button> : <></>}
{hidedCards.length > 0 ? <Button onClick={() => this.handleShowHidedCards()}>{_('Show hided cards')}</Button> : <></>}
</> </>
{sensors !== null {sensors !== null
? Object.entries(sensors).map((key, keyIndex) => ? Object.entries(sensors).map((key, keyIndex) => {
<div key={key}> if (hidedCards.includes(key[0])) {
return ('');
}
return (
<Card key={key}> <Card key={key}>
<CardTitle>{key[0]}</CardTitle> <CardTitle>{key[0]}
<Button variant="plain" aria-label="Action" onClick={() => this.hideCard(key[0])}>
<EyeSlashIcon />
</Button>
</CardTitle>
<CardBody> <CardBody>
<CardTitle>{key[1].Adapter}</CardTitle> <CardTitle>{key[1].Adapter}</CardTitle>
<Flex key={key[1]}> <Flex key={key[1]}>
{Object.entries(key[1]).map((item, itemIndex) => { {Object.entries(key[1]).map((item, itemIndex) => {
if (itemIndex === 0) return ""; if (itemIndex === 0) return "";
@ -269,8 +282,12 @@ export class Application extends React.Component {
if (isExpanded[chave] === undefined) { if (isExpanded[chave] === undefined) {
isExpanded[chave] = false; isExpanded[chave] = false;
} }
if (hidedCards.includes(chave)) {
return ('');
}
return ( return (
<FlexItem key={item} style={{ width: "15%" }}> <FlexItem key={item} style={{ width: "15%" }}>
<Card key={item} id="expandable-card-icon" isExpanded={isExpanded[chave]}> <Card key={item} id="expandable-card-icon" isExpanded={isExpanded[chave]}>
<CardHeader <CardHeader
style={{ justifyContent: 'normal' }} style={{ justifyContent: 'normal' }}
@ -281,6 +298,9 @@ export class Application extends React.Component {
'aria-expanded': isExpanded[chave] 'aria-expanded': isExpanded[chave]
}} }}
><CardTitle>{item[0]}</CardTitle> ><CardTitle>{item[0]}</CardTitle>
<Button variant="plain" aria-label="Action" onClick={() => this.hideCard(chave)}>
<EyeSlashIcon />
</Button>
</CardHeader> </CardHeader>
<CardTitle>{this.setIcon(Object.keys(item[1])[0])} {this.adjustValue(Object.keys(item[1])[0], Object.values(item[1])[0])} <CardTitle>{this.setIcon(Object.keys(item[1])[0])} {this.adjustValue(Object.keys(item[1])[0], Object.values(item[1])[0])}
</CardTitle> </CardTitle>
@ -298,13 +318,8 @@ export class Application extends React.Component {
</Flex> </Flex>
</CardBody> </CardBody>
</Card> </Card>
<div style={{ marginTop: '20px' }}> );
<Button variant="plain" aria-label="Action" onClick={this.hideCard(key)}> }
<EyeSlashIcon />
</Button>
</div>
</div>
) )
: ''} : ''}
</CardBody> </CardBody>