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

feat: start hide card funcionality

Browse source
This commit is contained in:
Cristopfer Luis Viana da Silva 2024-02-05 15:04:38 -03:00
parent 6cc1d077be
commit 941147b1de
1 changed files with 51 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

94
src/app.jsx
View file

@ -20,7 +20,7 @@
import cockpit from 'cockpit'; import cockpit from 'cockpit';
import React from 'react'; import React from 'react';
import { Alert, Card, CardTitle, CardHeader, CardBody, CardExpandableContent, Checkbox, Button, Spinner, Flex, FlexItem } from '@patternfly/react-core'; import { Alert, Card, CardTitle, CardHeader, CardBody, CardExpandableContent, Checkbox, Button, Spinner, Flex, FlexItem } from '@patternfly/react-core';
import { FanIcon, ThermometerHalfIcon, ChargingStationIcon, CpuIcon } from '@patternfly/react-icons/dist/esm/icons/'; import { FanIcon, ThermometerHalfIcon, ChargingStationIcon, CpuIcon, EyeSlashIcon } from '@patternfly/react-icons/dist/esm/icons/';
const _ = cockpit.gettext; const _ = cockpit.gettext;
@ -35,7 +35,7 @@ export class Application extends React.Component {
if (!this.state.isShowBtnInstall && !this.state.isError) if (!this.state.isShowBtnInstall && !this.state.isError)
this.loadSensors(); this.loadSensors();
}, 1000); }, 1000);
this.setState({ intervalId }); this.setState({ intervalId, hidedCards: localStorage.getItem('hidedCards') });
} }
componentWillUnmount() { componentWillUnmount() {
@ -225,7 +225,7 @@ export class Application extends React.Component {
hideCard(cardId) { hideCard(cardId) {
const hidedCards = this.state.hidedCards.push(cardId); const hidedCards = this.state.hidedCards.push(cardId);
console.log(cardId, hidedCards); localStorage.setItem('hidedCards', hidedCards)
this.setState({ hidedCards }); this.setState({ hidedCards });
} }
@ -257,46 +257,54 @@ export class Application extends React.Component {
</> </>
{sensors !== null {sensors !== null
? Object.entries(sensors).map((key, keyIndex) => ? Object.entries(sensors).map((key, keyIndex) =>
<Card key={key}> <div key={key}>
<CardTitle>{key[0]}</CardTitle> <Card key={key}>
<CardBody> <CardTitle>{key[0]}</CardTitle>
<CardTitle>{key[1].Adapter}</CardTitle> <CardBody>
<Flex key={key[1]}> <CardTitle>{key[1].Adapter}</CardTitle>
{Object.entries(key[1]).map((item, itemIndex) => { <Flex key={key[1]}>
if (itemIndex === 0) return ""; {Object.entries(key[1]).map((item, itemIndex) => {
const chave = keyIndex.toString() + itemIndex.toString(); if (itemIndex === 0) return "";
if (isExpanded[chave] === undefined) { const chave = keyIndex.toString() + itemIndex.toString();
isExpanded[chave] = false; if (isExpanded[chave] === undefined) {
} isExpanded[chave] = false;
return ( }
<FlexItem key={item} style={{ width: "15%" }}> return (
<Card key={item} id="expandable-card-icon" isExpanded={isExpanded[chave]}> <FlexItem key={item} style={{ width: "15%" }}>
<CardHeader <Card key={item} id="expandable-card-icon" isExpanded={isExpanded[chave]}>
style={{ justifyContent: 'normal' }} <CardHeader
onExpand={(e) => this.handleOnExpand(e, chave)} style={{ justifyContent: 'normal' }}
toggleButtonProps={{ onExpand={(e) => this.handleOnExpand(e, chave)}
id: 'toggle-button2', toggleButtonProps={{
'aria-label': 'Patternfly Details', id: 'toggle-button2',
'aria-expanded': isExpanded[chave] 'aria-label': 'Patternfly Details',
}} 'aria-expanded': isExpanded[chave]
><CardTitle>{item[0]}</CardTitle> }}
</CardHeader> ><CardTitle>{item[0]}</CardTitle>
<CardTitle>{this.setIcon(Object.keys(item[1])[0])} {this.adjustValue(Object.keys(item[1])[0], Object.values(item[1])[0])} </CardHeader>
</CardTitle> <CardTitle>{this.setIcon(Object.keys(item[1])[0])} {this.adjustValue(Object.keys(item[1])[0], Object.values(item[1])[0])}
<CardExpandableContent> </CardTitle>
<CardBody> <CardExpandableContent>
{Object.entries(item[1]).map((sensors, index) => ( <CardBody>
<span key={sensors}>{this.adjustLabel(sensors[0])}: {sensors[1]}<br /></span> {Object.entries(item[1]).map((sensors, index) => (
))} <span key={sensors}>{this.adjustLabel(sensors[0])}: {sensors[1]}<br /></span>
</CardBody> ))}
</CardExpandableContent> </CardBody>
</Card> </CardExpandableContent>
</FlexItem> </Card>
); </FlexItem>
})} );
</Flex> })}
</CardBody> </Flex>
</Card> </CardBody>
</Card>
<div style={{ marginTop: '20px' }}>
<Button variant="plain" aria-label="Action" onClick={this.hideCard(key)}>
<EyeSlashIcon />
</Button>
</div>
</div>
) )
: ''} : ''}
</CardBody> </CardBody>