Dwinzo-Beta
/
Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

v2-ui #88

Merged
Vishnu merged 13 commits from v2-ui into main 2025-05-15 07:05:44 +00:00
Conversation 0 Commits 13 Files Changed 66 +189 -143
4 changed files with 189 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 8facad31bc - Show all commits

47
app/src/components/layout/controls/ControlsPlayer.tsx
View File

@ -10,6 +10,7 @@ const ControlsPlayer = () => {
const { setIsPlaying } = usePlayButtonStore(); const { setIsPlaying } = usePlayButtonStore();
const { activeModule } = useModuleStore(); const { activeModule } = useModuleStore();
const [walkMode, setWalkMode] = useState(false); const [walkMode, setWalkMode] = useState(false);
const [hidePlayer, setHidePlayer] = useState(false);
const changeCamMode = () => { const changeCamMode = () => {
setWalkMode(!walkMode); setWalkMode(!walkMode);
@ -17,37 +18,47 @@ const ControlsPlayer = () => {
}; };
return ( return (
<div className="controls-player-container"> <div className="controls-player-container">
<div className="controls-left"> {!hidePlayer && (
<PlayIcon /> <div className="controls-left">
<div className="label">Running {activeModule}...</div> <PlayIcon />
</div> <div className="label">Running {activeModule}...</div>
</div>
)}
<div className="controls-right"> <div className="controls-right">
<div className="walkMode-wrapper"> {!hidePlayer && (
<WalkIcon /> <div className="walkMode-wrapper">
<InputToggle <WalkIcon />
value={walkMode} <InputToggle
inputKey="1" value={walkMode}
label="Walk Mode" inputKey="1"
onClick={changeCamMode} label="Walk Mode"
/> onClick={changeCamMode}
</div> />
</div>
)}
<button <button
id="controls-player-play-button" id="controls-player-play-button"
className="btn-wrapper" className={`btn-wrapper${hidePlayer ? " hide" : ""}`}
onClick={() => setIsPlaying(false)} onClick={() => setIsPlaying(false)}
> >
<div className="icon"> <div className="icon">
<ExitIcon /> <ExitIcon />
</div> </div>
Exit {!hidePlayer && "Exit"}
</button> </button>
<div className="btn-wrapper"> <button
className={`btn-wrapper${hidePlayer ? " hide" : ""}`}
id="hide-btn"
onClick={() => {
setHidePlayer(!hidePlayer);
}}
>
<div className="icon"> <div className="icon">
<EyeCloseIcon /> <EyeCloseIcon />
</div> </div>
Hide {!hidePlayer && "Hide"}
</div> </button>
</div> </div>
</div> </div>
); );

246
app/src/components/ui/simulation/simulationPlayer.tsx
View File

@ -11,6 +11,7 @@ import {
DailyProductionIcon, DailyProductionIcon,
EndIcon, EndIcon,
ExpandIcon, ExpandIcon,
EyeCloseIcon,
HourlySimulationIcon, HourlySimulationIcon,
InfoIcon, InfoIcon,
MonthlyROI, MonthlyROI,
@ -30,6 +31,7 @@ const SimulationPlayer: React.FC = () => {
const sliderRef = useRef<HTMLDivElement>(null); const sliderRef = useRef<HTMLDivElement>(null);
const [expand, setExpand] = useState(true); const [expand, setExpand] = useState(true);
const [playSimulation, setPlaySimulation] = useState(false); const [playSimulation, setPlaySimulation] = useState(false);
const [hidePlayer, setHidePlayer] = useState(false);
const { speed, setSpeed } = useAnimationPlaySpeed(); const { speed, setSpeed } = useAnimationPlaySpeed();
const { setIsPlaying } = usePlayButtonStore(); const { setIsPlaying } = usePlayButtonStore();
@ -161,10 +163,10 @@ const SimulationPlayer: React.FC = () => {
return ( return (
<> <>
<div className="simulation-player-wrapper"> <div className={`simulation-player-wrapper${hidePlayer ? " hide" : ""}`}>
<div className={`simulation-player-container ${expand ? "open" : ""}`}> <div className={`simulation-player-container ${expand ? "open" : ""}`}>
<div className="controls-container"> <div className="controls-container">
{subModule === "analysis" && ( {!hidePlayer && subModule === "analysis" && (
<div className="production-details"> <div className="production-details">
{/* hourlySimulation */} {/* hourlySimulation */}
<div className="hourly-wrapper production-wrapper"> <div className="hourly-wrapper production-wrapper">
@ -213,7 +215,7 @@ const SimulationPlayer: React.FC = () => {
</div> </div>
</div> </div>
)} )}
{subModule !== "analysis" && ( {!hidePlayer && subModule !== "analysis" && (
<div className="header"> <div className="header">
<InfoIcon /> <InfoIcon />
{playSimulation {playSimulation
@ -222,26 +224,30 @@ const SimulationPlayer: React.FC = () => {
</div> </div>
)} )}
<div className="controls-wrapper"> <div className="controls-wrapper">
<button {!hidePlayer && (
id="simulation-reset-button" <button
className="simulation-button-container" id="simulation-reset-button"
onClick={() => { className="simulation-button-container"
handleReset(); onClick={() => {
}} handleReset();
> }}
<ResetIcon /> >
Reset <ResetIcon />
</button> Reset
<button </button>
id="simulation-play-button" )}
className="simulation-button-container" {!hidePlayer && (
onClick={() => { <button
handlePlayStop(); id="simulation-play-button"
}} className="simulation-button-container"
> onClick={() => {
<PlayStopIcon /> handlePlayStop();
{playSimulation ? "Play" : "Stop"} }}
</button> >
<PlayStopIcon />
{playSimulation ? "Play" : "Stop"}
</button>
)}
<button <button
id="simulation-reset-button" id="simulation-reset-button"
className="simulation-button-container" className="simulation-button-container"
@ -250,7 +256,17 @@ const SimulationPlayer: React.FC = () => {
}} }}
> >
<ExitIcon /> <ExitIcon />
Exit {!hidePlayer && "Exit"}
</button>
<button
id="simulation-reset-button"
className="simulation-button-container"
onClick={() => {
setHidePlayer(!hidePlayer);
}}
>
<EyeCloseIcon />
{!hidePlayer && "Hide"}
</button> </button>
{subModule === "analysis" && ( {subModule === "analysis" && (
<button <button
@ -263,100 +279,102 @@ const SimulationPlayer: React.FC = () => {
)} )}
</div> </div>
</div> </div>
<div className="progresser-wrapper"> {!hidePlayer && (
<div className="time-displayer"> <div className="progresser-wrapper">
<div className="start-time-wrappper"> <div className="time-displayer">
<div className="icon"> <div className="start-time-wrappper">
<StartIcon /> <div className="icon">
</div> <StartIcon />
<div className="time-wrapper"> </div>
<div className="date">23 April ,25</div> <div className="time-wrapper">
<div className="time">04:41 PM</div> <div className="date">23 April ,25</div>
</div> <div className="time">04:41 PM</div>
</div> </div>
<div className="time-progresser"> </div>
<div className="timeline"> <div className="time-progresser">
{intervals.map((label, index) => { <div className="timeline">
const segmentProgress = (index / totalSegments) * 100; {intervals.map((label, index) => {
const isFilled = progress >= segmentProgress; const segmentProgress = (index / totalSegments) * 100;
return ( const isFilled = progress >= segmentProgress;
<React.Fragment key={`${index}-${label}`}> return (
<div className="label-dot-wrapper"> <React.Fragment key={`${index}-${label}`}>
<div className="label">{label} mins</div> <div className="label-dot-wrapper">
<div <div className="label">{label} mins</div>
className={`dot ${isFilled ? "filled" : ""}`} <div
></div> className={`dot ${isFilled ? "filled" : ""}`}
</div> ></div>
{index < intervals.length - 1 && ( </div>
<div {index < intervals.length - 1 && (
className={`line ${ <div
progress >= ((index + 1) / totalSegments) * 100 className={`line ${
? "filled" progress >= ((index + 1) / totalSegments) * 100
: "" ? "filled"
}`} : ""
></div> }`}
)} ></div>
</React.Fragment> )}
); </React.Fragment>
})} );
</div> })}
</div> </div>
</div>
<div className="end-time-wrappper">
<div className="time-wrapper"> <div className="end-time-wrappper">
<div className="time">00:10:20</div> <div className="time-wrapper">
</div> <div className="time">00:10:20</div>
<div className="icon"> </div>
<EndIcon /> <div className="icon">
</div> <EndIcon />
</div> </div>
</div> </div>
<div className="speed-control-container"> </div>
<div className="min-value"> <div className="speed-control-container">
<div className="icon"> <div className="min-value">
<SpeedIcon /> <div className="icon">
</div> <SpeedIcon />
Speed </div>
</div> Speed
<div className="slider-container" ref={sliderRef}> </div>
<div className="speed-label mix-value">0.5X</div> <div className="slider-container" ref={sliderRef}>
<div className="marker marker-10"></div> <div className="speed-label mix-value">0.5X</div>
<div className="marker marker-20"></div> <div className="marker marker-10"></div>
<div className="marker marker-30"></div> <div className="marker marker-20"></div>
<div className="marker marker-40"></div> <div className="marker marker-30"></div>
<div className="marker marker-50"></div> <div className="marker marker-40"></div>
<div className="marker marker-60"></div> <div className="marker marker-50"></div>
<div className="marker marker-70"></div> <div className="marker marker-60"></div>
<div className="marker marker-80"></div> <div className="marker marker-70"></div>
<div className="marker marker-90"></div> <div className="marker marker-80"></div>
<div className="custom-slider-wrapper"> <div className="marker marker-90"></div>
<div className="custom-slider"> <div className="custom-slider-wrapper">
<button <div className="custom-slider">
id="slider-handle" <button
className={`slider-handle ${ id="slider-handle"
isDragging ? "dragging" : "" className={`slider-handle ${
}`} isDragging ? "dragging" : ""
style={{ left: `${calculateHandlePosition()}%` }} }`}
onMouseDown={handleMouseDown} style={{ left: `${calculateHandlePosition()}%` }}
> onMouseDown={handleMouseDown}
{speed.toFixed(1)}x >
</button> {speed.toFixed(1)}x
<input </button>
type="range" <input
min="0.5" type="range"
max={MAX_SPEED} min="0.5"
step="0.1" max={MAX_SPEED}
value={speed} step="0.1"
onChange={handleSpeedChange} value={speed}
className="slider-input" onChange={handleSpeedChange}
/> className="slider-input"
/>
</div>
<div className="speed-label max-value">{MAX_SPEED}x</div>
</div> </div>
<div className="speed-label max-value">{MAX_SPEED}x</div>
</div> </div>
</div> </div>
</div> </div>
</div> )}
{subModule === "analysis" && ( {!hidePlayer && subModule === "analysis" && (
<div className="processDisplayer"> <div className="processDisplayer">
<div className="start-displayer timmer">00:00</div> <div className="start-displayer timmer">00:00</div>
<div className="end-displayer timmer">24:00</div> <div className="end-displayer timmer">24:00</div>

28
app/src/styles/components/simulation/simulation.scss
View File

@ -8,7 +8,16 @@
z-index: 2; z-index: 2;
transform: translate(-50%, 0); transform: translate(-50%, 0);
width: 70vw; width: 70vw;
transition: all 0.3s;
&.hide {
width: fit-content;
.simulation-player-container
.controls-container
.simulation-button-container {
width: 32px;
height: 24px;
}
}
.simulation-player-container { .simulation-player-container {
background: var(--background-color); background: var(--background-color);
padding: 7px; padding: 7px;
@ -90,11 +99,12 @@
@include flex-center; @include flex-center;
gap: 2px; gap: 2px;
padding: 4px 8px; padding: 4px 8px;
min-width: 64px; width: 64px;
background: var(--background-color); background: var(--background-color);
border-radius: #{$border-radius-extra-large}; border-radius: #{$border-radius-extra-large};
height: fit-content; height: fit-content;
cursor: pointer; cursor: pointer;
transition: all 0.2s;
&:hover { &:hover {
outline: 1px solid var(--border-color); outline: 1px solid var(--border-color);
@ -357,7 +367,7 @@
@include flex-center; @include flex-center;
justify-content: space-between; justify-content: space-between;
position: fixed; position: fixed;
bottom: 40px; bottom: 32px;
left: 50%; left: 50%;
transform: translate(-50%, 0); transform: translate(-50%, 0);
color: var(--accent-color); color: var(--accent-color);
@ -394,21 +404,23 @@
} }
.btn-wrapper { .btn-wrapper {
display: flex; @include flex-center;
justify-content: center;
align-items: center;
gap: 2px; gap: 2px;
padding: 4px 8px; padding: 4px 8px;
min-width: 64px; width: 64px;
background: var(--background-color); background: var(--background-color);
border-radius: 20px; border-radius: 20px;
height: fit-content; height: fit-content;
cursor: pointer; cursor: pointer;
transition: color .2s; transition: all 0.2s;
outline: 1px solid transparent;
&:hover { &:hover {
outline: 1px solid var(--border-color); outline: 1px solid var(--border-color);
color: var(--accent-color); color: var(--accent-color);
} }
&.hide{
width: 32px;
}
.icon { .icon {
width: 16px; width: 16px;
height: 16px; height: 16px;

11
app/src/styles/pages/realTimeViz.scss
View File

@ -22,7 +22,6 @@
.floating { .floating {
// width: calc(var(--realTimeViz-container-width) * 0.2px); // width: calc(var(--realTimeViz-container-width) * 0.2px);
// transform: scale(min(1, calc(var(--realTimeViz-container-width) / 1000))); // transform: scale(min(1, calc(var(--realTimeViz-container-width) / 1000)));
min-width: 230px; min-width: 230px;
@ -63,7 +62,6 @@
left: 50%; left: 50%;
gap: 6px; gap: 6px;
border-radius: #{$border-radius-medium}; border-radius: #{$border-radius-medium};
overflow: auto; overflow: auto;
max-width: calc(100% - 500px); max-width: calc(100% - 500px);
z-index: 3; z-index: 3;
@ -71,6 +69,10 @@
pointer-events: all; pointer-events: all;
transition: all 0.3s linear; transition: all 0.3s linear;
&.bottom{
bottom: var(--bottomWidth);
}
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
} }
@ -118,7 +120,10 @@
} }
.zone-container.visualization-playing { .zone-container.visualization-playing {
bottom: 70px; bottom: 74px;
&.bottom{
bottom: var(--bottomWidth);
}
} }
.zone-wrapper.bottom { .zone-wrapper.bottom {