nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-23 14:40:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update dimmer widget

Browse Source
This commit is contained in:
Bill 2022-02-25 19:52:37 -05:00
parent de682dac3a
commit 7bf528d4be
2 changed files with 28 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.scss
View File

@ -1,10 +1,10 @@
.nitro-dimmer {
width: 300px;
.nitro-room-widget-dimmer {
width: 275px;
.dimmer-banner {
width: 56px;
height: 79px;
background: url(../../../../../assets/images/room-widgets/dimmer-widget/dimmer_banner.png) center no-repeat;
background: url('../../../../../assets/images/room-widgets/dimmer-widget/dimmer_banner.png') center no-repeat;
}
.color-swatch {

47
src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx
View File

@ -3,11 +3,7 @@ import classNames from 'classnames';
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
import ReactSlider from 'react-slider';
import { ColorUtils, GetConfiguration, LocalizeText, RoomWidgetDimmerChangeStateMessage, RoomWidgetDimmerPreviewMessage, RoomWidgetDimmerSavePresetMessage, RoomWidgetUpdateDimmerEvent, RoomWidgetUpdateDimmerStateEvent } from '../../../../../api';
import { Button } from '../../../../../common/Button';
import { Column } from '../../../../../common/Column';
import { Flex } from '../../../../../common/Flex';
import { Grid } from '../../../../../common/Grid';
import { Text } from '../../../../../common/Text';
import { Base, Button, Column, Flex, Grid, Text } from '../../../../../common';
import { BatchUpdates, CreateEventDispatcherHook } from '../../../../../hooks';
import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../../layout';
import { useRoomContext } from '../../../context/RoomContext';
@ -31,7 +27,6 @@ export const FurnitureDimmerView: FC<{}> = props =>
const [ selectedEffectId, setSelectedEffectId ] = useState(0);
const [ selectedColor, setSelectedColor ] = useState(0);
const [ selectedBrightness, setSelectedBrightness ] = useState(0);
const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
const onNitroEvent = useCallback((event: NitroEvent) =>
@ -45,9 +40,12 @@ export const FurnitureDimmerView: FC<{}> = props =>
for(const preset of widgetEvent.presets) presets.push(new DimmerFurnitureWidgetPresetItem(preset.id, preset.type, preset.color, preset.brightness));
BatchUpdates(() =>
{
setPresets(presets);
setSelectedPresetId(widgetEvent.selectedPresetId);
setIsVisible(true);
});
return;
}
case RoomWidgetUpdateDimmerEvent.HIDE: {
@ -86,10 +84,13 @@ export const FurnitureDimmerView: FC<{}> = props =>
if(!preset) return;
BatchUpdates(() =>
{
setSelectedPresetId(preset.id);
setSelectedEffectId(preset.type);
setSelectedColor(preset.color);
setSelectedBrightness(preset.light);
});
}, [ presets ]);
const close = useCallback(() =>
@ -133,36 +134,28 @@ export const FurnitureDimmerView: FC<{}> = props =>
return ~~((((value - MIN_BRIGHTNESS) * (100 - 0)) / (MAX_BRIGHTNESS - MIN_BRIGHTNESS)) + 0);
}, []);
const isFreeColorMode = useMemo(() =>
{
return GetConfiguration<boolean>('widget.dimmer.colorwheel', false);
}, []);
const isFreeColorMode = useMemo(() => GetConfiguration<boolean>('widget.dimmer.colorwheel', false), []);
useEffect(() =>
{
if((dimmerState === 0) && (lastDimmerState === 0)) return;
console.log('ye')
widgetHandler.processWidgetMessage(new RoomWidgetDimmerPreviewMessage(selectedColor, selectedBrightness, (selectedEffectId === 2)));
}, [ widgetHandler, dimmerState, lastDimmerState, selectedColor, selectedBrightness, selectedEffectId ]);
if(!isVisible) return null;
return (
<NitroCardView className="nitro-dimmer">
<NitroCardView className="nitro-room-widget-dimmer">
<NitroCardHeaderView headerText={ LocalizeText('widget.dimmer.title') } onCloseClick={ close } />
{ (dimmerState === 1) &&
<NitroCardTabsView>
{ presets.map(preset =>
{
return <NitroCardTabsItemView key={ preset.id } isActive={ (selectedPresetId === preset.id) } onClick={ event => selectPresetId(preset.id) }>{ LocalizeText(`widget.dimmer.tab.${preset.id}`) }</NitroCardTabsItemView>
}) }
{ presets.map(preset => <NitroCardTabsItemView key={ preset.id } isActive={ (selectedPresetId === preset.id) } onClick={ event => selectPresetId(preset.id) }>{ LocalizeText(`widget.dimmer.tab.${preset.id}`) }</NitroCardTabsItemView>) }
</NitroCardTabsView> }
<NitroCardContentView>
{ (dimmerState === 0) &&
<Column alignItems="center">
<div className="dimmer-banner"></div>
<Base className="dimmer-banner" />
<Text center className="bg-muted rounded p-1">{ LocalizeText('widget.dimmer.info.off') }</Text>
<Button fullWidth variant="success" onClick={ toggleState }>{ LocalizeText('widget.dimmer.button.on') }</Button>
</Column> }
@ -173,7 +166,7 @@ export const FurnitureDimmerView: FC<{}> = props =>
{ isFreeColorMode &&
<input type="color" className="form-control" value={ ColorUtils.makeColorNumberHex(selectedColor) } onChange={ event => setSelectedColor(ColorUtils.convertFromHex(event.target.value)) } /> }
{ !isFreeColorMode &&
<Grid columnCount={ 7 }>
<Grid gap={ 1 } columnCount={ 7 }>
{ AVAILABLE_COLORS.map((color, index) =>
{
return (
@ -193,18 +186,14 @@ export const FurnitureDimmerView: FC<{}> = props =>
thumbClassName={ 'thumb percent' }
renderThumb={ (props, state) => <div {...props}>{ scaledBrightness(state.valueNow) }</div> } />
</Column>
<Flex>
<Flex alignItems="center" gap={ 1 }>
<input className="form-check-input" type="checkbox" checked={ (selectedEffectId === 2) } onChange={ event => setSelectedEffectId(event.target.checked ? 2 : 1) } />
<label className="form-check-label text-black">{ LocalizeText('widget.dimmer.type.checkbox') }</label>
<Text>{ LocalizeText('widget.dimmer.type.checkbox') }</Text>
</Flex>
<Flex gap={ 1 }>
<Button fullWidth variant="danger" onClick={ toggleState }>{ LocalizeText('widget.dimmer.button.off') }</Button>
<Button fullWidth variant="success" onClick={ applyChanges }>{ LocalizeText('widget.dimmer.button.apply') }</Button>
</Flex>
<div className="form-check mb-2">
<input className="form-check-input" type="checkbox" checked={ (selectedEffectId === 2) } onChange={ event => setSelectedEffectId(event.target.checked ? 2 : 1) } />
<label className="form-check-label text-black">{ LocalizeText('widget.dimmer.type.checkbox') }</label>
</div>
<div className="d-flex gap-2">
<button className="btn btn-danger w-100" onClick={ toggleState }>{ LocalizeText('widget.dimmer.button.off') }</button>
<button className="btn btn-success w-100" onClick={ applyChanges }>{ LocalizeText('widget.dimmer.button.apply') }</button>
</div>
</> }
</NitroCardContentView>
</NitroCardView>