mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-10-23 03:13:06 +02:00
changes
This commit is contained in:
dank074
parent
b7f1a11acc
commit
20510ef057
@ -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": {
|
||||
|
||||
@ -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");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user