Vishnu
135633ef7a
- Removed the random color generation function from ProductionCapacity component. - Updated ThroughputSummary component to remove unused imports. - Simplified LogList component by removing unnecessary icons and integrating GetLogIcon for log types. - Enhanced LoggerContext to support a new "success" log type and optimized logger methods with useMemo. - Adjusted SimulationPlayer to conditionally render analysis components. - Deleted index.css and removed its import from index.tsx. - Cleaned up builder module by removing unused imports and optimizing state management. - Removed savedTheme from Ground component. - Changed log message from info to warning in Project component. - Updated log color variables in SCSS files for better visibility and consistency. - Added new log icons for success, error, info, and warning in LogIcons component. - Created GetLogIcon utility to streamline log icon rendering based on log type.
82 lines
2.4 KiB
TypeScript
82 lines
2.4 KiB
TypeScript
// LogList.tsx
|
|
import React, { useState } from "react";
|
|
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" | "success"
|
|
>("all");
|
|
|
|
const formatTimestamp = (date: Date) => new Date(date).toLocaleTimeString();
|
|
|
|
const filteredLogs =
|
|
selectedTab === "all"
|
|
? [...logs].reverse()
|
|
: [...logs].filter((log) => log.type === selectedTab).reverse();
|
|
|
|
return (
|
|
// eslint-disable-next-line
|
|
<div
|
|
className="log-list-container"
|
|
onClick={() => setIsLogListVisible(false)}
|
|
>
|
|
<div
|
|
className="log-list-wrapper"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
}}
|
|
>
|
|
<div className="log-header">
|
|
<div className="log-header-wrapper">
|
|
<div className="icon">
|
|
<LogListIcon />
|
|
</div>
|
|
<div className="head">Log List</div>
|
|
</div>
|
|
<button
|
|
title="close-btn"
|
|
className="close"
|
|
onClick={() => setIsLogListVisible(false)}
|
|
>
|
|
<CloseIcon />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<div className="log-nav-wrapper">
|
|
{["all", "info", "warning", "error"].map((type) => (
|
|
<button
|
|
title="log-type"
|
|
key={type}
|
|
className={`log-nav ${selectedTab === type ? "active" : ""}`}
|
|
onClick={() => setSelectedTab(type as any)}
|
|
>
|
|
{`${type.charAt(0).toUpperCase() + type.slice(1)} Logs`}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Log Entries */}
|
|
<div className="log-entry-wrapper">
|
|
{filteredLogs.map((log) => (
|
|
<div key={log.id} className={`log-entry ${log.type}`}>
|
|
<div className="log-icon">{GetLogIcon(log.type)}</div>
|
|
<div className="log-entry-message-container">
|
|
<div className="log-entry-message">{log.message}</div>
|
|
<div className="message-time">
|
|
{formatTimestamp(log.timestamp)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LogList;
|