Merge branch 'v2' into simulation-armbot-v2
This commit is contained in:
commit
53055a0b82
|
|
@ -9,31 +9,31 @@ export function FlipXAxisIcon() {
|
|||
>
|
||||
<path
|
||||
d="M1 9.0568V2.94321C1 2.09213 1 1.6666 1.27121 1.52703C1.54242 1.38746 1.88869 1.6348 2.58123 2.12947L3.37186 2.6942C3.67979 2.91415 3.83375 3.02413 3.91687 3.18565C4 3.34718 4 3.53639 4 3.9148V8.08525C4 8.46365 4 8.65285 3.91687 8.8144C3.83375 8.9759 3.67979 9.0859 3.37186 9.30585L2.58124 9.87055C1.88869 10.3653 1.54242 10.6126 1.27121 10.473C1 10.3335 1 9.9079 1 9.0568Z"
|
||||
fill="var(--icon-default-color)"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
<path
|
||||
d="M8.84612 2.99935L8.8461 2.99936C8.68674 3.11318 8.58748 3.18452 8.51591 3.2461C8.45011 3.30271 8.42848 3.33407 8.41656 3.3572L8.84612 2.99935ZM8.84612 2.99935L9.63671 2.43462C9.63671 2.43462 9.63672 2.43462 9.63672 2.43462C9.99337 2.17987 10.2264 2.01464 10.403 1.92406C10.487 1.88093 10.5331 1.86801 10.555 1.86465C10.5651 1.88444 10.5813 1.92948 10.5951 2.02293C10.624 2.21925 10.625 2.50491 10.625 2.94321V9.0568C10.625 9.49511 10.624 9.78078 10.5951 9.9771C10.5813 10.0705 10.5651 10.1156 10.5551 10.1354C10.5331 10.132 10.487 10.1191 10.403 10.076C10.2264 9.98539 9.99337 9.82016 9.63672 9.5654L9.63671 9.5654L8.84611 9.0007L8.84611 9.00069M8.84612 2.99935L8.84611 9.00069M8.84611 9.00069C8.68675 8.88688 8.58748 8.81553 8.51591 8.75395C8.45015 8.69737 8.4285 8.666 8.41657 8.64287C8.40466 8.61972 8.39169 8.5839 8.38386 8.49735C8.37535 8.40331 8.375 8.28108 8.375 8.08525V3.9148C8.375 3.71896 8.37535 3.59672 8.38386 3.50269M8.84611 9.00069L8.38386 3.50269M8.38386 3.50269C8.39168 3.41623 8.40463 3.38041 8.41652 3.35729L8.38386 3.50269ZM10.5715 1.86435C10.5713 1.86468 10.5689 1.86476 10.565 1.86363C10.5698 1.86345 10.5718 1.86402 10.5715 1.86435ZM10.5501 1.85597C10.5469 1.85343 10.5456 1.85142 10.5457 1.85105C10.5458 1.85068 10.5474 1.85195 10.5501 1.85597ZM10.5457 10.149C10.5456 10.1486 10.5469 10.1466 10.5501 10.1441C10.5475 10.1481 10.5458 10.1493 10.5457 10.149ZM10.565 10.1364C10.5689 10.1353 10.5713 10.1353 10.5716 10.1357C10.5718 10.136 10.5698 10.1366 10.565 10.1364Z"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.75"
|
||||
/>
|
||||
<path
|
||||
opacity="0.5"
|
||||
d="M6 7V5"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.75"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
opacity="0.5"
|
||||
d="M6 3V1"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.75"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
opacity="0.5"
|
||||
d="M6 11V9"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.75"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
|
|
@ -52,37 +52,38 @@ export function FlipYAxisIcon() {
|
|||
>
|
||||
<path
|
||||
d="M9.0568 11H2.94321C2.09213 11 1.6666 11 1.52703 10.7288C1.38746 10.4576 1.6348 10.1113 2.12947 9.41877L2.6942 8.62814C2.91415 8.32021 3.02413 8.16625 3.18565 8.08313C3.34718 8 3.53639 8 3.9148 8H8.08525C8.46365 8 8.65285 8 8.8144 8.08313C8.9759 8.16625 9.0859 8.32021 9.30585 8.62814L9.87055 9.41876C10.3653 10.1113 10.6126 10.4576 10.473 10.7288C10.3335 11 9.9079 11 9.0568 11Z"
|
||||
fill="var(--icon-default-color)"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
<path
|
||||
d="M2.99935 3.15388L2.99936 3.1539C3.11318 3.31326 3.18452 3.41252 3.2461 3.48409C3.30271 3.54989 3.33407 3.57152 3.3572 3.58344L2.99935 3.15388ZM2.99935 3.15388L2.43462 2.36329C2.43462 2.36329 2.43462 2.36328 2.43462 2.36328C2.17987 2.00663 2.01464 1.7736 1.92406 1.59704C1.88093 1.51299 1.86801 1.46687 1.86465 1.44495C1.88444 1.43495 1.92948 1.41866 2.02293 1.4049C2.21925 1.37599 2.50491 1.375 2.94321 1.375L9.0568 1.375C9.49511 1.375 9.78078 1.37599 9.9771 1.4049C10.0705 1.41866 10.1156 1.43494 10.1354 1.44495C10.132 1.46687 10.1191 1.51299 10.076 1.59705C9.98539 1.7736 9.82016 2.00663 9.5654 2.36328L9.5654 2.36329L9.0007 3.15389L9.00069 3.15389M2.99935 3.15388L9.00069 3.15389M9.00069 3.15389C8.88688 3.31325 8.81553 3.41252 8.75395 3.48409C8.69737 3.54985 8.666 3.5715 8.64287 3.58343C8.61972 3.59534 8.5839 3.60831 8.49735 3.61614C8.40331 3.62465 8.28108 3.625 8.08525 3.625L3.9148 3.625C3.71896 3.625 3.59672 3.62465 3.50269 3.61614M9.00069 3.15389L3.50269 3.61614M3.50269 3.61614C3.41623 3.60832 3.38041 3.59537 3.35729 3.58348L3.50269 3.61614ZM1.86435 1.42845C1.86468 1.42867 1.86476 1.43108 1.86363 1.43501C1.86345 1.4302 1.86402 1.42823 1.86435 1.42845ZM1.85597 1.4499C1.85343 1.45311 1.85142 1.45444 1.85105 1.4543C1.85068 1.45416 1.85195 1.45255 1.85597 1.4499ZM10.149 1.45429C10.1486 1.45443 10.1466 1.4531 10.1441 1.44989C10.1481 1.45254 10.1493 1.45415 10.149 1.45429ZM10.1364 1.435C10.1353 1.43107 10.1353 1.42867 10.1357 1.42845C10.136 1.42823 10.1366 1.4302 10.1364 1.435Z"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.75"
|
||||
/>
|
||||
<path
|
||||
opacity="0.5"
|
||||
d="M7 6H5"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.75"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
opacity="0.5"
|
||||
d="M3 6H1"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.75"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
opacity="0.5"
|
||||
d="M11 6H9"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.75"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function FlipZAxisIcon() {
|
||||
return (
|
||||
<svg
|
||||
|
|
@ -95,31 +96,31 @@ export function FlipZAxisIcon() {
|
|||
<g clipPath="url(#clip0_111_550)">
|
||||
<path
|
||||
d="M9.04893 11.25H2.95106C2.10217 11.25 1.67773 11.25 1.53852 11.0466C1.39931 10.8432 1.64602 10.5835 2.13942 10.0641L2.7027 9.47111C2.92208 9.24016 3.03177 9.12469 3.19288 9.06234C3.35399 9 3.54271 9 3.92015 9H8.07988C8.4573 9 8.64602 9 8.80715 9.06234C8.96823 9.12469 9.07795 9.24016 9.29734 9.4711L9.86058 10.0641C10.354 10.5835 10.6007 10.8432 10.4615 11.0466C10.3223 11.25 9.89784 11.25 9.04893 11.25Z"
|
||||
fill="var(--icon-default-color)"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
<path
|
||||
d="M2.97458 2.27061L2.97459 2.27063C3.21361 2.52227 3.26241 2.56246 3.32818 2.58793L2.97458 2.27061ZM2.97458 2.27061L2.4113 1.67767C2.4113 1.67767 2.4113 1.67766 2.4113 1.67766C2.1834 1.43775 2.03311 1.27814 1.94303 1.15861C1.96477 1.15501 1.99023 1.15144 2.01993 1.14815C2.22388 1.12557 2.51696 1.125 2.95106 1.125L9.04893 1.125C9.48304 1.125 9.77613 1.12557 9.98008 1.14815C10.0098 1.15144 10.0352 1.15501 10.057 1.15862C9.9669 1.27813 9.81662 1.43775 9.5887 1.67766L9.58869 1.67767L9.02545 2.27062L9.02544 2.27063M2.97458 2.27061L9.02544 2.27063M9.02544 2.27063C8.78635 2.52233 8.73756 2.56249 8.67176 2.58797C8.59172 2.6189 8.48853 2.625 8.07988 2.625L3.92015 2.625C3.51141 2.625 3.40826 2.61889 3.32825 2.58796L9.02544 2.27063Z"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.75"
|
||||
/>
|
||||
<path
|
||||
opacity="0.5"
|
||||
d="M7 6.75H5"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.75"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
opacity="0.5"
|
||||
d="M3 6.75H1"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.75"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
opacity="0.5"
|
||||
d="M7.5 4.94853H10.2794C10.7911 4.94853 11.2059 5.36332 11.2059 5.875C11.2059 6.38668 10.7911 6.80147 10.2794 6.80147H9.35294M7.5 4.94853L8.32353 4.125M7.5 4.94853L8.32353 5.77206"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.75"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
|
|
@ -150,11 +151,11 @@ export function RenameIcon() {
|
|||
>
|
||||
<path
|
||||
d="M5.03566 0.857117C4.85815 0.857117 4.71423 1.00103 4.71423 1.17855C4.71423 1.35606 4.85815 1.49997 5.03566 1.49997H5.67852V10.5H5.03566C4.85815 10.5 4.71423 10.6439 4.71423 10.8214C4.71423 10.9989 4.85815 11.1428 5.03566 11.1428H6.96423C7.14175 11.1428 7.28566 10.9989 7.28566 10.8214C7.28566 10.6439 7.14175 10.5 6.96423 10.5H6.32138V1.49997H6.96423C7.14175 1.49997 7.28566 1.35606 7.28566 1.17855C7.28566 1.00103 7.14175 0.857117 6.96423 0.857117H5.03566Z"
|
||||
fill="var(--icon-default-color)"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
<path
|
||||
d="M5.25 3H2.625C2.21079 3 1.875 3.33579 1.875 3.75V8.25C1.875 8.66421 2.21079 9 2.625 9H5.25M6.75 9H9.375C9.78921 9 10.125 8.66421 10.125 8.25V3.75C10.125 3.33579 9.78921 3 9.375 3H6.75"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -9,13 +9,13 @@ export function NotificationIcon() {
|
|||
>
|
||||
<path
|
||||
d="M10 12.8335C10 13.3639 9.78927 13.8726 9.4142 14.2477C9.03913 14.6228 8.5304 14.8335 8 14.8335C7.4696 14.8335 6.96087 14.6228 6.58579 14.2477C6.21072 13.8726 6 13.3639 6 12.8335"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M3.72064 12.1667C3.39434 12.0974 3.10586 11.9084 2.91209 11.6369C2.71832 11.3653 2.63337 11.0311 2.67399 10.7L3.34066 5.29332C3.51087 4.18175 4.07672 3.16901 4.93414 2.44143C5.79156 1.71384 6.88287 1.32036 8.00734 1.33332C9.1318 1.32036 10.2231 1.71384 11.0805 2.44143C11.9379 3.16901 12.5038 4.18175 12.674 5.29332L13.3407 10.7C13.3815 11.0301 13.2975 11.3636 13.1051 11.635C12.9127 11.9063 12.6257 12.096 12.3007 12.1667C9.47907 12.8297 6.54222 12.8297 3.72064 12.1667Z"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
|
|
@ -34,7 +34,7 @@ export function HomeIcon() {
|
|||
>
|
||||
<path
|
||||
d="M6.91304 13.5V12.8333C6.91304 12.281 7.36076 11.8333 7.91304 11.8333H8.95652C9.50881 11.8333 9.95652 12.281 9.95652 12.8333V13.5C9.95652 14.0523 10.4042 14.5 10.9565 14.5H12C12.5523 14.5 13 14.0523 13 13.5V7.38889L8.21739 2.5L3 7.38889V13.5C3 14.0523 3.44772 14.5 4 14.5H5.91304C6.46533 14.5 6.91304 14.0523 6.91304 13.5Z"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -51,7 +51,7 @@ export function ProjectsIcon() {
|
|||
>
|
||||
<path
|
||||
d="M12.1538 1.5H5.69231C5.20268 1.5 4.7331 1.68437 4.38688 2.01256C4.04066 2.34075 3.84615 2.78587 3.84615 3.25C3.35652 3.25 2.88695 3.43437 2.54073 3.76256C2.1945 4.09075 2 4.53587 2 5V13.75C2 14.2141 2.1945 14.6592 2.54073 14.9874C2.88695 15.3156 3.35652 15.5 3.84615 15.5H10.3077C10.7973 15.5 11.2669 15.3156 11.6131 14.9874C11.9593 14.6592 12.1538 14.2141 12.1538 13.75C12.6435 13.75 13.1131 13.5656 13.4593 13.2374C13.8055 12.9092 14 12.4641 14 12V3.25C14 2.78587 13.8055 2.34075 13.4593 2.01256C13.1131 1.68437 12.6435 1.5 12.1538 1.5ZM12.1538 12.875V5C12.1538 4.53587 11.9593 4.09075 11.6131 3.76256C11.2669 3.43437 10.7973 3.25 10.3077 3.25H4.76923C4.76923 3.01794 4.86648 2.79538 5.03959 2.63128C5.2127 2.46719 5.44749 2.375 5.69231 2.375H12.1538C12.3987 2.375 12.6334 2.46719 12.8066 2.63128C12.9797 2.79538 13.0769 3.01794 13.0769 3.25V12C13.0769 12.2321 12.9797 12.4546 12.8066 12.6187C12.6334 12.7828 12.3987 12.875 12.1538 12.875ZM2.92308 5C2.92308 4.76794 3.02033 4.54538 3.19344 4.38128C3.36655 4.21719 3.60134 4.125 3.84615 4.125H10.3077C10.5525 4.125 10.7873 4.21719 10.9604 4.38128C11.1335 4.54538 11.2308 4.76794 11.2308 5V13.75C11.2308 13.9821 11.1335 14.2046 10.9604 14.3687C10.7873 14.5328 10.5525 14.625 10.3077 14.625H3.84615C3.60134 14.625 3.36655 14.5328 3.19344 14.3687C3.02033 14.2046 2.92308 13.9821 2.92308 13.75V5Z"
|
||||
fill="var(--icon-default-color)"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -70,103 +70,103 @@ export function TutorialsIcon() {
|
|||
cx="8.157"
|
||||
cy="8.35866"
|
||||
r="6.17928"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.562865"
|
||||
/>
|
||||
<path
|
||||
d="M7.31894 7.8336L7.30273 7.72125C10.0583 7.32407 11.5796 5.74901 12.1058 5.09033L12.1945 5.1612C11.6598 5.83032 10.1146 7.43067 7.31894 7.8336Z"
|
||||
fill="var(--icon-default-color)"
|
||||
stroke="var(--icon-default-color)"
|
||||
fill="var(--text-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.562865"
|
||||
/>
|
||||
<path
|
||||
d="M7.3313 8.19434C7.56713 8.19434 7.7583 8.00316 7.7583 7.76734C7.7583 7.53151 7.56713 7.34033 7.3313 7.34033C7.09547 7.34033 6.9043 7.53151 6.9043 7.76734C6.9043 8.00316 7.09547 8.19434 7.3313 8.19434Z"
|
||||
fill="var(--icon-default-color)"
|
||||
stroke="var(--icon-default-color)"
|
||||
fill="var(--text-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.562865"
|
||||
/>
|
||||
<path
|
||||
d="M12.134 5.56787C12.3699 5.56787 12.561 5.3767 12.561 5.14087C12.561 4.90504 12.3699 4.71387 12.134 4.71387C11.8982 4.71387 11.707 4.90504 11.707 5.14087C11.707 5.3767 11.8982 5.56787 12.134 5.56787Z"
|
||||
fill="var(--icon-default-color)"
|
||||
stroke="var(--icon-default-color)"
|
||||
fill="var(--text-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.562865"
|
||||
/>
|
||||
<path
|
||||
d="M5.67763 13.0492C5.15009 12.385 4.31304 10.9992 4.63359 9.18018L4.74534 9.20001C4.43251 10.9751 5.25078 12.3292 5.76636 12.9785L5.67763 13.0492Z"
|
||||
fill="var(--icon-default-color)"
|
||||
stroke="var(--icon-default-color)"
|
||||
fill="var(--text-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.562865"
|
||||
/>
|
||||
<path
|
||||
d="M4.68921 9.63867C4.92504 9.63867 5.11621 9.4475 5.11621 9.21167C5.11621 8.97584 4.92504 8.78467 4.68921 8.78467C4.45338 8.78467 4.26221 8.97584 4.26221 9.21167C4.26221 9.4475 4.45338 9.63867 4.68921 9.63867Z"
|
||||
fill="var(--icon-default-color)"
|
||||
stroke="var(--icon-default-color)"
|
||||
fill="var(--text-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.562865"
|
||||
/>
|
||||
<path
|
||||
d="M5.70923 13.4238C5.94506 13.4238 6.13623 13.2327 6.13623 12.9968C6.13623 12.761 5.94506 12.5698 5.70923 12.5698C5.4734 12.5698 5.28223 12.761 5.28223 12.9968C5.28223 13.2327 5.4734 13.4238 5.70923 13.4238Z"
|
||||
fill="var(--icon-default-color)"
|
||||
stroke="var(--icon-default-color)"
|
||||
fill="var(--text-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.562865"
|
||||
/>
|
||||
<path
|
||||
d="M12.4429 9.6101L12.3293 9.60692C12.369 8.18736 11.8263 6.82867 10.801 5.7813C9.73352 4.69047 8.2434 4.07147 6.70876 4.0804L6.70801 3.96684C8.27081 3.96078 9.79333 4.58917 10.8822 5.70181C11.9291 6.77143 12.4833 8.1595 12.4429 9.6101Z"
|
||||
fill="var(--icon-default-color)"
|
||||
stroke="var(--icon-default-color)"
|
||||
fill="var(--text-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.562865"
|
||||
/>
|
||||
<path
|
||||
d="M12.3792 10.0142C12.615 10.0142 12.8062 9.82299 12.8062 9.58716C12.8062 9.35133 12.615 9.16016 12.3792 9.16016C12.1433 9.16016 11.9521 9.35133 11.9521 9.58716C11.9521 9.82299 12.1433 10.0142 12.3792 10.0142Z"
|
||||
fill="var(--icon-default-color)"
|
||||
stroke="var(--icon-default-color)"
|
||||
fill="var(--text-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.562865"
|
||||
/>
|
||||
<path
|
||||
d="M6.72974 4.4585C6.96556 4.4585 7.15674 4.26732 7.15674 4.0315C7.15674 3.79567 6.96556 3.60449 6.72974 3.60449C6.49391 3.60449 6.30273 3.79567 6.30273 4.0315C6.30273 4.26732 6.49391 4.4585 6.72974 4.4585Z"
|
||||
fill="var(--icon-default-color)"
|
||||
stroke="var(--icon-default-color)"
|
||||
fill="var(--text-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.562865"
|
||||
/>
|
||||
<path
|
||||
d="M8.93738 12.7561C5.51197 12.5871 3.18964 10.3443 2.15833 8.30167C1.40017 6.79989 1.28161 5.33657 1.84898 4.48256C2.21511 3.93139 2.7529 3.64179 3.57572 3.69903L3.45825 3.81649C2.67632 3.76183 2.28567 4.03042 1.94346 4.5454C1.39865 5.36549 1.51979 6.78505 2.25963 8.25049C3.27641 10.2647 5.56617 12.476 8.94298 12.6426L8.93738 12.7561Z"
|
||||
fill="var(--icon-default-color)"
|
||||
stroke="var(--icon-default-color)"
|
||||
fill="var(--text-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.562865"
|
||||
/>
|
||||
<path
|
||||
d="M4.12372 13.5272C2.54078 13.2677 1.46328 11.9915 1.38697 10.4835C1.31368 9.03292 2.2066 7.3084 4.36675 6.72559L4.39628 6.83521C2.2973 7.40152 1.42936 9.07259 1.50053 10.4778C1.54767 11.4101 2.02721 12.4642 3.18398 12.9967C3.46147 13.1244 3.45807 13.0965 3.77132 13.2139L4.12372 13.5272Z"
|
||||
fill="var(--icon-default-color)"
|
||||
stroke="var(--icon-default-color)"
|
||||
fill="var(--text-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.562865"
|
||||
/>
|
||||
<path
|
||||
d="M4.36157 7.21436C4.5974 7.21436 4.78858 7.02318 4.78858 6.78735C4.78858 6.55153 4.5974 6.36035 4.36157 6.36035C4.12575 6.36035 3.93457 6.55153 3.93457 6.78735C3.93457 7.02318 4.12575 7.21436 4.36157 7.21436Z"
|
||||
fill="var(--icon-default-color)"
|
||||
stroke="var(--icon-default-color)"
|
||||
fill="var(--text-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.562865"
|
||||
/>
|
||||
<path
|
||||
d="M11.5155 15.1026C11.4663 15.1026 11.4165 15.1003 11.3659 15.0956C10.4065 15.0064 9.53752 14.1202 9.04102 12.7247L9.14807 12.6865C9.62928 14.0393 10.4622 14.8976 11.3764 14.9825C11.8685 15.0293 12.3041 14.8309 12.5152 14.4681C12.7337 14.0928 12.7265 13.7453 12.3977 13.2744L12.5152 13.1569C12.8703 13.6657 12.8548 14.1099 12.6133 14.5252C12.4016 14.8889 11.9895 15.1026 11.5155 15.1026Z"
|
||||
fill="var(--icon-default-color)"
|
||||
stroke="var(--icon-default-color)"
|
||||
fill="var(--text-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.562865"
|
||||
/>
|
||||
<path
|
||||
d="M8.9187 13.1187C9.15453 13.1187 9.34571 12.9275 9.34571 12.6917C9.34571 12.4558 9.15453 12.2646 8.9187 12.2646C8.68287 12.2646 8.4917 12.4558 8.4917 12.6917C8.4917 12.9275 8.68287 13.1187 8.9187 13.1187Z"
|
||||
fill="var(--icon-default-color)"
|
||||
stroke="var(--icon-default-color)"
|
||||
fill="var(--text-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.562865"
|
||||
/>
|
||||
<path
|
||||
d="M10.0987 3.65056L9.99072 3.61513C10.2487 2.83274 10.7045 2.32867 11.2414 2.23252C11.572 2.17286 11.8969 2.28566 12.0886 2.52597C12.2781 2.76339 12.4042 2.98817 12.2684 3.30782L12.1509 3.19035C12.2699 2.91023 12.1625 2.80064 12.0001 2.59683C11.8344 2.38923 11.5514 2.29248 11.2616 2.34441C10.7669 2.43284 10.3432 2.90906 10.0987 3.65056Z"
|
||||
fill="var(--icon-default-color)"
|
||||
stroke="var(--icon-default-color)"
|
||||
fill="var(--text-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.562865"
|
||||
/>
|
||||
<path
|
||||
d="M10.0535 4.04004C10.2893 4.04004 10.4805 3.84887 10.4805 3.61304C10.4805 3.37721 10.2893 3.18604 10.0535 3.18604C9.81764 3.18604 9.62646 3.37721 9.62646 3.61304C9.62646 3.84887 9.81764 4.04004 10.0535 4.04004Z"
|
||||
fill="var(--icon-default-color)"
|
||||
stroke="var(--icon-default-color)"
|
||||
fill="var(--text-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.562865"
|
||||
/>
|
||||
</svg>
|
||||
|
|
@ -184,12 +184,12 @@ export function DocumentationIcon() {
|
|||
>
|
||||
<path
|
||||
d="M8 5.10589C7.2666 4.17245 6.13604 3.23901 3.33413 3.17051C3.15009 3.16602 3 3.3155 3 3.4996C3 4.86525 3 10.0354 3 11.5645C3 11.7486 3.1501 11.8932 3.33409 11.8992C6.13603 11.9908 7.2666 13.233 8 14.1665M8 5.10589C8.7334 4.17245 9.86393 3.23901 12.6659 3.17051C12.8499 3.16602 13 3.31214 13 3.49624C13 5.02281 13 10.0374 13 11.564C13 11.7481 12.8499 11.8932 12.6659 11.8992C9.864 11.9908 8.7334 13.233 8 14.1665M8 5.10589V14.1665"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M12.8232 4.5H14.333C14.5171 4.5 14.6663 4.64924 14.6663 4.83333V13.526C14.6663 13.7957 14.3485 13.9749 14.102 13.8654C13.5719 13.6299 12.6873 13.3421 11.5291 13.3421C9.56827 13.3421 7.99967 14.5 7.99967 14.5C7.99967 14.5 6.43105 13.3421 4.47026 13.3421C3.31197 13.3421 2.42738 13.6299 1.89732 13.8654C1.65079 13.9749 1.33301 13.7957 1.33301 13.526V4.83333C1.33301 4.64924 1.48225 4.5 1.66634 4.5H3.17615"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
|
@ -208,7 +208,7 @@ export function HelpIcon() {
|
|||
<g clipPath="url(#clip0_764_1941)">
|
||||
<path
|
||||
d="M6 12.5C2.6862 12.5 0 9.8138 0 6.5C0 3.1862 2.6862 0.5 6 0.5C9.3138 0.5 12 3.1862 12 6.5C12 9.8138 9.3138 12.5 6 12.5ZM3.552 4.8404V4.9016C3.552 4.98117 3.58361 5.05747 3.63987 5.11373C3.69613 5.16999 3.77244 5.2016 3.852 5.2016H4.4502C4.48952 5.2016 4.52845 5.19386 4.56478 5.17881C4.6011 5.16376 4.63411 5.14171 4.66191 5.11391C4.68971 5.08611 4.71176 5.0531 4.72681 5.01678C4.74186 4.98045 4.7496 4.94152 4.7496 4.9022C4.7496 4.1282 5.3484 3.7148 6.1536 3.7148C6.9384 3.7148 7.4544 4.1282 7.4544 4.7168C7.4544 5.2736 7.1652 5.5322 6.4428 5.8628L6.2364 5.9552C5.6274 6.224 5.4 6.626 5.4 7.3286V7.4C5.4 7.47957 5.43161 7.55587 5.48787 7.61213C5.54413 7.66839 5.62044 7.7 5.7 7.7H6.2982C6.33752 7.7 6.37645 7.69226 6.41278 7.67721C6.4491 7.66216 6.48211 7.64011 6.50991 7.61231C6.53771 7.58451 6.55976 7.5515 6.57481 7.51518C6.58986 7.47885 6.5976 7.43992 6.5976 7.4006C6.5976 7.091 6.6804 6.9668 6.9276 6.8534L7.1346 6.7604C8.0016 6.368 8.652 5.852 8.652 4.7264V4.6646C8.652 3.4778 7.62 2.6 6.1536 2.6C4.6668 2.6 3.552 3.4568 3.552 4.8404ZM5.1 9.4946C5.1 10.0148 5.4954 10.4 5.9946 10.4C6.5046 10.4 6.9 10.0148 6.9 9.4946C6.9 8.9744 6.5046 8.6 5.9946 8.6C5.4954 8.6 5.1 8.9744 5.1 9.4946Z"
|
||||
fill="var(--icon-default-color)"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
|
|
@ -236,17 +236,17 @@ export function LogoutIcon() {
|
|||
>
|
||||
<path
|
||||
d="M4 3.5C4.00605 2.41248 4.05428 1.82353 4.43847 1.43934C4.87781 1 5.58489 1 6.99914 1H7.49914C8.91334 1 9.62044 1 10.0598 1.43934C10.4991 1.87868 10.4991 2.58578 10.4991 4V8C10.4991 9.4142 10.4991 10.1213 10.0598 10.5606C9.62044 11 8.91334 11 7.49914 11H6.99914C5.58489 11 4.87781 11 4.43847 10.5606C4.05428 10.1764 4.00605 9.5875 4 8.5"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
opacity="0.5"
|
||||
d="M4 9.75C2.82149 9.75 2.23223 9.75 1.86611 9.3839C1.5 9.01775 1.5 8.4285 1.5 7.25V4.75C1.5 3.57149 1.5 2.98224 1.86611 2.61612C2.23223 2.25 2.82149 2.25 4 2.25"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
/>
|
||||
<path
|
||||
d="M7.5 6H3M3 6L4 7M3 6L4 5"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export function ArrowIcon() {
|
|||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M4 5L6.5 7.51615L9 5L4 5Z" fill="var(--icon-default-color-active)" />
|
||||
<path d="M4 5L6.5 7.51615L9 5L4 5Z" fill="var(--text-color)" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
|
@ -40,14 +40,14 @@ export function FocusIcon() {
|
|||
>
|
||||
<path
|
||||
d="M7.31999 1.56H9.89999C10.0325 1.56 10.14 1.66745 10.14 1.8V4.14M10.14 7.5V9.9C10.14 10.0325 10.0325 10.14 9.89999 10.14H7.31999M4.55999 10.14H1.91999C1.78744 10.14 1.67999 10.0325 1.67999 9.9V7.5M1.67999 4.14V1.8C1.67999 1.66745 1.78744 1.56 1.91999 1.56H4.55999"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<circle
|
||||
cx="6"
|
||||
cy="5.87999"
|
||||
r="0.95"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.5"
|
||||
/>
|
||||
</svg>
|
||||
|
|
@ -65,7 +65,7 @@ export function LockIcon({ isLocked }: { isLocked: boolean }) {
|
|||
>
|
||||
<path
|
||||
d="M3.5 5.0144C3.73571 5 4.0263 5 4.4 5H7.6C7.9737 5 8.2643 5 8.5 5.0144M3.5 5.0144C3.20584 5.03235 2.99715 5.07275 2.81902 5.1635C2.53677 5.3073 2.3073 5.53675 2.16349 5.819C2 6.1399 2 6.5599 2 7.4V8.1C2 8.9401 2 9.3601 2.16349 9.681C2.3073 9.96325 2.53677 10.1927 2.81902 10.3365C3.13988 10.5 3.55992 10.5 4.4 10.5H7.6C8.4401 10.5 8.8601 10.5 9.181 10.3365C9.46325 10.1927 9.6927 9.96325 9.8365 9.681C10 9.3601 10 8.9401 10 8.1V7.4C10 6.5599 10 6.1399 9.8365 5.819C9.6927 5.53675 9.46325 5.3073 9.181 5.1635C9.00285 5.07275 8.79415 5.03235 8.5 5.0144M3.5 5.0144V4C3.5 2.61929 4.61929 1.5 6 1.5C7.3807 1.5 8.5 2.61929 8.5 4V5.0144"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
|
|
@ -80,7 +80,7 @@ export function LockIcon({ isLocked }: { isLocked: boolean }) {
|
|||
>
|
||||
<path
|
||||
d="M8.292 3C7.9062 2.11705 7.02515 1.5 6 1.5C4.61929 1.5 3.5 2.61929 3.5 4V5.0144M3.5 5.0144C3.73571 5 4.0263 5 4.4 5H7.6C8.4401 5 8.8601 5 9.181 5.1635C9.46325 5.3073 9.6927 5.53675 9.8365 5.819C10 6.1399 10 6.5599 10 7.4V8.1C10 8.9401 10 9.3601 9.8365 9.681C9.6927 9.96325 9.46325 10.1927 9.181 10.3365C8.8601 10.5 8.4401 10.5 7.6 10.5H4.4C3.55992 10.5 3.13988 10.5 2.81902 10.3365C2.53677 10.1927 2.3073 9.96325 2.16349 9.681C2 9.3601 2 8.9401 2 8.1V7.4C2 6.5599 2 6.1399 2.16349 5.819C2.3073 5.53675 2.53677 5.3073 2.81902 5.1635C2.99715 5.07275 3.20584 5.03235 3.5 5.0144Z"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
|
|
@ -100,7 +100,7 @@ export function EyeIcon({ isClosed }: { isClosed: boolean }) {
|
|||
<g clipPath="url(#clip0_889_1582)">
|
||||
<path
|
||||
d="M1.52462 4.65539C1.50864 4.60647 1.5 4.55424 1.5 4.5C1.5 4.22386 1.72386 4 2 4C2.22985 4 2.42348 4.1551 2.48194 4.36634C3.52484 7.8593 8.4728 7.8601 9.5174 4.36868C9.5751 4.15624 9.7693 4 10 4C10.2761 4 10.5 4.22386 10.5 4.5C10.5 4.5534 10.4916 4.60485 10.4761 4.6531C10.2758 5.3241 9.96205 5.8938 9.56935 6.3622L10.2072 7C10.4024 7.19525 10.4024 7.51185 10.2072 7.7071C10.0119 7.90235 9.6953 7.90235 9.50005 7.7071L8.84435 7.0514C8.48725 7.3213 8.0956 7.53275 7.6843 7.6858L7.8632 8.35355C7.9347 8.6203 7.7764 8.89445 7.50965 8.9659C7.2429 9.0374 6.96875 8.8791 6.8973 8.61235L6.71555 7.9341C6.2418 8.0042 5.7582 8.0042 5.28445 7.9341L5.1027 8.61235C5.03125 8.8791 4.75708 9.0374 4.49035 8.9659C4.22361 8.89445 4.06533 8.6203 4.1368 8.35355L4.31572 7.6858C3.90446 7.53275 3.5128 7.3213 3.15573 7.05145L2.50009 7.7071C2.30482 7.90235 1.98824 7.90235 1.79298 7.7071C1.59771 7.51185 1.59771 7.19525 1.79298 7L2.43074 6.36225C2.03845 5.89435 1.72505 5.3254 1.52462 4.65539Z"
|
||||
fill="var(--icon-default-color)"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
|
|
@ -119,13 +119,13 @@ export function EyeIcon({ isClosed }: { isClosed: boolean }) {
|
|||
>
|
||||
<path
|
||||
d="M7.50035 6C7.50035 6.82845 6.8288 7.5 6.00035 7.5C5.17195 7.5 4.50036 6.82845 4.50036 6C4.50036 5.17155 5.17195 4.5 6.00035 4.5C6.8288 4.5 7.50035 5.17155 7.50035 6Z"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M6.0006 2.5C3.76177 2.5 1.86663 3.97144 1.22949 6C1.86662 8.02855 3.76177 9.5 6.0006 9.5C8.2394 9.5 10.1345 8.02855 10.7717 6C10.1345 3.97146 8.2394 2.5 6.0006 2.5Z"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
|
|
@ -142,9 +142,9 @@ export function KebebIcon() {
|
|||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="6" cy="3" r="1" fill="var(--icon-default-color)" />
|
||||
<circle cx="6" cy="6" r="1" fill="var(--icon-default-color)" />
|
||||
<circle cx="6" cy="9" r="1" fill="var(--icon-default-color)" />
|
||||
<circle cx="6" cy="3" r="1" fill="var(--text-color)" />
|
||||
<circle cx="6" cy="6" r="1" fill="var(--text-color)" />
|
||||
<circle cx="6" cy="9" r="1" fill="var(--text-color)" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
|
@ -160,7 +160,7 @@ export function AddIcon() {
|
|||
>
|
||||
<path
|
||||
d="M6 2L6 10M2 6H10"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.705882"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
|
|
@ -179,12 +179,12 @@ export function CloseIcon() {
|
|||
>
|
||||
<path
|
||||
d="M3.87868 8.62132L8.12132 4.37868"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M3.87866 4.37868L8.1213 8.62132"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
|
|
@ -203,11 +203,11 @@ export function SettingsIcon() {
|
|||
<g clipPath="url(#clip0_111_481)">
|
||||
<path
|
||||
d="M6 7.5C6.82843 7.5 7.5 6.82843 7.5 6C7.5 5.17157 6.82843 4.5 6 4.5C5.17157 4.5 4.5 5.17157 4.5 6C4.5 6.82843 5.17157 7.5 6 7.5Z"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
/>
|
||||
<path
|
||||
d="M6.8827 1.07612C6.6989 1 6.46595 1 6 1C5.53405 1 5.3011 1 5.1173 1.07612C4.87228 1.17761 4.67761 1.37229 4.57611 1.61731C4.52978 1.72917 4.51165 1.85925 4.50455 2.04899C4.49413 2.32784 4.35113 2.58594 4.10947 2.72546C3.86782 2.86498 3.57279 2.85977 3.32609 2.72938C3.15822 2.64065 3.0365 2.59131 2.91647 2.57551C2.65352 2.54089 2.38759 2.61214 2.17718 2.7736C2.01937 2.89469 1.90288 3.09645 1.66991 3.49996C1.43694 3.90348 1.32046 4.10524 1.29449 4.30245C1.25988 4.5654 1.33113 4.83133 1.49259 5.04175C1.56628 5.1378 1.66985 5.2185 1.83059 5.3195C2.0669 5.468 2.21894 5.72095 2.21893 6C2.21891 6.27905 2.06687 6.53195 1.83059 6.6804C1.66982 6.78145 1.56624 6.8622 1.49254 6.95825C1.33108 7.16865 1.25983 7.43455 1.29445 7.6975C1.32041 7.8947 1.43689 8.0965 1.66986 8.5C1.90284 8.9035 2.01932 9.1053 2.17713 9.22635C2.38754 9.3878 2.65347 9.45905 2.91642 9.42445C3.03644 9.40865 3.15816 9.3593 3.32602 9.2706C3.57273 9.1402 3.86778 9.135 4.10945 9.2745C4.35112 9.41405 4.49413 9.67215 4.50455 9.95105C4.51165 10.1407 4.52978 10.2708 4.57611 10.3827C4.67761 10.6277 4.87228 10.8224 5.1173 10.9239C5.3011 11 5.53405 11 6 11C6.46595 11 6.6989 11 6.8827 10.9239C7.1277 10.8224 7.3224 10.6277 7.42385 10.3827C7.4702 10.2708 7.48835 10.1407 7.49545 9.951C7.50585 9.67215 7.64885 9.41405 7.8905 9.2745C8.13215 9.13495 8.4272 9.1402 8.67395 9.2706C8.8418 9.3593 8.9635 9.4086 9.0835 9.4244C9.34645 9.45905 9.6124 9.3878 9.8228 9.22635C9.9806 9.10525 10.0971 8.9035 10.33 8.49995C10.563 8.09645 10.6795 7.8947 10.7055 7.6975C10.7401 7.43455 10.6688 7.1686 10.5074 6.9582C10.4337 6.86215 10.3301 6.7814 10.1693 6.6804C9.9331 6.53195 9.78105 6.279 9.78105 5.99995C9.78105 5.7209 9.9331 5.46805 10.1693 5.3196C10.3301 5.21855 10.4337 5.13785 10.5074 5.04175C10.6689 4.83136 10.7401 4.56543 10.7055 4.30248C10.6796 4.10527 10.5631 3.90351 10.3301 3.5C10.0971 3.09648 9.98065 2.89472 9.82285 2.77363C9.61245 2.61218 9.3465 2.54092 9.08355 2.57554C8.96355 2.59134 8.84185 2.64068 8.67395 2.7294C8.42725 2.85979 8.1322 2.86501 7.89055 2.72548C7.64885 2.58595 7.50585 2.32783 7.49545 2.04897C7.48835 1.85924 7.4702 1.72916 7.42385 1.61731C7.3224 1.37229 7.1277 1.17761 6.8827 1.07612Z"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
|
|
@ -255,7 +255,7 @@ export function TrashIcon() {
|
|||
<g clipPath="url(#clip0_111_486)">
|
||||
<path
|
||||
d="M4.70587 5.32353V9.02941M7.17646 5.32353V9.02941M9.64704 2.85294V10.2647C9.64704 10.947 9.094 11.5 8.41175 11.5H3.47057C2.78834 11.5 2.23528 10.947 2.23528 10.2647V2.85294M0.999985 2.85294H10.8823M7.7941 2.85294V2.23529C7.7941 1.55306 7.24106 1 6.55881 1H5.32351C4.64128 1 4.08822 1.55306 4.08822 2.23529V2.85294"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
|
|
@ -280,32 +280,32 @@ export function FilterIcon() {
|
|||
>
|
||||
<path
|
||||
d="M6.86655 10V3.33333"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M6.86655 16.6666V13.3333"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M13.0667 5.83336V3.33336"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M13.0667 16.6666V9.16664"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M6.86666 13.3333C7.78714 13.3333 8.53333 12.5871 8.53333 11.6667C8.53333 10.7462 7.78714 10 6.86666 10C5.94619 10 5.2 10.7462 5.2 11.6667C5.2 12.5871 5.94619 13.3333 6.86666 13.3333Z"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M13.0667 9.16669C13.9871 9.16669 14.7333 8.4205 14.7333 7.50003C14.7333 6.57955 13.9871 5.83336 13.0667 5.83336C12.1462 5.83336 11.4 6.57955 11.4 7.50003C11.4 8.4205 12.1462 9.16669 13.0667 9.16669Z"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
|
|
@ -324,7 +324,7 @@ export function EyeDroperIcon({ isActive }: { isActive: boolean }) {
|
|||
<path
|
||||
d="M6.5625 3.5L10.0625 7"
|
||||
stroke={
|
||||
isActive ? "var(--highlight-accent-color)" : "var(--icon-default-color)"
|
||||
isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
|
||||
}
|
||||
strokeWidth="0.875"
|
||||
strokeMiterlimit="10"
|
||||
|
|
@ -334,7 +334,7 @@ export function EyeDroperIcon({ isActive }: { isActive: boolean }) {
|
|||
<path
|
||||
d="M7.4375 4.37266L10.0625 1.74766C10.5437 1.26641 11.3312 1.26641 11.8125 1.74766C12.2937 2.22891 12.2937 3.01641 11.8125 3.49766L9.1875 6.12266"
|
||||
stroke={
|
||||
isActive ? "var(--highlight-accent-color)" : "var(--icon-default-color)"
|
||||
isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
|
||||
}
|
||||
strokeWidth="0.875"
|
||||
strokeMiterlimit="10"
|
||||
|
|
@ -344,7 +344,7 @@ export function EyeDroperIcon({ isActive }: { isActive: boolean }) {
|
|||
<path
|
||||
d="M7.30625 4.50391L2.49375 9.31641C2.23125 9.57891 2.14375 9.88516 2.14375 10.2352C1.925 10.3664 1.75 10.6289 1.75 10.9352C1.75 11.4164 2.14375 11.8102 2.625 11.8102C2.93125 11.8102 3.19375 11.6352 3.36875 11.4164C3.675 11.4164 4.025 11.2852 4.2875 11.0664L9.1 6.25391"
|
||||
stroke={
|
||||
isActive ? "var(--highlight-accent-color)" : "var(--icon-default-color)"
|
||||
isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
|
||||
}
|
||||
strokeWidth="0.875"
|
||||
strokeMiterlimit="10"
|
||||
|
|
@ -366,7 +366,7 @@ export function TickIcon() {
|
|||
>
|
||||
<path
|
||||
d="M3 6.5L4.84616 8.5L9 4"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
|
|
@ -442,7 +442,7 @@ export function RemoveIcon() {
|
|||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M3 6.5H9" stroke="var(--icon-default-color)" strokeLinecap="round" />
|
||||
<path d="M3 6.5H9" stroke="var(--text-color)" strokeLinecap="round" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
|
@ -462,7 +462,7 @@ export function InfoIcon() {
|
|||
/>
|
||||
<path
|
||||
d="M6.00006 10.3175C8.45219 10.3175 10.4401 8.32963 10.4401 5.8775C10.4401 3.42536 8.45219 1.4375 6.00006 1.4375C3.54792 1.4375 1.56006 3.42536 1.56006 5.8775C1.56006 8.32963 3.54792 10.3175 6.00006 10.3175Z"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.72"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
|
|
@ -512,21 +512,21 @@ export const KebabIcon = () => {
|
|||
cy="1.35112"
|
||||
rx="1.4993"
|
||||
ry="1.27477"
|
||||
fill="var(--icon-default-color)"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
<ellipse
|
||||
cx="6.04868"
|
||||
cy="1.35131"
|
||||
rx="1.4993"
|
||||
ry="1.27477"
|
||||
fill="var(--icon-default-color)"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
<ellipse
|
||||
cx="10.5476"
|
||||
cy="1.35131"
|
||||
rx="1.4993"
|
||||
ry="1.27477"
|
||||
fill="var(--icon-default-color)"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -562,31 +562,31 @@ export const DeleteIcon = () => {
|
|||
>
|
||||
<path
|
||||
d="M8.33301 10V13.3334"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M11 10V13.3334"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M4.33301 6.66406H15"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M5.66699 8.66406V13.9976C5.66699 15.1022 6.56245 15.9976 7.66705 15.9976H11.6672C12.7718 15.9976 13.6672 15.1022 13.6672 13.9976V8.66406"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M7.66699 5.33337C7.66699 4.59697 8.26396 4 9.00037 4H10.3337C11.0702 4 11.6671 4.59697 11.6671 5.33337V6.66675H7.66699V5.33337Z"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
|
|
@ -607,7 +607,7 @@ export const HourlySimulationIcon = () => {
|
|||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M9.22794 8.29297C9.22794 9.1131 9.69975 9.49575 10.1561 9.86512C10.7275 10.3286 11.371 10.8503 11.4375 12.4462H5.91087C5.97732 10.8503 6.62079 10.3286 7.19228 9.86512C7.64859 9.49575 8.1204 9.1131 8.1204 8.29297C8.1204 7.47284 7.64859 7.09018 7.19228 6.72082C6.62079 6.25732 5.97732 5.73567 5.91087 4.13971H11.4375C11.371 5.73567 10.7275 6.25732 10.1561 6.72082C9.69975 7.09018 9.22794 7.47284 9.22794 8.29297ZM10.5049 7.15054C11.1694 6.61173 11.9968 5.94112 11.9968 3.86282V3.58594H5.35156V3.86282C5.35156 5.94112 6.17889 6.61173 6.84342 7.15054C7.27867 7.50385 7.56663 7.73699 7.56663 8.29297C7.56663 8.84895 7.27867 9.08209 6.84342 9.4354C6.17889 9.97421 5.35156 10.6448 5.35156 12.7231V13H11.9968V12.7231C11.9968 10.6448 11.1695 9.97421 10.5049 9.4354C10.0697 9.08209 9.78171 8.84895 9.78171 8.29297C9.78171 7.73699 10.0697 7.50385 10.5049 7.15054ZM8.54764 9.83582L7.71588 10.5109C7.3515 10.806 7.03751 11.0602 6.86916 11.6156H10.4792C10.3108 11.0602 9.99685 10.806 9.63247 10.5109L8.80071 9.83582C8.72706 9.77602 8.62129 9.77602 8.54764 9.83582Z"
|
||||
fill="#2B3344"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -624,15 +624,15 @@ export const DailyProductionIcon = () => {
|
|||
>
|
||||
<path
|
||||
d="M13.4564 6.96778C13.3816 6.81906 13.2232 6.72864 13.0596 6.74287L12.5621 6.77922C12.0226 4.82899 10.2365 3.39063 8.11668 3.39063C5.57103 3.39059 3.5 5.46179 3.5 8.00724C3.5 10.5529 5.57103 12.6239 8.11664 12.6239C9.59017 12.6239 10.9876 11.911 11.8549 10.7172C11.988 10.5335 11.947 10.2772 11.7637 10.1437C11.5801 10.0105 11.3235 10.0519 11.1904 10.2347C10.477 11.2167 9.328 11.8032 8.11645 11.8032C6.02331 11.8032 4.32065 10.1003 4.32065 8.00737C4.32065 5.91438 6.02334 4.21163 8.11648 4.21163C9.80226 4.21163 11.2333 5.3171 11.7269 6.84049L11.4679 6.85944C11.3024 6.87139 11.1604 6.98234 11.1083 7.13969C11.0559 7.29735 11.104 7.47084 11.2294 7.57934L11.9746 8.22285C12.0471 8.33961 12.1753 8.41774 12.3224 8.41774C12.3301 8.41774 12.3373 8.41599 12.3449 8.41564C12.3474 8.41564 12.3493 8.4167 12.3516 8.4167C12.3614 8.4167 12.3714 8.41654 12.3816 8.41564C12.4901 8.40757 12.5909 8.35682 12.6622 8.27447L13.3998 7.42041C13.5087 7.2949 13.5308 7.11596 13.4564 6.96778Z"
|
||||
fill="#2B3344"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
<path
|
||||
d="M5.94531 9.43859V9.04L6.30878 8.71149C6.92314 8.16192 7.22165 7.84585 7.23024 7.51715C7.23024 7.28766 7.09188 7.1061 6.76706 7.1061C6.52494 7.1061 6.31281 7.2269 6.16567 7.33979L5.97956 6.86783C6.19166 6.70822 6.52036 6.57812 6.90122 6.57812C7.53737 6.57812 7.88783 6.95018 7.88783 7.46078C7.88783 7.9324 7.54615 8.30903 7.1393 8.67234L6.87962 8.88866V8.89708H7.9398V9.43823H5.94531V9.43859Z"
|
||||
fill="#2B3344"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
<path
|
||||
d="M9.51199 9.43788V8.76696H8.26587V8.33889L9.33028 6.625H10.1352V8.27375H10.4726V8.76696H10.1352V9.43788H9.51199ZM9.51199 8.27375V7.65077C9.51199 7.48187 9.52061 7.30909 9.53359 7.12718H9.51638C9.42525 7.30909 9.35168 7.47344 9.25671 7.65077L8.88026 8.26513V8.27375H9.51199Z"
|
||||
fill="#2B3344"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -649,14 +649,14 @@ export const MonthlyROI = () => {
|
|||
>
|
||||
<path
|
||||
d="M3.78955 11.9997V4.84175H4.84219V4.21016C4.84221 3.97761 5.03071 3.7891 5.26325 3.7891H6.10535C6.33789 3.7891 6.52639 3.97761 6.52641 4.21012V4.84175H9.47381L9.47379 4.21012C9.47379 3.97756 9.66231 3.78906 9.89485 3.78906H10.737C10.9695 3.78906 11.158 3.97756 11.158 4.21012V4.84175H12.2107V11.9997H3.78955ZM4.42113 11.3681H11.5791V6.52599H4.42113V11.3681ZM4.84219 9.89443H6.10535V10.9471H4.84219V9.89443ZM6.52641 9.89443H7.78957V10.9471H6.52641V9.89443ZM8.21063 9.89443H9.47379V10.9471H8.21063V9.89443ZM9.89485 9.89443H11.158V10.9471H9.89485V9.89443ZM4.84219 8.42073H6.10535V9.47337H4.84219V8.42073ZM6.52641 8.42073H7.78957V9.47337H6.52641V8.42073ZM8.21063 8.42073H9.47379V9.47337H8.21063V8.42073ZM9.89485 8.42073H11.158V9.47337H9.89485V8.42073ZM6.52641 6.94707H7.78957V7.99971H6.52641V6.94707ZM8.21063 6.94707H9.47379V7.99971H8.21063V6.94707ZM9.89485 6.94707H11.158V7.99971H9.89485V6.94707ZM10.2106 4.21019C10.0362 4.21019 9.89485 4.35156 9.89485 4.52598V5.15756C9.89485 5.33198 10.0362 5.47335 10.2106 5.47335H10.4212C10.5956 5.47335 10.737 5.33198 10.737 5.15756V4.52598C10.737 4.35156 10.5956 4.21019 10.4212 4.21019H10.2106ZM5.57904 4.21016C5.40462 4.21016 5.26325 4.35156 5.26325 4.52598V5.15756C5.26325 5.33195 5.40462 5.47335 5.57904 5.47335H5.78956C5.96398 5.47335 6.10535 5.33195 6.10535 5.15756V4.52598C6.10535 4.35156 5.96398 4.21016 5.78956 4.21016H5.57904ZM6.73695 8.63125V9.26285H7.57905V8.63125H6.73695ZM5.05271 8.63125V9.26285H5.89483V8.63125H5.05271ZM8.42117 8.63125V9.26285H9.26327V8.63125H8.42117ZM10.1054 8.63125V9.26283H10.9475V8.63125H10.1054Z"
|
||||
fill="#2B3344"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const ExpandIcon = () => {
|
||||
return (
|
||||
export const ExpandIcon = ({ isActive }: { isActive: boolean }) => {
|
||||
return isActive ? (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
|
|
@ -666,15 +666,45 @@ export const ExpandIcon = () => {
|
|||
>
|
||||
<path
|
||||
d="M16 5.32324C16 5.09668 15.8018 4.89844 15.5752 4.89844H3.96387C3.7373 4.89844 3.53906 5.09668 3.53906 5.32324V6.17285C3.53906 6.39941 3.7373 6.59766 3.96387 6.59766H15.5752C15.8018 6.59766 16 6.39941 16 6.17285V5.32324Z"
|
||||
fill="#2B3344"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
<path
|
||||
d="M16 13.8232C16 13.5967 15.8018 13.3984 15.5752 13.3984H3.96387C3.7373 13.3984 3.53906 13.5967 3.53906 13.8232V14.6729C3.53906 14.8994 3.7373 15.0977 3.96387 15.0977H15.5752C15.8018 15.0977 16 14.8994 16 14.6729V13.8232Z"
|
||||
fill="#2B3344"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
<path
|
||||
d="M12.1768 10.8477C12.4033 10.8477 12.6016 10.6494 12.6016 10.4229V9.57324C12.6016 9.34668 12.4033 9.14844 12.1768 9.14844H7.3623C7.13574 9.14844 6.9375 9.34668 6.9375 9.57324V10.4229C6.9375 10.6494 7.13574 10.8477 7.3623 10.8477H12.1768Z"
|
||||
fill="#2B3344"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
) : (
|
||||
<svg
|
||||
width="21"
|
||||
height="20"
|
||||
viewBox="0 0 21 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5 5.6875H15.5"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="1.4"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M5 8.60156H15.5"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="1.4"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M5 10.6484L10.25 14.7318L15.5 10.6484"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="1.4"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -691,21 +721,21 @@ export const StartIcon = () => {
|
|||
>
|
||||
<path
|
||||
d="M10.8542 7.58594V10.5918"
|
||||
stroke="#6F42C1"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.901765"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M10.854 15.9971C7.95036 15.9971 5.59375 13.6405 5.59375 10.7369C5.59375 7.83317 7.95036 5.47656 10.854 5.47656C13.7577 5.47656 16.1143 7.83317 16.1143 10.7369"
|
||||
stroke="#6F42C1"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.901765"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9.05078 3.97656H12.6578"
|
||||
stroke="#6F42C1"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.901765"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="round"
|
||||
|
|
@ -734,21 +764,21 @@ export const EndIcon = () => {
|
|||
>
|
||||
<path
|
||||
d="M10.8542 7.58594V10.5918"
|
||||
stroke="#6F42C1"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.901765"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M10.854 15.9971C7.95036 15.9971 5.59375 13.6405 5.59375 10.7369C5.59375 7.83317 7.95036 5.47656 10.854 5.47656C13.7577 5.47656 16.1143 7.83317 16.1143 10.7369"
|
||||
stroke="#6F42C1"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.901765"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9.05078 3.97656H12.6578"
|
||||
stroke="#6F42C1"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.901765"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="round"
|
||||
|
|
@ -756,7 +786,7 @@ export const EndIcon = () => {
|
|||
/>
|
||||
<path
|
||||
d="M12.5977 13.898V13.2007C12.5977 12.341 13.2109 11.9863 13.9563 12.4191L14.5575 12.7678L15.1587 13.1165C15.9041 13.5494 15.9041 14.2527 15.1587 14.6856L14.5575 15.0343L13.9563 15.3829C13.2109 15.8158 12.5977 15.4611 12.5977 14.6014V13.898Z"
|
||||
stroke="#6F42C1"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="0.901765"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="round"
|
||||
|
|
@ -779,26 +809,8 @@ export const SpeedIcon = () => {
|
|||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M9.55992 9.81727L4.10352 6.17969V14.7664L9.55992 11.1288V14.7664L16 10.4731L9.55992 6.17969V9.81727ZM5.1948 12.7273V8.21877L8.57624 10.4731L5.1948 12.7273ZM10.6512 12.7273V8.21877L14.0326 10.4731L10.6512 12.7273Z"
|
||||
fill="#2B3344"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
// export const DublicateIcon = () => {
|
||||
// return (
|
||||
// <svg
|
||||
// width="20"
|
||||
// height="20"
|
||||
// viewBox="0 0 20 20"
|
||||
// fill="none"
|
||||
// xmlns="http://www.w3.org/2000/svg"
|
||||
// >
|
||||
// <path
|
||||
// fillRule="evenodd"
|
||||
// clipRule="evenodd"
|
||||
// d="M14.3125 11.375C14.3125 11.7545 14.0045 12.0625 13.625 12.0625H8.125C7.7455 12.0625 7.4375 11.7545 7.4375 11.375V5.875C7.4375 5.4955 7.7455 5.1875 8.125 5.1875H13.625C14.0045 5.1875 14.3125 5.4955 14.3125 5.875V11.375ZM13.625 4.5H8.125C7.36566 4.5 6.75 5.11566 6.75 5.875V11.375C6.75 12.1343 7.36566 12.75 8.125 12.75H13.625C14.3843 12.75 15 12.1343 15 11.375V5.875C15 5.11566 14.3843 4.5 13.625 4.5ZM11.5625 14.125C11.5625 14.5045 11.2545 14.8125 10.875 14.8125H5.375C4.9955 14.8125 4.6875 14.5045 4.6875 14.125V8.625C4.6875 8.2455 4.9955 7.9375 5.375 7.9375H6.0625V7.25H5.375C4.61566 7.25 4 7.86566 4 8.625V14.125C4 14.8843 4.61566 15.5 5.375 15.5H10.875C11.6343 15.5 12.25 14.8843 12.25 14.125V13.4375H11.5625V14.125Z"
|
||||
// fill="var(--text-color)"
|
||||
// />
|
||||
// </svg>
|
||||
// );
|
||||
// };
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ export function BuilderIcon({ isActive }: { isActive: boolean }) {
|
|||
>
|
||||
<path
|
||||
d="M12.25 6.25C12.25 6.66421 11.9142 7 11.5 7H3.5C3.08579 7 2.75 6.66421 2.75 6.25V4.5C2.75 4.08579 3.08579 3.75 3.5 3.75H11.5C11.9142 3.75 12.25 4.08579 12.25 4.5V6.25ZM13.375 4.5C13.375 4.08579 13.7108 3.75 14.125 3.75H16.5C16.9142 3.75 17.25 4.08579 17.25 4.5V6.25C17.25 6.66421 16.9142 7 16.5 7H14.125C13.7108 7 13.375 6.66421 13.375 6.25V4.5ZM3.5 15.75C3.08579 15.75 2.75 15.4142 2.75 15V13.25C2.75 12.8358 3.08579 12.5 3.5 12.5H11.5C11.9142 12.5 12.25 12.8358 12.25 13.25V15C12.25 15.4142 11.9142 15.75 11.5 15.75H3.5ZM14.125 15.75C13.7108 15.75 13.375 15.4142 13.375 15V13.25C13.375 12.8358 13.7108 12.5 14.125 12.5H16.5C16.9142 12.5 17.25 12.8358 17.25 13.25V15C17.25 15.4142 16.9142 15.75 16.5 15.75H14.125ZM8.5 11.375C8.08579 11.375 7.75 11.0392 7.75 10.625V8.875C7.75 8.46079 8.08579 8.125 8.5 8.125H16.5C16.9142 8.125 17.25 8.46079 17.25 8.875V10.625C17.25 11.0392 16.9142 11.375 16.5 11.375H8.5ZM5.875 8.125C6.28921 8.125 6.625 8.46079 6.625 8.875V10.625C6.625 11.0392 6.28921 11.375 5.875 11.375H3.5C3.08579 11.375 2.75 11.0392 2.75 10.625V8.875C2.75 8.46079 3.08579 8.125 3.5 8.125H5.875Z"
|
||||
stroke={isActive ? "none" : "var(--icon-default-color-active)"}
|
||||
stroke={isActive ? "none" : "var(--text-color)"}
|
||||
fill={isActive ? "var(--icon-default-color-active)" : "none"}
|
||||
strokeWidth="1"
|
||||
/>
|
||||
|
|
@ -29,41 +29,41 @@ export function SimulationIcon({ isActive }: { isActive: boolean }) {
|
|||
>
|
||||
<path
|
||||
d="M12.3077 11.3433C12.3077 11.874 12.1503 12.3927 11.8555 12.834C11.5607 13.2752 11.1416 13.6191 10.6513 13.8222C10.1611 14.0253 9.62157 14.0784 9.10109 13.9749C8.58061 13.8713 8.10252 13.6158 7.72728 13.2406C7.35204 12.8653 7.09649 12.3872 6.99296 11.8667C6.88943 11.3463 6.94257 10.8068 7.14565 10.3165C7.34873 9.82622 7.69263 9.40717 8.13387 9.11235C8.57511 8.81752 9.09387 8.66016 9.62454 8.66016C10.3362 8.66016 11.0186 8.94284 11.5218 9.44603C12.025 9.94921 12.3077 10.6317 12.3077 11.3433Z"
|
||||
stroke="var(--icon-default-color-active)"
|
||||
fill={isActive ? "var(--icon-default-color-active)" : "none"}
|
||||
stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
|
||||
fill={isActive ? "var(--text-color)" : "none"}
|
||||
strokeWidth="1"
|
||||
/>
|
||||
<path
|
||||
d="M9.62477 5.30814C10.3657 5.30814 10.9663 4.70749 10.9663 3.96657C10.9663 3.22564 10.3657 2.625 9.62477 2.625C8.88384 2.625 8.2832 3.22564 8.2832 3.96657C8.2832 4.70749 8.88384 5.30814 9.62477 5.30814Z"
|
||||
stroke="var(--icon-default-color-active)"
|
||||
fill={isActive ? "var(--icon-default-color-active)" : "none"}
|
||||
stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
|
||||
fill={isActive ? "var(--text-color)" : "none"}
|
||||
strokeWidth="1"
|
||||
/>
|
||||
<path
|
||||
d="M3.59157 17.3745C4.33249 17.3745 4.93314 16.7739 4.93314 16.033C4.93314 15.292 4.33249 14.6914 3.59157 14.6914C2.85064 14.6914 2.25 15.292 2.25 16.033C2.25 16.7739 2.85064 17.3745 3.59157 17.3745Z"
|
||||
stroke="var(--icon-default-color-active)"
|
||||
fill={isActive ? "var(--icon-default-color-active)" : "none"}
|
||||
stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
|
||||
fill={isActive ? "var(--text-color)" : "none"}
|
||||
strokeWidth="1"
|
||||
/>
|
||||
<path
|
||||
d="M15.658 17.3745C16.3989 17.3745 16.9995 16.7739 16.9995 16.033C16.9995 15.292 16.3989 14.6914 15.658 14.6914C14.917 14.6914 14.3164 15.292 14.3164 16.033C14.3164 16.7739 14.917 17.3745 15.658 17.3745Z"
|
||||
stroke="var(--icon-default-color-active)"
|
||||
fill={isActive ? "var(--icon-default-color-active)" : "none"}
|
||||
stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
|
||||
fill={isActive ? "var(--text-color)" : "none"}
|
||||
strokeWidth="1"
|
||||
/>
|
||||
<path
|
||||
d="M7.50308 12.9844L4.65137 15.211"
|
||||
stroke="var(--icon-default-color-active)"
|
||||
stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
|
||||
strokeWidth="1"
|
||||
/>
|
||||
<path
|
||||
d="M14.5978 15.211L11.7461 12.9844"
|
||||
stroke="var(--icon-default-color-active)"
|
||||
stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
|
||||
strokeWidth="1"
|
||||
/>
|
||||
<path
|
||||
d="M9.625 8.659V5.30859"
|
||||
stroke="var(--icon-default-color-active)"
|
||||
stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
|
||||
strokeWidth="1"
|
||||
/>
|
||||
</svg>
|
||||
|
|
@ -81,19 +81,19 @@ export function VisualizationIcon({ isActive }: { isActive: boolean }) {
|
|||
>
|
||||
<path
|
||||
d="M10 3.33203V16.6654"
|
||||
stroke="var(--icon-default-color-active)"
|
||||
stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M14.1665 7.5V16.6667"
|
||||
stroke="var(--icon-default-color-active)"
|
||||
stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M5.8335 7.5V16.6667"
|
||||
stroke="var(--icon-default-color-active)"
|
||||
stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
|
|
@ -112,20 +112,20 @@ export function CartIcon({ isActive }: { isActive: boolean }) {
|
|||
>
|
||||
<path
|
||||
d="M1.33337 2L1.50998 2.05887C2.39001 2.35221 2.83002 2.49888 3.08169 2.84807C3.33337 3.19725 3.33337 3.66106 3.33337 4.58869V6.33333C3.33337 8.21893 3.33337 9.16173 3.91916 9.74753C4.50495 10.3333 5.44775 10.3333 7.33337 10.3333H8.66671M12.6667 10.3333H11.3334"
|
||||
stroke="var(--icon-default-color-active)"
|
||||
stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M5.00005 12C5.55233 12 6.00005 12.4477 6.00005 13C6.00005 13.5523 5.55233 14 5.00005 14C4.44776 14 4.00005 13.5523 4.00005 13C4.00005 12.4477 4.44776 12 5.00005 12Z"
|
||||
stroke="var(--icon-default-color-active)"
|
||||
stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
|
||||
/>
|
||||
<path
|
||||
d="M11 12C11.5523 12 12 12.4477 12 13C12 13.5523 11.5523 14 11 14C10.4478 14 10 13.5523 10 13C10 12.4477 10.4478 12 11 12Z"
|
||||
stroke="var(--icon-default-color-active)"
|
||||
stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
|
||||
/>
|
||||
<path
|
||||
d="M3.33337 4H5.33337M3.66671 8.66667H10.6812C11.3208 8.66667 11.6406 8.66667 11.8911 8.50153C12.1416 8.33633 12.2676 8.0424 12.5195 7.45453L12.8052 6.78787C13.3449 5.52863 13.6148 4.89902 13.3184 4.44951C13.0219 4 12.337 4 10.967 4H8.00004"
|
||||
stroke="var(--icon-default-color-active)"
|
||||
stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ export function ProjectIcon() {
|
|||
>
|
||||
<path
|
||||
d="M11 5.29844V4.51127C11 3.70744 10.2251 3.1309 9.45518 3.36188L5.85518 4.44188C5.3476 4.59416 5 5.06134 5 5.59127V13.4056C5 13.9355 5.3476 14.4027 5.85518 14.555L9.45518 15.635C10.2251 15.866 11 15.2894 11 14.4856V13.6984M11 5.29844H13.4C13.7314 5.29844 14 5.56707 14 5.89844V13.0984C14 13.4298 13.7314 13.6984 13.4 13.6984H11M11 5.29844V13.6984"
|
||||
stroke="var(--accent-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeWidth="1.2"
|
||||
/>
|
||||
</svg>
|
||||
|
|
@ -31,26 +31,26 @@ export function ToggleSidebarIcon() {
|
|||
width="17"
|
||||
height="13.7273"
|
||||
rx="3.59091"
|
||||
stroke="var(--accent-color)"
|
||||
stroke="var(--text-color)"
|
||||
/>
|
||||
<rect
|
||||
x="8.72729"
|
||||
y="5.45312"
|
||||
width="0.818182"
|
||||
height="13.0909"
|
||||
fill="var(--accent-color)"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
<circle
|
||||
cx="6.27271"
|
||||
cy="8.72834"
|
||||
r="0.818182"
|
||||
fill="var(--accent-color)"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
<circle
|
||||
cx="6.27271"
|
||||
cy="11.1815"
|
||||
r="0.818182"
|
||||
fill="var(--accent-color)"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -10,43 +10,43 @@ export function CleanPannel() {
|
|||
<g clipPath="url(#clip0_1782_1158)">
|
||||
<path
|
||||
d="M12 0H0V12H12V0Z"
|
||||
fill="var(--icon-default-color)"
|
||||
fill="var(--text-color)"
|
||||
fillOpacity="0.01"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M5 1.47852H7V3.47853H10.75V5.47853H1.25V3.47853H5V1.47852Z"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M2 10H10V5.5H2V10Z"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M4 9.97439V8.47852"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M6 9.97461V8.47461"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M8 9.97439V8.47852"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M3 10H9"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -9,13 +9,17 @@ export function AnalysisIcon({ isActive }: { isActive: boolean }) {
|
|||
>
|
||||
<path
|
||||
d="M17.5002 12.4987L15.1418 10.1404M10.8335 14.1654H5.8335M7.50016 10.832H5.8335M10.8335 8.33203C10.8335 8.82648 10.9801 9.30983 11.2548 9.72096C11.5295 10.1321 11.92 10.4525 12.3768 10.6417C12.8336 10.8309 13.3363 10.8805 13.8212 10.784C14.3062 10.6875 14.7516 10.4494 15.1013 10.0998C15.4509 9.75017 15.689 9.30471 15.7855 8.81976C15.8819 8.3348 15.8324 7.83214 15.6432 7.37532C15.454 6.91851 15.1335 6.52806 14.7224 6.25336C14.3113 5.97865 13.8279 5.83203 13.3335 5.83203C12.6705 5.83203 12.0346 6.09542 11.5657 6.56426C11.0969 7.03311 10.8335 7.66899 10.8335 8.33203Z"
|
||||
stroke={"var(--icon-default-color-active)"}
|
||||
stroke={
|
||||
isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
|
||||
}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M14.1667 14.1667V16.6667C14.1667 16.8877 14.0789 17.0996 13.9226 17.2559C13.7663 17.4122 13.5543 17.5 13.3333 17.5H3.33333C3.11232 17.5 2.90036 17.4122 2.74408 17.2559C2.5878 17.0996 2.5 16.8877 2.5 16.6667V3.33333C2.5 3.11232 2.5878 2.90036 2.74408 2.74408C2.90036 2.5878 3.11232 2.5 3.33333 2.5H13.3333"
|
||||
stroke={"var(--icon-default-color-active)"}
|
||||
stroke={
|
||||
isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
|
||||
}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
|
|
@ -34,11 +38,15 @@ export function MechanicsIcon({ isActive }: { isActive: boolean }) {
|
|||
>
|
||||
<path
|
||||
d="M17.69 11.7629L16.4912 11.5885C16.4161 11.5828 16.3514 11.5356 16.3226 11.466L15.9339 10.5281C15.9049 10.4588 15.917 10.3794 15.9662 10.3224L16.6834 9.35896C16.7973 9.22544 16.7898 9.02639 16.6655 8.90212L16.098 8.3348C15.974 8.21053 15.7746 8.20247 15.6414 8.31697L14.6776 9.03387C14.621 9.08282 14.541 9.09546 14.4719 9.0667L13.5338 8.67776C13.4644 8.64929 13.417 8.58341 13.4109 8.50918L13.2372 7.31068C13.2234 7.1352 13.0772 7 12.9018 7H12.0991C11.9234 7 11.7772 7.1352 11.7637 7.31068L11.5893 8.50918C11.5839 8.58399 11.5364 8.64929 11.4671 8.67776L10.5286 9.0667C10.4593 9.09546 10.3799 9.08282 10.3227 9.03387L9.35945 8.31697C9.22628 8.20276 9.0272 8.2105 8.90264 8.3348L8.33532 8.90212C8.21105 9.02639 8.20357 9.22547 8.31746 9.35896L9.03439 10.3227C9.08302 10.3794 9.09598 10.4591 9.06693 10.5281L8.67825 11.466C8.65007 11.5356 8.58448 11.5828 8.50996 11.5889L7.31062 11.7629C7.13569 11.7767 7.00049 11.9229 7.00049 12.0986V12.901C7.00049 13.0765 7.13572 13.2232 7.31062 13.2364L8.50996 13.4105C8.58448 13.4165 8.65007 13.464 8.67825 13.5333L9.06693 14.4712C9.09598 14.5408 9.08305 14.6205 9.03439 14.6772L8.31746 15.641C8.20354 15.7744 8.21102 15.9729 8.33532 16.0978L8.90264 16.6651C9.0272 16.7894 9.22628 16.7969 9.35945 16.6827L10.3227 15.9654C10.3799 15.9171 10.4593 15.9042 10.5286 15.9333L11.4671 16.3216C11.5364 16.3507 11.5839 16.4157 11.5897 16.4908L11.7637 17.6893C11.7775 17.8645 11.9234 18 12.0991 18H12.9018C13.0776 18 13.2234 17.8645 13.2372 17.6893L13.411 16.4908C13.417 16.4157 13.4645 16.3507 13.5338 16.3216L14.4722 15.9333C14.5413 15.9042 14.6213 15.9171 14.6779 15.9654L15.6414 16.6827C15.7746 16.7969 15.974 16.7894 16.098 16.6651L16.6656 16.0978C16.7902 15.9729 16.7974 15.7744 16.6834 15.641L15.9662 14.6772C15.9179 14.6205 15.9049 14.5408 15.934 14.4712L16.3226 13.5333C16.3514 13.464 16.4161 13.4165 16.4912 13.4105L17.69 13.2364C17.8652 13.2232 18.0004 13.0765 18.0004 12.901V12.0986C18.0004 11.9228 17.8652 11.7767 17.69 11.7629ZM13.8191 13.8187C13.4667 14.1706 12.9987 14.3645 12.5004 14.3645C12.0024 14.3645 11.5337 14.1706 11.1816 13.8187C10.8295 13.466 10.6353 12.9979 10.6353 12.4997C10.6353 12.0017 10.8295 11.5333 11.1816 11.1812C11.5337 10.8285 12.0024 10.6351 12.5004 10.6351C12.9987 10.6351 13.4667 10.8285 13.8191 11.1812C14.1712 11.5333 14.3652 12.0017 14.3652 12.4997C14.3652 12.9979 14.1713 13.466 13.8191 13.8187Z"
|
||||
stroke={"var(--icon-default-color-active)"}
|
||||
stroke={
|
||||
isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
|
||||
}
|
||||
/>
|
||||
<path
|
||||
d="M6.7961 8.78085C6.92052 8.73626 6.98909 8.60354 6.95416 8.47635L6.77216 7.58599C6.75759 7.53147 6.77438 7.47339 6.81595 7.43541L7.37949 6.92253C7.42078 6.88482 7.48083 6.87353 7.53285 6.89334L8.39565 7.15458C8.51874 7.20111 8.65747 7.1455 8.71367 7.02603L8.96969 6.48121C9.02637 6.36145 8.98098 6.21939 8.86644 6.1544L8.11541 5.65637C8.06665 5.62829 8.03718 5.57515 8.04024 5.51899L8.07603 4.75805C8.07906 4.70161 8.11263 4.65178 8.1636 4.62864L8.96614 4.20052C9.08642 4.14683 9.14452 4.00865 9.09994 3.88532L8.89619 3.31844C8.85132 3.19427 8.7186 3.12546 8.59144 3.16042L7.70081 3.34183C7.64628 3.35726 7.58873 3.34019 7.5505 3.29832L7.03784 2.73511C6.99958 2.69324 6.98804 2.63436 7.00837 2.58151L7.26967 1.71923C7.31617 1.59562 7.2606 1.45713 7.14084 1.40122L6.59627 1.14492C6.47679 1.08873 6.33417 1.13362 6.26894 1.24841L5.77118 1.99948C5.74335 2.04823 5.69024 2.07764 5.63405 2.07492L4.87311 2.03885C4.81695 2.03638 4.76629 2.00167 4.74345 1.951L4.31589 1.14877C4.26165 1.02849 4.12399 0.970357 4.0001 1.01498L3.43353 1.21897C3.30936 1.26359 3.24055 1.39603 3.27579 1.52319L3.45748 2.4141C3.47235 2.46804 3.45556 2.52642 3.41372 2.56413L2.85014 3.07729C2.8083 3.115 2.74912 3.12657 2.69626 3.10676L1.83398 2.84521C1.71093 2.79843 1.57244 2.85459 1.516 2.97404L1.25995 3.51864C1.20379 3.63812 1.24865 3.78074 1.3632 3.84569L2.11423 4.34373C2.16323 4.37156 2.19242 4.42442 2.1894 4.48058L2.1536 5.24152C2.15141 5.29824 2.11698 5.34779 2.06606 5.37091L1.26353 5.79899C1.14318 5.85296 1.08511 5.99089 1.12973 6.11423L1.33373 6.68107C1.37832 6.80524 1.51103 6.87405 1.63795 6.8394L2.52914 6.65716C2.58311 6.64228 2.64146 6.65935 2.67916 6.70119L3.19176 7.26449C3.23003 7.30633 3.24107 7.36579 3.2212 7.41838L2.95996 8.28065C2.91371 8.40399 2.96935 8.54247 3.08879 8.59863L3.63336 8.85466C3.75312 8.91109 3.89543 8.86567 3.9607 8.75141L4.45818 8.0001C4.48626 7.95165 4.53911 7.9219 4.59555 7.92517L5.35652 7.96097C5.41296 7.96375 5.46307 7.99732 5.48646 8.04879L5.91374 8.85074C5.96827 8.97108 6.10564 9.02971 6.2295 8.98509L6.7961 8.78085ZM5.58891 6.31659C5.23732 6.44295 4.85716 6.42533 4.51878 6.2662C4.18043 6.10707 3.92493 5.82571 3.79802 5.47385C3.67166 5.12201 3.68928 4.7421 3.84844 4.40403C4.00754 4.0654 4.28917 3.8099 4.64076 3.68329C4.99259 3.55662 5.37251 3.57424 5.71058 3.73393C6.04865 3.89251 6.3047 4.17389 6.43159 4.52573C6.55798 4.87759 6.54008 5.25723 6.38123 5.59561C6.22154 5.93365 5.94043 6.18967 5.58891 6.31659Z"
|
||||
stroke={"var(--icon-default-color-active)"}
|
||||
stroke={
|
||||
isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
|
||||
}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -55,15 +63,21 @@ export function PropertiesIcon({ isActive }: { isActive: boolean }) {
|
|||
>
|
||||
<path
|
||||
d="M17.4254 15.3839L8.67142 6.79353C8.79789 6.57037 8.90139 6.337 8.97464 6.09625C8.98245 6.01909 8.99808 5.93903 9.02639 5.85746C9.04151 5.81156 9.05423 5.76468 9.06692 5.71831C9.26711 4.6353 8.94923 3.4756 8.11182 2.63819C7.84716 2.37353 7.54982 2.16113 7.23341 2C7.21778 2 7.20216 2.00197 7.18703 2.00538L6.90578 2.07422C6.85303 2.08791 6.80762 2.12109 6.78028 2.16797C6.75294 2.21435 6.74562 2.2705 6.76025 2.32275L7.36475 4.49367C7.38722 4.57474 7.35694 4.66067 7.28906 4.70999L5.91552 5.70756C5.87352 5.73734 5.82177 5.75052 5.77049 5.74368L4.31101 5.54249C4.23142 5.53174 4.16648 5.47512 4.14498 5.39796L3.50685 3.10504C3.47754 3.00104 3.3711 2.93804 3.26613 2.96391L2.89697 3.05426C2.87794 3.05913 2.86085 3.06891 2.84375 3.07916C2.41994 3.67339 2.20606 4.37117 2.20312 5.0699C2.20947 5.94687 2.54541 6.82188 3.21435 7.49082C4.02148 8.29748 5.12649 8.61389 6.17581 8.46592C6.32718 8.44395 6.46537 8.42879 6.59231 8.42001C6.7134 8.38679 6.83256 8.34335 6.95072 8.29598C8.41851 9.78233 15.631 17.1784 15.631 17.1784C16.1266 17.674 16.9298 17.674 17.4254 17.1784C17.921 16.6828 17.921 15.8796 17.4254 15.3839ZM16.9767 16.7297C16.7291 16.9777 16.3277 16.9777 16.0797 16.7297C15.8316 16.4821 15.8316 16.0802 16.0797 15.8322C16.3277 15.5846 16.7291 15.5846 16.9767 15.8322C17.2247 16.0802 17.2247 16.4821 16.9767 16.7297Z"
|
||||
fill={"var(--icon-default-color-active)"}
|
||||
fill={
|
||||
isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
|
||||
}
|
||||
/>
|
||||
<path
|
||||
d="M14.6953 6.25784L16.1182 5.89699L17.4878 3.50488L16.8243 2.8755L16.1612 2.24609L13.8442 3.73926L13.5586 5.17824L11.0991 7.77054L12.2183 8.8682L14.6953 6.25784Z"
|
||||
fill={"var(--icon-default-color-active)"}
|
||||
fill={
|
||||
isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
|
||||
}
|
||||
/>
|
||||
<path
|
||||
d="M7.56537 10.7632C7.28215 11.0083 6.8808 10.7046 6.35539 11.2588L2.88271 14.918C2.18837 15.6494 2.21865 16.8057 2.95009 17.5C3.68153 18.1944 4.83732 18.1641 5.53164 17.4327L9.00482 13.7725C9.53023 13.2188 9.20647 12.8345 9.43598 12.5386C9.48285 12.4776 9.52582 12.4356 9.56879 12.4038C8.91157 11.731 8.28266 11.0874 7.73821 10.5312C7.71528 10.6084 7.66303 10.6792 7.56537 10.7632Z"
|
||||
fill={"var(--icon-default-color-active)"}
|
||||
fill={
|
||||
isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
|
||||
}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -82,13 +96,17 @@ export function SimulationIcon({ isActive }: { isActive: boolean }) {
|
|||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M6.44104 7.04762C6.57815 6.98413 6.73614 6.98413 6.87325 7.04762L12.0161 9.42958C12.198 9.51377 12.3143 9.69589 12.3143 9.89624V15.8512C12.3143 16.0347 12.2165 16.2043 12.0577 16.2962L6.9148 19.2736C6.75547 19.3659 6.55881 19.3659 6.39949 19.2736L1.25661 16.2962C1.09779 16.2043 1 16.0347 1 15.8512V9.89624C1 9.69589 1.11635 9.51377 1.29815 9.42958L6.44104 7.04762ZM2.02857 10.7297L6.14286 12.794V17.9366L2.02857 15.5546V10.7297ZM7.17143 17.9366L11.2857 15.5546V10.7297L7.17143 12.794V17.9366ZM6.65714 11.9013L10.6163 9.91477L6.65714 8.08106L2.69798 9.91477L6.65714 11.9013Z"
|
||||
fill={"var(--icon-default-color-active)"}
|
||||
fill={
|
||||
isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
|
||||
}
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M12.441 1.04762C12.5781 0.984127 12.7361 0.984127 12.8732 1.04762L18.0161 3.42958C18.198 3.51377 18.3143 3.69589 18.3143 3.89624V9.85116C18.3143 10.0347 18.2165 10.2043 18.0577 10.2962L12.9148 13.2736C12.7555 13.3659 12.5588 13.3659 12.3995 13.2736L7.25661 10.2962C7.09779 10.2043 7 10.0347 7 9.85116V3.89624C7 3.69589 7.11635 3.51377 7.29815 3.42958L12.441 1.04762ZM8.02857 4.72968L12.1429 6.79403V11.9366L8.02857 9.55463V4.72968ZM13.1714 11.9366L17.2857 9.55463V4.72968L13.1714 6.79403V11.9366ZM12.6571 5.90129L16.6163 3.91477L12.6571 2.08106L8.69798 3.91477L12.6571 5.90129Z"
|
||||
fill={"var(--icon-default-color-active)"}
|
||||
fill={
|
||||
isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
|
||||
}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ export function ProductionCapacityIcon() {
|
|||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M13.9063 12.9046L14.2265 13.86L14.4378 14.5073C14.9906 16.2239 15.2594 17.2662 15.2594 17.7299C15.2594 18.8219 14.3742 19.7072 13.2822 19.7072C12.1902 19.7072 11.305 18.8219 11.305 17.7299C11.305 17.2106 11.6422 15.9654 12.3379 13.86L12.658 12.9046C12.8604 12.3082 13.704 12.3082 13.9063 12.9046ZM13.2822 7.84375C16.9222 7.84375 19.873 10.7945 19.873 14.4345C19.873 15.7565 19.4823 17.0219 18.7621 18.0974C18.5596 18.3999 18.1502 18.4809 17.8478 18.2784C17.5453 18.0758 17.4643 17.6665 17.6668 17.364C18.2428 16.5038 18.5548 15.4933 18.5548 14.4345C18.5548 11.5225 16.1942 9.16191 13.2822 9.16191C10.3702 9.16191 8.00956 11.5225 8.00956 14.4345C8.00956 15.4933 8.32153 16.5038 8.89752 17.364C9.10005 17.6665 9.01904 18.0758 8.71659 18.2784C8.41414 18.4809 8.00477 18.3999 7.80224 18.0974C7.08206 17.0219 6.69141 15.7565 6.69141 14.4345C6.69141 10.7945 9.6422 7.84375 13.2822 7.84375ZM13.2822 15.2247L13.0657 15.9238L12.9161 16.4319C12.7219 17.111 12.6231 17.5509 12.6231 17.7299C12.6231 18.0939 12.9182 18.389 13.2822 18.389C13.6462 18.389 13.9413 18.0939 13.9413 17.7299C13.9413 17.511 13.7936 16.9022 13.5044 15.9428L13.2822 15.2247Z"
|
||||
fill="white"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -52,13 +52,13 @@ export function EyeIconBig() {
|
|||
>
|
||||
<path
|
||||
d="M2.75 11.918C6.05 4.58464 15.95 4.58464 19.25 11.918"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M11 15.5859C10.6389 15.5859 10.2813 15.5148 9.94762 15.3766C9.61398 15.2384 9.31082 15.0358 9.05546 14.7805C8.80009 14.5251 8.59753 14.222 8.45933 13.8883C8.32113 13.5547 8.25 13.1971 8.25 12.8359C8.25 12.4748 8.32113 12.1172 8.45933 11.7836C8.59753 11.4499 8.80009 11.1468 9.05546 10.8914C9.31082 10.636 9.61398 10.4335 9.94762 10.2953C10.2813 10.1571 10.6389 10.0859 11 10.0859C11.7293 10.0859 12.4288 10.3757 12.9445 10.8914C13.4603 11.4071 13.75 12.1066 13.75 12.8359C13.75 13.5653 13.4603 14.2648 12.9445 14.7805C12.4288 15.2962 11.7293 15.5859 11 15.5859Z"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
|
|
@ -80,7 +80,7 @@ export function CommentsIcon() {
|
|||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M8 13C7.416 13 6.852 12.932 6.31 12.8165L3.956 14.2315L3.9875 11.912C2.183 10.827 1 9.033 1 7C1 3.6865 4.134 1 8 1C11.866 1 15 3.6865 15 7C15 10.314 11.866 13 8 13ZM8 0C3.582 0 0 3.1345 0 7C0 9.2095 1.1725 11.177 3 12.4595V16L6.5045 13.8735C6.9895 13.9535 7.4885 14 8 14C12.418 14 16 10.866 16 7C16 3.1345 12.418 0 8 0ZM11.5 5.5H4.5C4.224 5.5 4 5.724 4 6C4 6.2765 4.224 6.5 4.5 6.5H11.5C11.776 6.5 12 6.2765 12 6C12 5.724 11.776 5.5 11.5 5.5ZM10.5 8.5H5.5C5.224 8.5 5 8.7235 5 9C5 9.2765 5.224 9.5 5.5 9.5H10.5C10.776 9.5 11 9.2765 11 9C11 8.7235 10.776 8.5 10.5 8.5Z"
|
||||
fill="var(--icon-default-color)"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
|
|
@ -131,7 +131,7 @@ export function StarsIconSmall() {
|
|||
);
|
||||
}
|
||||
|
||||
export function FiileedStarsIconSmall() {
|
||||
export function FilledStarsIconSmall() {
|
||||
return (
|
||||
<svg
|
||||
width="11"
|
||||
|
|
|
|||
|
|
@ -139,15 +139,16 @@ const Assets: React.FC = () => {
|
|||
}
|
||||
};
|
||||
return (
|
||||
<div className="assets-container">
|
||||
<div className="assets-container-main">
|
||||
<Search onChange={handleSearchChange} />
|
||||
<div className="assets-list-section">
|
||||
<section>
|
||||
{searchValue ? (
|
||||
<div className="assets-result">
|
||||
<div className="assets-wrapper">
|
||||
<div className="searched-content">
|
||||
<p>Results for {searchValue}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="assets-container">
|
||||
{categoryAssets &&
|
||||
categoryAssets?.map((asset: any, index: number) => (
|
||||
|
|
@ -176,8 +177,11 @@ const Assets: React.FC = () => {
|
|||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : selectedCategory ? (
|
||||
<div className="assets-wrapper">
|
||||
<h2>
|
||||
{selectedCategory}{" "}
|
||||
<div
|
||||
className="back-button"
|
||||
id="asset-backButtom"
|
||||
|
|
@ -188,7 +192,7 @@ const Assets: React.FC = () => {
|
|||
>
|
||||
← Back
|
||||
</div>
|
||||
<h2>{selectedCategory}</h2>
|
||||
</h2>
|
||||
<div className="assets-container">
|
||||
{categoryAssets &&
|
||||
categoryAssets?.map((asset: any, index: number) => (
|
||||
|
|
@ -207,7 +211,9 @@ const Assets: React.FC = () => {
|
|||
name: asset.filename,
|
||||
id: asset.AssetID,
|
||||
type:
|
||||
asset.type === "undefined" ? undefined : asset.type,
|
||||
asset.type === "undefined"
|
||||
? undefined
|
||||
: asset.type,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
|
@ -255,6 +261,8 @@ const Assets: React.FC = () => {
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ const Outline: React.FC = () => {
|
|||
};
|
||||
|
||||
const dropdownItems = [
|
||||
{ id: "1", name: "Ground Floor" },
|
||||
{ id: "1", name: "Ground Floor", active: true },
|
||||
// { id: "2", name: "Floor 1" },
|
||||
]; // Example dropdown items
|
||||
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ const ActionsList: React.FC<ActionsListProps> = ({
|
|||
|
||||
const handleRenameAction = (newName: string) => {
|
||||
if (!selectedAction.actionId) return;
|
||||
const event = renameAction(selectedAction.actionId, newName);
|
||||
const event = renameAction(selectedProduct.productId, selectedAction.actionId, newName);
|
||||
|
||||
if (event) {
|
||||
upsertProductOrEventApi({
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ function ConveyorMechanics() {
|
|||
const validOption = option as | "default" | "spawn" | "swap" | "delay" | "despawn";
|
||||
setActiveOption(validOption);
|
||||
|
||||
const event = updateAction(selectedPointData.action.actionUuid, {
|
||||
const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, {
|
||||
actionType: validOption,
|
||||
});
|
||||
|
||||
|
|
@ -88,7 +88,7 @@ function ConveyorMechanics() {
|
|||
|
||||
const handleRenameAction = (newName: string) => {
|
||||
if (!selectedEventData || !selectedPointData) return;
|
||||
const event = updateAction(selectedPointData.action.actionUuid, { actionName: newName });
|
||||
const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, { actionName: newName });
|
||||
|
||||
if (event) {
|
||||
updateBackend(
|
||||
|
|
@ -102,7 +102,7 @@ function ConveyorMechanics() {
|
|||
|
||||
const handleSpawnCountChange = (value: string) => {
|
||||
if (!selectedEventData || !selectedPointData) return;
|
||||
const event = updateAction(selectedPointData.action.actionUuid, {
|
||||
const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, {
|
||||
spawnCount: value === "inherit" ? "inherit" : parseFloat(value),
|
||||
});
|
||||
|
||||
|
|
@ -118,7 +118,7 @@ function ConveyorMechanics() {
|
|||
|
||||
const handleSpawnIntervalChange = (value: string) => {
|
||||
if (!selectedEventData || !selectedPointData) return;
|
||||
const event = updateAction(selectedPointData.action.actionUuid, {
|
||||
const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, {
|
||||
spawnInterval: value === "inherit" ? "inherit" : parseFloat(value),
|
||||
});
|
||||
|
||||
|
|
@ -134,7 +134,7 @@ function ConveyorMechanics() {
|
|||
|
||||
const handleMaterialSelect = (material: string) => {
|
||||
if (!selectedEventData || !selectedPointData) return;
|
||||
const event = updateAction(selectedPointData.action.actionUuid, { material });
|
||||
const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, { material });
|
||||
|
||||
if (event) {
|
||||
updateBackend(
|
||||
|
|
@ -148,7 +148,7 @@ function ConveyorMechanics() {
|
|||
|
||||
const handleDelayChange = (value: string) => {
|
||||
if (!selectedEventData || !selectedPointData) return;
|
||||
const event = updateAction(selectedPointData.action.actionUuid, {
|
||||
const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, {
|
||||
delay: value === "inherit" ? "inherit" : parseFloat(value),
|
||||
});
|
||||
|
||||
|
|
@ -271,7 +271,7 @@ function ConveyorMechanics() {
|
|||
</div>
|
||||
</div>
|
||||
<div className="tirgger">
|
||||
<Trigger />
|
||||
<Trigger selectedPointData={selectedPointData as any} type= {'Conveyor'}/>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { useSelectedEventData, useSelectedProduct } from "../../../../../../stor
|
|||
import { useProductStore } from "../../../../../../store/simulation/useProductStore";
|
||||
import ProcessAction from "../actions/ProcessAction";
|
||||
import ActionsList from "../components/ActionsList";
|
||||
import { upsertProductOrEventApi } from "../../../../../../services/simulation/UpsertProductOrEventApi";
|
||||
|
||||
function MachineMechanics() {
|
||||
const [activeOption, setActiveOption] = useState<"default" | "process">("default");
|
||||
|
|
@ -14,6 +15,9 @@ function MachineMechanics() {
|
|||
const { getPointByUuid, updateAction } = useProductStore();
|
||||
const { selectedProduct } = useSelectedProduct();
|
||||
|
||||
const email = localStorage.getItem('email')
|
||||
const organization = (email!.split("@")[1]).split(".")[0];
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedEventData) {
|
||||
const point = getPointByUuid(
|
||||
|
|
@ -28,31 +32,54 @@ function MachineMechanics() {
|
|||
}
|
||||
}, [selectedProduct, selectedEventData, getPointByUuid]);
|
||||
|
||||
const updateBackend = (
|
||||
productName: string,
|
||||
productId: string,
|
||||
organization: string,
|
||||
eventData: EventsSchema
|
||||
) => {
|
||||
upsertProductOrEventApi({
|
||||
productName: productName,
|
||||
productId: productId,
|
||||
organization: organization,
|
||||
eventDatas: eventData
|
||||
})
|
||||
}
|
||||
|
||||
const handleActionTypeChange = (option: string) => {
|
||||
if (!selectedEventData || !selectedPointData) return;
|
||||
const validOption = option as "process";
|
||||
setActiveOption(validOption);
|
||||
|
||||
updateAction(selectedPointData.action.actionUuid, {
|
||||
const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, {
|
||||
actionType: validOption,
|
||||
});
|
||||
|
||||
if (event) {
|
||||
updateBackend(
|
||||
selectedProduct.productName,
|
||||
selectedProduct.productId,
|
||||
organization,
|
||||
event
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRenameAction = (newName: string) => {
|
||||
if (!selectedPointData) return;
|
||||
updateAction(selectedPointData.action.actionUuid, { actionName: newName });
|
||||
const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, { actionName: newName });
|
||||
};
|
||||
|
||||
const handleProcessTimeChange = (value: string) => {
|
||||
if (!selectedPointData) return;
|
||||
updateAction(selectedPointData.action.actionUuid, {
|
||||
const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, {
|
||||
processTime: parseFloat(value),
|
||||
});
|
||||
};
|
||||
|
||||
const handleMaterialSelect = (material: string) => {
|
||||
if (!selectedPointData) return;
|
||||
updateAction(selectedPointData.action.actionUuid, {
|
||||
const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, {
|
||||
swapMaterial: material,
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ function RoboticArmMechanics() {
|
|||
|
||||
const handleRenameAction = (newName: string) => {
|
||||
if (!selectedAction.actionId) return;
|
||||
const event = updateAction(selectedAction.actionId, { actionName: newName });
|
||||
const event = updateAction(selectedProduct.productId, selectedAction.actionId, { actionName: newName });
|
||||
|
||||
if (selectedPointData) {
|
||||
const updatedActions = selectedPointData.actions.map((action) =>
|
||||
|
|
@ -101,7 +101,7 @@ function RoboticArmMechanics() {
|
|||
if (!selectedAction.actionId || !selectedPointData) return;
|
||||
const [x, y, z] = value.split(",").map(Number);
|
||||
|
||||
const event = updateAction(selectedAction.actionId, {
|
||||
const event = updateAction(selectedProduct.productId, selectedAction.actionId, {
|
||||
process: {
|
||||
startPoint: [x, y, z] as [number, number, number],
|
||||
endPoint: selectedPointData.actions.find((a) => a.actionUuid === selectedAction.actionId)?.process.endPoint || null,
|
||||
|
|
@ -122,7 +122,7 @@ function RoboticArmMechanics() {
|
|||
if (!selectedAction.actionId || !selectedPointData) return;
|
||||
const [x, y, z] = value.split(",").map(Number);
|
||||
|
||||
const event = updateAction(selectedAction.actionId, {
|
||||
const event = updateAction(selectedProduct.productId, selectedAction.actionId, {
|
||||
process: {
|
||||
startPoint: selectedPointData.actions.find((a) => a.actionUuid === selectedAction.actionId)?.process.startPoint || null,
|
||||
endPoint: [x, y, z] as [number, number, number],
|
||||
|
|
@ -181,7 +181,7 @@ function RoboticArmMechanics() {
|
|||
const handleDeleteAction = (actionUuid: string) => {
|
||||
if (!selectedPointData) return;
|
||||
|
||||
const event = removeAction(actionUuid);
|
||||
const event = removeAction(selectedProduct.productId, actionUuid);
|
||||
|
||||
if (event) {
|
||||
updateBackend(
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { useSelectedEventData, useSelectedProduct } from "../../../../../../stor
|
|||
import { useProductStore } from "../../../../../../store/simulation/useProductStore";
|
||||
import StorageAction from "../actions/StorageAction";
|
||||
import ActionsList from "../components/ActionsList";
|
||||
import { upsertProductOrEventApi } from "../../../../../../services/simulation/UpsertProductOrEventApi";
|
||||
|
||||
function StorageMechanics() {
|
||||
const [activeOption, setActiveOption] = useState<"default" | "store" | "spawn">("default");
|
||||
|
|
@ -14,6 +15,9 @@ function StorageMechanics() {
|
|||
const { getPointByUuid, updateAction } = useProductStore();
|
||||
const { selectedProduct } = useSelectedProduct();
|
||||
|
||||
const email = localStorage.getItem('email')
|
||||
const organization = (email!.split("@")[1]).split(".")[0];
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedEventData) {
|
||||
const point = getPointByUuid(
|
||||
|
|
@ -28,26 +32,67 @@ function StorageMechanics() {
|
|||
}
|
||||
}, [selectedProduct, selectedEventData, getPointByUuid]);
|
||||
|
||||
const updateBackend = (
|
||||
productName: string,
|
||||
productId: string,
|
||||
organization: string,
|
||||
eventData: EventsSchema
|
||||
) => {
|
||||
upsertProductOrEventApi({
|
||||
productName: productName,
|
||||
productId: productId,
|
||||
organization: organization,
|
||||
eventDatas: eventData
|
||||
})
|
||||
}
|
||||
|
||||
const handleActionTypeChange = (option: string) => {
|
||||
if (!selectedEventData || !selectedPointData) return;
|
||||
const validOption = option as "store" | "spawn";
|
||||
setActiveOption(validOption);
|
||||
|
||||
updateAction(selectedPointData.action.actionUuid, {
|
||||
const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, {
|
||||
actionType: validOption,
|
||||
});
|
||||
|
||||
if (event) {
|
||||
updateBackend(
|
||||
selectedProduct.productName,
|
||||
selectedProduct.productId,
|
||||
organization,
|
||||
event
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRenameAction = (newName: string) => {
|
||||
if (!selectedPointData) return;
|
||||
updateAction(selectedPointData.action.actionUuid, { actionName: newName });
|
||||
const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, { actionName: newName });
|
||||
|
||||
if (event) {
|
||||
updateBackend(
|
||||
selectedProduct.productName,
|
||||
selectedProduct.productId,
|
||||
organization,
|
||||
event
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCapacityChange = (value: string) => {
|
||||
if (!selectedPointData) return;
|
||||
updateAction(selectedPointData.action.actionUuid, {
|
||||
const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, {
|
||||
storageCapacity: parseInt(value),
|
||||
});
|
||||
|
||||
if (event) {
|
||||
updateBackend(
|
||||
selectedProduct.productName,
|
||||
selectedProduct.productId,
|
||||
organization,
|
||||
event
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// Get current values from store
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import {
|
|||
import { useProductStore } from "../../../../../../store/simulation/useProductStore";
|
||||
import TravelAction from "../actions/TravelAction";
|
||||
import ActionsList from "../components/ActionsList";
|
||||
import { upsertProductOrEventApi } from "../../../../../../services/simulation/UpsertProductOrEventApi";
|
||||
|
||||
function VehicleMechanics() {
|
||||
const [activeOption, setActiveOption] = useState<"default" | "travel">("default");
|
||||
|
|
@ -18,8 +19,11 @@ function VehicleMechanics() {
|
|||
const { getPointByUuid, getEventByModelUuid, updateEvent, updateAction } = useProductStore();
|
||||
const { selectedProduct } = useSelectedProduct();
|
||||
|
||||
const email = localStorage.getItem('email')
|
||||
const organization = (email!.split("@")[1]).split(".")[0];
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedEventData) {
|
||||
if (selectedEventData && selectedEventData.data.type === 'vehicle') {
|
||||
const point = getPointByUuid(
|
||||
selectedProduct.productId,
|
||||
selectedEventData.data.modelUuid,
|
||||
|
|
@ -33,11 +37,34 @@ function VehicleMechanics() {
|
|||
}
|
||||
}, [selectedProduct, selectedEventData, getPointByUuid]);
|
||||
|
||||
const updateBackend = (
|
||||
productName: string,
|
||||
productId: string,
|
||||
organization: string,
|
||||
eventData: EventsSchema
|
||||
) => {
|
||||
upsertProductOrEventApi({
|
||||
productName: productName,
|
||||
productId: productId,
|
||||
organization: organization,
|
||||
eventDatas: eventData
|
||||
})
|
||||
}
|
||||
|
||||
const handleSpeedChange = (value: string) => {
|
||||
if (!selectedEventData) return;
|
||||
updateEvent(selectedProduct.productId, selectedEventData.data.modelUuid, {
|
||||
const event = updateEvent(selectedProduct.productId, selectedEventData.data.modelUuid, {
|
||||
speed: parseFloat(value),
|
||||
});
|
||||
|
||||
if (event) {
|
||||
updateBackend(
|
||||
selectedProduct.productName,
|
||||
selectedProduct.productId,
|
||||
organization,
|
||||
event
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const handleActionTypeChange = (option: string) => {
|
||||
|
|
@ -45,28 +72,64 @@ function VehicleMechanics() {
|
|||
const validOption = option as "travel";
|
||||
setActiveOption(validOption);
|
||||
|
||||
updateAction(selectedPointData.action.actionUuid, {
|
||||
const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, {
|
||||
actionType: validOption,
|
||||
});
|
||||
|
||||
if (event) {
|
||||
updateBackend(
|
||||
selectedProduct.productName,
|
||||
selectedProduct.productId,
|
||||
organization,
|
||||
event
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRenameAction = (newName: string) => {
|
||||
if (!selectedPointData) return;
|
||||
updateAction(selectedPointData.action.actionUuid, { actionName: newName });
|
||||
const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, { actionName: newName });
|
||||
|
||||
if (event) {
|
||||
updateBackend(
|
||||
selectedProduct.productName,
|
||||
selectedProduct.productId,
|
||||
organization,
|
||||
event
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const handleLoadCapacityChange = (value: string) => {
|
||||
if (!selectedPointData) return;
|
||||
updateAction(selectedPointData.action.actionUuid, {
|
||||
const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, {
|
||||
loadCapacity: parseFloat(value),
|
||||
});
|
||||
|
||||
if (event) {
|
||||
updateBackend(
|
||||
selectedProduct.productName,
|
||||
selectedProduct.productId,
|
||||
organization,
|
||||
event
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUnloadDurationChange = (value: string) => {
|
||||
if (!selectedPointData) return;
|
||||
updateAction(selectedPointData.action.actionUuid, {
|
||||
const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, {
|
||||
unLoadDuration: parseFloat(value),
|
||||
});
|
||||
|
||||
if (event) {
|
||||
updateBackend(
|
||||
selectedProduct.productName,
|
||||
selectedProduct.productId,
|
||||
organization,
|
||||
event
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePickPointChange = (value: string) => {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useRef, useState } from "react";
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
AddIcon,
|
||||
RemoveIcon,
|
||||
|
|
@ -7,38 +7,47 @@ import {
|
|||
import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
|
||||
import RenameInput from "../../../../../ui/inputs/RenameInput";
|
||||
import { handleResize } from "../../../../../../functions/handleResizePannel";
|
||||
import { useProductStore } from "../../../../../../store/simulation/useProductStore";
|
||||
import { useSelectedProduct } from "../../../../../../store/simulation/useSimulationStore";
|
||||
|
||||
const Trigger: React.FC = () => {
|
||||
// State to hold the list of triggers
|
||||
const [triggers, setTriggers] = useState<string[]>(["Trigger 1"]);
|
||||
const [selectedTrigger, setSelectedTrigger] = useState<string>("Trigger 1");
|
||||
type TriggerProps = {
|
||||
selectedPointData?: PointsScheme | undefined;
|
||||
type?: 'Conveyor' | 'Vehicle' | 'RoboticArm' | 'Machine' | 'StorageUnit';
|
||||
};
|
||||
|
||||
const Trigger = ({ selectedPointData, type }: TriggerProps) => {
|
||||
const [currentAction, setCurrentAction] = useState<string | undefined>();
|
||||
const { selectedProduct } = useSelectedProduct();
|
||||
const { getActionByUuid } = useProductStore();
|
||||
const [triggers, setTriggers] = useState<TriggerSchema[]>([]);
|
||||
const [selectedTrigger, setSelectedTrigger] = useState<TriggerSchema | undefined>();
|
||||
const [activeOption, setActiveOption] = useState("onComplete");
|
||||
const triggersContainerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// States for dropdowns
|
||||
const [triggeredModel, setTriggeredModel] = useState<string[]>([]);
|
||||
const [triggeredPoint, setTriggeredPoint] = useState<string[]>([]);
|
||||
const [triggeredAction, setTriggeredAction] = useState<string[]>([]);
|
||||
useEffect(() => {
|
||||
if (!selectedPointData) return;
|
||||
if (type === 'Conveyor' || type === 'Vehicle' || type === 'Machine' || type === 'StorageUnit') {
|
||||
setCurrentAction((selectedPointData as ConveyorPointSchema).action.actionUuid);
|
||||
}
|
||||
}, [selectedPointData]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!currentAction || !selectedProduct) return;
|
||||
const action = getActionByUuid(selectedProduct.productId, currentAction);
|
||||
setTriggers(action?.triggers || []);
|
||||
setSelectedTrigger(action?.triggers[0] || undefined);
|
||||
}, [currentAction, selectedProduct]);
|
||||
|
||||
// Function to handle adding a new trigger
|
||||
const addTrigger = (): void => {
|
||||
const newTrigger = `Trigger ${triggers.length + 1}`;
|
||||
setTriggers([...triggers, newTrigger]); // Add new trigger to the state
|
||||
|
||||
// Initialize the states for the new trigger
|
||||
setTriggeredModel([...triggeredModel, ""]);
|
||||
setTriggeredPoint([...triggeredPoint, ""]);
|
||||
setTriggeredAction([...triggeredAction, ""]);
|
||||
};
|
||||
|
||||
// Function to handle removing a trigger
|
||||
const removeTrigger = (index: number): void => {
|
||||
setTriggers(triggers.filter((_, i) => i !== index)); // Remove trigger by index
|
||||
setTriggeredModel(triggeredModel.filter((_, i) => i !== index));
|
||||
setTriggeredPoint(triggeredPoint.filter((_, i) => i !== index));
|
||||
setTriggeredAction(triggeredAction.filter((_, i) => i !== index));
|
||||
const removeTrigger = (triggerUuid: string): void => {
|
||||
};
|
||||
|
||||
const triggeredModel = selectedTrigger?.triggeredAsset?.triggeredModel || { modelName: "Select Model", modelUuid: "" };
|
||||
const triggeredPoint = selectedTrigger?.triggeredAsset?.triggeredPoint || { pointName: "Select Point", pointUuid: "" };
|
||||
const triggeredAction = selectedTrigger?.triggeredAsset?.triggeredAction || { actionName: "Select Action", actionUuid: "" };
|
||||
|
||||
return (
|
||||
<div className="trigger-wrapper">
|
||||
<div className="header">
|
||||
|
|
@ -58,21 +67,19 @@ const Trigger: React.FC = () => {
|
|||
style={{ height: "120px" }}
|
||||
>
|
||||
<div className="list-container">
|
||||
{triggers.map((trigger: any, index: number) => (
|
||||
{triggers.map((trigger) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`list-item ${
|
||||
selectedTrigger === trigger ? "active" : ""
|
||||
}`}
|
||||
key={trigger.triggerUuid}
|
||||
className={`list-item ${selectedTrigger?.triggerUuid === trigger.triggerUuid ? "active" : ""}`}
|
||||
onClick={() => setSelectedTrigger(trigger)}
|
||||
>
|
||||
<button className="value" onClick={() => { }}>
|
||||
<RenameInput value={trigger} onRename={() => {}} />
|
||||
<RenameInput value={trigger.triggerName} onRename={() => { }} />
|
||||
</button>
|
||||
{triggers.length > 1 && (
|
||||
<button
|
||||
className="remove-button"
|
||||
onClick={() => removeTrigger(index)}
|
||||
onClick={() => removeTrigger(trigger.triggerUuid)}
|
||||
>
|
||||
<RemoveIcon />
|
||||
</button>
|
||||
|
|
@ -89,50 +96,36 @@ const Trigger: React.FC = () => {
|
|||
</button>
|
||||
</div>
|
||||
<div className="trigger-item">
|
||||
<div className="trigger-name">{selectedTrigger}</div>
|
||||
<div className="trigger-name">{selectedTrigger?.triggerName}</div>
|
||||
<LabledDropdown
|
||||
label="Trigger Type"
|
||||
defaultOption={activeOption}
|
||||
options={["onComplete", "onStart", "onStop", "delay"]}
|
||||
onSelect={(option) => setActiveOption(option)}
|
||||
/>
|
||||
<div className="trigger-options">
|
||||
<div>
|
||||
<LabledDropdown
|
||||
defaultOption={triggeredModel[0] || "Select Model"}
|
||||
options={["Model 1", "Model 2", "Model 3"]}
|
||||
onSelect={(option) => {
|
||||
const newModel = [...triggeredModel];
|
||||
newModel[0] = option;
|
||||
setTriggeredModel(newModel);
|
||||
}}
|
||||
label="Triggered Object"
|
||||
defaultOption={triggeredModel.modelName}
|
||||
options={[]}
|
||||
onSelect={(option) => { }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<LabledDropdown
|
||||
defaultOption={triggeredPoint[0] || "Select Point"}
|
||||
options={["Point 1", "Point 2", "Point 3"]}
|
||||
onSelect={(option) => {
|
||||
const newPoint = [...triggeredPoint];
|
||||
newPoint[0] = option;
|
||||
setTriggeredPoint(newPoint);
|
||||
}}
|
||||
label="Triggered Point"
|
||||
defaultOption={triggeredPoint.pointName}
|
||||
options={[]}
|
||||
onSelect={(option) => { }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<LabledDropdown
|
||||
defaultOption={triggeredAction[0] || "Select Action"}
|
||||
options={["Action 1", "Action 2", "Action 3"]}
|
||||
onSelect={(option) => {
|
||||
const newAction = [...triggeredAction];
|
||||
newAction[0] = option;
|
||||
setTriggeredAction(newAction);
|
||||
}}
|
||||
label="Triggered Action"
|
||||
defaultOption={triggeredAction.actionName}
|
||||
options={[]}
|
||||
onSelect={(option) => { }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React, { useState } from "react";
|
|||
import { ProductionCapacityIcon } from "../../icons/analysis";
|
||||
|
||||
const ProductionCapacity = ({
|
||||
progressPercent = 10,
|
||||
progressPercent = 50,
|
||||
avgProcessTime = "28.4 Secs/unit",
|
||||
machineUtilization = "78%",
|
||||
throughputValue = 128,
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import {
|
|||
PointElement,
|
||||
} from "chart.js";
|
||||
import { PowerIcon, ThroughputSummaryIcon } from "../../icons/analysis";
|
||||
import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
|
||||
|
||||
ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement);
|
||||
|
||||
|
|
@ -142,13 +143,13 @@ const ThroughputSummary = () => {
|
|||
|
||||
<div className="progress-wrapper">
|
||||
{/* Dynamically create progress bars based on shiftUtilization array */}
|
||||
{shiftUtilization.map((shift) => (
|
||||
{shiftUtilization.map((shift, index) => (
|
||||
<div
|
||||
key={shift.shift}
|
||||
className={`progress shift-${shift.shift}`}
|
||||
style={{
|
||||
width: `${shift.percentage}%`,
|
||||
backgroundColor: getRandomColor(),
|
||||
backgroundColor: getAvatarColor(index),
|
||||
}}
|
||||
></div>
|
||||
))}
|
||||
|
|
@ -156,11 +157,11 @@ const ThroughputSummary = () => {
|
|||
|
||||
<div className="progress-indicator">
|
||||
{/* Dynamically create shift indicators with random colors */}
|
||||
{shiftUtilization.map((shift) => (
|
||||
{shiftUtilization.map((shift, index) => (
|
||||
<div className="shift-wrapper" key={shift.shift}>
|
||||
<span
|
||||
className={`indicator shift-${shift.shift}`}
|
||||
style={{ backgroundColor: getRandomColor() }} // Random color for indicator
|
||||
style={{ backgroundColor: getAvatarColor(index) }} // Random color for indicator
|
||||
></span>
|
||||
<label>Shift {shift.shift}</label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import List from "./List";
|
|||
import { AddIcon, ArrowIcon, FocusIcon } from "../../icons/ExportCommonIcons";
|
||||
import KebabMenuListMultiSelect from "./KebebMenuListMultiSelect";
|
||||
import { useFloorItems, useZones } from "../../../store/store";
|
||||
import { useSelectedZoneStore } from "../../../store/visualization/useZoneStore";
|
||||
|
||||
interface DropDownListProps {
|
||||
value?: string; // Value to display in the DropDownList
|
||||
|
|
@ -17,6 +16,17 @@ interface DropDownListProps {
|
|||
remove?: boolean;
|
||||
}
|
||||
|
||||
interface Zone {
|
||||
zoneId: string;
|
||||
zoneName: string;
|
||||
points: [number, number, number][]; // polygon vertices
|
||||
}
|
||||
interface ZoneData {
|
||||
id: string;
|
||||
name: string;
|
||||
assets: { id: string; name: string; position?: []; rotation?: {} }[];
|
||||
}
|
||||
|
||||
const DropDownList: React.FC<DropDownListProps> = ({
|
||||
value = "Dropdown",
|
||||
items = [],
|
||||
|
|
@ -33,38 +43,30 @@ const DropDownList: React.FC<DropDownListProps> = ({
|
|||
remove,
|
||||
}) => {
|
||||
const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);
|
||||
const { zones, setZones } = useZones();
|
||||
const { zones } = useZones();
|
||||
|
||||
const handleToggle = () => {
|
||||
setIsOpen((prev) => !prev); // Toggle the state
|
||||
};
|
||||
interface Asset {
|
||||
id: string;
|
||||
name: string;
|
||||
position: [number, number, number]; // x, y, z
|
||||
}
|
||||
|
||||
interface Zone {
|
||||
zoneId: string;
|
||||
zoneName: string;
|
||||
points: [number, number, number][]; // polygon vertices
|
||||
}
|
||||
interface ZoneData {
|
||||
id: string;
|
||||
name: string;
|
||||
assets: { id: string; name: string; position?: []; rotation?: {} }[];
|
||||
}
|
||||
const [zoneDataList, setZoneDataList] = useState<ZoneData[]>([]);
|
||||
const { floorItems } = useFloorItems();
|
||||
|
||||
const isPointInsidePolygon = (point: [number, number], polygon: [number, number][]) => {
|
||||
const isPointInsidePolygon = (
|
||||
point: [number, number],
|
||||
polygon: [number, number][]
|
||||
) => {
|
||||
let inside = false;
|
||||
for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
|
||||
const xi = polygon[i][0], zi = polygon[i][1];
|
||||
const xj = polygon[j][0], zj = polygon[j][1];
|
||||
const xi = polygon[i][0],
|
||||
zi = polygon[i][1];
|
||||
const xj = polygon[j][0],
|
||||
zj = polygon[j][1];
|
||||
|
||||
const intersect = ((zi > point[1]) !== (zj > point[1])) &&
|
||||
(point[0] < (xj - xi) * (point[1] - zi) / (zj - zi + 0.000001) + xi);
|
||||
const intersect =
|
||||
// eslint-disable-next-line no-mixed-operators
|
||||
zi > point[1] !== zj > point[1] &&
|
||||
point[0] < ((xj - xi) * (point[1] - zi)) / (zj - zi + 0.000001) + xi;
|
||||
|
||||
if (intersect) inside = !inside;
|
||||
}
|
||||
|
|
@ -73,18 +75,21 @@ const DropDownList: React.FC<DropDownListProps> = ({
|
|||
|
||||
useEffect(() => {
|
||||
const updatedZoneList: ZoneData[] = zones?.map((zone: Zone) => {
|
||||
const polygon2D = zone.points.map((p: [number, number, number]) => [p[0], p[2]]) as [number, number][];
|
||||
const polygon2D = zone.points.map((p: [number, number, number]) => [
|
||||
p[0],
|
||||
p[2],
|
||||
]);
|
||||
|
||||
const assetsInZone = floorItems
|
||||
.filter((item: any) => {
|
||||
const [x, , z] = item.position;
|
||||
return isPointInsidePolygon([x, z], polygon2D);
|
||||
return isPointInsidePolygon([x, z], polygon2D as [number, number][]);
|
||||
})
|
||||
.map((item: any) => ({
|
||||
id: item.modelUuid,
|
||||
name: item.modelName,
|
||||
position: item.position,
|
||||
rotation: item.rotation
|
||||
rotation: item.rotation,
|
||||
}));
|
||||
|
||||
return {
|
||||
|
|
@ -99,9 +104,9 @@ const DropDownList: React.FC<DropDownListProps> = ({
|
|||
return (
|
||||
<div className="dropdown-list-container">
|
||||
<div className="head">
|
||||
<div className="value" onClick={handleToggle}>
|
||||
<button className="value" onClick={handleToggle}>
|
||||
{value}
|
||||
</div>
|
||||
</button>
|
||||
<div className="options">
|
||||
{showFocusIcon && (
|
||||
<div className="focus option">
|
||||
|
|
@ -118,13 +123,13 @@ const DropDownList: React.FC<DropDownListProps> = ({
|
|||
<KebabMenuListMultiSelect items={kebabMenuItems} />
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
<button
|
||||
className="collapse-icon option"
|
||||
style={{ transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)" }}
|
||||
onClick={handleToggle}
|
||||
>
|
||||
<ArrowIcon />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{isOpen && (
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@ import {
|
|||
LockIcon,
|
||||
RemoveIcon,
|
||||
} from "../../icons/ExportCommonIcons";
|
||||
import { useThree } from "@react-three/fiber";
|
||||
import { useFloorItems, useZoneAssetId, useZones } from "../../../store/store";
|
||||
import { zoneCameraUpdate } from "../../../services/visulization/zone/zoneCameraUpdation";
|
||||
import { setFloorItemApi } from "../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
|
||||
|
|
@ -32,20 +31,19 @@ interface ZoneItem {
|
|||
|
||||
interface ListProps {
|
||||
items?: ZoneItem[];
|
||||
placeholder?: string;
|
||||
remove?: boolean;
|
||||
}
|
||||
|
||||
const List: React.FC<ListProps> = ({ items = [], remove }) => {
|
||||
const { activeModule, setActiveModule } = useModuleStore();
|
||||
const { activeModule } = useModuleStore();
|
||||
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
|
||||
const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
|
||||
const { zones, setZones } = useZones();
|
||||
const { zones } = useZones();
|
||||
const { setSubModule } = useSubModuleStore();
|
||||
const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>(
|
||||
{}
|
||||
);
|
||||
const { floorItems, setFloorItems } = useFloorItems();
|
||||
const { setFloorItems } = useFloorItems();
|
||||
|
||||
useEffect(() => {
|
||||
useSelectedZoneStore.getState().setSelectedZone({
|
||||
|
|
@ -70,39 +68,36 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
|
|||
async function handleSelectZone(id: string) {
|
||||
try {
|
||||
if (selectedZone?.zoneId === id) {
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
setSubModule("zoneProperties");
|
||||
|
||||
const email = localStorage.getItem("email");
|
||||
const organization = email?.split("@")[1]?.split(".")[0] || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0] ?? "";
|
||||
|
||||
let response = await getZoneData(id, organization);
|
||||
|
||||
setSelectedZone({
|
||||
zoneName: response?.zoneName,
|
||||
activeSides: response?.activeSides || [],
|
||||
panelOrder: response?.panelOrder || [],
|
||||
lockedPanels: response?.lockedPanels || [],
|
||||
widgets: response?.widgets || [],
|
||||
activeSides: response?.activeSides ?? [],
|
||||
panelOrder: response?.panelOrder ?? [],
|
||||
lockedPanels: response?.lockedPanels ?? [],
|
||||
widgets: response?.widgets ?? [],
|
||||
zoneId: response?.zoneId,
|
||||
zoneViewPortTarget: response?.viewPortCenter || [],
|
||||
zoneViewPortPosition: response?.viewPortposition || [],
|
||||
zoneViewPortTarget: response?.viewPortCenter ?? [],
|
||||
zoneViewPortPosition: response?.viewPortposition ?? [],
|
||||
});
|
||||
|
||||
|
||||
} catch (error) {
|
||||
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
function handleAssetClick(asset: Asset) {
|
||||
setZoneAssetId(asset)
|
||||
setZoneAssetId(asset);
|
||||
}
|
||||
|
||||
async function handleZoneNameChange(newName: string) {
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const email = localStorage.getItem("email") ?? "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0];
|
||||
|
||||
const isDuplicate = zones.some(
|
||||
|
|
@ -128,12 +123,16 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
|
|||
}
|
||||
|
||||
async function handleZoneAssetName(newName: string) {
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const email = localStorage.getItem("email") ?? "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0];
|
||||
|
||||
if (zoneAssetId?.id) {
|
||||
let response = await setFloorItemApi(organization, zoneAssetId.id, newName)
|
||||
console.log('response: ', response);
|
||||
let response = await setFloorItemApi(
|
||||
organization,
|
||||
zoneAssetId.id,
|
||||
newName
|
||||
);
|
||||
console.log("response: ", response);
|
||||
setFloorItems((prevFloorItems: any[]) =>
|
||||
prevFloorItems.map((floorItems) =>
|
||||
floorItems.modelUuid === zoneAssetId.id
|
||||
|
|
@ -160,7 +159,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
|
|||
<li className="list-container">
|
||||
<div className="list-item">
|
||||
<div className="zone-header">
|
||||
<div
|
||||
<button
|
||||
className="value"
|
||||
onClick={() => handleSelectZone(item.id)}
|
||||
>
|
||||
|
|
@ -169,8 +168,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
|
|||
onRename={handleZoneNameChange}
|
||||
checkDuplicate={checkZoneNameDuplicate}
|
||||
/>
|
||||
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div className="options-container">
|
||||
<div className="lock option">
|
||||
|
|
@ -185,12 +183,12 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
|
|||
</div>
|
||||
)}
|
||||
{item.assets && item.assets.length > 0 && (
|
||||
<div
|
||||
<button
|
||||
className="expand-icon option"
|
||||
onClick={() => toggleZoneExpansion(item.id)}
|
||||
>
|
||||
<ArrowIcon />
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -206,20 +204,26 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
|
|||
className="list-container asset-item"
|
||||
>
|
||||
<div className="list-item">
|
||||
<div className="value" onClick={() => handleAssetClick(asset)} >
|
||||
<RenameInput value={asset.name} onRename={handleZoneAssetName} />
|
||||
</div>
|
||||
<button
|
||||
className="value"
|
||||
onClick={() => handleAssetClick(asset)}
|
||||
>
|
||||
<RenameInput
|
||||
value={asset.name}
|
||||
onRename={handleZoneAssetName}
|
||||
/>
|
||||
</button>
|
||||
<div className="options-container">
|
||||
<div className="lock option">
|
||||
<button className="lock option">
|
||||
<LockIcon isLocked />
|
||||
</div>
|
||||
<div className="visibe option">
|
||||
</button>
|
||||
<button className="visibe option">
|
||||
<EyeIcon isClosed />
|
||||
</div>
|
||||
</button>
|
||||
{remove && (
|
||||
<div className="remove option">
|
||||
<button className="remove option">
|
||||
<RemoveIcon />
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {
|
|||
window.location.reload();
|
||||
}
|
||||
|
||||
const savedTheme: string | null = localStorage.getItem("theme") || "light";
|
||||
const savedTheme: string | null = localStorage.getItem("theme") ?? "light";
|
||||
|
||||
return (
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -16,8 +16,13 @@ import {
|
|||
SpeedIcon,
|
||||
StartIcon,
|
||||
} from "../../icons/ExportCommonIcons";
|
||||
import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
|
||||
|
||||
const SimulationPlayer: React.FC = () => {
|
||||
const MAX_SPEED = 8; // Maximum speed
|
||||
|
||||
const [expand, setExpand] = useState(true);
|
||||
|
||||
const { speed, setSpeed } = useAnimationPlaySpeed();
|
||||
const [playSimulation, setPlaySimulation] = useState(false);
|
||||
const { setIsPlaying } = usePlayButtonStore();
|
||||
|
|
@ -29,8 +34,7 @@ const SimulationPlayer: React.FC = () => {
|
|||
|
||||
// Button functions
|
||||
const handleReset = () => {
|
||||
setReset(true);
|
||||
// setReset(!isReset);
|
||||
setReset(!isReset);
|
||||
setSpeed(1);
|
||||
};
|
||||
const handlePlayStop = () => {
|
||||
|
|
@ -49,7 +53,7 @@ const SimulationPlayer: React.FC = () => {
|
|||
};
|
||||
|
||||
const calculateHandlePosition = () => {
|
||||
return ((speed - 0.5) / (8 - 0.5)) * 100;
|
||||
return ((speed - 0.5) / (MAX_SPEED - 0.5)) * 100;
|
||||
};
|
||||
|
||||
const handleMouseDown = () => {
|
||||
|
|
@ -99,7 +103,6 @@ const SimulationPlayer: React.FC = () => {
|
|||
{ name: "process 9", completed: 90 }, // 90% completed
|
||||
{ name: "process 10", completed: 30 }, // 30% completed
|
||||
];
|
||||
const [expand, setExpand] = useState(false);
|
||||
// Move getRandomColor out of render
|
||||
const getRandomColor = () => {
|
||||
const letters = "0123456789ABCDEF";
|
||||
|
|
@ -121,11 +124,11 @@ const SimulationPlayer: React.FC = () => {
|
|||
|
||||
const intervals = [10, 20, 30, 40, 50, 60]; // in minutes
|
||||
const totalSegments = intervals.length;
|
||||
const progress = 80; // percent (example)
|
||||
const progress = 20; // percent (example)
|
||||
|
||||
const processPlayerRef = useRef<HTMLDivElement>(null);
|
||||
const processWrapperRef = useRef<HTMLDivElement>(null);
|
||||
const [playerPosition, setPlayerPosition] = useState(0);
|
||||
const [playerPosition, setPlayerPosition] = useState(20); // initial position
|
||||
|
||||
const handleProcessMouseDown = (e: React.MouseEvent) => {
|
||||
if (!processWrapperRef.current) return;
|
||||
|
|
@ -204,7 +207,7 @@ const SimulationPlayer: React.FC = () => {
|
|||
</div>
|
||||
</div>
|
||||
<div className="controls-wrapper">
|
||||
<div
|
||||
<button
|
||||
className="simulation-button-container"
|
||||
onClick={() => {
|
||||
handleReset();
|
||||
|
|
@ -212,8 +215,8 @@ const SimulationPlayer: React.FC = () => {
|
|||
>
|
||||
<ResetIcon />
|
||||
Reset
|
||||
</div>
|
||||
<div
|
||||
</button>
|
||||
<button
|
||||
className="simulation-button-container"
|
||||
onClick={() => {
|
||||
handlePlayStop();
|
||||
|
|
@ -221,8 +224,8 @@ const SimulationPlayer: React.FC = () => {
|
|||
>
|
||||
<PlayStopIcon />
|
||||
{playSimulation ? "Play" : "Stop"}
|
||||
</div>
|
||||
<div
|
||||
</button>
|
||||
<button
|
||||
className="simulation-button-container"
|
||||
onClick={() => {
|
||||
handleExit();
|
||||
|
|
@ -230,13 +233,13 @@ const SimulationPlayer: React.FC = () => {
|
|||
>
|
||||
<ExitIcon />
|
||||
Exit
|
||||
</div>
|
||||
<div
|
||||
className="simulation-button-container"
|
||||
</button>
|
||||
<button
|
||||
className="expand-icon-container"
|
||||
onClick={() => setExpand(!expand)}
|
||||
>
|
||||
<ExpandIcon />
|
||||
</div>
|
||||
<ExpandIcon isActive={!expand} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="progresser-wrapper">
|
||||
|
|
@ -295,7 +298,7 @@ const SimulationPlayer: React.FC = () => {
|
|||
Speed
|
||||
</div>
|
||||
<div className="slider-container" ref={sliderRef}>
|
||||
<div className="speed-label mix-value">0X</div>
|
||||
<div className="speed-label mix-value">0.5X</div>
|
||||
<div className="marker marker-10"></div>
|
||||
<div className="marker marker-20"></div>
|
||||
<div className="marker marker-30"></div>
|
||||
|
|
@ -306,34 +309,36 @@ const SimulationPlayer: React.FC = () => {
|
|||
<div className="marker marker-80"></div>
|
||||
<div className="marker marker-90"></div>
|
||||
<div className="custom-slider">
|
||||
<div
|
||||
<button
|
||||
className={`slider-handle ${isDragging ? "dragging" : ""}`}
|
||||
style={{ left: `${calculateHandlePosition()}%` }}
|
||||
onMouseDown={handleMouseDown}
|
||||
>
|
||||
{speed.toFixed(1)}x
|
||||
</div>
|
||||
</button>
|
||||
<input
|
||||
type="range"
|
||||
min="0.5"
|
||||
max="8"
|
||||
max={MAX_SPEED}
|
||||
step="0.1"
|
||||
value={speed}
|
||||
onChange={handleSpeedChange}
|
||||
className="slider-input"
|
||||
/>
|
||||
</div>
|
||||
<div className="speed-label max-value">8x</div>
|
||||
<div className="speed-label max-value">4x</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="processDisplayer">
|
||||
<div
|
||||
className="process-player"
|
||||
style={{ left: playerPosition, position: "absolute" }}
|
||||
></div>
|
||||
<div className="start-displayer timmer">00:00</div>
|
||||
<div className="end-displayer timmer">24:00</div>
|
||||
<div
|
||||
className="process-wrapper"
|
||||
style={{ padding: expand ? "0px" : "5px 35px" }}
|
||||
>
|
||||
<div
|
||||
className="process-container"
|
||||
ref={processWrapperRef}
|
||||
onMouseDown={handleProcessMouseDown}
|
||||
>
|
||||
|
|
@ -343,17 +348,19 @@ const SimulationPlayer: React.FC = () => {
|
|||
className="process"
|
||||
style={{
|
||||
width: `${item.completed}%`,
|
||||
backgroundColor: processColors[index],
|
||||
backgroundColor: getAvatarColor(index),
|
||||
}}
|
||||
></div>
|
||||
))}
|
||||
</div>
|
||||
>
|
||||
<div
|
||||
className="process-player"
|
||||
ref={processPlayerRef}
|
||||
style={{ left: playerPosition, position: "absolute" }}
|
||||
></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -187,7 +187,7 @@ function processLoadedModel(
|
|||
},
|
||||
]);
|
||||
|
||||
if (item.eventData.type === "vehicle") {
|
||||
if (item.eventData.type === "Vehicle") {
|
||||
const vehicleEvent: VehicleEventSchema = {
|
||||
modelUuid: item.modelUuid,
|
||||
modelName: item.modelName,
|
||||
|
|
@ -202,7 +202,7 @@ function processLoadedModel(
|
|||
rotation: [item.eventData.point?.rotation[0] || 0, item.eventData.point?.rotation[1] || 0, item.eventData.point?.rotation[2] || 0],
|
||||
action: {
|
||||
actionUuid: THREE.MathUtils.generateUUID(),
|
||||
actionName: "Vehicle Action",
|
||||
actionName: "Action 1",
|
||||
actionType: "travel",
|
||||
unLoadDuration: 5,
|
||||
loadCapacity: 10,
|
||||
|
|
@ -254,7 +254,7 @@ function processLoadedModel(
|
|||
rotation: [item.eventData.point?.rotation[0] || 0, item.eventData.point?.rotation[1] || 0, item.eventData.point?.rotation[2] || 0],
|
||||
action: {
|
||||
actionUuid: THREE.MathUtils.generateUUID(),
|
||||
actionName: "Process Action",
|
||||
actionName: "Action 1",
|
||||
actionType: "process",
|
||||
processTime: 10,
|
||||
swapMaterial: "material-id",
|
||||
|
|
@ -279,7 +279,7 @@ function processLoadedModel(
|
|||
actions: [
|
||||
{
|
||||
actionUuid: THREE.MathUtils.generateUUID(),
|
||||
actionName: "Pick and Place",
|
||||
actionName: "Action 1",
|
||||
actionType: "pickAndPlace",
|
||||
process: {
|
||||
startPoint: [0, 0, 0],
|
||||
|
|
|
|||
|
|
@ -186,22 +186,59 @@ async function handleModelLoad(
|
|||
state: "idle",
|
||||
type: 'transfer',
|
||||
speed: 1,
|
||||
points: data.points.map((point: THREE.Vector3, index: number) => ({
|
||||
points: data.points.map((point: THREE.Vector3, index: number) => {
|
||||
const triggers: TriggerSchema[] = [];
|
||||
|
||||
if (data.points && index < data.points.length - 1) {
|
||||
triggers.push({
|
||||
triggerUuid: THREE.MathUtils.generateUUID(),
|
||||
triggerName: `Trigger 1`,
|
||||
triggerType: "onComplete",
|
||||
delay: 0,
|
||||
triggeredAsset: {
|
||||
triggeredModel: {
|
||||
modelName: newFloorItem.modelName,
|
||||
modelUuid: newFloorItem.modelUuid
|
||||
},
|
||||
triggeredPoint: {
|
||||
pointName: `Point`,
|
||||
pointUuid: ""
|
||||
},
|
||||
triggeredAction: {
|
||||
actionName: `Action 1`,
|
||||
actionUuid: ""
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
uuid: THREE.MathUtils.generateUUID(),
|
||||
position: [point.x, point.y, point.z],
|
||||
rotation: [0, 0, 0],
|
||||
action: {
|
||||
actionUuid: THREE.MathUtils.generateUUID(),
|
||||
actionName: `Action ${index}`,
|
||||
actionName: `Action 1`,
|
||||
actionType: 'default',
|
||||
material: 'Default Material',
|
||||
delay: 0,
|
||||
spawnInterval: 5,
|
||||
spawnCount: 1,
|
||||
triggers: []
|
||||
triggers: triggers
|
||||
}
|
||||
}))
|
||||
};
|
||||
})
|
||||
};
|
||||
|
||||
for (let i = 0; i < ConveyorEvent.points.length - 1; i++) {
|
||||
const currentPoint = ConveyorEvent.points[i];
|
||||
const nextPoint = ConveyorEvent.points[i + 1];
|
||||
|
||||
if (currentPoint.action.triggers.length > 0) {
|
||||
currentPoint.action.triggers[0].triggeredAsset!.triggeredPoint.pointUuid = nextPoint.uuid;
|
||||
currentPoint.action.triggers[0].triggeredAsset!.triggeredAction!.actionUuid = nextPoint.action.actionUuid;
|
||||
}
|
||||
}
|
||||
addEvent(ConveyorEvent);
|
||||
eventData.points = ConveyorEvent.points.map(point => ({
|
||||
uuid: point.uuid,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React, { Suspense, useEffect } from "react";
|
||||
import assetImage from "../../assets/image/image.png";
|
||||
import { FiileedStarsIconSmall } from "../../components/icons/marketPlaceIcons";
|
||||
import { FilledStarsIconSmall } from "../../components/icons/marketPlaceIcons";
|
||||
import { Canvas, useThree } from "@react-three/fiber";
|
||||
import { ContactShadows, OrbitControls, Text } from "@react-three/drei";
|
||||
import GltfLoader from "./GltfLoader";
|
||||
|
|
@ -98,7 +98,7 @@ const AssetPreview: React.FC<AssetPreviewProps> = ({
|
|||
</div>
|
||||
<div className="asset-review">
|
||||
<div className="asset-rating">
|
||||
<FiileedStarsIconSmall />
|
||||
<FilledStarsIconSmall />
|
||||
{selectedCard.rating}
|
||||
</div>
|
||||
<div className="asset-view">{selectedCard.views} views</div>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import {
|
|||
CommentsIcon,
|
||||
DownloadIcon,
|
||||
EyeIconBig,
|
||||
FilledStarsIconSmall,
|
||||
StarsIconSmall,
|
||||
VerifiedIcon,
|
||||
} from "../../components/icons/marketPlaceIcons";
|
||||
|
|
@ -80,7 +81,13 @@ const Card: React.FC<CardProps> = ({
|
|||
<div className="stars-container">
|
||||
<div className="stars-wrapper">
|
||||
{[...Array(5)].map((_, index) => (
|
||||
<>
|
||||
{index < 3 ? (
|
||||
<FilledStarsIconSmall key={index} />
|
||||
) : (
|
||||
<StarsIconSmall key={index} />
|
||||
)}
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
<div className="units">
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifie
|
|||
import { useEventsStore } from "../../../../store/simulation/useEventsStore";
|
||||
import { useProductStore } from "../../../../store/simulation/useProductStore";
|
||||
import { useSelectedProduct } from "../../../../store/simulation/useSimulationStore";
|
||||
import { upsertProductOrEventApi } from "../../../../services/simulation/UpsertProductOrEventApi";
|
||||
|
||||
function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObjects, setCopiedObjects, pastedObjects, setpastedObjects, duplicatedObjects, setDuplicatedObjects, selectionGroup, rotatedObjects, setRotatedObjects, boundingBoxRef }: any) {
|
||||
const { camera, controls, gl, scene, pointer, raycaster } = useThree();
|
||||
|
|
@ -16,10 +17,28 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
|
|||
|
||||
const { toggleView } = useToggleView();
|
||||
const { selectedAssets, setSelectedAssets } = useSelectedAssets();
|
||||
const { selectedProduct } = useSelectedProduct();
|
||||
const { floorItems, setFloorItems } = useFloorItems();
|
||||
const { socket } = useSocketStore();
|
||||
const itemsData = useRef<Types.FloorItems>([]);
|
||||
|
||||
const email = localStorage.getItem('email')
|
||||
const organization = (email!.split("@")[1]).split(".")[0];
|
||||
|
||||
const updateBackend = (
|
||||
productName: string,
|
||||
productId: string,
|
||||
organization: string,
|
||||
eventData: EventsSchema
|
||||
) => {
|
||||
upsertProductOrEventApi({
|
||||
productName: productName,
|
||||
productId: productId,
|
||||
organization: organization,
|
||||
eventDatas: eventData
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!camera || !scene || toggleView || !itemsGroupRef.current) return;
|
||||
|
||||
|
|
@ -190,10 +209,19 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
|
|||
})
|
||||
}
|
||||
if (productData) {
|
||||
useProductStore.getState().updateEvent(useSelectedProduct.getState().selectedProduct.productId, obj.userData.modelUuid, {
|
||||
const event = useProductStore.getState().updateEvent(useSelectedProduct.getState().selectedProduct.productId, obj.userData.modelUuid, {
|
||||
position: [worldPosition.x, worldPosition.y, worldPosition.z],
|
||||
rotation: [obj.rotation.x, obj.rotation.y, obj.rotation.z],
|
||||
})
|
||||
|
||||
if (event) {
|
||||
updateBackend(
|
||||
selectedProduct.productName,
|
||||
selectedProduct.productId,
|
||||
organization,
|
||||
event
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -203,9 +231,6 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
|
|||
return updatedItems;
|
||||
});
|
||||
|
||||
const email = localStorage.getItem("email");
|
||||
const organization = email ? email.split("@")[1].split(".")[0] : "default";
|
||||
|
||||
//REST
|
||||
|
||||
// await setFloorItemApi(
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import * as Types from "../../../../types/world/worldTypes";
|
|||
import { useEventsStore } from "../../../../store/simulation/useEventsStore";
|
||||
import { useProductStore } from "../../../../store/simulation/useProductStore";
|
||||
import { useSelectedProduct } from "../../../../store/simulation/useSimulationStore";
|
||||
import { upsertProductOrEventApi } from "../../../../services/simulation/UpsertProductOrEventApi";
|
||||
|
||||
function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMovedObjects, itemsGroupRef, copiedObjects, setCopiedObjects, pastedObjects, setpastedObjects, duplicatedObjects, setDuplicatedObjects, selectionGroup, boundingBoxRef }: any) {
|
||||
const { camera, controls, gl, scene, pointer, raycaster } = useThree();
|
||||
|
|
@ -15,10 +16,28 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
|
|||
|
||||
const { toggleView } = useToggleView();
|
||||
const { selectedAssets, setSelectedAssets } = useSelectedAssets();
|
||||
const { selectedProduct } = useSelectedProduct();
|
||||
const { floorItems, setFloorItems } = useFloorItems();
|
||||
const { socket } = useSocketStore();
|
||||
const itemsData = useRef<Types.FloorItems>([]);
|
||||
|
||||
const email = localStorage.getItem('email')
|
||||
const organization = (email!.split("@")[1]).split(".")[0];
|
||||
|
||||
const updateBackend = (
|
||||
productName: string,
|
||||
productId: string,
|
||||
organization: string,
|
||||
eventData: EventsSchema
|
||||
) => {
|
||||
upsertProductOrEventApi({
|
||||
productName: productName,
|
||||
productId: productId,
|
||||
organization: organization,
|
||||
eventDatas: eventData
|
||||
})
|
||||
}
|
||||
|
||||
const prevPointerPosition = useRef<THREE.Vector2 | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -190,10 +209,19 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
|
|||
})
|
||||
}
|
||||
if (productData) {
|
||||
useProductStore.getState().updateEvent(useSelectedProduct.getState().selectedProduct.productId, obj.userData.modelUuid, {
|
||||
const event = useProductStore.getState().updateEvent(useSelectedProduct.getState().selectedProduct.productId, obj.userData.modelUuid, {
|
||||
position: [worldPosition.x, worldPosition.y, worldPosition.z],
|
||||
rotation: [obj.rotation.x, obj.rotation.y, obj.rotation.z],
|
||||
})
|
||||
|
||||
if (event) {
|
||||
updateBackend(
|
||||
selectedProduct.productName,
|
||||
selectedProduct.productId,
|
||||
organization,
|
||||
event
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -203,9 +231,6 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
|
|||
return updatedItems;
|
||||
});
|
||||
|
||||
const email = localStorage.getItem("email");
|
||||
const organization = email ? email.split("@")[1].split(".")[0] : "default";
|
||||
|
||||
//REST
|
||||
|
||||
// await setFloorItemApi(
|
||||
|
|
|
|||
|
|
@ -1,15 +1,20 @@
|
|||
import React, { useEffect, useRef, useState } from "react";
|
||||
import * as THREE from "three";
|
||||
import { useEventsStore } from "../../../../../store/simulation/useEventsStore";
|
||||
import useModuleStore from "../../../../../store/useModuleStore";
|
||||
import useModuleStore, { useSubModuleStore } from "../../../../../store/useModuleStore";
|
||||
import { TransformControls } from "@react-three/drei";
|
||||
import { detectModifierKeys } from "../../../../../utils/shortcutkeys/detectModifierKeys";
|
||||
import {
|
||||
useSelectedEventSphere,
|
||||
useSelectedEventData,
|
||||
useIsDragging,
|
||||
useIsRotating,
|
||||
} from "../../../../../store/simulation/useSimulationStore";
|
||||
import { useThree } from "@react-three/fiber";
|
||||
|
||||
function PointsCreator() {
|
||||
const { gl, raycaster, scene, pointer, camera } = useThree();
|
||||
const { subModule } = useSubModuleStore();
|
||||
const { events, updatePoint, getPointByUuid, getEventByModelUuid } = useEventsStore();
|
||||
const { activeModule } = useModuleStore();
|
||||
const transformRef = useRef<any>(null);
|
||||
|
|
@ -17,6 +22,8 @@ function PointsCreator() {
|
|||
const sphereRefs = useRef<{ [key: string]: THREE.Mesh }>({});
|
||||
const { selectedEventSphere, setSelectedEventSphere, clearSelectedEventSphere, } = useSelectedEventSphere();
|
||||
const { selectedEventData,setSelectedEventData, clearSelectedEventData } = useSelectedEventData();
|
||||
const { isDragging } = useIsDragging();
|
||||
const { isRotating } = useIsRotating();
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedEventSphere) {
|
||||
|
|
@ -75,6 +82,53 @@ function PointsCreator() {
|
|||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const canvasElement = gl.domElement;
|
||||
|
||||
let drag = false;
|
||||
let isMouseDown = false;
|
||||
|
||||
const onMouseDown = () => {
|
||||
isMouseDown = true;
|
||||
drag = false;
|
||||
};
|
||||
|
||||
const onMouseUp = () => {
|
||||
if (selectedEventSphere && !drag) {
|
||||
raycaster.setFromCamera(pointer, camera);
|
||||
const intersects = raycaster
|
||||
.intersectObjects(scene.children, true)
|
||||
.filter(
|
||||
(intersect) =>
|
||||
intersect.object.name === ('Event-Sphere')
|
||||
);
|
||||
if (intersects.length === 0) {
|
||||
clearSelectedEventSphere();
|
||||
setTransformMode(null);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const onMouseMove = () => {
|
||||
if (isMouseDown) {
|
||||
drag = true;
|
||||
}
|
||||
};
|
||||
|
||||
if (subModule === 'mechanics') {
|
||||
canvasElement.addEventListener("mousedown", onMouseDown);
|
||||
canvasElement.addEventListener("mouseup", onMouseUp);
|
||||
canvasElement.addEventListener("mousemove", onMouseMove);
|
||||
}
|
||||
|
||||
return () => {
|
||||
canvasElement.removeEventListener("mousedown", onMouseDown);
|
||||
canvasElement.removeEventListener("mouseup", onMouseUp);
|
||||
canvasElement.removeEventListener("mousemove", onMouseMove);
|
||||
};
|
||||
|
||||
}, [gl, subModule, selectedEventSphere]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{activeModule === "simulation" && (
|
||||
|
|
@ -133,10 +187,6 @@ function PointsCreator() {
|
|||
sphereRefs.current[event.point.uuid]
|
||||
);
|
||||
}}
|
||||
onPointerMissed={() => {
|
||||
clearSelectedEventSphere();
|
||||
setTransformMode(null);
|
||||
}}
|
||||
position={new THREE.Vector3(...event.point.position)}
|
||||
userData={{
|
||||
modelUuid: event.modelUuid,
|
||||
|
|
|
|||
|
|
@ -1,7 +1,43 @@
|
|||
import React from 'react'
|
||||
import React, { useEffect } from 'react'
|
||||
import MachineInstances from './instances/machineInstances'
|
||||
import { useMachineStore } from '../../../store/simulation/useMachineStore'
|
||||
import { useSelectedProduct } from '../../../store/simulation/useSimulationStore';
|
||||
|
||||
function Machine() {
|
||||
const { addMachine, addCurrentAction, removeMachine } = useMachineStore();
|
||||
const { selectedProduct } = useSelectedProduct();
|
||||
|
||||
const machineSample: MachineEventSchema[] = [
|
||||
{
|
||||
modelUuid: "machine-1234-5678-9012",
|
||||
modelName: "CNC Milling Machine",
|
||||
position: [10, 0, 5],
|
||||
rotation: [0, 0, 0],
|
||||
state: "idle",
|
||||
type: "machine",
|
||||
point: {
|
||||
uuid: "machine-point-9876-5432-1098",
|
||||
position: [10, 0.5, 5.2],
|
||||
rotation: [0, 0, 0],
|
||||
action: {
|
||||
actionUuid: "machine-action-2468-1357-8024",
|
||||
actionName: "Metal Processing",
|
||||
actionType: "process",
|
||||
processTime: 10,
|
||||
swapMaterial: "steel",
|
||||
triggers: []
|
||||
}
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
removeMachine(machineSample[0].modelUuid);
|
||||
addMachine(selectedProduct.productId, machineSample[0]);
|
||||
|
||||
// addCurrentAction(machineSample[0].modelUuid, machineSample[0].point.action.actionUuid);
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
|
|
|
|||
|
|
@ -53,7 +53,17 @@ function AddOrRemoveEventsInProducts() {
|
|||
const canvasElement = gl.domElement;
|
||||
if (!canvasElement) return;
|
||||
|
||||
let intersects = raycaster.intersectObjects(scene.children, true);
|
||||
const intersects = raycaster
|
||||
.intersectObjects(scene.children, true)
|
||||
.filter(
|
||||
(intersect) =>
|
||||
!intersect.object.name.includes("Roof") &&
|
||||
!intersect.object.name.includes("MeasurementReference") &&
|
||||
!intersect.object.name.includes("agv-collider") &&
|
||||
!(intersect.object.type === "GridHelper") &&
|
||||
!(intersect.object?.parent?.name.includes('zones')) &&
|
||||
!(intersect.object?.parent?.name.includes('Zone'))
|
||||
);
|
||||
if (intersects.length > 0 && intersects[0]?.object?.parent?.parent?.position && intersects[0]?.object?.parent?.parent?.scale && intersects[0]?.object?.parent?.parent?.rotation) {
|
||||
let currentObject = intersects[0].object;
|
||||
|
||||
|
|
@ -116,6 +126,7 @@ function AddOrRemoveEventsInProducts() {
|
|||
};
|
||||
|
||||
}, [gl, subModule, selectedProduct, selectedAsset]);
|
||||
|
||||
return (
|
||||
<></>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { upsertProductOrEventApi } from '../../../services/simulation/UpsertProd
|
|||
import { getAllProductsApi } from '../../../services/simulation/getallProductsApi';
|
||||
|
||||
function Products() {
|
||||
const { products, addProduct, setProducts } = useProductStore();
|
||||
const { addProduct, setProducts } = useProductStore();
|
||||
const { setSelectedProduct } = useSelectedProduct();
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -27,9 +27,6 @@ function Products() {
|
|||
})
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
|
|
|
|||
|
|
@ -258,6 +258,7 @@ function RoboticArmInstance({ armBot }: { armBot: ArmBotStatus }) {
|
|||
}
|
||||
const logStatus = (id: string, status: string) => {
|
||||
//
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ function Simulation() {
|
|||
}, [events])
|
||||
|
||||
useEffect(() => {
|
||||
// console.log('products: ', products);
|
||||
console.log('products: ', products);
|
||||
}, [products])
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { useEffect, useRef, useState } from "react";
|
||||
import { useThree } from "@react-three/fiber";
|
||||
import { useFrame, useThree } from "@react-three/fiber";
|
||||
import * as THREE from "three";
|
||||
import { useSubModuleStore } from "../../../../store/useModuleStore";
|
||||
import { useSelectedAsset } from "../../../../store/simulation/useSimulationStore";
|
||||
|
|
@ -7,21 +7,28 @@ import { useProductStore } from "../../../../store/simulation/useProductStore";
|
|||
import { useEventsStore } from "../../../../store/simulation/useEventsStore";
|
||||
import { useSelectedProduct } from "../../../../store/simulation/useSimulationStore";
|
||||
import { handleAddEventToProduct } from "../../events/points/functions/handleAddEventToProduct";
|
||||
import { QuadraticBezierLine } from "@react-three/drei";
|
||||
import { upsertProductOrEventApi } from "../../../../services/simulation/UpsertProductOrEventApi";
|
||||
import { useDeleteTool } from "../../../../store/store";
|
||||
|
||||
interface ConnectionLine {
|
||||
id: string;
|
||||
start: THREE.Vector3;
|
||||
end: THREE.Vector3;
|
||||
mid: THREE.Vector3;
|
||||
startPointUuid: string;
|
||||
endPointUuid: string;
|
||||
trigger: TriggerSchema;
|
||||
}
|
||||
|
||||
function TriggerConnector() {
|
||||
const { gl, raycaster, scene } = useThree();
|
||||
const { gl, raycaster, scene, pointer, camera } = useThree();
|
||||
const { subModule } = useSubModuleStore();
|
||||
const { products, getPointByUuid, getIsEventInProduct, getActionByUuid, addTrigger, addEvent, getEventByModelUuid } = useProductStore();
|
||||
const { products, getPointByUuid, getIsEventInProduct, getActionByUuid, addTrigger, removeTrigger, addEvent, getEventByModelUuid, getProductById } = useProductStore();
|
||||
const { selectedAsset, clearSelectedAsset } = useSelectedAsset();
|
||||
const { selectedProduct } = useSelectedProduct();
|
||||
const [hoveredLineKey, setHoveredLineKey] = useState<string | null>(null);
|
||||
const groupRefs = useRef<Record<string, any>>({});
|
||||
const [helperlineColor, setHelperLineColor] = useState<string>("red");
|
||||
const [currentLine, setCurrentLine] = useState<{ start: THREE.Vector3; end: THREE.Vector3; mid: THREE.Vector3; } | null>(null);
|
||||
const { deleteTool } = useDeleteTool();
|
||||
|
||||
const [firstSelectedPoint, setFirstSelectedPoint] = useState<{
|
||||
productId: string;
|
||||
|
|
@ -32,52 +39,99 @@ function TriggerConnector() {
|
|||
|
||||
const [connections, setConnections] = useState<ConnectionLine[]>([]);
|
||||
|
||||
const email = localStorage.getItem('email')
|
||||
const organization = (email!.split("@")[1]).split(".")[0];
|
||||
|
||||
const updateBackend = (
|
||||
productName: string,
|
||||
productId: string,
|
||||
organization: string,
|
||||
eventData: EventsSchema
|
||||
) => {
|
||||
upsertProductOrEventApi({
|
||||
productName: productName,
|
||||
productId: productId,
|
||||
organization: organization,
|
||||
eventDatas: eventData
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const newConnections: ConnectionLine[] = [];
|
||||
|
||||
products.forEach(product => {
|
||||
const product = getProductById(selectedProduct.productId);
|
||||
if (!product || products.length === 0) return;
|
||||
|
||||
product.eventDatas.forEach(event => {
|
||||
if ('points' in event) {
|
||||
// Handle Conveyor points
|
||||
if (event.type === "transfer" && 'points' in event) {
|
||||
event.points.forEach(point => {
|
||||
if ('action' in point && point.action?.triggers) {
|
||||
if (point.action?.triggers) {
|
||||
point.action.triggers.forEach(trigger => {
|
||||
if (trigger.triggeredAsset) {
|
||||
const targetPoint = getPointByUuid(
|
||||
product.productId,
|
||||
trigger.triggeredAsset.triggeredModel.modelUuid,
|
||||
trigger.triggeredAsset.triggeredPoint.pointUuid
|
||||
);
|
||||
|
||||
if (targetPoint) {
|
||||
const startPos = new THREE.Vector3(...point.position);
|
||||
const endPos = new THREE.Vector3(...targetPoint.position);
|
||||
const midPos = new THREE.Vector3()
|
||||
.addVectors(startPos, endPos)
|
||||
.multiplyScalar(0.5)
|
||||
.add(new THREE.Vector3(0, 2, 0));
|
||||
|
||||
newConnections.push({
|
||||
id: `${point.uuid}-${targetPoint.uuid}-${trigger.triggerUuid}`,
|
||||
start: startPos,
|
||||
end: endPos,
|
||||
mid: midPos,
|
||||
id: `${point.uuid}-${trigger.triggeredAsset.triggeredPoint.pointUuid}-${trigger.triggerUuid}`,
|
||||
startPointUuid: point.uuid,
|
||||
endPointUuid: trigger.triggeredAsset.triggeredPoint.pointUuid,
|
||||
trigger
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
// Handle Vehicle point
|
||||
else if (event.type === "vehicle" && 'point' in event) {
|
||||
const point = event.point;
|
||||
if (point.action?.triggers) {
|
||||
point.action.triggers.forEach(trigger => {
|
||||
if (trigger.triggeredAsset) {
|
||||
newConnections.push({
|
||||
id: `${point.uuid}-${trigger.triggeredAsset.triggeredPoint.pointUuid}-${trigger.triggerUuid}`,
|
||||
startPointUuid: point.uuid,
|
||||
endPointUuid: trigger.triggeredAsset.triggeredPoint.pointUuid,
|
||||
trigger
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
// Handle Robotic Arm points
|
||||
else if (event.type === "roboticArm" && 'point' in event) {
|
||||
const point = event.point;
|
||||
point.actions?.forEach(action => {
|
||||
action.triggers?.forEach(trigger => {
|
||||
if (trigger.triggeredAsset) {
|
||||
newConnections.push({
|
||||
id: `${point.uuid}-${trigger.triggeredAsset.triggeredPoint.pointUuid}-${trigger.triggerUuid}`,
|
||||
startPointUuid: point.uuid,
|
||||
endPointUuid: trigger.triggeredAsset.triggeredPoint.pointUuid,
|
||||
trigger
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
// Handle Machine point
|
||||
else if (event.type === "machine" && 'point' in event) {
|
||||
const point = event.point;
|
||||
if (point.action?.triggers) {
|
||||
point.action.triggers.forEach(trigger => {
|
||||
if (trigger.triggeredAsset) {
|
||||
newConnections.push({
|
||||
id: `${point.uuid}-${trigger.triggeredAsset.triggeredPoint.pointUuid}-${trigger.triggerUuid}`,
|
||||
startPointUuid: point.uuid,
|
||||
endPointUuid: trigger.triggeredAsset.triggeredPoint.pointUuid,
|
||||
trigger
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
setConnections(newConnections);
|
||||
}, [products]);
|
||||
|
||||
useEffect(() => {
|
||||
console.log('connections: ', connections);
|
||||
}, connections)
|
||||
}, [products, selectedProduct.productId]);
|
||||
|
||||
useEffect(() => {
|
||||
const canvasElement = gl.domElement;
|
||||
|
|
@ -111,15 +165,31 @@ function TriggerConnector() {
|
|||
if (drag) return;
|
||||
evt.preventDefault();
|
||||
|
||||
const intersects = raycaster.intersectObjects(scene.children, true);
|
||||
if (intersects.length === 0) return;
|
||||
const intersects = raycaster
|
||||
.intersectObjects(scene.children, true)
|
||||
.filter(
|
||||
(intersect) =>
|
||||
intersect.object.name === ('Event-Sphere')
|
||||
);
|
||||
if (intersects.length === 0) {
|
||||
setFirstSelectedPoint(null);
|
||||
return;
|
||||
};
|
||||
|
||||
const currentObject = intersects[0].object;
|
||||
if (!currentObject || currentObject.name !== 'Event-Sphere') return;
|
||||
if (!currentObject || currentObject.name !== 'Event-Sphere') {
|
||||
setFirstSelectedPoint(null);
|
||||
return;
|
||||
};
|
||||
|
||||
const modelUuid = currentObject.userData.modelUuid;
|
||||
const pointUuid = currentObject.userData.pointUuid;
|
||||
|
||||
if (firstSelectedPoint && firstSelectedPoint.pointUuid === pointUuid) {
|
||||
setFirstSelectedPoint(null);
|
||||
return;
|
||||
}
|
||||
|
||||
if (selectedProduct && getIsEventInProduct(selectedProduct.productId, modelUuid)) {
|
||||
|
||||
const point = getPointByUuid(
|
||||
|
|
@ -128,7 +198,12 @@ function TriggerConnector() {
|
|||
pointUuid
|
||||
);
|
||||
|
||||
if (!point) return;
|
||||
const event = getEventByModelUuid(selectedProduct.productId, modelUuid);
|
||||
|
||||
if (!point || !event) {
|
||||
setFirstSelectedPoint(null);
|
||||
return;
|
||||
};
|
||||
|
||||
let actionUuid: string | undefined;
|
||||
if ('action' in point && point.action) {
|
||||
|
|
@ -152,12 +227,12 @@ function TriggerConnector() {
|
|||
delay: 0,
|
||||
triggeredAsset: {
|
||||
triggeredModel: {
|
||||
modelName: currentObject.parent?.parent?.name || 'Unknown',
|
||||
modelName: event.modelName || 'Unknown',
|
||||
modelUuid: modelUuid
|
||||
},
|
||||
triggeredPoint: {
|
||||
pointName: currentObject.name,
|
||||
pointUuid: pointUuid
|
||||
pointName: 'Point',
|
||||
pointUuid: point.uuid
|
||||
},
|
||||
triggeredAction: actionUuid ? {
|
||||
actionName: getActionByUuid(selectedProduct.productId, actionUuid)?.actionName || 'Action',
|
||||
|
|
@ -167,7 +242,16 @@ function TriggerConnector() {
|
|||
};
|
||||
|
||||
if (firstSelectedPoint.actionUuid) {
|
||||
addTrigger(firstSelectedPoint.actionUuid, trigger);
|
||||
const event = addTrigger(selectedProduct.productId, firstSelectedPoint.actionUuid, trigger);
|
||||
|
||||
if (event) {
|
||||
updateBackend(
|
||||
selectedProduct.productName,
|
||||
selectedProduct.productId,
|
||||
organization,
|
||||
event
|
||||
);
|
||||
}
|
||||
}
|
||||
setFirstSelectedPoint(null);
|
||||
}
|
||||
|
|
@ -184,7 +268,12 @@ function TriggerConnector() {
|
|||
pointUuid
|
||||
);
|
||||
|
||||
if (!point) return;
|
||||
const event = getEventByModelUuid(selectedProduct.productId, modelUuid);
|
||||
|
||||
if (!point || !event) {
|
||||
setFirstSelectedPoint(null);
|
||||
return;
|
||||
};
|
||||
|
||||
let actionUuid: string | undefined;
|
||||
if ('action' in point && point.action) {
|
||||
|
|
@ -200,12 +289,12 @@ function TriggerConnector() {
|
|||
delay: 0,
|
||||
triggeredAsset: {
|
||||
triggeredModel: {
|
||||
modelName: currentObject.parent?.parent?.name || 'Unknown',
|
||||
modelName: event.modelName || 'Unknown',
|
||||
modelUuid: modelUuid
|
||||
},
|
||||
triggeredPoint: {
|
||||
pointName: currentObject.name,
|
||||
pointUuid: pointUuid
|
||||
pointName: 'Point',
|
||||
pointUuid: point.uuid
|
||||
},
|
||||
triggeredAction: actionUuid ? {
|
||||
actionName: getActionByUuid(selectedProduct.productId, actionUuid)?.actionName || 'Action',
|
||||
|
|
@ -215,13 +304,24 @@ function TriggerConnector() {
|
|||
};
|
||||
|
||||
if (firstSelectedPoint.actionUuid) {
|
||||
addTrigger(firstSelectedPoint.actionUuid, trigger);
|
||||
const event = addTrigger(selectedProduct.productId, firstSelectedPoint.actionUuid, trigger);
|
||||
|
||||
if (event) {
|
||||
updateBackend(
|
||||
selectedProduct.productName,
|
||||
selectedProduct.productId,
|
||||
organization,
|
||||
event
|
||||
);
|
||||
}
|
||||
}
|
||||
setFirstSelectedPoint(null);
|
||||
} else if (firstSelectedPoint) {
|
||||
setFirstSelectedPoint(null);
|
||||
}
|
||||
};
|
||||
|
||||
if (subModule === 'simulations') {
|
||||
if (subModule === 'simulations' && !deleteTool) {
|
||||
canvasElement.addEventListener("mousedown", onMouseDown);
|
||||
canvasElement.addEventListener("mouseup", onMouseUp);
|
||||
canvasElement.addEventListener("mousemove", onMouseMove);
|
||||
|
|
@ -235,11 +335,149 @@ function TriggerConnector() {
|
|||
canvasElement.removeEventListener('contextmenu', handleRightClick);
|
||||
};
|
||||
|
||||
}, [gl, subModule, selectedProduct, firstSelectedPoint]);
|
||||
}, [gl, subModule, selectedProduct, firstSelectedPoint, deleteTool]);
|
||||
|
||||
|
||||
useFrame(() => {
|
||||
if (firstSelectedPoint) {
|
||||
raycaster.setFromCamera(pointer, camera);
|
||||
const intersects = raycaster.intersectObjects(scene.children, true).filter(
|
||||
(intersect) =>
|
||||
!intersect.object.name.includes("Roof") &&
|
||||
!intersect.object.name.includes("agv-collider") &&
|
||||
!intersect.object.name.includes("MeasurementReference") &&
|
||||
!intersect.object.parent?.name.includes("Zone") &&
|
||||
!(intersect.object.type === "GridHelper") &&
|
||||
!(intersect.object.type === "Line2")
|
||||
);
|
||||
|
||||
let point: THREE.Vector3 | null = null;
|
||||
|
||||
if (intersects.length > 0) {
|
||||
point = intersects[0].point;
|
||||
if (point.y < 0.05) {
|
||||
point = new THREE.Vector3(point.x, 0.05, point.z);
|
||||
}
|
||||
}
|
||||
|
||||
const sphereIntersects = raycaster.intersectObjects(scene.children, true).filter((intersect) => intersect.object.name === ('Event-Sphere'));
|
||||
|
||||
if (sphereIntersects.length > 0 && sphereIntersects[0].object.uuid === firstSelectedPoint.pointUuid) {
|
||||
setHelperLineColor('red');
|
||||
setCurrentLine(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const startPoint = getWorldPositionFromScene(firstSelectedPoint.pointUuid);
|
||||
|
||||
if (point && startPoint) {
|
||||
if (sphereIntersects.length > 0) {
|
||||
point = sphereIntersects[0].object.getWorldPosition(new THREE.Vector3());
|
||||
}
|
||||
const distance = startPoint.distanceTo(point);
|
||||
const heightFactor = Math.max(0.5, distance * 0.2);
|
||||
const midPoint = new THREE.Vector3(
|
||||
(startPoint.x + point.x) / 2,
|
||||
Math.max(startPoint.y, point.y) + heightFactor,
|
||||
(startPoint.z + point.z) / 2
|
||||
);
|
||||
|
||||
const endPoint = point;
|
||||
|
||||
setCurrentLine({
|
||||
start: startPoint,
|
||||
mid: midPoint,
|
||||
end: endPoint,
|
||||
});
|
||||
|
||||
setHelperLineColor(sphereIntersects.length > 0 ? "#6cf542" : "red");
|
||||
} else {
|
||||
setCurrentLine(null);
|
||||
}
|
||||
} else {
|
||||
setCurrentLine(null);
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
const getWorldPositionFromScene = (pointUuid: string): THREE.Vector3 | null => {
|
||||
const pointObj = scene.getObjectByProperty("uuid", pointUuid);
|
||||
if (!pointObj) return null;
|
||||
|
||||
const worldPosition = new THREE.Vector3();
|
||||
pointObj.getWorldPosition(worldPosition);
|
||||
return worldPosition;
|
||||
};
|
||||
|
||||
const removeConnection = (connection: ConnectionLine) => {
|
||||
if (connection.trigger.triggerUuid) {
|
||||
const event = removeTrigger(selectedProduct.productId, connection.trigger.triggerUuid);
|
||||
if (event) {
|
||||
updateBackend(
|
||||
selectedProduct.productName,
|
||||
selectedProduct.productId,
|
||||
organization,
|
||||
event
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
</>
|
||||
<group name="simulationConnectionGroup" >
|
||||
{connections.map((connection) => {
|
||||
const startPoint = getWorldPositionFromScene(connection.startPointUuid);
|
||||
const endPoint = getWorldPositionFromScene(connection.endPointUuid);
|
||||
|
||||
if (!startPoint || !endPoint) return null;
|
||||
|
||||
const distance = startPoint.distanceTo(endPoint);
|
||||
const heightFactor = Math.max(0.5, distance * 0.2);
|
||||
const midPoint = new THREE.Vector3(
|
||||
(startPoint.x + endPoint.x) / 2,
|
||||
Math.max(startPoint.y, endPoint.y) + heightFactor,
|
||||
(startPoint.z + endPoint.z) / 2
|
||||
);
|
||||
|
||||
return (
|
||||
<QuadraticBezierLine
|
||||
key={connection.id}
|
||||
ref={(el) => (groupRefs.current[connection.id] = el!)}
|
||||
start={startPoint.toArray()}
|
||||
end={endPoint.toArray()}
|
||||
mid={midPoint.toArray()}
|
||||
color={deleteTool && hoveredLineKey === connection.id ? "red" : "#42a5f5"}
|
||||
lineWidth={4}
|
||||
dashed={deleteTool && hoveredLineKey === connection.id ? false : true}
|
||||
dashSize={0.75}
|
||||
dashScale={20}
|
||||
onPointerOver={() => setHoveredLineKey(connection.id)}
|
||||
onPointerOut={() => setHoveredLineKey(null)}
|
||||
onClick={() => {
|
||||
if (deleteTool) {
|
||||
setHoveredLineKey(null);
|
||||
setCurrentLine(null);
|
||||
removeConnection(connection);
|
||||
}
|
||||
}}
|
||||
userData={connection.trigger}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
{currentLine && (
|
||||
<QuadraticBezierLine
|
||||
start={currentLine.start.toArray()}
|
||||
end={currentLine.end.toArray()}
|
||||
mid={currentLine.mid.toArray()}
|
||||
color={helperlineColor}
|
||||
lineWidth={4}
|
||||
dashed
|
||||
dashSize={1}
|
||||
dashScale={20}
|
||||
/>
|
||||
)}
|
||||
</group>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,16 @@
|
|||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import * as Types from "../../../../types/world/worldTypes";
|
||||
import startPoint from "../../../../assets/gltf-glb/arrow_green.glb";
|
||||
import startEnd from "../../../../assets/gltf-glb/arrow_red.glb";
|
||||
import * as THREE from "three";
|
||||
import startEnd from "../../../../assets/gltf-glb/arrow_red.glb";
|
||||
import { useGLTF } from '@react-three/drei';
|
||||
import { useFrame, useThree } from '@react-three/fiber';
|
||||
import { useSelectedEventSphere } from '../../../../store/simulation/useSimulationStore';
|
||||
import { useSelectedEventSphere, useIsDragging, useIsRotating } from '../../../../store/simulation/useSimulationStore';
|
||||
import { useVehicleStore } from '../../../../store/simulation/useVehicleStore';
|
||||
import * as Types from "../../../../types/world/worldTypes";
|
||||
import { useProductStore } from '../../../../store/simulation/useProductStore';
|
||||
import { useSelectedProduct } from '../../../../store/simulation/useSimulationStore';
|
||||
import { upsertProductOrEventApi } from '../../../../services/simulation/UpsertProductOrEventApi';
|
||||
|
||||
const VehicleUI = () => {
|
||||
const { scene: startScene } = useGLTF(startPoint) as any;
|
||||
const { scene: endScene } = useGLTF(startEnd) as any;
|
||||
|
|
@ -14,67 +18,60 @@ const VehicleUI = () => {
|
|||
const endMarker = useRef<THREE.Group>(null);
|
||||
const prevMousePos = useRef({ x: 0, y: 0 });
|
||||
const { selectedEventSphere } = useSelectedEventSphere();
|
||||
const { vehicles, updateVehicle } = useVehicleStore();
|
||||
const { selectedProduct } = useSelectedProduct();
|
||||
const { getVehicleById } = useVehicleStore();
|
||||
const { updateEvent } = useProductStore();
|
||||
const [startPosition, setStartPosition] = useState<[number, number, number]>([0, 0, 0]);
|
||||
const [endPosition, setEndPosition] = useState<[number, number, number]>([0, 0, 0]);
|
||||
const [startRotation, setStartRotation] = useState<[number, number, number]>([0, 0, 0]);
|
||||
const [endRotation, setEndRotation] = useState<[number, number, number]>([0, 0, 0]);
|
||||
const [isDragging, setIsDragging] = useState<"start" | "end" | null>(null);
|
||||
const [isRotating, setIsRotating] = useState<"start" | "end" | null>(null);
|
||||
const { isDragging, setIsDragging } = useIsDragging();
|
||||
const { isRotating, setIsRotating } = useIsRotating();
|
||||
const { raycaster } = useThree();
|
||||
const plane = useRef(new THREE.Plane(new THREE.Vector3(0, 1, 0), 0));
|
||||
const state: Types.ThreeState = useThree();
|
||||
const controls: any = state.controls;
|
||||
|
||||
const email = localStorage.getItem('email')
|
||||
const organization = (email!.split("@")[1]).split(".")[0];
|
||||
|
||||
const updateBackend = (
|
||||
productName: string,
|
||||
productId: string,
|
||||
organization: string,
|
||||
eventData: EventsSchema
|
||||
) => {
|
||||
upsertProductOrEventApi({
|
||||
productName: productName,
|
||||
productId: productId,
|
||||
organization: organization,
|
||||
eventDatas: eventData
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedEventSphere) return;
|
||||
const selectedVehicle = vehicles.find(
|
||||
(vehicle: any) => vehicle.modelUuid === selectedEventSphere.userData.modelUuid
|
||||
);
|
||||
const selectedVehicle = getVehicleById(selectedEventSphere.userData.modelUuid);
|
||||
|
||||
if (selectedVehicle?.point?.action) {
|
||||
const { pickUpPoint, unLoadPoint } = selectedVehicle.point.action;
|
||||
|
||||
if (pickUpPoint) {
|
||||
const pickupPosition = new THREE.Vector3(
|
||||
pickUpPoint.position.x,
|
||||
pickUpPoint.position.y,
|
||||
pickUpPoint.position.z
|
||||
);
|
||||
const pickupRotation = new THREE.Vector3(
|
||||
pickUpPoint.rotation.x,
|
||||
pickUpPoint.rotation.y,
|
||||
pickUpPoint.rotation.z
|
||||
);
|
||||
pickupPosition.y = 0;
|
||||
setStartPosition([pickupPosition.x, 0, pickupPosition.z]);
|
||||
setStartRotation([pickupRotation.x, pickupRotation.y, pickupRotation.z]);
|
||||
setStartPosition([pickUpPoint.position.x, 0, pickUpPoint.position.z]);
|
||||
setStartRotation([pickUpPoint.rotation.x, pickUpPoint.rotation.y, pickUpPoint.rotation.z]);
|
||||
} else {
|
||||
const defaultLocal = new THREE.Vector3(0, 0, 1.5);
|
||||
const defaultWorld = selectedEventSphere.localToWorld(defaultLocal);
|
||||
defaultWorld.y = 0;
|
||||
setStartPosition([defaultWorld.x, 0, defaultWorld.z]);
|
||||
setStartRotation([0, 0, 0]);
|
||||
}
|
||||
|
||||
if (unLoadPoint) {
|
||||
const unLoadPosition = new THREE.Vector3(
|
||||
unLoadPoint.position.x,
|
||||
unLoadPoint.position.y,
|
||||
unLoadPoint.position.z
|
||||
);
|
||||
const unLoadRotation = new THREE.Vector3(
|
||||
unLoadPoint.rotation.x,
|
||||
unLoadPoint.rotation.y,
|
||||
unLoadPoint.position.z
|
||||
);
|
||||
unLoadPosition.y = 0; // Force y to 0
|
||||
setEndPosition([unLoadPosition.x, 0, unLoadPosition.z]);
|
||||
setEndRotation([unLoadRotation.x, unLoadRotation.y, unLoadRotation.z]);
|
||||
setEndPosition([unLoadPoint.position.x, 0, unLoadPoint.position.z]);
|
||||
setEndRotation([unLoadPoint.rotation.x, unLoadPoint.rotation.y, unLoadPoint.rotation.z]);
|
||||
} else {
|
||||
const defaultLocal = new THREE.Vector3(0, 0, -1.5);
|
||||
const defaultWorld = selectedEventSphere.localToWorld(defaultLocal);
|
||||
defaultWorld.y = 0; // Force y to 0
|
||||
setEndPosition([defaultWorld.x, 0, defaultWorld.z]);
|
||||
setEndRotation([0, 0, 0]);
|
||||
}
|
||||
|
|
@ -87,7 +84,6 @@ const VehicleUI = () => {
|
|||
const intersects = raycaster.ray.intersectPlane(plane.current, intersectPoint);
|
||||
|
||||
if (intersects) {
|
||||
intersectPoint.y = 0; // Force y to 0
|
||||
if (isDragging === "start") {
|
||||
setStartPosition([intersectPoint.x, 0, intersectPoint.z]);
|
||||
}
|
||||
|
|
@ -108,12 +104,12 @@ const VehicleUI = () => {
|
|||
|
||||
if (marker) {
|
||||
const rotationSpeed = 10;
|
||||
marker.rotation.y += deltaX * rotationSpeed;
|
||||
if (isRotating === 'start') {
|
||||
setStartRotation([marker.rotation.x, marker.rotation.y, marker.rotation.z])
|
||||
const y = startRotation[1] + deltaX * rotationSpeed;
|
||||
setStartRotation([0, y, 0]);
|
||||
} else {
|
||||
|
||||
setEndRotation([marker.rotation.x, marker.rotation.y, marker.rotation.z])
|
||||
const y = endRotation[1] + deltaX * rotationSpeed;
|
||||
setEndRotation([0, y, 0]);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -142,43 +138,34 @@ const VehicleUI = () => {
|
|||
setIsRotating(null);
|
||||
|
||||
if (selectedEventSphere?.userData.modelUuid) {
|
||||
const updatedVehicle = vehicles.find(
|
||||
(vehicle) => vehicle.modelUuid === selectedEventSphere.userData.modelUuid
|
||||
);
|
||||
const updatedVehicle = getVehicleById(selectedEventSphere.userData.modelUuid);
|
||||
|
||||
if (updatedVehicle) {
|
||||
updateVehicle(selectedEventSphere.userData.modelUuid, {
|
||||
const event = updateEvent(selectedProduct.productId, selectedEventSphere.userData.modelUuid, {
|
||||
point: {
|
||||
...updatedVehicle.point,
|
||||
action: {
|
||||
...updatedVehicle.point?.action,
|
||||
pickUpPoint: {
|
||||
position: {
|
||||
x: startPosition[0],
|
||||
y: startPosition[1],
|
||||
z: startPosition[2],
|
||||
},
|
||||
rotation: {
|
||||
x: startRotation[0],
|
||||
y: startRotation[1],
|
||||
z: startRotation[2],
|
||||
},
|
||||
position: { x: startPosition[0], y: startPosition[1], z: startPosition[2], },
|
||||
rotation: { x: 0, y: startRotation[1], z: 0, },
|
||||
},
|
||||
unLoadPoint: {
|
||||
position: {
|
||||
x: endPosition[0],
|
||||
y: endPosition[1],
|
||||
z: endPosition[2],
|
||||
},
|
||||
rotation: {
|
||||
x: endRotation[0],
|
||||
y: endRotation[1],
|
||||
z: endRotation[2],
|
||||
position: { x: endPosition[0], y: endPosition[1], z: endPosition[2], },
|
||||
rotation: { x: 0, y: endRotation[1], z: 0, },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
if (event) {
|
||||
updateBackend(
|
||||
selectedProduct.productName,
|
||||
selectedProduct.productId,
|
||||
organization,
|
||||
event
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -208,6 +195,7 @@ const VehicleUI = () => {
|
|||
object={startScene}
|
||||
ref={startMarker}
|
||||
position={startPosition}
|
||||
rotation={startRotation}
|
||||
onPointerDown={(e: any) => {
|
||||
e.stopPropagation();
|
||||
handlePointerDown(e, "start", "start");
|
||||
|
|
@ -224,6 +212,7 @@ const VehicleUI = () => {
|
|||
object={endScene}
|
||||
ref={endMarker}
|
||||
position={endPosition}
|
||||
rotation={endRotation}
|
||||
onPointerDown={(e: any) => {
|
||||
e.stopPropagation();
|
||||
handlePointerDown(e, "end", "end");
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ interface VehicleAnimatorProps {
|
|||
reset: () => void;
|
||||
currentPhase: string;
|
||||
agvUuid: number;
|
||||
agvDetail: any;
|
||||
agvDetail: VehicleStatus;
|
||||
}
|
||||
|
||||
function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetail, reset }: VehicleAnimatorProps) {
|
||||
|
|
@ -32,7 +32,7 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
|
|||
let startTime: number;
|
||||
let fixedInterval: number;
|
||||
let coveredDistance = progressRef.current;
|
||||
let objectRotation = (agvDetail.point?.action?.pickUpPoint?.rotation || { x: 0, y: 0, z: 0 }) as { x: number; y: number; z: number };
|
||||
let objectRotation = (agvDetail.point?.action?.pickUpPoint?.rotation || { x: 0, y: 0, z: 0 }) as { x: number; y: number; z: number } | undefined;
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -67,10 +67,9 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
|
|||
setRestingRotation(true);
|
||||
decrementVehicleLoad(agvDetail.modelUuid, 0);
|
||||
const object = scene.getObjectByProperty('uuid', agvUuid);
|
||||
console.log('currentPhase: ', currentPhase);
|
||||
if (object) {
|
||||
object.position.set(agvDetail.position[0], agvDetail.position[1], agvDetail.position[2]);
|
||||
object.rotation.set(objectRotation.x, objectRotation.y, objectRotation.z);
|
||||
object.rotation.set(agvDetail.rotation[0], agvDetail.rotation[1], agvDetail.rotation[2]);
|
||||
}
|
||||
}
|
||||
}, [isReset, isPlaying])
|
||||
|
|
@ -132,7 +131,7 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
|
|||
}
|
||||
|
||||
if (progressRef.current >= totalDistance) {
|
||||
if (restRotation) {
|
||||
if (restRotation && objectRotation) {
|
||||
const targetQuaternion = new THREE.Quaternion().setFromEuler(new THREE.Euler(objectRotation.x, objectRotation.y, objectRotation.z));
|
||||
object.quaternion.slerp(targetQuaternion, delta * 2);
|
||||
const angleDiff = object.quaternion.angleTo(targetQuaternion);
|
||||
|
|
|
|||
|
|
@ -30,7 +30,8 @@ function VehicleInstance({ agvDetail }: any) {
|
|||
);
|
||||
|
||||
function vehicleStatus(modelId: string, status: string) {
|
||||
// console.log(`${modelId} , ${status});
|
||||
// console.log(`${modelId} , ${status}`);
|
||||
|
||||
}
|
||||
|
||||
// Function to reset everything
|
||||
|
|
@ -44,7 +45,7 @@ function VehicleInstance({ agvDetail }: any) {
|
|||
const increment = () => {
|
||||
if (isIncrememtable.current) {
|
||||
|
||||
incrementVehicleLoad(agvDetail.modelUuid, 2);
|
||||
incrementVehicleLoad(agvDetail.modelUuid, 10);
|
||||
isIncrememtable.current = false;
|
||||
}
|
||||
}
|
||||
|
|
@ -69,6 +70,7 @@ function VehicleInstance({ agvDetail }: any) {
|
|||
increment();
|
||||
}, 5000);
|
||||
|
||||
|
||||
if (agvDetail.currentLoad === agvDetail.point.action.loadCapacity) {
|
||||
const toDrop = computePath(
|
||||
agvDetail.point.action.pickUpPoint.position,
|
||||
|
|
|
|||
|
|
@ -1,220 +1,48 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import React, { useEffect } from "react";
|
||||
import VehicleInstances from "./instances/vehicleInstances";
|
||||
import { useVehicleStore } from "../../../store/simulation/useVehicleStore";
|
||||
import { useFloorItems } from "../../../store/store";
|
||||
import { useSelectedEventData, useSelectedEventSphere } from "../../../store/simulation/useSimulationStore";
|
||||
import { useSelectedEventData, useSelectedEventSphere, useSelectedProduct } from "../../../store/simulation/useSimulationStore";
|
||||
import VehicleUI from "../ui/vehicle/vehicleUI";
|
||||
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
|
||||
function Vehicles() {
|
||||
import { useProductStore } from "../../../store/simulation/useProductStore";
|
||||
|
||||
const { vehicles, addVehicle } = useVehicleStore();
|
||||
function Vehicles() {
|
||||
const { products, getProductById } = useProductStore();
|
||||
const { selectedProduct } = useSelectedProduct();
|
||||
const { vehicles, addVehicle, clearvehicles } = useVehicleStore();
|
||||
const { selectedEventSphere } = useSelectedEventSphere();
|
||||
const { selectedEventData } = useSelectedEventData();
|
||||
const { floorItems } = useFloorItems();
|
||||
const { isPlaying } = usePlayButtonStore();
|
||||
|
||||
const [vehicleStatusSample, setVehicleStatusSample] = useState<
|
||||
VehicleEventSchema[]
|
||||
>([
|
||||
{
|
||||
modelUuid: "9356f710-4727-4b50-bdb2-9c1e747ecc74",
|
||||
modelName: "AGV",
|
||||
position: [97.9252965204558, 0, 37.96138815638661],
|
||||
rotation: [0, 0, 0],
|
||||
state: "idle",
|
||||
type: "vehicle",
|
||||
speed: 2.5,
|
||||
point: {
|
||||
uuid: "point-789",
|
||||
position: [0, 1, 0],
|
||||
rotation: [0, 0, 0],
|
||||
action: {
|
||||
actionUuid: "action-456",
|
||||
actionName: "Deliver to Zone A",
|
||||
actionType: "travel",
|
||||
unLoadDuration: 10,
|
||||
loadCapacity: 2,
|
||||
steeringAngle:0,
|
||||
pickUpPoint: { position: { x: 98.71483985219794, y: 0, z: 28.66321267938962 }, rotation: { x: 0, y: 0, z: 0 } },
|
||||
unLoadPoint: { position: { x: 105.71483985219794, y: 0, z: 28.66321267938962 }, rotation: { x: 0, y: 0, z: 0 } },
|
||||
triggers: [
|
||||
{
|
||||
triggerUuid: "trig-001",
|
||||
triggerName: "Start Travel",
|
||||
triggerType: "onComplete",
|
||||
delay: 0,
|
||||
triggeredAsset: {
|
||||
triggeredModel: { modelName: "ArmBot-X", modelUuid: "arm-001" },
|
||||
triggeredPoint: { pointName: "Pickup Arm Point", pointUuid: "arm-point-01" },
|
||||
triggeredAction: { actionName: "Grab Widget", actionUuid: "grab-001" }
|
||||
useEffect(() => {
|
||||
if (selectedProduct.productId) {
|
||||
const product = getProductById(selectedProduct.productId);
|
||||
if (product) {
|
||||
clearvehicles();
|
||||
product.eventDatas.forEach(events => {
|
||||
if (events.type === 'vehicle') {
|
||||
addVehicle(selectedProduct.productId, events);
|
||||
}
|
||||
},
|
||||
{
|
||||
triggerUuid: "trig-002",
|
||||
triggerName: "Complete Travel",
|
||||
triggerType: "onComplete",
|
||||
delay: 2,
|
||||
triggeredAsset: null
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
modelUuid: "b06960bb-3d2e-41f7-a646-335f389c68b4",
|
||||
modelName: "AGV",
|
||||
position: [89.61609306554463, 0, 33.634136622267356],
|
||||
rotation: [0, 0, 0],
|
||||
state: "idle",
|
||||
type: "vehicle",
|
||||
speed: 2.5,
|
||||
point: {
|
||||
uuid: "point-789",
|
||||
position: [0, 1, 0],
|
||||
rotation: [0, 0, 0],
|
||||
action: {
|
||||
actionUuid: "action-456",
|
||||
actionName: "Deliver to Zone A",
|
||||
actionType: "travel",
|
||||
unLoadDuration: 10,
|
||||
loadCapacity: 2,
|
||||
steeringAngle:0,
|
||||
pickUpPoint: null,
|
||||
unLoadPoint: null,
|
||||
triggers: [
|
||||
{
|
||||
triggerUuid: "trig-001",
|
||||
triggerName: "Start Travel",
|
||||
triggerType: "onStart",
|
||||
delay: 0,
|
||||
triggeredAsset: {
|
||||
triggeredModel: { modelName: "ArmBot-X", modelUuid: "arm-001" },
|
||||
triggeredPoint: { pointName: "Pickup Arm Point", pointUuid: "arm-point-01" },
|
||||
triggeredAction: { actionName: "Grab Widget", actionUuid: "grab-001" }
|
||||
}
|
||||
},
|
||||
{
|
||||
triggerUuid: "trig-002",
|
||||
triggerName: "Complete Travel",
|
||||
triggerType: "onComplete",
|
||||
delay: 2,
|
||||
triggeredAsset: null
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
// {
|
||||
// modelUuid: "cd7d0584-0684-42b4-b051-9e882c1914aa",
|
||||
// modelName: "AGV",
|
||||
// position: [105.90938758014703, 0, 31.584209911095215],
|
||||
// rotation: [0, 0, 0],
|
||||
// state: "idle",
|
||||
// type: "vehicle",
|
||||
// speed: 2.5,
|
||||
// point: {
|
||||
// uuid: "point-789",
|
||||
// position: [0, 1, 0],
|
||||
// rotation: [0, 0, 0],
|
||||
// action: {
|
||||
// actionUuid: "action-456",
|
||||
// actionName: "Deliver to Zone A",
|
||||
// actionType: "travel",
|
||||
// unLoadDuration: 10,
|
||||
// loadCapacity: 2,
|
||||
// steeringAngle:0,
|
||||
// pickUpPoint: null,
|
||||
// unLoadPoint: null,
|
||||
// triggers: [
|
||||
// {
|
||||
// triggerUuid: "trig-001",
|
||||
// triggerName: "Start Travel",
|
||||
// triggerType: "onStart",
|
||||
// delay: 0,
|
||||
// triggeredAsset: {
|
||||
// triggeredModel: { modelName: "ArmBot-X", modelUuid: "arm-001" },
|
||||
// triggeredPoint: { pointName: "Pickup Arm Point", pointUuid: "arm-point-01" },
|
||||
// triggeredAction: { actionName: "Grab Widget", actionUuid: "grab-001" }
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// triggerUuid: "trig-002",
|
||||
// triggerName: "Complete Travel",
|
||||
// triggerType: "onComplete",
|
||||
// delay: 2,
|
||||
// triggeredAsset: null
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// modelUuid: "e729a4f1-11d2-4778-8d6a-468f1b4f6b79",
|
||||
// modelName: "forklift",
|
||||
// position: [98.85729337188162, 0, 38.36616546567653],
|
||||
// rotation: [0, 0, 0],
|
||||
// state: "idle",
|
||||
// type: "vehicle",
|
||||
// speed: 2.5,
|
||||
// point: {
|
||||
// uuid: "point-789",
|
||||
// position: [0, 1, 0],
|
||||
// rotation: [0, 0, 0],
|
||||
// action: {
|
||||
// actionUuid: "action-456",
|
||||
// actionName: "Deliver to Zone A",
|
||||
// actionType: "travel",
|
||||
// unLoadDuration: 15,
|
||||
// loadCapacity: 5,
|
||||
// steeringAngle:0,
|
||||
// pickUpPoint: null,
|
||||
// unLoadPoint: null,
|
||||
// triggers: [
|
||||
// {
|
||||
// triggerUuid: "trig-001",
|
||||
// triggerName: "Start Travel",
|
||||
// triggerType: "onStart",
|
||||
// delay: 0,
|
||||
// triggeredAsset: {
|
||||
// triggeredModel: { modelName: "ArmBot-X", modelUuid: "arm-001" },
|
||||
// triggeredPoint: { pointName: "Pickup Arm Point", pointUuid: "arm-point-01" },
|
||||
// triggeredAction: { actionName: "Grab Widget", actionUuid: "grab-001" }
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// triggerUuid: "trig-002",
|
||||
// triggerName: "Complete Travel",
|
||||
// triggerType: "onComplete",
|
||||
// delay: 2,
|
||||
// triggeredAsset: null
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
]);
|
||||
}, [selectedProduct, products]);
|
||||
|
||||
useEffect(() => {
|
||||
// console.log('vehicles: ', vehicles);
|
||||
}, [vehicles])
|
||||
|
||||
useEffect(() => {
|
||||
addVehicle("123", vehicleStatusSample[0]);
|
||||
addVehicle('123', vehicleStatusSample[1]);
|
||||
// addVehicle('123', vehicleStatusSample[2]);
|
||||
}, []);
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<VehicleInstances />
|
||||
|
||||
{selectedEventSphere && selectedEventData?.data.type === "vehicle" && !isPlaying &&
|
||||
< VehicleUI />
|
||||
}
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Vehicles;
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -11,10 +11,7 @@ import {
|
|||
useDroppedObjectsStore,
|
||||
useFloatingWidget,
|
||||
} from "../../store/visualization/useDroppedObjectsStore";
|
||||
import {
|
||||
useSocketStore,
|
||||
useWidgetSubOption,
|
||||
} from "../../store/store";
|
||||
import { useSocketStore, useWidgetSubOption } from "../../store/store";
|
||||
import { getZone2dData } from "../../services/visulization/zone/getZoneData";
|
||||
import { generateUniqueId } from "../../functions/generateUniqueId";
|
||||
import { determinePosition } from "./functions/determinePosition";
|
||||
|
|
@ -76,6 +73,7 @@ const RealTimeVisulization: React.FC = () => {
|
|||
const { widgetSubOption } = useWidgetSubOption();
|
||||
const { visualizationSocket } = useSocketStore();
|
||||
const { setSelectedChartId } = useWidgetStore();
|
||||
const [waitingPanels, setWaitingPanels] = useState(null);
|
||||
|
||||
OuterClick({
|
||||
contextClassName: [
|
||||
|
|
@ -377,6 +375,8 @@ const RealTimeVisulization: React.FC = () => {
|
|||
setHiddenPanels={setHiddenPanels}
|
||||
selectedZone={selectedZone}
|
||||
setSelectedZone={setSelectedZone}
|
||||
waitingPanels={waitingPanels}
|
||||
setWaitingPanels={setWaitingPanels}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
|
@ -385,6 +385,7 @@ const RealTimeVisulization: React.FC = () => {
|
|||
setSelectedZone={setSelectedZone}
|
||||
hiddenPanels={hiddenPanels}
|
||||
setZonesData={setZonesData}
|
||||
waitingPanels={waitingPanels}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
CleanPannel,
|
||||
EyeIcon,
|
||||
|
|
@ -6,8 +6,6 @@ import {
|
|||
} from "../../../../components/icons/RealTimeVisulationIcons";
|
||||
import { AddIcon } from "../../../../components/icons/ExportCommonIcons";
|
||||
import { useSocketStore } from "../../../../store/store";
|
||||
import { clearPanel } from "../../../../services/visulization/zone/clearPanel";
|
||||
import { lockPanel } from "../../../../services/visulization/zone/lockPanel";
|
||||
|
||||
// Define the type for `Side`
|
||||
type Side = "top" | "bottom" | "left" | "right";
|
||||
|
|
@ -57,6 +55,8 @@ interface ButtonsProps {
|
|||
>;
|
||||
hiddenPanels: HiddenPanels; // Updated prop type
|
||||
setHiddenPanels: React.Dispatch<React.SetStateAction<HiddenPanels>>; // Updated prop type
|
||||
waitingPanels: any;
|
||||
setWaitingPanels: any;
|
||||
}
|
||||
|
||||
const AddButtons: React.FC<ButtonsProps> = ({
|
||||
|
|
@ -64,6 +64,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
|
|||
setSelectedZone,
|
||||
setHiddenPanels,
|
||||
hiddenPanels,
|
||||
waitingPanels,
|
||||
setWaitingPanels,
|
||||
}) => {
|
||||
const { visualizationSocket } = useSocketStore();
|
||||
|
||||
|
|
@ -174,17 +176,26 @@ const AddButtons: React.FC<ButtonsProps> = ({
|
|||
|
||||
// Function to handle "+" button click
|
||||
const handlePlusButtonClick = async (side: Side) => {
|
||||
if (selectedZone.activeSides.includes(side)) {
|
||||
console.log("open");
|
||||
// Panel already exists: Remove widgets from that side and update activeSides
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value
|
||||
const zoneId = selectedZone.zoneId;
|
||||
|
||||
// Remove all widgets associated with the side and update active sides
|
||||
if (selectedZone.activeSides.includes(side)) {
|
||||
// Already active: Schedule removal
|
||||
|
||||
setWaitingPanels(side); // Mark as waiting
|
||||
|
||||
setTimeout(() => {
|
||||
console.log("Removing after wait...");
|
||||
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0] || "";
|
||||
|
||||
// Remove widgets for that side
|
||||
const cleanedWidgets = selectedZone.widgets.filter(
|
||||
(widget) => widget.panel !== side
|
||||
);
|
||||
const newActiveSides = selectedZone.activeSides.filter((s) => s !== side);
|
||||
const newActiveSides = selectedZone.activeSides.filter(
|
||||
(s) => s !== side
|
||||
);
|
||||
|
||||
const updatedZone = {
|
||||
...selectedZone,
|
||||
|
|
@ -193,46 +204,34 @@ const AddButtons: React.FC<ButtonsProps> = ({
|
|||
panelOrder: newActiveSides,
|
||||
};
|
||||
|
||||
let deletePanel = {
|
||||
organization: organization,
|
||||
const deletePanel = {
|
||||
organization,
|
||||
panelName: side,
|
||||
zoneId: selectedZone.zoneId,
|
||||
zoneId,
|
||||
};
|
||||
|
||||
if (visualizationSocket) {
|
||||
visualizationSocket.emit("v2:viz-panel:delete", deletePanel);
|
||||
}
|
||||
|
||||
setSelectedZone(updatedZone);
|
||||
|
||||
if (hiddenPanels[selectedZone.zoneId]?.includes(side)) {
|
||||
if (hiddenPanels[zoneId]?.includes(side)) {
|
||||
setHiddenPanels((prev) => ({
|
||||
...prev,
|
||||
[selectedZone.zoneId]: prev[selectedZone.zoneId].filter(
|
||||
(s) => s !== side
|
||||
),
|
||||
[zoneId]: prev[zoneId].filter((s) => s !== side),
|
||||
}));
|
||||
}
|
||||
|
||||
// if(hiddenPanels[selectedZone.zoneId].includes(side))
|
||||
|
||||
// API call to delete the panel
|
||||
// try {
|
||||
// const response = await deletePanelApi(selectedZone.zoneId, side, organization);
|
||||
//
|
||||
// if (response.message === "Panel deleted successfully") {
|
||||
// } else {
|
||||
//
|
||||
// }
|
||||
// } catch (error) {
|
||||
//
|
||||
// }
|
||||
// Remove from waiting state
|
||||
setWaitingPanels(null);
|
||||
}, 500); // Wait for 2 seconds
|
||||
} else {
|
||||
// Panel does not exist: Create panel
|
||||
// Panel does not exist: Add it
|
||||
try {
|
||||
// Get email and organization safely with a default fallback
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0];
|
||||
const organization = email?.split("@")[1]?.split(".")[0] || "";
|
||||
|
||||
// Prevent duplicate side entries
|
||||
const newActiveSides = selectedZone.activeSides.includes(side)
|
||||
? [...selectedZone.activeSides]
|
||||
: [...selectedZone.activeSides, side];
|
||||
|
|
@ -242,32 +241,31 @@ const AddButtons: React.FC<ButtonsProps> = ({
|
|||
activeSides: newActiveSides,
|
||||
panelOrder: newActiveSides,
|
||||
};
|
||||
let addPanel = {
|
||||
organization: organization,
|
||||
zoneId: selectedZone.zoneId,
|
||||
|
||||
const addPanel = {
|
||||
organization,
|
||||
zoneId,
|
||||
panelOrder: newActiveSides,
|
||||
};
|
||||
|
||||
if (visualizationSocket) {
|
||||
visualizationSocket.emit("v2:viz-panel:add", addPanel);
|
||||
}
|
||||
setSelectedZone(updatedZone);
|
||||
// API call to create panels
|
||||
// const response = await panelData(organization, selectedZone.zoneId, newActiveSides);
|
||||
//
|
||||
|
||||
// if (response.message === "Panels created successfully") {
|
||||
// } else {
|
||||
//
|
||||
// }
|
||||
} catch (error) {}
|
||||
setSelectedZone(updatedZone);
|
||||
} catch (error) {
|
||||
console.error("Error adding panel:", error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
{(["top", "right", "bottom", "left"] as Side[]).map((side) => (
|
||||
<div key={side} className={`side-button-container ${side}`}>
|
||||
{/* "+" Button */}
|
||||
|
||||
<button
|
||||
className={`side-button ${side}${
|
||||
selectedZone.activeSides.includes(side) ? " active" : ""
|
||||
|
|
@ -286,7 +284,17 @@ const AddButtons: React.FC<ButtonsProps> = ({
|
|||
|
||||
{/* Extra Buttons */}
|
||||
{selectedZone.activeSides.includes(side) && (
|
||||
<div className="extra-Bs">
|
||||
<div
|
||||
className={`extra-Bs
|
||||
${waitingPanels === side ? "extra-Bs-addclosing" : ""}
|
||||
${
|
||||
!hiddenPanels[selectedZone.zoneId]?.includes(side) &&
|
||||
waitingPanels !== side
|
||||
? "extra-Bs-addopening"
|
||||
: ""
|
||||
}
|
||||
`}
|
||||
>
|
||||
{/* Hide Panel */}
|
||||
<div
|
||||
className={`icon ${
|
||||
|
|
@ -305,7 +313,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
|
|||
fill={
|
||||
hiddenPanels[selectedZone.zoneId]?.includes(side)
|
||||
? "var(--icon-default-color-active)"
|
||||
: "var(--icon-default-color)"
|
||||
: "var(--text-color)"
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -342,7 +350,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
|
|||
fill={
|
||||
selectedZone.lockedPanels.includes(side)
|
||||
? "var(--icon-default-color-active)"
|
||||
: "var(--icon-default-color)"
|
||||
: "var(--text-color)"
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -43,6 +43,7 @@ interface PanelProps {
|
|||
>;
|
||||
hiddenPanels: any;
|
||||
setZonesData: React.Dispatch<React.SetStateAction<any>>;
|
||||
waitingPanels: any;
|
||||
}
|
||||
|
||||
const generateUniqueId = () =>
|
||||
|
|
@ -53,6 +54,7 @@ const Panel: React.FC<PanelProps> = ({
|
|||
setSelectedZone,
|
||||
hiddenPanels,
|
||||
setZonesData,
|
||||
waitingPanels,
|
||||
}) => {
|
||||
const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
|
||||
const panelRefs = useRef<{ [side in Side]?: HTMLDivElement }>({});
|
||||
|
|
@ -108,7 +110,8 @@ const Panel: React.FC<PanelProps> = ({
|
|||
case "bottom":
|
||||
return {
|
||||
minWidth: "170px",
|
||||
width: `calc(100% - ${(leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
|
||||
width: `calc(100% - ${
|
||||
(leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
|
||||
}px)`,
|
||||
minHeight: "170px",
|
||||
height: `${panelSize}px`,
|
||||
|
|
@ -122,7 +125,8 @@ const Panel: React.FC<PanelProps> = ({
|
|||
minWidth: "170px",
|
||||
width: `${panelSize}px`,
|
||||
minHeight: "170px",
|
||||
height: `calc(100% - ${(topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
|
||||
height: `calc(100% - ${
|
||||
(topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
|
||||
}px)`,
|
||||
top: topActive ? `${panelSize}px` : "0",
|
||||
bottom: bottomActive ? `${panelSize}px` : "0",
|
||||
|
|
@ -149,7 +153,6 @@ const Panel: React.FC<PanelProps> = ({
|
|||
const currentWidgetsCount = getCurrentWidgetCount(panel);
|
||||
const maxCapacity = calculatePanelCapacity(panel);
|
||||
|
||||
|
||||
if (currentWidgetsCount < maxCapacity) {
|
||||
addWidgetToPanel(draggedAsset, panel);
|
||||
}
|
||||
|
|
@ -283,7 +286,8 @@ const Panel: React.FC<PanelProps> = ({
|
|||
<div
|
||||
key={side}
|
||||
id="panel-wrapper"
|
||||
className={`panel ${side}-panel absolute ${hiddenPanels[selectedZone.zoneId]?.includes(side) ? "hidePanel" : ""
|
||||
className={`panel ${side}-panel absolute ${
|
||||
hiddenPanels[selectedZone.zoneId]?.includes(side) ? "hidePanel" : ""
|
||||
}`}
|
||||
style={getPanelStyle(side)}
|
||||
onDrop={(e) => handleDrop(e, side)}
|
||||
|
|
@ -297,7 +301,14 @@ const Panel: React.FC<PanelProps> = ({
|
|||
}}
|
||||
>
|
||||
<div
|
||||
className={`panel-content ${isPlaying && "fullScreen"}`}
|
||||
className={`panel-content
|
||||
${waitingPanels === side ? `${side}-closing` : ""}
|
||||
${
|
||||
!hiddenPanels[selectedZone.zoneId]?.includes(side) && waitingPanels !== side
|
||||
? `${side}-opening`
|
||||
: ""
|
||||
}
|
||||
${isPlaying ? "fullScreen" : ""}`}
|
||||
style={{
|
||||
pointerEvents:
|
||||
selectedZone.lockedPanels.includes(side) ||
|
||||
|
|
|
|||
|
|
@ -22,6 +22,9 @@ import SimulationPlayer from "../components/ui/simulation/simulationPlayer";
|
|||
import KeyPressListener from "../utils/shortcutkeys/handleShortcutKeys";
|
||||
import { useSelectedUserStore } from "../store/useCollabStore";
|
||||
import FollowPerson from "../components/templates/FollowPerson";
|
||||
import ProductionCapacity from "../components/ui/analysis/ProductionCapacity";
|
||||
import ThroughputSummary from "../components/ui/analysis/ThroughputSummary";
|
||||
import ROISummary from "../components/ui/analysis/ROISummary";
|
||||
|
||||
const Project: React.FC = () => {
|
||||
let navigate = useNavigate();
|
||||
|
|
@ -59,8 +62,10 @@ const Project: React.FC = () => {
|
|||
return (
|
||||
<div className="project-main">
|
||||
{/* <div className="analysis">
|
||||
<div className="analysis-wrapper">
|
||||
<ProductionCapacity />
|
||||
<ThroughputSummary />
|
||||
</div>
|
||||
<ROISummary />
|
||||
</div> */}
|
||||
<KeyPressListener />
|
||||
|
|
@ -79,6 +84,7 @@ const Project: React.FC = () => {
|
|||
<RealTimeVisulization />
|
||||
{activeModule !== "market" && <Tools />}
|
||||
{isPlaying && activeModule === "simulation" && <SimulationPlayer />}
|
||||
{/* {<SimulationPlayer />} */}
|
||||
{selectedUser && <FollowPerson />}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ interface ArmBotStore {
|
|||
modelUuid: string,
|
||||
updates: Partial<Omit<ArmBotStatus, 'modelUuid' | 'productId'>>
|
||||
) => void;
|
||||
clearArmBots: () => void;
|
||||
|
||||
addCurrentAction: (modelUuid: string, actionUuid: string) => void;
|
||||
removeCurrentAction: (modelUuid: string) => void;
|
||||
|
|
@ -39,6 +40,8 @@ export const useArmBotStore = create<ArmBotStore>()(
|
|||
|
||||
addArmBot: (productId, event) => {
|
||||
set((state) => {
|
||||
const exists = state.armBots.some(a => a.modelUuid === event.modelUuid);
|
||||
if (!exists) {
|
||||
state.armBots.push({
|
||||
...event,
|
||||
productId,
|
||||
|
|
@ -47,6 +50,7 @@ export const useArmBotStore = create<ArmBotStore>()(
|
|||
activeTime: 0,
|
||||
state: 'idle',
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -65,6 +69,12 @@ export const useArmBotStore = create<ArmBotStore>()(
|
|||
});
|
||||
},
|
||||
|
||||
clearArmBots: () => {
|
||||
set((state) => {
|
||||
state.armBots = [];
|
||||
});
|
||||
},
|
||||
|
||||
addCurrentAction: (modelUuid, actionUuid) => {
|
||||
set((state) => {
|
||||
const armBot = state.armBots.find(a => a.modelUuid === modelUuid);
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ interface ConveyorStore {
|
|||
modelUuid: string,
|
||||
updates: Partial<Omit<ConveyorStatus, 'modelUuid' | 'productId'>>
|
||||
) => void;
|
||||
clearConveyors: () => void;
|
||||
|
||||
setConveyorActive: (modelUuid: string, isActive: boolean) => void;
|
||||
setConveyorState: (modelUuid: string, newState: ConveyorStatus['state']) => void;
|
||||
|
|
@ -30,6 +31,8 @@ export const useConveyorStore = create<ConveyorStore>()(
|
|||
|
||||
addConveyor: (productId, event) => {
|
||||
set((state) => {
|
||||
const exists = state.conveyors.some(c => c.modelUuid === event.modelUuid);
|
||||
if (!exists) {
|
||||
state.conveyors.push({
|
||||
...event,
|
||||
productId,
|
||||
|
|
@ -38,6 +41,7 @@ export const useConveyorStore = create<ConveyorStore>()(
|
|||
activeTime: 0,
|
||||
state: 'idle',
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -56,6 +60,12 @@ export const useConveyorStore = create<ConveyorStore>()(
|
|||
});
|
||||
},
|
||||
|
||||
clearConveyors: () => {
|
||||
set((state) => {
|
||||
state.conveyors = [];
|
||||
});
|
||||
},
|
||||
|
||||
setConveyorActive: (modelUuid, isActive) => {
|
||||
set((state) => {
|
||||
const conveyor = state.conveyors.find(c => c.modelUuid === modelUuid);
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ type EventsStore = {
|
|||
// Event-level actions
|
||||
addEvent: (event: EventsSchema) => void;
|
||||
removeEvent: (modelUuid: string) => void;
|
||||
updateEvent: (modelUuid: string, updates: Partial<EventsSchema>) => void;
|
||||
updateEvent: (modelUuid: string, updates: Partial<EventsSchema>) => EventsSchema | undefined;
|
||||
|
||||
// Point-level actions
|
||||
addPoint: (modelUuid: string, point: ConveyorPointSchema | VehiclePointSchema | RoboticArmPointSchema | MachinePointSchema | StoragePointSchema) => void;
|
||||
|
|
@ -49,7 +49,9 @@ export const useEventsStore = create<EventsStore>()(
|
|||
// Event-level actions
|
||||
addEvent: (event) => {
|
||||
set((state) => {
|
||||
if (!state.events.some(e => 'modelUuid' in e && e.modelUuid === event.modelUuid)) {
|
||||
state.events.push(event);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -60,12 +62,15 @@ export const useEventsStore = create<EventsStore>()(
|
|||
},
|
||||
|
||||
updateEvent: (modelUuid, updates) => {
|
||||
let updatedEvent: EventsSchema | undefined;
|
||||
set((state) => {
|
||||
const event = state.events.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
|
||||
if (event) {
|
||||
Object.assign(event, updates);
|
||||
updatedEvent = JSON.parse(JSON.stringify(event));
|
||||
}
|
||||
});
|
||||
return updatedEvent;
|
||||
},
|
||||
|
||||
// Point-level actions
|
||||
|
|
@ -73,10 +78,15 @@ export const useEventsStore = create<EventsStore>()(
|
|||
set((state) => {
|
||||
const event = state.events.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
|
||||
if (event && 'points' in event) {
|
||||
const existingPoint = (event as ConveyorEventSchema).points.find(p => p.uuid === point.uuid);
|
||||
if (!existingPoint) {
|
||||
(event as ConveyorEventSchema).points.push(point as ConveyorPointSchema);
|
||||
}
|
||||
} else if (event && 'point' in event) {
|
||||
if (!(event as any).point || (event as any).point.uuid !== point.uuid) {
|
||||
(event as VehicleEventSchema | RoboticArmEventSchema | MachineEventSchema | StorageEventSchema).point = point as any;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -110,14 +120,15 @@ export const useEventsStore = create<EventsStore>()(
|
|||
const event = state.events.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
|
||||
if (event && 'points' in event) {
|
||||
const point = (event as ConveyorEventSchema).points.find(p => p.uuid === pointUuid);
|
||||
if (point) {
|
||||
if (point && (!point.action || point.action.actionUuid !== action.actionUuid)) {
|
||||
point.action = action as any;
|
||||
}
|
||||
} else if (event && 'point' in event && (event as any).point.uuid === pointUuid) {
|
||||
if ('action' in (event as any).point) {
|
||||
(event as any).point.action = action;
|
||||
} else if ('actions' in (event as any).point) {
|
||||
(event as any).point.actions.push(action);
|
||||
const point = (event as any).point;
|
||||
if ('action' in point && (!point.action || point.action.actionUuid !== action.actionUuid)) {
|
||||
point.action = action;
|
||||
} else if ('actions' in point && !point.actions.some((a: any) => a.actionUuid === action.actionUuid)) {
|
||||
point.actions.push(action);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -180,18 +191,22 @@ export const useEventsStore = create<EventsStore>()(
|
|||
if ('points' in event) {
|
||||
for (const point of (event as ConveyorEventSchema).points) {
|
||||
if (point.action && point.action.actionUuid === actionUuid) {
|
||||
if (!point.action.triggers.some(t => t.triggerUuid === trigger.triggerUuid)) {
|
||||
point.action.triggers.push(trigger);
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
} else if ('point' in event) {
|
||||
const point = (event as any).point;
|
||||
const point: MachinePointSchema | VehiclePointSchema = (event as any).point;
|
||||
if ('action' in point && point.action.actionUuid === actionUuid) {
|
||||
if (!point.action.triggers.some(t => t.triggerUuid === trigger.triggerUuid)) {
|
||||
point.action.triggers.push(trigger);
|
||||
}
|
||||
return;
|
||||
} else if ('actions' in point) {
|
||||
const action = point.actions.find((a: any) => a.actionUuid === actionUuid);
|
||||
if (action) {
|
||||
const action = (point as RoboticArmPointSchema).actions.find((a) => a.actionUuid === actionUuid);
|
||||
if (action && !action.triggers.some(t => t.triggerUuid === trigger.triggerUuid)) {
|
||||
action.triggers.push(trigger);
|
||||
return;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,23 +4,23 @@ import { immer } from 'zustand/middleware/immer';
|
|||
interface MachineStore {
|
||||
machines: MachineStatus[];
|
||||
|
||||
// Actions
|
||||
addMachine: (productId: string, machine: MachineEventSchema) => void;
|
||||
removeMachine: (modelUuid: string) => void;
|
||||
updateMachine: (
|
||||
modelUuid: string,
|
||||
updates: Partial<Omit<MachineStatus, 'modelUuid' | 'productId'>>
|
||||
) => void;
|
||||
clearMachines: () => void;
|
||||
|
||||
addCurrentAction: (modelUuid: string, actionUuid: string) => void;
|
||||
removeCurrentAction: (modelUuid: string) => void;
|
||||
|
||||
// Status updates
|
||||
setMachineActive: (modelUuid: string, isActive: boolean) => void;
|
||||
setMachineState: (modelUuid: string, newState: MachineStatus['state']) => void;
|
||||
|
||||
// Time tracking
|
||||
incrementActiveTime: (modelUuid: string, incrementBy: number) => void;
|
||||
incrementIdleTime: (modelUuid: string, incrementBy: number) => void;
|
||||
|
||||
// Helpers
|
||||
getMachineById: (modelUuid: string) => MachineStatus | undefined;
|
||||
getMachinesByProduct: (productId: string) => MachineStatus[];
|
||||
getMachinesBystate: (state: string) => MachineStatus[];
|
||||
|
|
@ -32,9 +32,10 @@ export const useMachineStore = create<MachineStore>()(
|
|||
immer((set, get) => ({
|
||||
machines: [],
|
||||
|
||||
// Actions
|
||||
addMachine: (productId, machine) => {
|
||||
set((state) => {
|
||||
const exists = state.machines.some(m => m.modelUuid === machine.modelUuid);
|
||||
if (!exists) {
|
||||
state.machines.push({
|
||||
...machine,
|
||||
productId,
|
||||
|
|
@ -43,6 +44,7 @@ export const useMachineStore = create<MachineStore>()(
|
|||
activeTime: 0,
|
||||
state: 'idle',
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -61,7 +63,36 @@ export const useMachineStore = create<MachineStore>()(
|
|||
});
|
||||
},
|
||||
|
||||
// Status updates
|
||||
clearMachines: () => {
|
||||
set((state) => {
|
||||
state.machines = [];
|
||||
});
|
||||
},
|
||||
|
||||
addCurrentAction: (modelUuid) => {
|
||||
set((state) => {
|
||||
const armBot = state.machines.find(a => a.modelUuid === modelUuid);
|
||||
if (armBot) {
|
||||
const action = armBot.point.action;
|
||||
if (action) {
|
||||
armBot.currentAction = {
|
||||
actionUuid: action.actionUuid,
|
||||
actionName: action.actionName,
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
removeCurrentAction: (modelUuid) => {
|
||||
set((state) => {
|
||||
const armBot = state.machines.find(a => a.modelUuid === modelUuid);
|
||||
if (armBot) {
|
||||
armBot.currentAction = undefined;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
setMachineActive: (modelUuid, isActive) => {
|
||||
set((state) => {
|
||||
const machine = state.machines.find(m => m.modelUuid === modelUuid);
|
||||
|
|
@ -80,7 +111,6 @@ export const useMachineStore = create<MachineStore>()(
|
|||
});
|
||||
},
|
||||
|
||||
// Time tracking
|
||||
incrementActiveTime: (modelUuid, incrementBy) => {
|
||||
set((state) => {
|
||||
const machine = state.machines.find(m => m.modelUuid === modelUuid);
|
||||
|
|
@ -99,7 +129,6 @@ export const useMachineStore = create<MachineStore>()(
|
|||
});
|
||||
},
|
||||
|
||||
// Helpers
|
||||
getMachineById: (modelUuid) => {
|
||||
return get().machines.find(m => m.modelUuid === modelUuid);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -33,27 +33,30 @@ type ProductsStore = {
|
|||
pointUuid: string,
|
||||
action: ConveyorPointSchema['action'] | VehiclePointSchema['action'] | RoboticArmPointSchema['actions'][0] | MachinePointSchema['action'] | StoragePointSchema['action']
|
||||
) => EventsSchema | undefined;
|
||||
removeAction: (actionUuid: string) => EventsSchema | undefined;
|
||||
removeAction: (productId: string, actionUuid: string) => EventsSchema | undefined;
|
||||
updateAction: (
|
||||
productId: string,
|
||||
actionUuid: string,
|
||||
updates: Partial<ConveyorPointSchema['action'] | VehiclePointSchema['action'] | RoboticArmPointSchema['actions'][0] | MachinePointSchema['action'] | StoragePointSchema['action']>
|
||||
) => EventsSchema | undefined;
|
||||
|
||||
// Trigger-level actions
|
||||
addTrigger: (
|
||||
productId: string,
|
||||
actionUuid: string,
|
||||
trigger: TriggerSchema
|
||||
) => void;
|
||||
removeTrigger: (triggerUuid: string) => void;
|
||||
) => EventsSchema | undefined;
|
||||
removeTrigger: (productId: string, triggerUuid: string) => EventsSchema | undefined;
|
||||
updateTrigger: (
|
||||
productId: string,
|
||||
triggerUuid: string,
|
||||
updates: Partial<TriggerSchema>
|
||||
) => void;
|
||||
|
||||
// Renaming functions
|
||||
renameProduct: (productId: string, newName: string) => void;
|
||||
renameAction: (actionUuid: string, newName: string) => EventsSchema | undefined;
|
||||
renameTrigger: (triggerUuid: string, newName: string) => void;
|
||||
renameAction: (productId: string, actionUuid: string, newName: string) => EventsSchema | undefined;
|
||||
renameTrigger: (productId: string, triggerUuid: string, newName: string) => void;
|
||||
|
||||
// Helper functions
|
||||
getProductById: (productId: string) => { productName: string; productId: string; eventDatas: EventsSchema[] } | undefined;
|
||||
|
|
@ -71,12 +74,15 @@ export const useProductStore = create<ProductsStore>()(
|
|||
// Product-level actions
|
||||
addProduct: (productName, productId) => {
|
||||
set((state) => {
|
||||
const existingProduct = state.products.find(p => p.productId === productId);
|
||||
if (!existingProduct) {
|
||||
const newProduct = {
|
||||
productName,
|
||||
productId: productId,
|
||||
eventDatas: []
|
||||
};
|
||||
state.products.push(newProduct);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -106,8 +112,11 @@ export const useProductStore = create<ProductsStore>()(
|
|||
set((state) => {
|
||||
const product = state.products.find(p => p.productId === productId);
|
||||
if (product) {
|
||||
const existingEvent = product.eventDatas.find(e => 'modelUuid' in e && e.modelUuid === event.modelUuid);
|
||||
if (!existingEvent) {
|
||||
product.eventDatas.push(event);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -120,7 +129,7 @@ export const useProductStore = create<ProductsStore>()(
|
|||
});
|
||||
},
|
||||
|
||||
deleteEvent: (modelUuid: string) => {
|
||||
deleteEvent: (modelUuid) => {
|
||||
set((state) => {
|
||||
for (const product of state.products) {
|
||||
product.eventDatas = product.eventDatas.filter(e => 'modelUuid' in e && e.modelUuid !== modelUuid);
|
||||
|
|
@ -150,11 +159,17 @@ export const useProductStore = create<ProductsStore>()(
|
|||
if (product) {
|
||||
const event = product.eventDatas.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
|
||||
if (event && 'points' in event) {
|
||||
const existingPoint = (event as ConveyorEventSchema).points.find(p => p.uuid === point.uuid);
|
||||
if (!existingPoint) {
|
||||
(event as ConveyorEventSchema).points.push(point as ConveyorPointSchema);
|
||||
}
|
||||
} else if (event && 'point' in event) {
|
||||
const existingPoint = (event as any).point?.uuid === point.uuid;
|
||||
if (!existingPoint) {
|
||||
(event as VehicleEventSchema | RoboticArmEventSchema | MachineEventSchema | StorageEventSchema).point = point as any;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -198,28 +213,34 @@ export const useProductStore = create<ProductsStore>()(
|
|||
const event = product.eventDatas.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
|
||||
if (event && 'points' in event) {
|
||||
const point = (event as ConveyorEventSchema).points.find(p => p.uuid === pointUuid);
|
||||
if (point) {
|
||||
if (point && (!point.action || point.action.actionUuid !== action.actionUuid)) {
|
||||
point.action = action as any;
|
||||
updatedEvent = JSON.parse(JSON.stringify(event));
|
||||
}
|
||||
} else if (event && 'point' in event && (event as any).point.uuid === pointUuid) {
|
||||
if ('action' in (event as any).point) {
|
||||
if (!(event as any).point.action || (event as any).point.action.actionUuid !== action.actionUuid) {
|
||||
(event as any).point.action = action;
|
||||
updatedEvent = JSON.parse(JSON.stringify(event));
|
||||
}
|
||||
} else if ('actions' in (event as any).point) {
|
||||
const existingAction = (event as any).point.actions.find((a: any) => a.actionUuid === action.actionUuid);
|
||||
if (!existingAction) {
|
||||
(event as any).point.actions.push(action);
|
||||
updatedEvent = JSON.parse(JSON.stringify(event));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
return updatedEvent;
|
||||
},
|
||||
|
||||
removeAction: (actionUuid: string) => {
|
||||
removeAction: (productId, actionUuid) => {
|
||||
let updatedEvent: EventsSchema | undefined;
|
||||
set((state) => {
|
||||
for (const product of state.products) {
|
||||
const product = state.products.find(p => p.productId === productId);
|
||||
if (product) {
|
||||
for (const event of product.eventDatas) {
|
||||
if ('points' in event) {
|
||||
// Handle ConveyorEventSchema
|
||||
|
|
@ -248,10 +269,11 @@ export const useProductStore = create<ProductsStore>()(
|
|||
return updatedEvent;
|
||||
},
|
||||
|
||||
updateAction: (actionUuid, updates) => {
|
||||
updateAction: (productId, actionUuid, updates) => {
|
||||
let updatedEvent: EventsSchema | undefined;
|
||||
set((state) => {
|
||||
for (const product of state.products) {
|
||||
const product = state.products.find(p => p.productId === productId);
|
||||
if (product) {
|
||||
for (const event of product.eventDatas) {
|
||||
if ('points' in event) {
|
||||
for (const point of (event as ConveyorEventSchema).points) {
|
||||
|
|
@ -283,26 +305,40 @@ export const useProductStore = create<ProductsStore>()(
|
|||
},
|
||||
|
||||
// Trigger-level actions
|
||||
addTrigger: (actionUuid, trigger) => {
|
||||
addTrigger: (productId, actionUuid, trigger) => {
|
||||
let updatedEvent: EventsSchema | undefined;
|
||||
set((state) => {
|
||||
for (const product of state.products) {
|
||||
const product = state.products.find(p => p.productId === productId);
|
||||
if (product) {
|
||||
for (const event of product.eventDatas) {
|
||||
if ('points' in event) {
|
||||
for (const point of (event as ConveyorEventSchema).points) {
|
||||
if (point.action && point.action.actionUuid === actionUuid) {
|
||||
const existingTrigger = point.action.triggers.find(t => t.triggerUuid === trigger.triggerUuid);
|
||||
if (!existingTrigger) {
|
||||
point.action.triggers.push(trigger);
|
||||
updatedEvent = JSON.parse(JSON.stringify(event));
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
} else if ('point' in event) {
|
||||
const point = (event as any).point;
|
||||
if ('action' in point && point.action.actionUuid === actionUuid) {
|
||||
const existingTrigger = point.action.triggers.find((t: any) => t.triggerUuid === trigger.triggerUuid);
|
||||
if (!existingTrigger) {
|
||||
point.action.triggers.push(trigger);
|
||||
updatedEvent = JSON.parse(JSON.stringify(event));
|
||||
}
|
||||
return;
|
||||
} else if ('actions' in point) {
|
||||
const action = point.actions.find((a: any) => a.actionUuid === actionUuid);
|
||||
if (action) {
|
||||
const existingTrigger = action.triggers.find((t: any) => t.triggerUuid === trigger.triggerUuid);
|
||||
if (!existingTrigger) {
|
||||
action.triggers.push(trigger);
|
||||
updatedEvent = JSON.parse(JSON.stringify(event));
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
|
@ -310,26 +346,41 @@ export const useProductStore = create<ProductsStore>()(
|
|||
}
|
||||
}
|
||||
});
|
||||
return updatedEvent;
|
||||
},
|
||||
|
||||
removeTrigger: (triggerUuid) => {
|
||||
removeTrigger: (productId, triggerUuid) => {
|
||||
let updatedEvent: EventsSchema | undefined;
|
||||
set((state) => {
|
||||
for (const product of state.products) {
|
||||
const product = state.products.find(p => p.productId === productId);
|
||||
if (product) {
|
||||
for (const event of product.eventDatas) {
|
||||
if ('points' in event) {
|
||||
for (const point of (event as ConveyorEventSchema).points) {
|
||||
if (point.action && 'triggers' in point.action) {
|
||||
const Trigger = point.action.triggers.find(t => t.triggerUuid === triggerUuid);
|
||||
if (Trigger) {
|
||||
point.action.triggers = point.action.triggers.filter(t => t.triggerUuid !== triggerUuid);
|
||||
updatedEvent = JSON.parse(JSON.stringify(event));
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if ('point' in event) {
|
||||
const point = (event as any).point;
|
||||
if ('action' in point && 'triggers' in point.action) {
|
||||
const Trigger = point.action.triggers.find((t: any) => t.triggerUuid === triggerUuid);
|
||||
if (Trigger) {
|
||||
point.action.triggers = point.action.triggers.filter((t: any) => t.triggerUuid !== triggerUuid);
|
||||
updatedEvent = JSON.parse(JSON.stringify(event));
|
||||
}
|
||||
} else if ('actions' in point) {
|
||||
for (const action of point.actions) {
|
||||
if ('triggers' in action) {
|
||||
const Trigger = action.triggers.find((t: any) => t.triggerUuid === triggerUuid);
|
||||
if (Trigger) {
|
||||
action.triggers = action.triggers.filter((t: any) => t.triggerUuid !== triggerUuid);
|
||||
updatedEvent = JSON.parse(JSON.stringify(event));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -337,11 +388,13 @@ export const useProductStore = create<ProductsStore>()(
|
|||
}
|
||||
}
|
||||
});
|
||||
return updatedEvent;
|
||||
},
|
||||
|
||||
updateTrigger: (triggerUuid, updates) => {
|
||||
updateTrigger: (productId, triggerUuid, updates) => {
|
||||
set((state) => {
|
||||
for (const product of state.products) {
|
||||
const product = state.products.find(p => p.productId === productId);
|
||||
if (product) {
|
||||
for (const event of product.eventDatas) {
|
||||
if ('points' in event) {
|
||||
for (const point of (event as ConveyorEventSchema).points) {
|
||||
|
|
@ -388,10 +441,11 @@ export const useProductStore = create<ProductsStore>()(
|
|||
});
|
||||
},
|
||||
|
||||
renameAction: (actionUuid, newName) => {
|
||||
renameAction: (productId, actionUuid, newName) => {
|
||||
let updatedEvent: EventsSchema | undefined;
|
||||
set((state) => {
|
||||
for (const product of state.products) {
|
||||
const product = state.products.find(p => p.productId === productId);
|
||||
if (product) {
|
||||
for (const event of product.eventDatas) {
|
||||
if ('points' in event) {
|
||||
for (const point of (event as ConveyorEventSchema).points) {
|
||||
|
|
@ -422,9 +476,10 @@ export const useProductStore = create<ProductsStore>()(
|
|||
return updatedEvent;
|
||||
},
|
||||
|
||||
renameTrigger: (triggerUuid, newName) => {
|
||||
renameTrigger: (productId, triggerUuid, newName) => {
|
||||
set((state) => {
|
||||
for (const product of state.products) {
|
||||
const product = state.products.find(p => p.productId === productId);
|
||||
if (product) {
|
||||
for (const event of product.eventDatas) {
|
||||
if ('points' in event) {
|
||||
for (const point of (event as ConveyorEventSchema).points) {
|
||||
|
|
|
|||
|
|
@ -115,3 +115,35 @@ export const useSelectedAction = create<SelectedActionState>()(
|
|||
},
|
||||
}))
|
||||
);
|
||||
|
||||
interface IsDraggingState {
|
||||
isDragging: "start" | "end" | null;
|
||||
setIsDragging: (state: "start" | "end" | null) => void;
|
||||
}
|
||||
|
||||
export const useIsDragging = create<IsDraggingState>()(
|
||||
immer((set) => ({
|
||||
isDragging: null,
|
||||
setIsDragging: (state) => {
|
||||
set((s) => {
|
||||
s.isDragging = state;
|
||||
});
|
||||
},
|
||||
}))
|
||||
);
|
||||
|
||||
interface IsRotatingState {
|
||||
isRotating: "start" | "end" | null;
|
||||
setIsRotating: (state: "start" | "end" | null) => void;
|
||||
}
|
||||
|
||||
export const useIsRotating = create<IsRotatingState>()(
|
||||
immer((set) => ({
|
||||
isRotating: null,
|
||||
setIsRotating: (state) => {
|
||||
set((s) => {
|
||||
s.isRotating = state;
|
||||
});
|
||||
},
|
||||
}))
|
||||
);
|
||||
|
|
@ -4,26 +4,22 @@ import { immer } from 'zustand/middleware/immer';
|
|||
interface StorageUnitStore {
|
||||
storageUnits: StorageUnitStatus[];
|
||||
|
||||
// Actions
|
||||
addStorageUnit: (productId: string, storageUnit: StorageEventSchema) => void;
|
||||
removeStorageUnit: (modelUuid: string) => void;
|
||||
updateStorageUnit: (
|
||||
modelUuid: string,
|
||||
updates: Partial<Omit<StorageUnitStatus, 'modelUuid' | 'productId'>>
|
||||
) => void;
|
||||
clearStorageUnits: () => void;
|
||||
|
||||
// Status updates
|
||||
setStorageUnitActive: (modelUuid: string, isActive: boolean) => void;
|
||||
setStorageUnitState: (modelUuid: string, newState: StorageUnitStatus['state']) => void;
|
||||
|
||||
// Load updates
|
||||
updateStorageUnitLoad: (modelUuid: string, incrementBy: number) => void;
|
||||
|
||||
// Time tracking
|
||||
incrementActiveTime: (modelUuid: string, incrementBy: number) => void;
|
||||
incrementIdleTime: (modelUuid: string, incrementBy: number) => void;
|
||||
|
||||
// Helpers
|
||||
getStorageUnitById: (modelUuid: string) => StorageUnitStatus | undefined;
|
||||
getStorageUnitsByProduct: (productId: string) => StorageUnitStatus[];
|
||||
getStorageUnitsBystate: (state: string) => StorageUnitStatus[];
|
||||
|
|
@ -37,9 +33,10 @@ export const useStorageUnitStore = create<StorageUnitStore>()(
|
|||
immer((set, get) => ({
|
||||
storageUnits: [],
|
||||
|
||||
// Actions
|
||||
addStorageUnit: (productId, storageUnit) => {
|
||||
set((state) => {
|
||||
const exists = state.storageUnits.some(s => s.modelUuid === storageUnit.modelUuid);
|
||||
if (!exists) {
|
||||
state.storageUnits.push({
|
||||
...storageUnit,
|
||||
productId,
|
||||
|
|
@ -49,6 +46,7 @@ export const useStorageUnitStore = create<StorageUnitStore>()(
|
|||
currentLoad: 0,
|
||||
state: 'idle',
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -67,7 +65,12 @@ export const useStorageUnitStore = create<StorageUnitStore>()(
|
|||
});
|
||||
},
|
||||
|
||||
// Status updates
|
||||
clearStorageUnits: () => {
|
||||
set(() => ({
|
||||
storageUnits: [],
|
||||
}));
|
||||
},
|
||||
|
||||
setStorageUnitActive: (modelUuid, isActive) => {
|
||||
set((state) => {
|
||||
const unit = state.storageUnits.find(s => s.modelUuid === modelUuid);
|
||||
|
|
@ -86,7 +89,6 @@ export const useStorageUnitStore = create<StorageUnitStore>()(
|
|||
});
|
||||
},
|
||||
|
||||
// Load updates
|
||||
updateStorageUnitLoad: (modelUuid, incrementBy) => {
|
||||
set((state) => {
|
||||
const unit = state.storageUnits.find(s => s.modelUuid === modelUuid);
|
||||
|
|
@ -96,7 +98,6 @@ export const useStorageUnitStore = create<StorageUnitStore>()(
|
|||
});
|
||||
},
|
||||
|
||||
// Time tracking
|
||||
incrementActiveTime: (modelUuid, incrementBy) => {
|
||||
set((state) => {
|
||||
const unit = state.storageUnits.find(s => s.modelUuid === modelUuid);
|
||||
|
|
@ -115,7 +116,6 @@ export const useStorageUnitStore = create<StorageUnitStore>()(
|
|||
});
|
||||
},
|
||||
|
||||
// Helpers
|
||||
getStorageUnitById: (modelUuid) => {
|
||||
return get().storageUnits.find(s => s.modelUuid === modelUuid);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ interface VehiclesStore {
|
|||
modelUuid: string,
|
||||
updates: Partial<Omit<VehicleStatus, 'modelUuid' | 'productId'>>
|
||||
) => void;
|
||||
clearvehicles: () => void;
|
||||
|
||||
setVehicleActive: (modelUuid: string, isActive: boolean) => void;
|
||||
updateSteeringAngle: (modelUuid: string, steeringAngle: number) => void;
|
||||
|
|
@ -41,6 +42,8 @@ export const useVehicleStore = create<VehiclesStore>()(
|
|||
|
||||
addVehicle: (productId, event) => {
|
||||
set((state) => {
|
||||
const exists = state.vehicles.some(v => v.modelUuid === event.modelUuid);
|
||||
if (!exists) {
|
||||
state.vehicles.push({
|
||||
...event,
|
||||
productId,
|
||||
|
|
@ -50,6 +53,7 @@ export const useVehicleStore = create<VehiclesStore>()(
|
|||
currentLoad: 0,
|
||||
distanceTraveled: 0,
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -68,6 +72,12 @@ export const useVehicleStore = create<VehiclesStore>()(
|
|||
});
|
||||
},
|
||||
|
||||
clearvehicles: () => {
|
||||
set((state) => {
|
||||
state.vehicles = [];
|
||||
});
|
||||
},
|
||||
|
||||
setVehicleActive: (modelUuid, isActive) => {
|
||||
set((state) => {
|
||||
const vehicle = state.vehicles.find(v => v.modelUuid === modelUuid);
|
||||
|
|
|
|||
|
|
@ -16,12 +16,13 @@ $text-button-color: #f3f3fd;
|
|||
$text-color-dark: #f3f3fd;
|
||||
$text-disabled-dark: #6f6f7a;
|
||||
$input-text-color-dark: #b5b5c8;
|
||||
$highlight-text-color-dark: #b392f0;
|
||||
$highlight-text-color-dark: #d2baff;
|
||||
$text-button-color-dark: #f3f3fd;
|
||||
|
||||
// background colors
|
||||
// ---------- light mode ----------
|
||||
$background-color: linear-gradient(-45deg, #fcfdfdcc 0%, #fcfdfd99 100%);
|
||||
$background-color: linear-gradient(-45deg, #fcfdfd71 0%, #fcfdfd79 100%);
|
||||
$background-color-solid-gradient: linear-gradient(-45deg, #fcfdfd 0%, #fcfdfd 100%);
|
||||
$background-color-solid: #fcfdfd;
|
||||
$background-color-secondary: #fcfdfd4d;
|
||||
$background-color-accent: #6f42c1;
|
||||
|
|
@ -44,6 +45,7 @@ $background-radial-gray-gradient: radial-gradient(
|
|||
|
||||
// ---------- dark mode ----------
|
||||
$background-color-dark: linear-gradient(-45deg, #333333b3 0%, #2d2437b3 100%);
|
||||
$background-color-solid-gradient-dark: linear-gradient(-45deg, #333333 0%, #2d2437 100%);
|
||||
$background-color-solid-dark: #19191d;
|
||||
$background-color-secondary-dark: #19191d99;
|
||||
$background-color-accent-dark: #6f42c1;
|
||||
|
|
@ -105,19 +107,10 @@ $color5: #c7a8ff;
|
|||
// old variables
|
||||
$accent-color: #6f42c1;
|
||||
$accent-color-dark: #c4abf1;
|
||||
$highlight-accent-color: #e0dfff;
|
||||
$highlight-accent-color-dark: #403e6a;
|
||||
|
||||
// $background-color: #fcfdfd;
|
||||
// $background-color-dark: #19191d;
|
||||
// $background-color-secondary: #e1e0ff80;
|
||||
// $background-color-secondary-dark: #39394f99;
|
||||
$background-color-gray: #f3f3f3;
|
||||
$background-color-gray-dark: #232323;
|
||||
|
||||
// $border-color: #e0dfff;
|
||||
// $border-color-dark: #403e6a;
|
||||
|
||||
$shadow-color: #3c3c431a;
|
||||
$shadow-color-dark: #8f8f8f1a;
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
// background colors
|
||||
--background-color: #{$background-color};
|
||||
--background-color-solid: #{$background-color-solid};
|
||||
--background-color-solid-gradient: #{$background-color-solid-gradient};
|
||||
--background-color-secondary: #{$background-color-secondary};
|
||||
--background-color-accent: #{$background-color-accent};
|
||||
--background-color-button: #{$background-color-button};
|
||||
|
|
@ -61,6 +62,7 @@
|
|||
|
||||
// background colors
|
||||
--background-color: #{$background-color-dark};
|
||||
--background-color-solid-gradient: #{$background-color-solid-gradient-dark};
|
||||
--background-color-solid: #{$background-color-solid-dark};
|
||||
--background-color-secondary: #{$background-color-secondary-dark};
|
||||
--background-color-accent: #{$background-color-accent-dark};
|
||||
|
|
|
|||
|
|
@ -239,8 +239,6 @@
|
|||
height: 125px;
|
||||
overflow-y: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.semi-circle {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
|
|
@ -248,16 +246,18 @@
|
|||
position: relative;
|
||||
transition: background 0.5s ease;
|
||||
}
|
||||
|
||||
.progress-cover {
|
||||
position: absolute;
|
||||
width: 75%;
|
||||
height: 75%;
|
||||
top: 12.5%;
|
||||
left: 12.5%;
|
||||
background-color: var(--background-color);
|
||||
background: #000000cc;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.label-wrapper {
|
||||
.label {
|
||||
|
|
@ -305,14 +305,7 @@
|
|||
text-align: left;
|
||||
}
|
||||
|
||||
.total-row {
|
||||
background-color: #f4f4f4;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.net-profit-row {
|
||||
background-color: #dff0d8;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
align-items: start;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
// pointer-events: none;k
|
||||
// pointer-events: none;
|
||||
z-index: 10000;
|
||||
|
||||
.analysis-wrapper {
|
||||
|
|
@ -25,6 +25,7 @@
|
|||
padding: 8px;
|
||||
|
||||
.analysis-card-wrapper {
|
||||
width: 100%;
|
||||
background: var(--background-color);
|
||||
border-radius: 14px;
|
||||
padding: 16px;
|
||||
|
|
@ -66,7 +67,8 @@
|
|||
|
||||
.progress-bar {
|
||||
position: relative;
|
||||
width: 36px;
|
||||
// width: 36px;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
border-radius: 13px;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -51,9 +51,6 @@ input[type="number"] {
|
|||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Firefox
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
.input-value {
|
||||
|
|
@ -105,7 +102,7 @@ input[type="number"] {
|
|||
.search-wrapper {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
padding: 8px 10px;
|
||||
padding: 0px 10px;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
|
||||
|
|
@ -140,15 +137,16 @@ input[type="number"] {
|
|||
.clear-button {
|
||||
@include flex-center;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
border: none;
|
||||
border-radius: #{$border-radius-large};
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
|
||||
&:hover {
|
||||
background: var(--highlight-accent-color);
|
||||
background: var(--background-color-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -219,9 +217,9 @@ input[type="number"] {
|
|||
.regularDropdown-container {
|
||||
width: 100%;
|
||||
min-width: 80px;
|
||||
padding: 2px 4px;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
border-radius: #{$border-radius-large};
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
|
|
@ -230,7 +228,7 @@ input[type="number"] {
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
border-radius: #{$border-radius-large};
|
||||
}
|
||||
|
||||
.dropdown-options {
|
||||
|
|
@ -238,7 +236,7 @@ input[type="number"] {
|
|||
width: 100%;
|
||||
background: var(--background-color);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: #{$border-radius-small};
|
||||
border-radius: #{$border-radius-large};
|
||||
z-index: 10;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
|
|
@ -255,7 +253,7 @@ input[type="number"] {
|
|||
padding: 2px 4px;
|
||||
cursor: pointer;
|
||||
flex-direction: row !important;
|
||||
border-radius: #{$border-radius-small};
|
||||
border-radius: #{$border-radius-medium};
|
||||
|
||||
&:hover {
|
||||
color: var(--highlight-text-color);
|
||||
|
|
@ -272,17 +270,19 @@ input[type="number"] {
|
|||
.input.default {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
@include flex-center;
|
||||
gap: 6px;
|
||||
|
||||
.dropdown {
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
position: absolute;
|
||||
background: var(--highlight-accent-color);
|
||||
border-radius: #{$border-radius-small};
|
||||
padding: 1px 4px;
|
||||
height: 100%;
|
||||
background: var(--background-color-drop-down-gradient);
|
||||
border-radius: #{$border-radius-extra-large};
|
||||
padding: 1px 8px;
|
||||
outline: 1px solid var(--border-color);
|
||||
|
||||
.active-option {
|
||||
color: var(--accent-color);
|
||||
line-height: 22px;
|
||||
color: var(--text-color);
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
}
|
||||
|
|
@ -304,10 +304,10 @@ input[type="number"] {
|
|||
|
||||
.eye-picker-button {
|
||||
height: 24px;
|
||||
min-width: 24px;
|
||||
min-width: 36px;
|
||||
@include flex-center;
|
||||
border-radius: #{$border-radius-small};
|
||||
background: var(--background-color-secondary);
|
||||
border-radius: #{$border-radius-large};
|
||||
background: var(--background-color-drop-down-gradient);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -326,6 +326,9 @@ input[type="number"] {
|
|||
background: var(--background-color) !important;
|
||||
border: 1px solid var(--border-color) !important;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
border-radius: #{$border-radius-extra-large};
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
.label {
|
||||
white-space: nowrap;
|
||||
|
|
@ -333,12 +336,6 @@ input[type="number"] {
|
|||
max-width: 80%;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
// font-size: 12px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: #333333;
|
||||
}
|
||||
|
|
@ -354,7 +351,8 @@ input[type="number"] {
|
|||
right: -16px;
|
||||
background: var(--background-color);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 5px;
|
||||
border-radius: #{$border-radius-large};
|
||||
backdrop-filter: blur(18px);
|
||||
box-shadow: #{$box-shadow-medium};
|
||||
z-index: 1000;
|
||||
min-width: 200px;
|
||||
|
|
@ -364,13 +362,11 @@ input[type="number"] {
|
|||
.dropdown-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding: 2px;
|
||||
|
||||
.nested-dropdown {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.loading {
|
||||
|
|
@ -409,15 +405,16 @@ input[type="number"] {
|
|||
|
||||
.dropdown-item {
|
||||
display: block;
|
||||
padding: 5px 10px;
|
||||
padding: 4px 10px;
|
||||
text-decoration: none;
|
||||
color: var(--text-color);
|
||||
font-size: var(--font-size-regular);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
border-radius: #{$border-radius-large};
|
||||
&:hover {
|
||||
background: var(--background-color);
|
||||
color: var(--accent-color);
|
||||
background: var(--highlight-accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -428,24 +425,25 @@ input[type="number"] {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 5px 10px;
|
||||
padding: 4px 10px;
|
||||
cursor: pointer;
|
||||
font-size: var(--font-size-regular);
|
||||
color: var(--text-color);
|
||||
transition: background-color 0.3s ease;
|
||||
border-radius: #{$border-radius-small};
|
||||
border-radius: #{$border-radius-large};
|
||||
|
||||
.arrow-container {
|
||||
@include flex-center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--background-color);
|
||||
color: var(--accent-color);
|
||||
background: var(--highlight-accent-color);
|
||||
}
|
||||
|
||||
&.open {
|
||||
color: var(--accent-color);
|
||||
background: var(--highlight-accent-color);
|
||||
color: var(--text-button-color);
|
||||
background: var(--background-color-accent);
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
|
@ -649,7 +647,7 @@ input[type="number"] {
|
|||
padding: 2px 32px;
|
||||
border: none;
|
||||
border-radius: #{$border-radius-large};
|
||||
color: var(--text-color);
|
||||
color: var(--text-button-color);
|
||||
background: var(--background-color-button);
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -34,9 +34,8 @@
|
|||
padding: 12px;
|
||||
}
|
||||
|
||||
.list-container {
|
||||
li.list-container {
|
||||
padding: 2px;
|
||||
// margin-left: 10px;
|
||||
overflow: hidden;
|
||||
|
||||
.list-item {
|
||||
|
|
@ -45,12 +44,14 @@
|
|||
text-align: center;
|
||||
padding: 4px 8px;
|
||||
border-radius: #{$border-radius-large};
|
||||
|
||||
.zone-header{
|
||||
@include flex-center;
|
||||
.value {
|
||||
width: 100%;
|
||||
text-align: start;
|
||||
max-width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
.options-container {
|
||||
@include flex-center;
|
||||
|
|
@ -61,11 +62,18 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
&:first-child{
|
||||
background: var(--highlight-accent-color);
|
||||
.input-value{
|
||||
color: var(--highlight-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background: var(--highlight-accent-color);
|
||||
color: var(--primary-color);
|
||||
.input-value{
|
||||
color: var(--highlight-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@
|
|||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: 100px 50px;
|
||||
padding-bottom: 32px;
|
||||
padding: 10px;
|
||||
padding-top: 100px;
|
||||
|
||||
.marketplace-container {
|
||||
position: relative;
|
||||
|
|
@ -59,8 +59,9 @@
|
|||
.regularDropdown-container {
|
||||
max-width: 159px;
|
||||
height: 100%;
|
||||
border-radius: #{$border-radius-large};
|
||||
border-radius: #{$border-radius-extra-large};
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 0 10px;
|
||||
.dropdown-header {
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -68,8 +69,9 @@
|
|||
|
||||
.button {
|
||||
padding: 5px 20px;
|
||||
border: 1px solid var(--accent-color);
|
||||
border-radius: 14px;
|
||||
background: var(--background-color-button);
|
||||
color: var(--text-button-color);
|
||||
}
|
||||
|
||||
.rating-container {
|
||||
|
|
@ -106,14 +108,14 @@
|
|||
.cards-wrapper-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 28px;
|
||||
gap: 18px;
|
||||
|
||||
.card-container {
|
||||
width: calc(25% - 23px);
|
||||
width: calc(25% - 14px);
|
||||
border-radius: 18px;
|
||||
padding: 12px;
|
||||
box-shadow: 0px 2px 10.5px 0px #0000000d;
|
||||
background: var(--background-color);
|
||||
background: var(--background-color-solid-gradient);
|
||||
border: 1px solid var(--border-color);
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
gap: 2px;
|
||||
position: relative;
|
||||
border-radius: #{$border-radius-extra-large};
|
||||
background: var(--background-color-drop-down);
|
||||
background: var(--background-color-drop-down-gradient);
|
||||
padding: 3px 8px;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
|
|
@ -25,11 +25,12 @@
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
.more-options-button {
|
||||
@include flex-center;
|
||||
border-radius: #{$border-radius-small};
|
||||
border-radius: #{$border-radius-medium};
|
||||
height: 22px;
|
||||
position: relative;
|
||||
&:hover {
|
||||
|
|
@ -52,7 +53,7 @@
|
|||
top: 32px;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
background: var(--background-color);
|
||||
background: var(--background-color-solid);
|
||||
color: var(--text-color);
|
||||
box-shadow: var(--box-shadow-light);
|
||||
border-radius: 8px;
|
||||
|
|
@ -69,7 +70,7 @@
|
|||
position: relative;
|
||||
height: 100%;
|
||||
padding: 4px 8px 4px 12px;
|
||||
border-radius: #{$border-radius-small};
|
||||
border-radius: #{$border-radius-medium};
|
||||
.menu-button {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
|
|
@ -89,19 +90,21 @@
|
|||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
background: var(--background-color);
|
||||
left: 103%;
|
||||
background: var(--background-color-solid);
|
||||
min-width: 220px;
|
||||
border-radius: 4px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
box-shadow: var(--box-shadow-light);
|
||||
border: 1px solid var(--background-color);
|
||||
outline: 1px solid var(--border-color);
|
||||
backdrop-filter: blur(20px);
|
||||
outline-offset: -1px;
|
||||
z-index: 100;
|
||||
padding: 4px;
|
||||
.menu-item-container {
|
||||
position: relative;
|
||||
.menu-item {
|
||||
padding: 4px 8px 4px 12px;
|
||||
border-radius: #{$border-radius-small};
|
||||
border-radius: #{$border-radius-medium};
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
|
@ -138,18 +141,19 @@
|
|||
|
||||
.submenu {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
left: 102%;
|
||||
top: 0;
|
||||
background: var(--background-color);
|
||||
background: var(--background-color-solid);
|
||||
min-width: 200px;
|
||||
border-radius: 0 4px 4px 4px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
box-shadow: var(--box-shadow-light);
|
||||
border: 1px solid var(--background-color);
|
||||
outline: 1px solid var(--border-color);
|
||||
outline-offset: -1px;
|
||||
z-index: 101;
|
||||
padding: 4px;
|
||||
.submenu-item {
|
||||
padding: 4px 8px 4px 12px;
|
||||
border-radius: #{$border-radius-small};
|
||||
border-radius: #{$border-radius-medium};
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
left: 0;
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
background: var(--highlight-accent-color);
|
||||
background: var(--background-color-solid-gradient);
|
||||
transition: width 0.2s;
|
||||
border-radius: #{$border-radius-extra-large};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,34 +3,34 @@
|
|||
|
||||
.simulation-player-wrapper {
|
||||
position: fixed;
|
||||
bottom: 50px;
|
||||
bottom: 12px;
|
||||
left: 50%;
|
||||
z-index: 2;
|
||||
transform: translate(-50%, 0);
|
||||
width: 70%;
|
||||
width: 70vw;
|
||||
|
||||
.simulation-player-container {
|
||||
background-color: var(--background-color);
|
||||
background: var(--background-color);
|
||||
padding: 7px;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
backdrop-filter: blur(10px);
|
||||
outline: 1px solid var(--border-color);
|
||||
|
||||
.progresser-wrapper {
|
||||
background-color: var(--highlight-accent-color);
|
||||
padding: 4px 5px;
|
||||
outline: 1px solid var(--border-color);
|
||||
background: var(--background-color);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding-top: 30px;
|
||||
padding: 12px 5px;
|
||||
padding-top: 38px;
|
||||
transition: height 0.2s linear;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.controls-container {
|
||||
@include flex-center;
|
||||
gap: 12px;
|
||||
|
|
@ -38,13 +38,12 @@
|
|||
|
||||
.production-details,
|
||||
.controls-wrapper {
|
||||
display: flex;
|
||||
@include flex-center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.production-details {
|
||||
.production-wrapper {
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
|
@ -53,36 +52,43 @@
|
|||
.header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 6px
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.progress-wrapper {
|
||||
width: 164px;
|
||||
height: 8px;
|
||||
border-radius: 5px;
|
||||
// overflow: hidden;
|
||||
background-color: var(--highlight-accent-color);
|
||||
background: var(--background-color-solid);
|
||||
|
||||
.progress {
|
||||
border-radius: 5px;
|
||||
height: 100%;
|
||||
background-color: var(--accent-color);
|
||||
background-color: var(--background-color-accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.expand-icon-container {
|
||||
@include flex-center;
|
||||
padding: 6px 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.simulation-button-container {
|
||||
@include flex-center;
|
||||
gap: 2px;
|
||||
padding: 6px 8px;
|
||||
padding: 4px 8px;
|
||||
min-width: 64px;
|
||||
background: var(--background-color);
|
||||
border-radius: #{$border-radius-small};
|
||||
border-radius: #{$border-radius-extra-large};
|
||||
height: fit-content;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: var(--highlight-accent-color);
|
||||
outline: 1px solid var(--border-color);
|
||||
background: var(--background-color);
|
||||
color: var(--accent-color);
|
||||
|
||||
path {
|
||||
|
|
@ -94,12 +100,10 @@
|
|||
|
||||
.speed-control-container {
|
||||
@include flex-center;
|
||||
gap: 18px;
|
||||
gap: 32px;
|
||||
padding: 5px 16px;
|
||||
// background: var(--background-color);
|
||||
border-radius: #{$border-radius-medium};
|
||||
box-sizing: #{$box-shadow-medium};
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
|
||||
.min-value,
|
||||
|
|
@ -113,29 +117,27 @@
|
|||
width: 100%;
|
||||
max-width: 80vw;
|
||||
height: 28px;
|
||||
// background: var(--background-color-gray);
|
||||
border-radius: #{$border-radius-small};
|
||||
position: relative;
|
||||
// padding: 4px 26px;
|
||||
|
||||
|
||||
.speed-label {
|
||||
font-size: var(--font-size-tiny);
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
bottom: -7px;
|
||||
transform: translate(-50%, -0%);
|
||||
|
||||
&:first-child {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
right: 0;
|
||||
right: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
background-color: #E5E5EA;
|
||||
background-color: #e5e5ea;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
|
|
@ -160,17 +162,20 @@
|
|||
.slider-handle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 42px;
|
||||
min-width: 44px;
|
||||
padding: 0 8px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
background: var(--accent-color);
|
||||
color: var(--primary-color);
|
||||
border-radius: #{$border-radius-small};
|
||||
background: var(--background-color-button);
|
||||
color: var(--text-button-color);
|
||||
border-radius: #{$border-radius-large};
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: var(--font-size-small);
|
||||
cursor: pointer;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.marker {
|
||||
position: absolute;
|
||||
background-color: var(--text-disabled);
|
||||
|
|
@ -219,29 +224,28 @@
|
|||
}
|
||||
|
||||
.time-displayer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@include flex-space-between;
|
||||
gap: 24px;
|
||||
height: auto;
|
||||
opacity: 1;
|
||||
// overflow: hidden;
|
||||
|
||||
transition: all 0.5s ease;
|
||||
|
||||
.start-time-wrappper,
|
||||
.end-time-wrappper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
@include flex-center;
|
||||
gap: 4px;
|
||||
.icon {
|
||||
@include flex-center;
|
||||
}
|
||||
}
|
||||
|
||||
.time-progresser {
|
||||
width: 70%;
|
||||
flex: 1;
|
||||
|
||||
.timeline {
|
||||
padding: 16px;
|
||||
// background: #f5f3fa;
|
||||
background: linear-gradient(90.17deg, rgba(255, 255, 255, 0.64) 1.53%, rgba(255, 255, 255, 0.48) 98.13%);
|
||||
|
||||
outline: 1px solid var(--border-color);
|
||||
background: var(--background-color);
|
||||
border-radius: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -249,18 +253,15 @@
|
|||
height: 33px;
|
||||
|
||||
.label-dot-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
@include flex-center;
|
||||
position: relative;
|
||||
|
||||
.label {
|
||||
position: absolute;
|
||||
top: -200%;
|
||||
top: -36px;
|
||||
transform: translate(0, -0);
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
color: var(--text-color);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
|
@ -271,9 +272,8 @@
|
|||
background-color: #d3d3e2;
|
||||
|
||||
&.filled {
|
||||
background-color: #8f5cf2;
|
||||
|
||||
border: 4px solid var(--accent-color);
|
||||
background-color: var(--accent-color);
|
||||
border: 4px solid #8f5cf2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -291,21 +291,32 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.processDisplayer {
|
||||
border-radius: 5px;
|
||||
// overflow: hidden;
|
||||
background-color: var(--highlight-accent-color);
|
||||
padding: 14px 6px;
|
||||
border-radius: #{$border-radius-large};
|
||||
outline: 1px solid var(--border-color);
|
||||
background: var(--background-color);
|
||||
padding: 20px 6px;
|
||||
position: relative;
|
||||
.timmer {
|
||||
width: auto;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
font-size: var(--font-size-tiny);
|
||||
}
|
||||
|
||||
.start-displayer {
|
||||
bottom: 4px;
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
.end-displayer {
|
||||
bottom: 4px;
|
||||
width: auto;
|
||||
right: 16px;
|
||||
}
|
||||
.process-player {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
|
@ -315,29 +326,30 @@
|
|||
left: 86.81px;
|
||||
border-radius: 14px;
|
||||
border-width: 1px;
|
||||
background: var(--accent-color, #6F42C1);
|
||||
|
||||
background: var(--background-color-accent, #6f42c1);
|
||||
}
|
||||
|
||||
.process-wrapper{
|
||||
.process-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
// padding: 0px 16px;
|
||||
width: 100%;
|
||||
|
||||
.process {
|
||||
height: 5px;
|
||||
background-color: #4caf50;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.simulation-player-container.open {
|
||||
|
||||
.timmer {
|
||||
display: none;
|
||||
}
|
||||
.progresser-wrapper {
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
|
@ -350,7 +362,7 @@
|
|||
}
|
||||
|
||||
.processDisplayer {
|
||||
padding: 0;
|
||||
padding: 0 8px;
|
||||
background: transparent;
|
||||
|
||||
.process-player {
|
||||
|
|
@ -358,5 +370,4 @@
|
|||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -16,6 +16,8 @@
|
|||
background: var(--background-color);
|
||||
backdrop-filter: blur(8px);
|
||||
z-index: #{$z-index-default};
|
||||
outline: 1px solid var(--border-color);
|
||||
outline-offset: -1px;
|
||||
|
||||
.split {
|
||||
height: 20px;
|
||||
|
|
@ -28,7 +30,7 @@
|
|||
.general-options,
|
||||
.activeDropicon {
|
||||
@include flex-center;
|
||||
gap: 8px;
|
||||
gap: 2px;
|
||||
interpolate-size: allow-keywords;
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
|
|
@ -39,7 +41,7 @@
|
|||
height: 28px;
|
||||
width: 28px;
|
||||
cursor: pointer;
|
||||
border-radius: #{$border-radius-small};
|
||||
border-radius: #{$border-radius-medium};
|
||||
|
||||
&:hover {
|
||||
background: color-mix(in srgb,
|
||||
|
|
@ -77,19 +79,22 @@
|
|||
position: absolute;
|
||||
bottom: 40px;
|
||||
left: 0;
|
||||
box-shadow: #{$box-shadow-medium};
|
||||
padding: 8px;
|
||||
border-radius: #{$border-radius-large};
|
||||
padding: 2px 4px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
background: var(--background-color);
|
||||
backdrop-filter: blur(8px);
|
||||
contain: layout paint;
|
||||
will-change: backdrop-filter;
|
||||
|
||||
.option-list {
|
||||
margin: 4px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
border-radius: #{$border-radius-medium};
|
||||
gap: 6px;
|
||||
padding: 4px;
|
||||
padding: 2px;
|
||||
padding-right: 12px;
|
||||
margin: 2px 0;
|
||||
|
||||
&:hover {
|
||||
background: var(--highlight-accent-color);
|
||||
|
|
@ -116,10 +121,10 @@
|
|||
|
||||
.toggle-threed-button {
|
||||
@include flex-center;
|
||||
padding: 3px;
|
||||
border-radius: #{$border-radius-small};
|
||||
background: var(--highlight-accent-color);
|
||||
gap: 2px;
|
||||
padding: 4px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
background: var(--background-color);
|
||||
gap: 5px;
|
||||
position: relative;
|
||||
|
||||
.toggle-option {
|
||||
|
|
@ -132,30 +137,25 @@
|
|||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: var(--accent-color);
|
||||
left: 3px;
|
||||
top: 3px;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
border-radius: #{$border-radius-small};
|
||||
background: var(--background-color-accent);
|
||||
left: 2px;
|
||||
top: 2px;
|
||||
height: 23px;
|
||||
width: 23px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: var(--highlight-accent-color);
|
||||
color: var(--text-button-color);
|
||||
}
|
||||
}
|
||||
|
||||
.toggled {
|
||||
&::after {
|
||||
left: 24px;
|
||||
left: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.exitPlay {
|
||||
|
|
|
|||
|
|
@ -121,10 +121,8 @@
|
|||
flex-direction: column;
|
||||
gap: 6px;
|
||||
border-radius: 5.2px;
|
||||
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
|
|
@ -182,7 +180,6 @@
|
|||
background: var(--background-color-secondary);
|
||||
border-radius: 20px;
|
||||
color: var(--text-color);
|
||||
background: #252525cc;
|
||||
|
||||
.header-wrapper {
|
||||
width: 100%;
|
||||
|
|
@ -255,7 +252,8 @@
|
|||
gap: 5px;
|
||||
|
||||
.header {
|
||||
color: #a0aec0;
|
||||
color: var(--text-color);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.data-values {
|
||||
|
|
@ -276,7 +274,7 @@
|
|||
.icon {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
background: var(--accent-color);
|
||||
background: var(--background-color-accent);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -414,7 +412,6 @@
|
|||
|
||||
/* FleetEfficiency.module.css */
|
||||
.fleetEfficiency {
|
||||
width: 100%;
|
||||
min-height: 240px !important;
|
||||
padding: 20px;
|
||||
background: var(--background-color);
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding-top: 12px;
|
||||
padding: 6px;
|
||||
padding-top: 12px;
|
||||
|
||||
.floating {
|
||||
min-height: 170px;
|
||||
|
|
@ -28,13 +28,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.floatingWidgets-wrapper {
|
||||
font-family: Arial, sans-serif;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.floating.working-state {
|
||||
width: 100%;
|
||||
height: 283px;
|
||||
|
|
@ -51,7 +44,6 @@
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
// flex-direction: column;
|
||||
}
|
||||
|
||||
.state {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
top: 32px;
|
||||
left: 8px;
|
||||
background: var(--background-color);
|
||||
backdrop-filter: blur(150px);
|
||||
backdrop-filter: blur(15px);
|
||||
border-radius: #{$border-radius-extra-large};
|
||||
outline: 1px solid var(--border-color);
|
||||
box-shadow: #{$box-shadow-medium};
|
||||
|
|
@ -30,10 +30,6 @@
|
|||
padding: 0 8px;
|
||||
width: 100%;
|
||||
max-width: calc(100% - 32px);
|
||||
|
||||
.input-value {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -55,8 +51,6 @@
|
|||
|
||||
.active {
|
||||
background: var(--background-color-accent);
|
||||
outline: 1px solid var(--border-color);
|
||||
outline-offset: -1px;
|
||||
rect {
|
||||
stroke: var(--icon-default-color-active);
|
||||
}
|
||||
|
|
@ -64,7 +58,12 @@
|
|||
fill: var(--icon-default-color-active);
|
||||
}
|
||||
&:hover {
|
||||
background: var(--background-color-secondary);
|
||||
rect {
|
||||
stroke: var(--icon-default-color);
|
||||
}
|
||||
circle {
|
||||
fill: var(--icon-default-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -235,7 +234,6 @@
|
|||
|
||||
.outline-container {
|
||||
height: 100%;
|
||||
|
||||
.outline-content-container {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
|
@ -256,7 +254,7 @@
|
|||
top: 32px;
|
||||
right: 8px;
|
||||
background: var(--background-color);
|
||||
backdrop-filter: blur(150px);
|
||||
backdrop-filter: blur(15px);
|
||||
border-radius: #{$border-radius-extra-large};
|
||||
outline: 1px solid var(--border-color);
|
||||
box-shadow: #{$box-shadow-medium};
|
||||
|
|
@ -276,7 +274,7 @@
|
|||
|
||||
.share-button {
|
||||
padding: 4px 12px;
|
||||
color: var(--text-color);
|
||||
color: var(--text-button-color);
|
||||
background: var(--background-color-button);
|
||||
font-weight: var(--font-weight-regular);
|
||||
border-radius: #{$border-radius-large};
|
||||
|
|
@ -370,14 +368,14 @@
|
|||
width: 34px;
|
||||
border-radius: #{$border-radius-circle};
|
||||
background: var(--background-color-secondary);
|
||||
backdrop-filter: blur(8px);
|
||||
box-shadow: #{$box-shadow-medium};
|
||||
backdrop-filter: blur(12px);
|
||||
outline: 1px solid var(--border-color);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: var(--background-color-accent);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -395,55 +393,43 @@
|
|||
|
||||
.no-event-selected {
|
||||
color: #666;
|
||||
padding: 1.8rem 1rem;
|
||||
padding: 16px;
|
||||
grid-column: 1 / -1;
|
||||
.products-list {
|
||||
padding-top: 1rem;
|
||||
.product-item {
|
||||
text-align: start;
|
||||
margin-top: 8px;
|
||||
padding: 2px 0;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
button {
|
||||
width: fit-content;
|
||||
position: relative;
|
||||
@include flex-center;
|
||||
gap: 4px;
|
||||
background: var(--background-color);
|
||||
padding: 8px 12px;
|
||||
border-radius: #{$border-radius-extra-large};
|
||||
outline: 1px solid var(--border-color);
|
||||
&:hover {
|
||||
background: var(--background-color-accent);
|
||||
color: var(--text-button-color);
|
||||
outline: none;
|
||||
path {
|
||||
stroke: var(--text-button-color);
|
||||
stroke-width: 1.3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.products-list-title {
|
||||
text-align: start;
|
||||
color: var(--accent-color);
|
||||
font-size: var(--font-size-regular);
|
||||
}
|
||||
ul {
|
||||
li {
|
||||
text-align: start;
|
||||
margin: 8px 0;
|
||||
padding: 2px 0;
|
||||
text-decoration: none;
|
||||
&::marker {
|
||||
content: "";
|
||||
}
|
||||
button {
|
||||
width: fit-content;
|
||||
position: relative;
|
||||
transition: all 0.2s ease;
|
||||
@include flex-center;
|
||||
gap: 4px;
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -4px;
|
||||
background: var(--accent-color);
|
||||
height: 1px;
|
||||
width: 0%;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
button {
|
||||
path {
|
||||
stroke: var(--accent-color);
|
||||
strokeWidth: 1.5px;
|
||||
}
|
||||
color: var(--accent-color);
|
||||
&:before {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -456,6 +442,9 @@
|
|||
.sidebar-right-content-container {
|
||||
.dataSideBar {
|
||||
.inputs-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
.datas {
|
||||
.input-value {
|
||||
padding: 5px 10px;
|
||||
|
|
@ -487,6 +476,7 @@
|
|||
.datas__class {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
.multi-level-dropdown {
|
||||
width: 170px;
|
||||
|
|
@ -496,16 +486,6 @@
|
|||
justify-content: space-between;
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.datas__class {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
|
||||
// .datas__separator {
|
||||
// }
|
||||
|
||||
.disable {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
|
|
@ -515,6 +495,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sideBarHeader {
|
||||
color: var(--accent-color);
|
||||
|
|
@ -522,12 +503,6 @@
|
|||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
.inputs-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.selectedMain-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -627,10 +602,8 @@
|
|||
width: 100%;
|
||||
height: 150px;
|
||||
background: #f0f0f0;
|
||||
// border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// justify-content: center;
|
||||
}
|
||||
|
||||
.optionsContainer {
|
||||
|
|
@ -713,7 +686,7 @@
|
|||
|
||||
path {
|
||||
stroke: var(--accent-color);
|
||||
strokeWidth: 1.5px;
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -742,14 +715,14 @@
|
|||
.add-button {
|
||||
@include flex-center;
|
||||
padding: 2px 4px;
|
||||
background: var(--accent-color);
|
||||
color: var(--primary-color);
|
||||
background: var(--background-color-button);
|
||||
color: var(--text-button-color);
|
||||
border-radius: #{$border-radius-small};
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
border: none;
|
||||
path {
|
||||
stroke: var(--primary-color);
|
||||
stroke: var(--text-button-color);
|
||||
}
|
||||
&:disabled {
|
||||
background: var(--text-disabled);
|
||||
|
|
@ -763,7 +736,7 @@
|
|||
.value-field-container {
|
||||
margin: 0;
|
||||
input {
|
||||
padding: 5px 4px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
.dropdown {
|
||||
top: 4px;
|
||||
|
|
@ -785,8 +758,8 @@
|
|||
padding: 6px 12px;
|
||||
.regularDropdown-container {
|
||||
padding: 5px 8px;
|
||||
outline: 2px solid var(--border-color);
|
||||
outline-offset: -2px;
|
||||
outline: 1px solid var(--border-color);
|
||||
outline-offset: -1px;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -804,11 +777,10 @@
|
|||
}
|
||||
|
||||
.lists-main-container {
|
||||
margin: 2px 8px;
|
||||
width: calc(100% - 12px);
|
||||
margin-right: 4px;
|
||||
margin: 2px;
|
||||
width: calc(100% - 4px);
|
||||
background: var(--background-color-gray);
|
||||
border-radius: #{$border-radius-small};
|
||||
border-radius: 8px;
|
||||
min-height: 120px;
|
||||
|
||||
.list-container {
|
||||
|
|
@ -818,10 +790,9 @@
|
|||
|
||||
.list-item {
|
||||
@include flex-space-between;
|
||||
padding: 2px 12px;
|
||||
padding: 4px 12px;
|
||||
width: 100%;
|
||||
margin: 2px 0;
|
||||
border-radius: #{$border-radius-small};
|
||||
border-radius: #{$border-radius-medium};
|
||||
.value {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
|
@ -953,6 +924,18 @@
|
|||
}
|
||||
}
|
||||
|
||||
.trigger-wrapper {
|
||||
.trigger-item {
|
||||
.trigger-name {
|
||||
padding: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.value-field-container {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
@include flex-center;
|
||||
justify-content: flex-start;
|
||||
|
|
@ -962,10 +945,9 @@
|
|||
}
|
||||
|
||||
.compare-simulations-container {
|
||||
margin: 6px;
|
||||
background: var(--background-color-gray);
|
||||
padding: 12px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
border-radius: #{$border-radius-large};
|
||||
|
||||
.compare-simulations-header {
|
||||
font-weight: var(--font-weight-medium);
|
||||
|
|
@ -987,10 +969,12 @@
|
|||
|
||||
input {
|
||||
width: fit-content;
|
||||
background: var(--accent-color);
|
||||
color: var(--highlight-accent-color);
|
||||
padding: 2px 8px;
|
||||
background: var(--background-color-button);
|
||||
color: var(--text-button-color);
|
||||
padding: 3px 10px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1098,24 +1082,24 @@
|
|||
|
||||
input {
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: #{$box-shadow-medium};
|
||||
outline: 1px solid var(--accent-color);
|
||||
outline: 1px solid var(--input-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.cancel {
|
||||
background: transparent;
|
||||
color: var(--accent-color);
|
||||
background: var(--background-color-secondary);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.submit {
|
||||
background: var(--accent-color);
|
||||
color: var(--highlight-accent-color);
|
||||
background: var(--background-color-button);
|
||||
color: var(--text-button-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1123,7 +1107,7 @@
|
|||
margin: 6px;
|
||||
background: var(--background-color-gray);
|
||||
padding: 12px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
border-radius: #{$border-radius-large};
|
||||
|
||||
.custom-analysis-header {
|
||||
font-weight: var(--font-weight-medium);
|
||||
|
|
@ -1145,28 +1129,53 @@
|
|||
|
||||
input {
|
||||
width: fit-content;
|
||||
background: var(--accent-color);
|
||||
color: var(--highlight-accent-color);
|
||||
padding: 2px 8px;
|
||||
background: var(--background-color-button);
|
||||
color: var(--text-button-color);
|
||||
padding: 3px 10px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.assets-container {
|
||||
padding: 0 6px;
|
||||
.assets-container-main {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
height: 100%;
|
||||
max-height: 50vh;
|
||||
gap: 3px;
|
||||
overflow: auto;
|
||||
|
||||
.assets-result {
|
||||
width: 100%;
|
||||
.assets-wrapper {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.assets-list-section {
|
||||
width: 100%;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.assets-wrapper {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin: 8px 10px;
|
||||
|
||||
h2 {
|
||||
h2,
|
||||
.searched-content {
|
||||
color: var(--text-color);
|
||||
font-family: $large;
|
||||
font-weight: $bold-weight;
|
||||
padding: 8px;
|
||||
@include flex-space-between;
|
||||
.back-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.categories-container {
|
||||
|
|
@ -1175,14 +1184,16 @@
|
|||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
height: 100%;
|
||||
gap: 8px;
|
||||
padding: 10px 0;
|
||||
gap: 4px;
|
||||
padding: 2px;
|
||||
|
||||
.category {
|
||||
width: 121px;
|
||||
width: 123px;
|
||||
height: 95px;
|
||||
border-radius: 3.59px;
|
||||
background: var(--background-color-gray);
|
||||
border-radius: #{$border-radius-large};
|
||||
background: var(--background-color);
|
||||
outline: 1px solid var(--border-color);
|
||||
outline-offset: -1px;
|
||||
padding: 8px;
|
||||
padding-top: 12px;
|
||||
font-weight: $bold-weight;
|
||||
|
|
@ -1193,8 +1204,6 @@
|
|||
position: relative;
|
||||
z-index: 3;
|
||||
font-size: var(--font-size-regular);
|
||||
// -webkit-text-fill-color: transparent;
|
||||
// -webkit-text-stroke: 1px black;
|
||||
}
|
||||
|
||||
&::after {
|
||||
|
|
@ -1260,7 +1269,6 @@
|
|||
|
||||
.category-image {
|
||||
position: absolute;
|
||||
// top: 50%;
|
||||
bottom: 0;
|
||||
right: -10px;
|
||||
transform: translate(0, 0%) scale(0.8);
|
||||
|
|
@ -1276,14 +1284,15 @@
|
|||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
height: 100%;
|
||||
gap: 3px;
|
||||
padding: 10px 0;
|
||||
gap: 6px;
|
||||
padding: 2px;
|
||||
|
||||
.assets {
|
||||
width: 117px;
|
||||
width: 122px;
|
||||
height: 95px;
|
||||
border-radius: #{$border-radius-small};
|
||||
background: var(--background-color-gray);
|
||||
border-radius: #{$border-radius-large};
|
||||
background: var(--background-color);
|
||||
outline: 1px solid var(--border-color);
|
||||
font-weight: $medium-weight;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
|
@ -1301,18 +1310,20 @@
|
|||
z-index: 3;
|
||||
padding: 8px;
|
||||
width: 100%;
|
||||
max-height: 38px;
|
||||
height: 100%;
|
||||
font-size: var(--font-size-regular);
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--background-color) 40%,
|
||||
transparent
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
rgba(37, 24, 51, 0) 0%,
|
||||
rgba(78, 22, 128, 0.4) 100%
|
||||
);
|
||||
backdrop-filter: blur(5px);
|
||||
pointer-events: none;
|
||||
backdrop-filter: blur(8px);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-line-clamp: 3;
|
||||
line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -1326,63 +1337,5 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
@include flex-center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.assets-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
height: 100%;
|
||||
gap: 3px;
|
||||
padding: 10px 0;
|
||||
|
||||
.assets {
|
||||
width: 117px;
|
||||
height: 95px;
|
||||
border-radius: 3.59px;
|
||||
background: var(--background-color-gray);
|
||||
padding: 8px;
|
||||
padding-top: 12px;
|
||||
font-weight: $medium-weight;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.asset-name {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
font-size: var(--font-size-regular);
|
||||
}
|
||||
|
||||
.asset-image {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
// top: 50%;
|
||||
// right: 5px;
|
||||
// transform: translate(0, -50%);
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.assets-result {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 8px 10px;
|
||||
|
||||
.assets-wrapper {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
// Main Container
|
||||
.realTime-viz {
|
||||
background: #131313;
|
||||
border-radius: 20px;
|
||||
box-shadow: $box-shadow-medium;
|
||||
width: calc(100% - (320px + 270px + 90px));
|
||||
height: calc(100% - (250px));
|
||||
|
|
@ -24,19 +23,15 @@
|
|||
}
|
||||
|
||||
.floating {
|
||||
|
||||
|
||||
width: calc(var(--realTimeViz-container-width) * 0.2);
|
||||
height: calc(var(--realTimeViz-container-width) * 0.05);
|
||||
|
||||
min-width: 250px;
|
||||
max-width: 300px;
|
||||
|
||||
// min-height: 83px !important;
|
||||
// max-height: 100px !important;
|
||||
|
||||
background: var(--background-color);
|
||||
border: 1.23px solid var(--border-color);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: 0px 4.91px 4.91px 0px #0000001c;
|
||||
border-radius: $border-radius-medium;
|
||||
padding: 18px;
|
||||
|
|
@ -67,18 +62,18 @@
|
|||
.zone-wrapper {
|
||||
display: flex;
|
||||
background: var(--background-color);
|
||||
backdrop-filter: blur(10px);
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 50%;
|
||||
gap: 6px;
|
||||
border-radius: 8px;
|
||||
max-width: 80%;
|
||||
overflow: auto;
|
||||
max-width: calc(100% - 500px);
|
||||
min-width: 150px;
|
||||
z-index: 3;
|
||||
transform: translate(-50%, -10%);
|
||||
|
||||
transition: transform 0.5s linear;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -117,15 +112,15 @@
|
|||
}
|
||||
|
||||
.active {
|
||||
background: var(--accent-color);
|
||||
color: var(--background-color);
|
||||
// color: #FCFDFD !important;
|
||||
background: var(--background-color-accent);
|
||||
color: var(--text-button-color);
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.zone-wrapper.bottom {
|
||||
bottom: var(--bottomWidth);
|
||||
// bottom: 200px;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
|
|
@ -146,7 +141,6 @@
|
|||
display: flex;
|
||||
background: rgba(224, 223, 255, 0.5);
|
||||
position: absolute;
|
||||
// bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
gap: 6px;
|
||||
|
|
@ -183,13 +177,10 @@
|
|||
|
||||
.panel {
|
||||
position: absolute;
|
||||
background: var(--background-color);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 6px;
|
||||
overflow: auto;
|
||||
z-index: $z-index-tools;
|
||||
overflow: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
|
|
@ -204,6 +195,7 @@
|
|||
flex-direction: column;
|
||||
gap: 6px;
|
||||
background: var(--background-color);
|
||||
backdrop-filter: blur(10px);
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
|
|
@ -211,12 +203,10 @@
|
|||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
|
||||
max-height: 100%;
|
||||
border: 1px dashed var(--background-color-gray);
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--box-shadow-medium);
|
||||
padding: 6px 0;
|
||||
background: var(--background-color);
|
||||
position: relative;
|
||||
padding: 0 10px;
|
||||
|
|
@ -255,14 +245,11 @@
|
|||
color: var(--text-color);
|
||||
|
||||
&:hover {
|
||||
background: var(--highlight-accent-color);
|
||||
width: 100%;
|
||||
.label {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--highlight-accent-color);
|
||||
width: 100%;
|
||||
|
||||
svg {
|
||||
&:first-child {
|
||||
|
|
@ -285,7 +272,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
|
|
@ -369,7 +355,6 @@
|
|||
.playingFlase {
|
||||
.zone-wrapper.bottom {
|
||||
bottom: var(--bottomWidth);
|
||||
// bottom: 210px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -383,6 +368,10 @@
|
|||
transition: transform 0.3s ease;
|
||||
box-shadow: #{$box-shadow-medium};
|
||||
|
||||
svg {
|
||||
stroke: var(--icon-default-color) !important;
|
||||
}
|
||||
|
||||
.extra-Bs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -398,7 +387,7 @@
|
|||
}
|
||||
|
||||
.active {
|
||||
background: var(--accent-color);
|
||||
background: var(--background-color-accent);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -413,8 +402,7 @@
|
|||
height: 18px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
// align-items: center;
|
||||
background: var(--accent-color);
|
||||
background: var(--background-color-accent);
|
||||
border: none;
|
||||
color: var(--background-color);
|
||||
border-radius: 4px;
|
||||
|
|
@ -425,21 +413,23 @@
|
|||
}
|
||||
|
||||
path {
|
||||
stroke: var(--primary-color);
|
||||
stroke: var(--text-button-color);
|
||||
stroke-width: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background: #ffe3e0;
|
||||
background: #f657482f;
|
||||
|
||||
.add-icon {
|
||||
rotate: 45deg;
|
||||
|
||||
path {
|
||||
stroke: #f65648;
|
||||
stroke-width: 2;
|
||||
stroke-width: 1.3;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -589,12 +579,6 @@
|
|||
}
|
||||
|
||||
.floating-wrapper {
|
||||
.icon {
|
||||
// width: 25px !important;
|
||||
// height: 25px !important;
|
||||
// background: transparent;
|
||||
}
|
||||
|
||||
.kebab {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
|
|
@ -640,9 +624,6 @@
|
|||
.label {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--highlight-accent-color);
|
||||
width: 100%;
|
||||
|
||||
|
|
@ -662,22 +643,19 @@
|
|||
}
|
||||
|
||||
.distance-line {
|
||||
|
||||
position: absolute;
|
||||
border-style: dashed;
|
||||
border-color: var(--accent-color);
|
||||
/* Green color for visibility */
|
||||
border-color: var(--background-color-accent);
|
||||
border-width: 1px;
|
||||
pointer-events: none;
|
||||
/* Ensure lins don't interfere with dragging */
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
/* Label styles for displaying distance values */
|
||||
.distance-label {
|
||||
position: absolute;
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
background: var(--background-color-accent);
|
||||
color: var(--text-button-color);
|
||||
font-size: 12px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
|
|
@ -749,15 +727,12 @@
|
|||
}
|
||||
|
||||
.activeChart {
|
||||
outline: 2px solid var(--accent-color);
|
||||
outline: 1px solid var(--highlight-secondary-color);
|
||||
z-index: 2 !important;
|
||||
}
|
||||
|
||||
.chart-container.notLinked {
|
||||
|
||||
outline: 1px solid red;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.connectionSuccess {
|
||||
|
|
@ -802,3 +777,176 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.panel-content {
|
||||
background: var(--background-color);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* RIGHT */
|
||||
.panel-content.right-opening {
|
||||
animation: rightExpand 0.5s ease-in-out forwards;
|
||||
transform-origin: right;
|
||||
}
|
||||
|
||||
@keyframes rightExpand {
|
||||
from {
|
||||
transform: scaleX(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
.panel-content.right-closing {
|
||||
animation: rightCollapse 0.5s ease-in-out forwards;
|
||||
transform-origin: right;
|
||||
}
|
||||
|
||||
@keyframes rightCollapse {
|
||||
from {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scaleX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* LEFT */
|
||||
.panel-content.left-opening {
|
||||
animation: leftExpand 0.5s ease-in-out forwards;
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
@keyframes leftExpand {
|
||||
from {
|
||||
transform: scaleX(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
.left-closing {
|
||||
animation: leftCollapse 0.5s ease-in-out forwards;
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
@keyframes leftCollapse {
|
||||
from {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scaleX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* TOP */
|
||||
.panel-content.top-opening {
|
||||
animation: topExpand 0.5s ease-in-out forwards;
|
||||
transform-origin: top;
|
||||
}
|
||||
|
||||
@keyframes topExpand {
|
||||
from {
|
||||
transform: scaleY(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
.top-closing {
|
||||
animation: topCollapse 0.5s ease-in-out forwards;
|
||||
transform-origin: top;
|
||||
}
|
||||
|
||||
@keyframes topCollapse {
|
||||
from {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scaleY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* BOTTOM */
|
||||
.panel-content.bottom-opening {
|
||||
animation: bottomExpand 0.5s ease-in-out forwards;
|
||||
transform-origin: bottom;
|
||||
}
|
||||
|
||||
@keyframes bottomExpand {
|
||||
from {
|
||||
transform: scaleY(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-closing {
|
||||
animation: bottomCollapse 0.5s ease-in-out forwards;
|
||||
transform-origin: bottom;
|
||||
}
|
||||
|
||||
@keyframes bottomCollapse {
|
||||
from {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scaleY(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Add button
|
||||
|
||||
.extra-Bs-addopening {
|
||||
animation: slideDown 0.3s ease forwards;
|
||||
}
|
||||
|
||||
.extra-Bs-addclosing {
|
||||
animation: slideUp 0.3s ease forwards;
|
||||
}
|
||||
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
font-size: var(--font-size-large);
|
||||
padding: 2px 8px;
|
||||
background: var(--background-color-accent);
|
||||
color: var(--text-color);
|
||||
color: var(--text-button-color);
|
||||
border-radius: #{$border-radius-medium};
|
||||
box-shadow: var(--box-shadow-light);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -88,6 +88,7 @@ interface StoragePointSchema {
|
|||
actionType: "store";
|
||||
materials: { materialName: string; materialId: string; }[];
|
||||
storageCapacity: number;
|
||||
triggers: TriggerSchema[];
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -143,6 +144,10 @@ interface MachineStatus extends MachineEventSchema {
|
|||
isActive: boolean;
|
||||
idleTime: number;
|
||||
activeTime: number;
|
||||
currentAction?: {
|
||||
actionUuid: string;
|
||||
actionName: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface ArmBotStatus extends RoboticArmEventSchema {
|
||||
|
|
|
|||
Loading…
Reference in New Issue