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

Merge pull request #6 from ocristopfer/hide_card_funcionality

Browse source 
Hide card funcionality
This commit is contained in:
Cristopfer Luis 2024-02-05 16:10:37 -03:00 • committed by GitHub
commit 4eb46e6948
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 75 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

127
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;
@ -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 }); 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;
console.log(cardId, 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,49 +257,69 @@ 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) => {
<Card key={key}> if (hidedCards.includes(key[0])) {
<CardTitle>{key[0]}</CardTitle> return ('');
<CardBody> }
<CardTitle>{key[1].Adapter}</CardTitle> return (
<Flex key={key[1]}> <Card key={key}>
{Object.entries(key[1]).map((item, itemIndex) => { <CardTitle>{key[0]}
if (itemIndex === 0) return ""; <Button variant="plain" aria-label="Action" onClick={() => this.hideCard(key[0])}>
const chave = keyIndex.toString() + itemIndex.toString(); <EyeSlashIcon />
if (isExpanded[chave] === undefined) { </Button>
isExpanded[chave] = false; </CardTitle>
}
return ( <CardBody>
<FlexItem key={item} style={{ width: "15%" }}> <CardTitle>{key[1].Adapter}</CardTitle>
<Card key={item} id="expandable-card-icon" isExpanded={isExpanded[chave]}>
<CardHeader <Flex key={key[1]}>
style={{ justifyContent: 'normal' }} {Object.entries(key[1]).map((item, itemIndex) => {
onExpand={(e) => this.handleOnExpand(e, chave)} if (itemIndex === 0) return "";
toggleButtonProps={{ const chave = keyIndex.toString() + itemIndex.toString();
id: 'toggle-button2', if (isExpanded[chave] === undefined) {
'aria-label': 'Patternfly Details', isExpanded[chave] = false;
'aria-expanded': isExpanded[chave] }
}} if (hidedCards.includes(chave)) {
><CardTitle>{item[0]}</CardTitle> return ('');
</CardHeader> }
<CardTitle>{this.setIcon(Object.keys(item[1])[0])} {this.adjustValue(Object.keys(item[1])[0], Object.values(item[1])[0])} return (
</CardTitle> <FlexItem key={item} style={{ width: "15%" }}>
<CardExpandableContent>
<CardBody> <Card key={item} id="expandable-card-icon" isExpanded={isExpanded[chave]}>
{Object.entries(item[1]).map((sensors, index) => ( <CardHeader
<span key={sensors}>{this.adjustLabel(sensors[0])}: {sensors[1]}<br /></span> style={{ justifyContent: 'normal' }}
))} onExpand={(e) => this.handleOnExpand(e, chave)}
</CardBody> toggleButtonProps={{
</CardExpandableContent> id: 'toggle-button2',
</Card> 'aria-label': 'Patternfly Details',
</FlexItem> 'aria-expanded': isExpanded[chave]
); }}
})} ><CardTitle>{item[0]}</CardTitle>
</Flex> <Button variant="plain" aria-label="Action" onClick={() => this.hideCard(chave)}>
</CardBody> <EyeSlashIcon />
</Card> </Button>
</CardHeader>
<CardTitle>{this.setIcon(Object.keys(item[1])[0])} {this.adjustValue(Object.keys(item[1])[0], Object.values(item[1])[0])}
</CardTitle>
<CardExpandableContent>
<CardBody>
{Object.entries(item[1]).map((sensors, index) => (
<span key={sensors}>{this.adjustLabel(sensors[0])}: {sensors[1]}<br /></span>
))}
</CardBody>
</CardExpandableContent>
</Card>
</FlexItem>
);
})}
</Flex>
</CardBody>
</Card>
);
}
) )
: ''} : ''}
</CardBody> </CardBody>