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