diff --git a/app/src/components/ui/simulation/AssetDetailsCard.tsx b/app/src/components/ui/simulation/AssetDetailsCard.tsx index 15c5574..34dfb6f 100644 --- a/app/src/components/ui/simulation/AssetDetailsCard.tsx +++ b/app/src/components/ui/simulation/AssetDetailsCard.tsx @@ -13,6 +13,7 @@ interface AssetDetailsCardInterface { enableStatue?: boolean; count?: number; totalCapacity?: number; + activeTime?: any; assetDetails?: { assetName: string; const: string; @@ -59,6 +60,7 @@ const AssetDetailsCard: React.FC = ({ status, count, totalCapacity, + activeTime, assetDetails, }) => { const [moreDetails, setMoreDetails] = useState(false); @@ -75,7 +77,10 @@ const AssetDetailsCard: React.FC = ({
{name}
{enableStatue && ( -
{GetStatus(status)}
+ <> +
Active Time : {activeTime}
+
{GetStatus(status)}
+ )} {!enableStatue && totalCapacity && (
Storage/Inventory
diff --git a/app/src/modules/simulation/ui3d/MachineContentUi.tsx b/app/src/modules/simulation/ui3d/MachineContentUi.tsx index bad89ed..587dfad 100644 --- a/app/src/modules/simulation/ui3d/MachineContentUi.tsx +++ b/app/src/modules/simulation/ui3d/MachineContentUi.tsx @@ -26,7 +26,7 @@ const MachineContentUi: React.FC = ({ machine }) => { center distanceFactor={20} > - + ); }; diff --git a/app/src/modules/simulation/ui3d/RoboticArmContentUi.tsx b/app/src/modules/simulation/ui3d/RoboticArmContentUi.tsx index dbe32c6..f946721 100644 --- a/app/src/modules/simulation/ui3d/RoboticArmContentUi.tsx +++ b/app/src/modules/simulation/ui3d/RoboticArmContentUi.tsx @@ -26,7 +26,7 @@ const RoboticArmContentUi: React.FC = ({ roboticArm }) center distanceFactor={20} > - + ); }; diff --git a/app/src/modules/simulation/ui3d/VehicleContentUi.tsx b/app/src/modules/simulation/ui3d/VehicleContentUi.tsx index 0173081..63aefc8 100644 --- a/app/src/modules/simulation/ui3d/VehicleContentUi.tsx +++ b/app/src/modules/simulation/ui3d/VehicleContentUi.tsx @@ -44,6 +44,8 @@ const VehicleContentUi: React.FC = ({ vehicle }) => { status={vehicle.state} count={vehicle.currentLoad} totalCapacity={vehicle.point.action.loadCapacity} + activeTime={vehicle.activeTime} + /> ); diff --git a/app/src/styles/components/simulation/simulation.scss b/app/src/styles/components/simulation/simulation.scss index 302ad7a..12d33e6 100644 --- a/app/src/styles/components/simulation/simulation.scss +++ b/app/src/styles/components/simulation/simulation.scss @@ -9,15 +9,16 @@ transform: translate(-50%, 0); width: 70vw; transition: all 0.3s; + &.hide { width: fit-content; - .simulation-player-container - .controls-container - .simulation-button-container { + + .simulation-player-container .controls-container .simulation-button-container { width: 32px; height: 24px; } } + .simulation-player-container { background: var(--background-color); padding: 7px; @@ -327,6 +328,7 @@ } .open { + .start-displayer, .end-displayer { display: none; @@ -423,13 +425,16 @@ cursor: pointer; transition: all 0.2s; outline: 1px solid transparent; + &:hover { outline: 1px solid var(--border-color); color: var(--accent-color); } + &.hide { width: 32px; } + .icon { width: 16px; height: 16px; @@ -496,6 +501,7 @@ .asset-details-card-wrapper { pointer-events: none; + .asset-details-card-container { position: relative; padding: 8px; @@ -527,6 +533,7 @@ .asset-details-header { @include flex-space-between; gap: 12px; + .content { .name { text-wrap: nowrap; @@ -536,20 +543,34 @@ margin-bottom: 4px; text-transform: capitalize; } + .status-container { .status { display: flex; align-items: center; gap: 6px; + padding-top: 4px; + .icon { @include flex-center; } } } + + .active-time { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + .value { + color: var(--highlight-text-color); + } + } + .storage-container { font-size: var(--font-size-tiny); color: var(--highlight-text-color); } + } } @@ -561,6 +582,7 @@ border-radius: #{$border-radius-small}; overflow: hidden; position: relative; + .process-running { height: 100%; width: 35%; @@ -584,6 +606,7 @@ top: -2px; padding: 4px; padding-right: 8px; + .count-ui-container { background: var(--background-color-solid); padding: 8px; @@ -593,19 +616,24 @@ max-width: 80px; position: absolute; left: 0; + .content { @include flex-center; gap: 2px; + .icon { @include flex-center; } + .display { font-size: var(--font-size-small); } } + .value-container { @include flex-center; gap: 4px; + .progress-bar { display: flex; align-items: center; @@ -621,13 +649,12 @@ background: var(--background-color); overflow: hidden; position: relative; + .fill { height: 100%; - background: linear-gradient( - to top, - var(--background-color-accent) var(--process-fill-percentage), - transparent var(--process-fill-percentage) - ); + background: linear-gradient(to top, + var(--background-color-accent) var(--process-fill-percentage), + transparent var(--process-fill-percentage)); } } @@ -645,6 +672,7 @@ from { transform: translateX(-100%); } + to { transform: translateX(300%); } @@ -654,10 +682,12 @@ 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } -} +} \ No newline at end of file