diff --git a/app/src/components/footer/Footer.tsx b/app/src/components/footer/Footer.tsx index 1e22ccd..8da3ba8 100644 --- a/app/src/components/footer/Footer.tsx +++ b/app/src/components/footer/Footer.tsx @@ -1,25 +1,7 @@ import React from "react"; import { HelpIcon } from "../icons/DashboardIcon"; -import { - LogInfoIcon, - ErrorIcon, - WarningIcon, -} from "../icons/ExportCommonIcons"; // Adjust path as needed import { useLogger } from "../ui/log/LoggerContext"; - -const getLogIcon = (type: string) => { - switch (type) { - case "info": - return ; - case "error": - return ; - case "warning": - return ; - case "log": - default: - return ; - } -}; +import { GetLogIcon } from "./getLogIcons"; const Footer: React.FC = () => { const { logs, setIsLogListVisible } = useLogger(); @@ -43,18 +25,22 @@ const Footer: React.FC = () => {
-
setIsLogListVisible(true)} - > - {lastLog ? ( - <> - {getLogIcon(lastLog.type)} - {lastLog.message} - - ) : ( - "No logs yet." - )} +
+
+
+
V 0.01 diff --git a/app/src/components/footer/getLogIcons.tsx b/app/src/components/footer/getLogIcons.tsx new file mode 100644 index 0000000..7a26496 --- /dev/null +++ b/app/src/components/footer/getLogIcons.tsx @@ -0,0 +1,19 @@ +import { ErrorIcon, LogIcon, LogInfoIcon, SucessIcon, WarningIcon } from "../icons/LogIcons"; +import { LogType } from "../ui/log/LoggerContext"; + +export const GetLogIcon = (type: LogType): JSX.Element => { + switch (type) { + case "info": + return ; + case "log": + return ; + case "error": + return ; + case "warning": + return ; + case "success": + return ; + default: + return ; + } +}; diff --git a/app/src/components/icons/ExportCommonIcons.tsx b/app/src/components/icons/ExportCommonIcons.tsx index 4137498..0684a77 100644 --- a/app/src/components/icons/ExportCommonIcons.tsx +++ b/app/src/components/icons/ExportCommonIcons.tsx @@ -826,7 +826,7 @@ export const LogListIcon = () => { > { ); }; - -export const LogInfoIcon = () => { - return ( - - - - - - - ); -}; - -export const WarningIcon = () => { - return ( - - - - - - - ); -}; - -export const ErrorIcon = () => { - return ( - - - - ); -}; diff --git a/app/src/components/icons/LogIcons.tsx b/app/src/components/icons/LogIcons.tsx new file mode 100644 index 0000000..abee971 --- /dev/null +++ b/app/src/components/icons/LogIcons.tsx @@ -0,0 +1,98 @@ +export const LogInfoIcon = () => { + return ( + + + + + ); +}; + +export const WarningIcon = () => { + return ( + + + + + ); +}; + +export const ErrorIcon = () => { + return ( + + + + + ); +}; + +export const SucessIcon = () => { + return ( + + + + + ); +}; + +export const LogIcon = () => { + return ( + + + + + ); +}; diff --git a/app/src/components/ui/analysis/ProductionCapacity.tsx b/app/src/components/ui/analysis/ProductionCapacity.tsx index 08ddb05..803ec47 100644 --- a/app/src/components/ui/analysis/ProductionCapacity.tsx +++ b/app/src/components/ui/analysis/ProductionCapacity.tsx @@ -11,16 +11,6 @@ import { PowerIcon, ProductionCapacityIcon } from "../../icons/analysis"; ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement); -// Helper function to generate random colors -const getRandomColor = () => { - const letters = "0123456789ABCDEF"; - let color = "#"; - for (let i = 0; i < 6; i++) { - color += letters[Math.floor(Math.random() * 16)]; - } - return color; -}; - const ThroughputSummary = () => { // Define all data internally within the component const timeRange = { diff --git a/app/src/components/ui/analysis/ThroughputSummary.tsx b/app/src/components/ui/analysis/ThroughputSummary.tsx index ed80fe5..3462aee 100644 --- a/app/src/components/ui/analysis/ThroughputSummary.tsx +++ b/app/src/components/ui/analysis/ThroughputSummary.tsx @@ -1,4 +1,3 @@ -import React, { useState } from "react"; import { ThroughputSummaryIcon } from "../../icons/analysis"; const ProductionCapacity = ({ diff --git a/app/src/components/ui/log/LogList.tsx b/app/src/components/ui/log/LogList.tsx index fad277c..ed86ba5 100644 --- a/app/src/components/ui/log/LogList.tsx +++ b/app/src/components/ui/log/LogList.tsx @@ -1,34 +1,15 @@ // LogList.tsx import React, { useState } from "react"; -import { - LogListIcon, - LogInfoIcon, - WarningIcon, - ErrorIcon, - CloseIcon, -} from "../../icons/ExportCommonIcons"; // Adjust path as needed +import { LogListIcon, CloseIcon } from "../../icons/ExportCommonIcons"; // Adjust path as needed import { useLogger } from "./LoggerContext"; +import { GetLogIcon } from "../../footer/getLogIcons"; const LogList: React.FC = () => { const { logs, clear, setIsLogListVisible } = useLogger(); const [selectedTab, setSelectedTab] = useState< - "all" | "info" | "warning" | "error" | "log" + "all" | "info" | "warning" | "error" | "log" | "success" >("all"); - const getLogIcon = (type: string) => { - switch (type) { - case "info": - return ; - case "error": - return ; - case "warning": - return ; - case "log": - default: - return ; - } - }; - const formatTimestamp = (date: Date) => new Date(date).toLocaleTimeString(); const filteredLogs = @@ -55,7 +36,11 @@ const LogList: React.FC = () => {
Log List
-
@@ -63,13 +48,14 @@ const LogList: React.FC = () => { {/* Tabs */}
{["all", "info", "warning", "error"].map((type) => ( -
setSelectedTab(type as any)} > {`${type.charAt(0).toUpperCase() + type.slice(1)} Logs`} -
+ ))}
@@ -77,7 +63,7 @@ const LogList: React.FC = () => {
{filteredLogs.map((log) => (
-
{getLogIcon(log.type)}
+
{GetLogIcon(log.type)}
{log.message}
diff --git a/app/src/components/ui/log/LoggerContext.tsx b/app/src/components/ui/log/LoggerContext.tsx index f323b93..71bd467 100644 --- a/app/src/components/ui/log/LoggerContext.tsx +++ b/app/src/components/ui/log/LoggerContext.tsx @@ -1,6 +1,6 @@ -import React, { createContext, useContext, useState, useCallback } from "react"; +import React, { createContext, useContext, useState, useCallback, useMemo } from "react"; -export type LogType = "log" | "info" | "warning" | "error"; +export type LogType = "log" | "info" | "warning" | "error" | "success"; export interface LogEntry { id: string; @@ -18,6 +18,7 @@ interface LoggerContextValue { info: (message: string) => void; warn: (message: string) => void; error: (message: string) => void; + success: (message: string) => void; clear: () => void; } @@ -47,7 +48,7 @@ export const LoggerProvider: React.FC<{ children: React.ReactNode }> = ({ [generateId] ); - const loggerMethods: LoggerContextValue = { + const loggerMethods: LoggerContextValue = useMemo(() => ({ logs, setLogs, isLogListVisible, @@ -56,10 +57,9 @@ export const LoggerProvider: React.FC<{ children: React.ReactNode }> = ({ info: (message: string) => addLog("info", message), warn: (message: string) => addLog("warning", message), error: (message: string) => addLog("error", message), - clear: () => { - setLogs([]); - }, - }; + success: (message: string) => addLog("success", message), + clear: () => setLogs([]), + }), [logs, setLogs, isLogListVisible, setIsLogListVisible, addLog]); return ( diff --git a/app/src/components/ui/simulation/simulationPlayer.tsx b/app/src/components/ui/simulation/simulationPlayer.tsx index 9edb0c9..525dc0f 100644 --- a/app/src/components/ui/simulation/simulationPlayer.tsx +++ b/app/src/components/ui/simulation/simulationPlayer.tsx @@ -368,13 +368,15 @@ const SimulationPlayer: React.FC = () => { )}
-
-
- - + {subModule === "analysis" && ( +
+
+ + +
+
- -
+ )} ); }; diff --git a/app/src/index.css b/app/src/index.css deleted file mode 100644 index bd5bd6d..0000000 --- a/app/src/index.css +++ /dev/null @@ -1,13 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/app/src/index.tsx b/app/src/index.tsx index f241ca6..ba329e8 100644 --- a/app/src/index.tsx +++ b/app/src/index.tsx @@ -1,6 +1,5 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; -import './index.css'; import App from './app'; import reportWebVitals from './reportWebVitals'; diff --git a/app/src/modules/builder/builder.tsx b/app/src/modules/builder/builder.tsx index eb0d341..c0a3267 100644 --- a/app/src/modules/builder/builder.tsx +++ b/app/src/modules/builder/builder.tsx @@ -22,7 +22,6 @@ import { useDeletePointOrLine, useMovePoint, useActiveLayer, - useSocketStore, useWallVisibility, useRoofVisibility, useShadows, @@ -48,15 +47,11 @@ import FloorGroupAilse from "./groups/floorGroupAisle"; import Draw from "./functions/draw"; import WallsAndWallItems from "./groups/wallsAndWallItems"; import Ground from "../scene/environment/ground"; -// import ZoneGroup from "../groups/zoneGroup1"; import { findEnvironment } from "../../services/factoryBuilder/environment/findEnvironment"; import Layer2DVisibility from "./geomentries/layers/layer2DVisibility"; -import DrieHtmlTemp from "../visualization/mqttTemp/drieHtmlTemp"; import ZoneGroup from "./groups/zoneGroup"; -import useModuleStore from "../../store/useModuleStore"; import MeasurementTool from "../scene/tools/measurementTool"; import NavMesh from "../simulation/vehicle/navMesh/navMesh"; -import ProductionCapacity from "../../components/ui/analysis/ThroughputSummary"; export default function Builder() { const state = useThree(); // Importing the state from the useThree hook, which contains the scene, camera, and other Three.js elements. @@ -113,21 +108,19 @@ export default function Builder() { const [selectedItemsIndex, setSelectedItemsIndex] = useState(null); // State for tracking the index of the selected item. - const { activeLayer, setActiveLayer } = useActiveLayer(); // State that changes based on which layer the user chooses in Layers.jsx. - const { toggleView, setToggleView } = useToggleView(); // State for toggling between 2D and 3D. + const { activeLayer } = useActiveLayer(); // State that changes based on which layer the user chooses in Layers.jsx. + const { toggleView } = useToggleView(); // State for toggling between 2D and 3D. const { toolMode, setToolMode } = useToolMode(); - const { movePoint, setMovePoint } = useMovePoint(); // State that stores a boolean which represents whether the move mode is active or not. - const { deletePointOrLine, setDeletePointOrLine } = useDeletePointOrLine(); - const { socket } = useSocketStore(); - const { roofVisibility, setRoofVisibility } = useRoofVisibility(); - const { wallVisibility, setWallVisibility } = useWallVisibility(); - const { shadows, setShadows } = useShadows(); - const { renderDistance, setRenderDistance } = useRenderDistance(); - const { limitDistance, setLimitDistance } = useLimitDistance(); - const { updateScene, setUpdateScene } = useUpdateScene(); - const { walls, setWalls } = useWalls(); + const { setMovePoint } = useMovePoint(); // State that stores a boolean which represents whether the move mode is active or not. + const { setDeletePointOrLine } = useDeletePointOrLine(); + const { setRoofVisibility } = useRoofVisibility(); + const { setWallVisibility } = useWallVisibility(); + const { setShadows } = useShadows(); + const { setRenderDistance } = useRenderDistance(); + const { setLimitDistance } = useLimitDistance(); + const { setUpdateScene } = useUpdateScene(); + const { setWalls } = useWalls(); const { refTextupdate, setRefTextUpdate } = useRefTextUpdate(); - const { activeModule } = useModuleStore(); // const loader = new GLTFLoader(); // const dracoLoader = new DRACOLoader(); diff --git a/app/src/modules/scene/environment/ground.tsx b/app/src/modules/scene/environment/ground.tsx index 8d2fa22..ef3e690 100644 --- a/app/src/modules/scene/environment/ground.tsx +++ b/app/src/modules/scene/environment/ground.tsx @@ -3,7 +3,6 @@ import * as CONSTANTS from "../../../types/world/worldConstants"; const Ground = ({ grid, plane }: any) => { const { toggleView } = useToggleView(); - const savedTheme: string | null = localStorage.getItem("theme"); const { planeValue, gridValue } = useTileDistance(); return ( diff --git a/app/src/pages/Project.tsx b/app/src/pages/Project.tsx index 17a6315..4fe26b3 100644 --- a/app/src/pages/Project.tsx +++ b/app/src/pages/Project.tsx @@ -58,7 +58,7 @@ const Project: React.FC = () => { setOrganization(Organization); setUserName(name); } - echo.info("Log in success full"); + echo.warn("Log in success full"); } else { navigate("/"); } diff --git a/app/src/styles/abstracts/variables.scss b/app/src/styles/abstracts/variables.scss index 29976dc..3545151 100644 --- a/app/src/styles/abstracts/variables.scss +++ b/app/src/styles/abstracts/variables.scss @@ -115,17 +115,23 @@ $color5: #c7a8ff; // log indication colors // ------------ text ------------- $log-default-text-color: #6f42c1; -$log-info-text-color: #488ef6; +$log-info-text-color: #1773fd; $log-warn-text-color: #f3a50c; -$log-error-text-color: #f65648; -$log-success-text-color: #43c06d; +$log-error-text-color: #fc230f; +$log-success-text-color: #23a84f; +// ----------- dark --------------- +$log-default-text-color-dark: #b18ef1; +$log-info-text-color-dark: #7eb0fa; +$log-warn-text-color-dark: #ffaa00; +$log-error-text-color-dark: #ff887d; +$log-success-text-color-dark: #43ff81; // ------------ background ------------- $log-default-backgroung-color: #6e42c133; -$log-info-background-color: #488ef633; +$log-info-background-color: #1773fd5d; $log-warn-background-color: #f3a50c33; -$log-error-background-color: #f6564833; -$log-success-background-color: #43c06d33; +$log-error-background-color: #fc230f33; +$log-success-background-color: #0ef75b33; // old variables $accent-color: #6f42c1; diff --git a/app/src/styles/base/base.scss b/app/src/styles/base/base.scss index f4a260f..8843bfe 100644 --- a/app/src/styles/base/base.scss +++ b/app/src/styles/base/base.scss @@ -35,6 +35,18 @@ --icon-default-color: #{$icon-default-color}; --icon-default-color-active: #{$icon-default-color-active}; + // log colors + --default-text-color: #{$log-default-text-color}; + --log-info-text-color: #{$log-info-text-color}; + --log-warn-text-color: #{$log-warn-text-color}; + --log-error-text-color: #{$log-error-text-color}; + --log-success-text-color: #{$log-success-text-color}; + --log-default-background-color: #{$log-default-backgroung-color}; + --log-info-background-color: #{$log-info-background-color}; + --log-warn-background-color: #{$log-warn-background-color}; + --log-error-background-color: #{$log-error-background-color}; + --log-success-background-color: #{$log-success-background-color}; + // old colors --accent-color: #{$accent-color}; --accent-gradient-color: #{$acent-gradient}; @@ -85,6 +97,18 @@ --icon-default-color: #{$icon-default-color-dark}; --icon-default-color-active: #{$icon-default-color-active-dark}; + // log colors + --default-text-color: #{$log-default-text-color-dark}; + --log-info-text-color: #{$log-info-text-color-dark}; + --log-warn-text-color: #{$log-warn-text-color-dark}; + --log-error-text-color: #{$log-error-text-color-dark}; + --log-success-text-color: #{$log-success-text-color-dark}; + --log-default-background-color: #{$log-default-backgroung-color}; + --log-info-background-color: #{$log-info-background-color}; + --log-warn-background-color: #{$log-warn-background-color}; + --log-error-background-color: #{$log-error-background-color}; + --log-success-background-color: #{$log-success-background-color}; + // old colors --accent-color: #{$accent-color-dark}; --accent-gradient-color: #{$acent-gradient-dark}; @@ -115,7 +139,6 @@ } body { - background: var(--background-color); --font-size-tiny: #{$tiny}; --font-size-small: #{$small}; --font-size-regular: #{$regular}; @@ -133,23 +156,6 @@ body { --color3: #{$color3}; --color4: #{$color4}; --color5: #{$color5}; - - - - - --default-text-color: #{$log-default-text-color}; - --log-info-text-color: #{$log-info-text-color}; - --log-warn-text-color: #{$log-warn-text-color}; - --log-error-text-color: #{$log-error-text-color}; - --log-success-text-color: #{$log-success-text-color}; - - // ------------ background ------------- - --log-default-background-color: #{$log-default-backgroung-color}; - --log-info-background-color: #{$log-info-background-color}; - --log-warn-background-color: #{$log-warn-background-color}; - --log-error-background-color: #{$log-error-background-color}; - --log-success-background-color: #{$log-success-background-color}; - } ::-webkit-scrollbar { @@ -173,4 +179,4 @@ body { ::-webkit-scrollbar-corner { background: transparent; -} \ No newline at end of file +} diff --git a/app/src/styles/components/footer/footer.scss b/app/src/styles/components/footer/footer.scss index ba869a4..a457557 100644 --- a/app/src/styles/components/footer/footer.scss +++ b/app/src/styles/components/footer/footer.scss @@ -23,6 +23,7 @@ padding: 3px 6px; border-radius: 12px; color: var(--text-color); + backdrop-filter: blur(14px); .selector { color: var(--text-color); @@ -33,70 +34,51 @@ .logs-wrapper { display: flex; gap: 6px; + position: relative; + // dummy + .bg-dummy{ + background: var(--background-color-solid); + position: absolute; + z-index: -1; + } + .bg-dummy.left-top{ + top: 1px; + left: 4px; + width: 60%; + height: 16px; + border-radius: 20px; + } + .bg-dummy.right-bottom{ + right: 68px; + bottom: 0; + width: 20%; + height: 100%; + border-radius: 50%; + } + + .log-container { + background: var(--background-color); + backdrop-filter: blur(20px); + border-radius: 12px; + @include flex-center; + overflow: hidden; + } .logs-detail, .version { + @include flex-center; border-radius: 12px; - background: var(--background-color); padding: 3px 6px; + height: 100%; color: var(--text-color); - display: flex; - align-items: center; gap: 6px; } - .log { - background-color: var(--log-default-background-color); - - .log-message { - color: var(--default-text-color); - - } - } - - .info { - background-color: var(--log-info-background-color); - - .log-message { - color: var(--log-info-text-color); - - } - } - - .error { - background-color: var(--log-error-background-color); - - .log-message { - color: var(--log-error-text-color); - - } - } - - .warning { - background-color: var(--log-warn-background-color); - - .log-message { - color: var(--log-warn-text-color); - - } - } - - .success { - background-color: var(--log-success-background-color); - - .log-message { - color: var(--log-success-text-color); - - } - } - - - - .logs-detail { padding: 2px 12px; cursor: pointer; - + outline: 0 solid var(--border-color); + outline-offset: -1px; .log-icon { @include flex-center; } @@ -110,13 +92,51 @@ } .version { + background: var(--background-color); font-size: var(--font-size-tiny); - display: flex; - gap: 6px; .icon { @include flex-center; } } + + .log { + background: var(--log-default-background-color); + outline-color: var(--default-text-color); + .log-message { + color: var(--default-text-color); + } + } + + .info { + background: var(--log-info-background-color); + outline-color: var(--log-info-text-color); + .log-message { + color: var(--log-info-text-color); + } + } + + .error { + background: var(--log-error-background-color); + outline-color: var(--log-error-text-color); + .log-message { + color: var(--log-error-text-color); + } + } + + .warning { + background: var(--log-warn-background-color); + outline-color: var(--log-warn-text-color); + .log-message { + color: var(--log-warn-text-color); + } + } + + .success { + background: var(--log-success-background-color); + .log-message { + color: var(--log-success-text-color); + } + } } -} \ No newline at end of file +} diff --git a/app/src/styles/components/logs/logs.scss b/app/src/styles/components/logs/logs.scss index f07708b..9f85dd0 100644 --- a/app/src/styles/components/logs/logs.scss +++ b/app/src/styles/components/logs/logs.scss @@ -5,14 +5,11 @@ width: 100vw; height: 100vh; background: var(--background-color-secondary); + @include flex-center; .log-list-wrapper { - height: 50%; - min-width: 50%; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + height: 60%; + min-width: 55%; z-index: 5; background: var(--background-color); padding: 14px 12px; @@ -31,6 +28,10 @@ display: flex; align-items: center; gap: 6px; + .icon{ + @include flex-center; + scale: .8; + } } .close { @@ -38,9 +39,13 @@ height: 28px; width: 28px; cursor: pointer; + border-radius: #{$border-radius-medium}; svg { scale: 1.6; } + &:hover{ + background: var(--background-color); + } } } @@ -60,25 +65,26 @@ } .log-entry-wrapper { - height: 100%; + height: calc(100% - 80px); display: flex; flex-direction: column; gap: 4px; background: var(--background-color); - padding: 18px 10px; + padding: 10px; border-radius: 16px; outline: 1px solid var(--border-color); outline-offset: -1px; + overflow: auto; .log-entry { padding: 4px; border-radius: 4px; font-size: var(--font-size-small); display: flex; - align-items: center; - gap: 6px; .log-icon { + height: 24px; + width: 24px; @include flex-center; } .log-entry-message-container { @@ -90,6 +96,7 @@ font-weight: 300; opacity: 0.8; text-wrap: nowrap; + height: 100%; } .log-entry-message{ width: 100%; diff --git a/app/src/styles/components/tools.scss b/app/src/styles/components/tools.scss index 902e0fb..03813a4 100644 --- a/app/src/styles/components/tools.scss +++ b/app/src/styles/components/tools.scss @@ -36,6 +36,7 @@ width: 0; opacity: 0; animation: expandWidth 0.2s ease-in-out forwards; + will-change: width; .tool-button { @include flex-center; diff --git a/app/src/styles/pages/userAuth.scss b/app/src/styles/pages/userAuth.scss index c27b66f..cb45c13 100644 --- a/app/src/styles/pages/userAuth.scss +++ b/app/src/styles/pages/userAuth.scss @@ -89,7 +89,7 @@ border-radius: #{$border-radius-extra-large}; background: var(--background-color); font-size: 14px; - color: var(--input-text-color); + color: var(--text-button-color); &:focus { border-color: var(--accent-color); @@ -121,7 +121,7 @@ width: 100%; padding: 10px; background: var(--background-color-button); - color: var(--background-color); + color: var(--text-button-color); font-size: 14px; border: none; outline: none;