|
|
|
@ -1,13 +1,6 @@
|
|
|
|
import React, { useCallback, useEffect, useState } from "react";
|
|
|
|
import React, { useCallback, useEffect, useState } from "react";
|
|
|
|
import "./App.css";
|
|
|
|
import "./App.css";
|
|
|
|
import {
|
|
|
|
import { Layout, Menu, ConfigProvider, Dropdown, notification } from "antd";
|
|
|
|
Layout,
|
|
|
|
|
|
|
|
Menu,
|
|
|
|
|
|
|
|
ConfigProvider,
|
|
|
|
|
|
|
|
Dropdown,
|
|
|
|
|
|
|
|
notification,
|
|
|
|
|
|
|
|
Button,
|
|
|
|
|
|
|
|
} from "antd";
|
|
|
|
|
|
|
|
import { Routes, Route, Navigate, useLocation } from "react-router-dom";
|
|
|
|
import { Routes, Route, Navigate, useLocation } from "react-router-dom";
|
|
|
|
import { mainItems, superItems } from "./Utils/sidebar";
|
|
|
|
import { mainItems, superItems } from "./Utils/sidebar";
|
|
|
|
import Login from "./Auth/Login";
|
|
|
|
import Login from "./Auth/Login";
|
|
|
|
@ -16,8 +9,6 @@ import { LogoutApi } from "./API/auth/Logout";
|
|
|
|
import { Link } from "react-router-dom";
|
|
|
|
import { Link } from "react-router-dom";
|
|
|
|
import { MenuProps } from "antd";
|
|
|
|
import { MenuProps } from "antd";
|
|
|
|
// @ts-ignore
|
|
|
|
// @ts-ignore
|
|
|
|
import TT_ELD from "./assets/tticon.svg";
|
|
|
|
|
|
|
|
import collapsedIcon from "./assets/collapsed.png";
|
|
|
|
|
|
|
|
import themeBtn from "./assets/theme-btn.svg";
|
|
|
|
import themeBtn from "./assets/theme-btn.svg";
|
|
|
|
// @ts-ignore
|
|
|
|
// @ts-ignore
|
|
|
|
import avatar from "./assets/avatar-img.svg";
|
|
|
|
import avatar from "./assets/avatar-img.svg";
|
|
|
|
@ -53,7 +44,6 @@ import Requests from "./Components/Requests/Requests";
|
|
|
|
import { callController } from "./API/LayoutApi/callrequests";
|
|
|
|
import { callController } from "./API/LayoutApi/callrequests";
|
|
|
|
import Call from "./Components/CallRequests/Call";
|
|
|
|
import Call from "./Components/CallRequests/Call";
|
|
|
|
import { dark, light } from "./Utils/styles";
|
|
|
|
import { dark, light } from "./Utils/styles";
|
|
|
|
// import Input from "antd/es/input/Input";
|
|
|
|
|
|
|
|
const { Header, Sider, Content } = Layout;
|
|
|
|
const { Header, Sider, Content } = Layout;
|
|
|
|
const userJSON: any = localStorage.getItem("user");
|
|
|
|
const userJSON: any = localStorage.getItem("user");
|
|
|
|
const userObject = JSON.parse(userJSON);
|
|
|
|
const userObject = JSON.parse(userJSON);
|
|
|
|
@ -275,9 +265,8 @@ const App: React.FC = () => {
|
|
|
|
// taskSocket = new WebSocket(
|
|
|
|
// taskSocket = new WebSocket(
|
|
|
|
// `ws://10.10.10.64:8080/global/?user_id=${admin_id}`
|
|
|
|
// `ws://10.10.10.64:8080/global/?user_id=${admin_id}`
|
|
|
|
// );
|
|
|
|
// );
|
|
|
|
// taskSocket = new WebSocket(`wss://api.tteld.co/global/?user_id=${admin_id}`);
|
|
|
|
|
|
|
|
taskSocket = new WebSocket(
|
|
|
|
taskSocket = new WebSocket(
|
|
|
|
`wss://ontime-socket.tteld.co/global/?user_id=${admin_id}`
|
|
|
|
`wss://api.tteld.co/global/?user_id=${admin_id}`
|
|
|
|
);
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
taskSocket.addEventListener("open", (event) => {
|
|
|
|
taskSocket.addEventListener("open", (event) => {
|
|
|
|
@ -302,28 +291,6 @@ const App: React.FC = () => {
|
|
|
|
connect();
|
|
|
|
connect();
|
|
|
|
}, []);
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
|
|
|
const handleResize = () => {
|
|
|
|
|
|
|
|
if (window.innerWidth <= 768) {
|
|
|
|
|
|
|
|
setCollapsed(true);
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
setCollapsed(false);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
handleResize();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
window.addEventListener("resize", handleResize);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
|
|
|
|
window.removeEventListener("resize", handleResize);
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const toggleCollapsed = () => {
|
|
|
|
|
|
|
|
setCollapsed(!collapsed);
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// function checkConnection() {
|
|
|
|
// function checkConnection() {
|
|
|
|
// if (!isLive) {
|
|
|
|
// if (!isLive) {
|
|
|
|
// connect();
|
|
|
|
// connect();
|
|
|
|
@ -387,41 +354,22 @@ const App: React.FC = () => {
|
|
|
|
) : (
|
|
|
|
) : (
|
|
|
|
<Sider
|
|
|
|
<Sider
|
|
|
|
theme={"dark"}
|
|
|
|
theme={"dark"}
|
|
|
|
|
|
|
|
collapsible
|
|
|
|
collapsed={collapsed}
|
|
|
|
collapsed={collapsed}
|
|
|
|
onCollapse={toggleCollapsed}
|
|
|
|
onCollapse={(value) => setCollapsed(value)}
|
|
|
|
style={{
|
|
|
|
style={{
|
|
|
|
height: "100vh",
|
|
|
|
height: "100vh",
|
|
|
|
background:
|
|
|
|
background:
|
|
|
|
theme === true ? "#202020" : "rgba(20, 22, 41, 1)",
|
|
|
|
theme === true ? "#202020" : "rgba(20, 22, 41, 1)",
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
|
|
|
style={{
|
|
|
|
|
|
|
|
display: "flex",
|
|
|
|
|
|
|
|
alignItems: "center",
|
|
|
|
|
|
|
|
justifyContent: "space-around",
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<p
|
|
|
|
<p
|
|
|
|
onClick={rep}
|
|
|
|
onClick={rep}
|
|
|
|
style={{ cursor: "pointer" }}
|
|
|
|
style={{ cursor: "pointer" }}
|
|
|
|
className={collapsed ? "logo-collapsed" : "logo"}
|
|
|
|
className={collapsed ? "logo-collapsed" : "logo"}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
{collapsed ? (
|
|
|
|
TT ELD
|
|
|
|
<img
|
|
|
|
|
|
|
|
className="tt-icon-collapsed"
|
|
|
|
|
|
|
|
src={TT_ELD}
|
|
|
|
|
|
|
|
alt="Icon"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
) : (
|
|
|
|
|
|
|
|
"TT ELD"
|
|
|
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
</p>
|
|
|
|
</p>
|
|
|
|
<button onClick={toggleCollapsed} style={{ all: "unset" }}>
|
|
|
|
|
|
|
|
<img src={collapsedIcon} />
|
|
|
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<Menu
|
|
|
|
<Menu
|
|
|
|
theme={"dark"}
|
|
|
|
theme={"dark"}
|
|
|
|
mode="inline"
|
|
|
|
mode="inline"
|
|
|
|
@ -456,7 +404,8 @@ const App: React.FC = () => {
|
|
|
|
className="site-layout-background"
|
|
|
|
className="site-layout-background"
|
|
|
|
style={{
|
|
|
|
style={{
|
|
|
|
padding: 0,
|
|
|
|
padding: 0,
|
|
|
|
background: theme === true ? "#202020" : "#F5F5F8",
|
|
|
|
background:
|
|
|
|
|
|
|
|
theme === true ? "#202020" : "rgba(215, 216, 224, 1)",
|
|
|
|
display: "flex",
|
|
|
|
display: "flex",
|
|
|
|
justifyContent: "end",
|
|
|
|
justifyContent: "end",
|
|
|
|
alignItems: "center",
|
|
|
|
alignItems: "center",
|
|
|
|
@ -533,7 +482,7 @@ const App: React.FC = () => {
|
|
|
|
padding: 24,
|
|
|
|
padding: 24,
|
|
|
|
minHeight: "92vh",
|
|
|
|
minHeight: "92vh",
|
|
|
|
maxHeight: "calc(90vh - 10px)",
|
|
|
|
maxHeight: "calc(90vh - 10px)",
|
|
|
|
overflowY: "auto",
|
|
|
|
overflowY: "scroll",
|
|
|
|
background: theme === true ? "#202020" : "#fff",
|
|
|
|
background: theme === true ? "#202020" : "#fff",
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
|
