diff --git a/app/src/components/footer/Footer.tsx b/app/src/components/footer/Footer.tsx index 94ee0b9..39273df 100644 --- a/app/src/components/footer/Footer.tsx +++ b/app/src/components/footer/Footer.tsx @@ -1,5 +1,5 @@ -import React, { useEffect } from "react"; -import { HelpIcon } from "../icons/DashboardIcon"; +import React, { useEffect, useState } from "react"; +import { HelpIcon, WifiIcon } from "../icons/DashboardIcon"; import { useLogger } from "../ui/log/LoggerContext"; import { GetLogIcon } from "./getLogIcons"; import { @@ -31,6 +31,27 @@ const Footer: React.FC = () => { const { Leftnote, Middlenote, Rightnote } = useMouseNoteStore(); + const [isOnline, setIsOnline] = useState(navigator.onLine); + + useEffect(() => { + const handleOnline = () => { + echo.success('You are back Online'); + setIsOnline(true); + }; + const handleOffline = () => { + echo.warn('Changes made now might not be saved'); + echo.error('You are now Offline.'); + setIsOnline(false); + }; + + window.addEventListener("online", handleOnline); + window.addEventListener("offline", handleOffline); + + return () => { + window.removeEventListener("online", handleOnline); + window.removeEventListener("offline", handleOffline); + }; + }, []); const mouseButtons = [ { icon: , @@ -98,6 +119,16 @@ const Footer: React.FC = () => { +
+
+ +
+
{isOnline ? "Online" : "Offline"}
+
diff --git a/app/src/components/icons/DashboardIcon.tsx b/app/src/components/icons/DashboardIcon.tsx index 1aa94b5..3eb5301 100644 --- a/app/src/components/icons/DashboardIcon.tsx +++ b/app/src/components/icons/DashboardIcon.tsx @@ -253,3 +253,20 @@ export function LogoutIcon() { ); } + +export function WifiIcon() { + return ( + + + + ); +} diff --git a/app/src/components/ui/features/RenameTooltip.tsx b/app/src/components/ui/features/RenameTooltip.tsx index 87de122..d55c5d7 100644 --- a/app/src/components/ui/features/RenameTooltip.tsx +++ b/app/src/components/ui/features/RenameTooltip.tsx @@ -4,7 +4,6 @@ import { useLeftData, useTopData, } from "../../../store/visualization/useZone3DWidgetStore"; -import { useRenameModeStore } from "../../../store/builder/store"; type RenameTooltipProps = { name: string; @@ -20,6 +19,7 @@ const RenameTooltip: React.FC = ({ name, onSubmit }) => { const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); onSubmit(value.trim()); + echo.info(`Selected Object has been renamed to ${value.trim()}`); setTop(0); setLeft(0); }; diff --git a/app/src/components/ui/inputs/RenameInput.tsx b/app/src/components/ui/inputs/RenameInput.tsx index 637dec3..31cc311 100644 --- a/app/src/components/ui/inputs/RenameInput.tsx +++ b/app/src/components/ui/inputs/RenameInput.tsx @@ -12,7 +12,12 @@ interface RenameInputProps { canEdit?: boolean; } -const RenameInput: React.FC = ({ value, onRename, checkDuplicate, canEdit = true }) => { +const RenameInput: React.FC = ({ + value, + onRename, + checkDuplicate, + canEdit = true, +}) => { const [isEditing, setIsEditing] = useState(false); const [text, setText] = useState(value); const [isDuplicate, setIsDuplicate] = useState(false); @@ -36,10 +41,10 @@ const RenameInput: React.FC = ({ value, onRename, checkDuplica }; const handleBlur = () => { - - if (isDuplicate) return + if (isDuplicate) return; setIsEditing(false); if (onRename && !isDuplicate) { + echo.info(`Selected Object has been renamed to ${text}`) onRename(text); } }; @@ -52,6 +57,7 @@ const RenameInput: React.FC = ({ value, onRename, checkDuplica if (e.key === "Enter" && !isDuplicate) { setIsEditing(false); if (onRename) { + echo.info(`Selected Object has been renamed to ${text}`) onRename(text); } } @@ -80,4 +86,4 @@ const RenameInput: React.FC = ({ value, onRename, checkDuplica ); }; -export default RenameInput +export default RenameInput; diff --git a/app/src/pages/Project.tsx b/app/src/pages/Project.tsx index d7bebd8..f3f369a 100644 --- a/app/src/pages/Project.tsx +++ b/app/src/pages/Project.tsx @@ -101,6 +101,7 @@ const Project: React.FC = () => { if (email) { const token = localStorage.getItem("token"); const refreshToken = localStorage.getItem("refreshToken"); + echo.warn('Validating token'); if (token) { useSocketStore .getState() @@ -110,7 +111,7 @@ const Project: React.FC = () => { setOrganization(organization); setUserName(userName); } - echo.success("Log in successful"); + echo.success("Project initialized and loaded successfully"); } else { navigate("/"); } diff --git a/app/src/services/simulation/products/renameProductApi.ts b/app/src/services/simulation/products/renameProductApi.ts index d64f0da..d43997e 100644 --- a/app/src/services/simulation/products/renameProductApi.ts +++ b/app/src/services/simulation/products/renameProductApi.ts @@ -25,6 +25,7 @@ export const renameProductApi = async (body: { if (!response.ok) { console.error("Failed to rename product"); + echo.error("Failed to rename product"); } const result = await response.json(); @@ -32,11 +33,11 @@ export const renameProductApi = async (body: { return result; } catch (error) { echo.error("Failed to rename product Api"); - if (error instanceof Error) { console.log(error.message); } else { console.log("An unknown error occurred"); + echo.log("An unknown error occurred"); } } }; diff --git a/app/src/styles/components/footer/_footer.scss b/app/src/styles/components/footer/_footer.scss index 152a39f..0b490ee 100644 --- a/app/src/styles/components/footer/_footer.scss +++ b/app/src/styles/components/footer/_footer.scss @@ -63,7 +63,7 @@ } .bg-dummy.right-bottom { - right: 68px; + right: 84px; bottom: 0; width: 20%; height: 100%; @@ -79,7 +79,8 @@ } .logs-detail, - .version { + .version, + .wifi-connection { @include flex-center; border-radius: #{$border-radius-extra-large}; padding: 3px 6px; @@ -107,7 +108,28 @@ } } - .version { + .wifi-connection { + .tooltip { + transform: translateX(-16px); + &::after { + left: 76%; + } + } + &:hover { + .tooltip { + opacity: 1; + } + } + &.connected svg path { + fill: #1ec018; + } + &.disconnected svg path { + fill: #e44405; + } + } + + .version, + .wifi-connection { background: var(--background-color); font-size: var(--font-size-tiny); @@ -179,7 +201,7 @@ background: var(--background-color); border-radius: #{$border-radius-medium}; outline: 1px solid var(--border-color); - &:hover{ + &:hover { background: var(--background-color-solid); } } @@ -288,7 +310,7 @@ font-family: monospace; font-size: var(--font-size-tiny); color: var(--icon-default-color-active); - &:last-child{ + &:last-child { background: var(--background-color-button); } }