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

changes

Browse Source
This commit is contained in:
dank074 2021-10-31 23:25:35 -05:00
parent b7f1a11acc
commit 20510ef057
5 changed files with 133 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/ui-config.json
View File

@ -4,7 +4,7 @@
"camera.url": "https://nitro.nitrots.co/camera",
"thumbnails.url": "https://nitro.nitrots.co/camera/thumbnail/%thumbnail%.png",
"url.prefix": "http://localhost:3000",
"floorplan.tile.url": "${url.prefix}/floorplan-editor/tiles.json",
"floorplan.tile.url": "${asset.url}/floorplan-editor/tiles.json",
"chat.viewer.height.percentage": 0.40,
"widget.dimmer.colorwheel": false,
"hotelview": {

71
src/views/floorplan-editor/FloorplanEditorView.scss
View File

@ -1,37 +1,70 @@
.nitro-floorplan-editor
{
.nitro-floorplan-editor {
width: 760px;
height: 575px;
.editor-area
{
.editor-area {
width: 100%;
height: 300px;
overflow-x: scroll;
}
.set-tile
{
background-image: url('../../assets/images/floorplaneditor/icon-tile-set.png');
.tile-options {
.tile-option {
width: 50px;
height: 50px;
&.set-tile {
background-image: url("../../assets/images/floorplaneditor/icon-tile-set.png");
}
.unset-tile
{
background-image: url('../../assets/images/floorplaneditor/icon-tile-unset.png');
&.unset-tile {
background-image: url("../../assets/images/floorplaneditor/icon-tile-unset.png");
}
.increase-height
{
background-image: url('../../assets/images/floorplaneditor/icon-tile-up.png');
&.increase-height {
background-image: url("../../assets/images/floorplaneditor/icon-tile-up.png");
}
.decrease-height
{
background-image: url('../../assets/images/floorplaneditor/icon-tile-down.png');
&.decrease-height {
background-image: url("../../assets/images/floorplaneditor/icon-tile-down.png");
}
.set-door
{
background-image: url('../../assets/images/floorplaneditor/icon-door.png');
&.set-door {
background-image: url("../../assets/images/floorplaneditor/icon-door.png");
}
}
}
.visualization-options {
.option {
width: 85px;
height: 50px;
&.door-direction-0 {
background-image: url("../../assets/images/floorplaneditor/door-direction-0.png");
}
&.door-direction-1 {
background-image: url("../../assets/images/floorplaneditor/door-direction-1.png");
}
&.door-direction-2 {
background-image: url("../../assets/images/floorplaneditor/door-direction-2.png");
}
&.door-direction-3 {
background-image: url("../../assets/images/floorplaneditor/door-direction-3.png");
}
&.door-direction-4 {
background-image: url("../../assets/images/floorplaneditor/door-direction-4.png");
}
&.door-direction-5 {
background-image: url("../../assets/images/floorplaneditor/door-direction-5.png");
}
&.door-direction-6 {
background-image: url("../../assets/images/floorplaneditor/door-direction-6.png");
}
&.door-direction-7 {
background-image: url("../../assets/images/floorplaneditor/door-direction-7.png");
}
}
}
}

14
src/views/floorplan-editor/FloorplanEditorView.tsx
View File

@ -89,12 +89,8 @@ export const FloorplanEditorView: FC<{}> = props =>
{isVisible &&
<NitroCardView className="nitro-floorplan-editor">
<NitroCardHeaderView headerText={LocalizeText('floor.plan.editor.title')} onCloseClick={() => setIsVisible(false)} />
<NitroCardContentView>
<div className="row">
<div className="col">
<NitroCardContentView className="text-black">
<FloorplanOptionsView />
</div>
</div>
<div className="row">
<div className="col">
<FloorplanCanvasView />
@ -102,12 +98,12 @@ export const FloorplanEditorView: FC<{}> = props =>
</div>
<div className="row justify-content-between mt-2">
<div className="btn-group col-auto">
<button className="btn btn-primary">Revert changes</button>
<button className="btn btn-primary">{LocalizeText('floor.plan.editor.reload')}</button>
</div>
<div className="btn-group col-auto" role="group" aria-label="First group">
<button className="btn btn-primary">Show Preview</button>
<button className="btn btn-primary">Import/Export</button>
<button className="btn btn-primary" onClick={saveFloorChanges}>Save</button>
<button className="btn btn-primary">{LocalizeText('floor.plan.editor.preview')}</button>
<button className="btn btn-primary">{LocalizeText('floor.plan.editor.import.export')}</button>
<button className="btn btn-primary" onClick={saveFloorChanges}>{LocalizeText('floor.plan.editor.save')}</button>
</div>
</div>
</NitroCardContentView>

5
src/views/floorplan-editor/common/FloorplanEditor.ts
View File

@ -400,6 +400,11 @@ export class FloorplanEditor extends PixiApplicationProxy
this._doorLocation = value;
}
public get actionSettings(): ActionSettings
{
return this._actionSettings;
}
public static get instance(): FloorplanEditor
{
if(!FloorplanEditor._instance)

69
src/views/floorplan-editor/views/FloorplanOptionsView.tsx
View File

@ -1,20 +1,75 @@
import { FC } from 'react';
import { FC, useCallback, useState } from 'react';
import { LocalizeText } from '../../../api';
import { NitroCardGridItemView, NitroCardGridView } from '../../../layout';
import { FloorAction } from '../common/Constants';
import { FloorplanEditor } from '../common/FloorplanEditor';
import { useFloorplanEditorContext } from '../context/FloorplanEditorContext';
export const FloorplanOptionsView: FC<{}> = props =>
{
const { floorplanSettings = null, setFloorplanSettings = null } = useFloorplanEditorContext();
const [ floorAction, setFloorAction ] = useState(FloorAction.SET);
const selectAction = useCallback((action: number) =>
{
setFloorAction(action);
FloorplanEditor.instance.actionSettings.currentAction = action;
}, []);
const changeDoorDirection = useCallback(() =>
{
const settings = Object.assign({}, floorplanSettings);
if(settings.entryPointDir < 7)
{
++settings.entryPointDir;
}
else
{
settings.entryPointDir = 0;
}
setFloorplanSettings(settings);
}, [floorplanSettings, setFloorplanSettings]);
const onWallHeightChange = useCallback((value: number) =>
{
if(value > 16) value = 16;
if(value < 0) value = 0;
const settings = Object.assign({}, floorplanSettings);
settings.wallHeight = value;
setFloorplanSettings(settings);
}, [floorplanSettings, setFloorplanSettings]);
return (
<>
<NitroCardGridView columns={5}>
<NitroCardGridItemView className="set-tile" />
<NitroCardGridItemView className="unset-tile" />
<NitroCardGridItemView className="increase-height" />
<NitroCardGridItemView className="decrease-height" />
<NitroCardGridItemView className="set-door" />
<div className="row justify-content-between mb-1">
<div className="col-6">
<label>{LocalizeText('floor.plan.editor.draw.mode')}</label>
<NitroCardGridView className="tile-options">
<NitroCardGridItemView itemActive={floorAction === FloorAction.SET} onClick={() => selectAction(FloorAction.SET)} className="tile-option set-tile" />
<NitroCardGridItemView itemActive={floorAction === FloorAction.UNSET} onClick={() => selectAction(FloorAction.UNSET)} className="tile-option unset-tile" />
<NitroCardGridItemView itemActive={floorAction === FloorAction.UP} onClick={() => selectAction(FloorAction.UP)} className="tile-option increase-height" />
<NitroCardGridItemView itemActive={floorAction === FloorAction.DOWN} onClick={() => selectAction(FloorAction.DOWN)} className="tile-option decrease-height" />
<NitroCardGridItemView itemActive={floorAction === FloorAction.DOOR} onClick={() => selectAction(FloorAction.DOOR)} className="tile-option set-door" />
</NitroCardGridView>
</div>
<div className="col-6">
<div className="d-flex w-100 gap-4">
<label>{LocalizeText('floor.plan.editor.enter.direction')}</label>
<label>{LocalizeText('floor.editor.wall.height')}</label>
</div>
<div className="d-flex w-100 gap-4 visualization-options">
<NitroCardGridItemView className={`option door-direction-${floorplanSettings.entryPointDir}`} onClick={changeDoorDirection}/>
<NitroCardGridItemView className="option"><input type="number" max={16} min={0} step={1} value={floorplanSettings.wallHeight} onChange={event => onWallHeightChange(event.target.valueAsNumber)} id="wallHeight"/></NitroCardGridItemView>
</div>
</div>
</div>
<div className="row justify-content-between mb-1">
</div>
</>
);
}