+
-
-
-
-
- {
- current === 'cashList' &&
-
-
-
-
-
-
- }
-
-
-
- - {t('cashing_list_tip')} -
-
- {
- current === 'cashList' &&
- }
- {
- current === 'cashHistory' &&
- }
- {
- current === 'chequeDetail' &&
+
);
}
CardChequeEarningList.defaultProps = {
- color: "light",
+ color: 'light',
};
CardChequeEarningList.propTypes = {
- color: PropTypes.oneOf(["light", "dark"]),
+ color: PropTypes.oneOf(['light', 'dark']),
};
diff --git a/src/components/Cards/CardChequeExpenseList.js b/src/components/Cards/CardChequeExpenseList.js
index 85d9fde..90b1493 100644
--- a/src/components/Cards/CardChequeExpenseList.js
+++ b/src/components/Cards/CardChequeExpenseList.js
@@ -1,71 +1,56 @@
-import React, {useState, useCallback} from "react";
-import PropTypes from "prop-types";
-import {Menu} from 'antd';
-import ChequeExpenseTable from "components/Tables/ChequeExpenseTable.js"
-import ChequeDetailTable from "components/Tables/ChequeDetailTable.js";
-import themeStyle from "utils/themeStyle.js";
-import {t} from "utils/text.js";
+import React, { useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { Menu } from 'antd';
+import ChequeExpenseTable from 'components/Tables/ChequeExpenseTable.js';
+import ChequeDetailTable from 'components/Tables/ChequeDetailTable.js';
+import { t } from 'utils/text.js';
-export default function CardChequeExpenseList({color}) {
+export default function CardChequeExpenseList({ color }) {
+ const [current, setCurrent] = useState('expenseList');
- const [current, setCurrent] = useState('expenseList');
+ const handleClick = useCallback(e => {
+ console.log('click ', e.key);
+ setCurrent(e.key);
+ }, []);
- const handleClick = useCallback(e => {
- console.log('click ', e.key);
- setCurrent(e.key);
- }, []);
-
- return (
-
- <>
-
+
+
+
+
+ {current === 'cashList' && (
+
+ {/*
+ )}
+
+
*/}
+
+ {t('cashing_list_tip')}
+
+ {current === 'cashList' &&
-
+
-
-
-
-
- {
- current === 'expenseList' &&
-
-
-
-
-
-
- }
-
-
- - {t('expense_list_tip')} -
-
- {
- current === 'expenseList' &&
- }
- {
- current === 'chequeDetail' &&
+ return (
+
+
+ );
}
CardChequeExpenseList.defaultProps = {
- color: "light",
+ color: 'light',
};
CardChequeExpenseList.propTypes = {
- color: PropTypes.oneOf(["light", "dark"]),
+ color: PropTypes.oneOf(['light', 'dark']),
};
diff --git a/src/components/Cards/CardConfig.js b/src/components/Cards/CardConfig.js
index 3dabeff..99c0487 100644
--- a/src/components/Cards/CardConfig.js
+++ b/src/components/Cards/CardConfig.js
@@ -1,46 +1,40 @@
-import React, { useState, useEffect, useRef, memo } from "react";
-import { Switch, Tooltip } from "antd";
-import { Link } from "react-router-dom";
-import Emitter from "utils/eventBus";
-import { t } from "utils/text.js";
-import themeStyle from "utils/themeStyle.js";
+import React, { useState, useEffect, useRef, memo } from 'react';
+import { Switch, Tooltip } from 'antd';
+import { InfoCircleOutlined } from '@ant-design/icons';
+import { Link } from 'react-router-dom';
+import ButtonRoundRect from 'components/Buttons/ButtonRoundRect';
+import Emitter from 'utils/eventBus';
+import { t } from 'utils/text.js';
-import {
- getHostConfigData,
- resetHostConfigData,
- editHostConfig,
-} from "services/otherService.js";
+import { getHostConfigData, resetHostConfigData, editHostConfig } from 'services/otherService.js';
function CardConfig({ color }) {
const [configList, setConfigList] = useState([]);
- const [rpcAddress, setRpcAddress] = useState("");
+ const [rpcAddress, setRpcAddress] = useState('');
const rpcAddressRef = useRef(null);
const handleResetDefault = () => {
- Emitter.emit("openConfigConfirmModal", {});
+ Emitter.emit('openConfigConfirmModal', {});
};
const handleChange = ({ checked, parentIndex, childIndex }) => {
const needUpdateData = [];
- setConfigList((oldConfigList) => {
+ setConfigList(oldConfigList => {
const cloneConfigList = JSON.parse(JSON.stringify(oldConfigList));
if (!isNaN(childIndex)) {
- cloneConfigList[parentIndex]["children"][childIndex]["checked"] =
- checked;
- needUpdateData.push(
- cloneConfigList[parentIndex]["children"][childIndex]
- );
+ cloneConfigList[parentIndex]['children'][childIndex]['checked'] = checked;
+ needUpdateData.push(cloneConfigList[parentIndex]['children'][childIndex]);
} else {
- cloneConfigList[parentIndex]["checked"] = checked;
+ cloneConfigList[parentIndex]['checked'] = checked;
needUpdateData.push(cloneConfigList[parentIndex]);
}
if (parentIndex === 0 && isNaN(childIndex)) {
- cloneConfigList[parentIndex]["children"].forEach((item) => {
+ cloneConfigList[parentIndex]['children'].forEach(item => {
if (checked) {
- if (!item["checked"]) {
- item["checked"] = true;
+ if (!item['checked']) {
+ item['checked'] = true;
needUpdateData.push(item);
}
- item["isDisable"] = true;
+ item['isDisable'] = true;
} else {
- item["isDisable"] = false;
+ item['isDisable'] = false;
}
});
}
@@ -48,28 +42,27 @@ function CardConfig({ color }) {
return cloneConfigList;
});
};
- const handleUpdateConfig = async (needUpdateData) => {
+ const handleUpdateConfig = async needUpdateData => {
for (let i = 0; i < needUpdateData.length; i++) {
const { key, checked } = needUpdateData[i];
editHostConfig(`Experimental.${key}`, checked, true);
}
};
-
-
+
useEffect(() => {
fetchData();
- Emitter.on("handleConfigChange", handleChange);
- Emitter.on("handleResetConfig", handleResetConfig);
+ Emitter.on('handleConfigChange', handleChange);
+ Emitter.on('handleResetConfig', handleResetConfig);
return () => {
- Emitter.removeListener("handleConfigChange");
- Emitter.removeListener("handleResetConfig");
+ Emitter.removeListener('handleConfigChange');
+ Emitter.removeListener('handleResetConfig');
};
- // eslint-disable-next-line react-hooks/exhaustive-deps
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const fetchData = async () => {
const data = await getHostConfigData();
let configList = [];
- let rpcAddress = "";
+ let rpcAddress = '';
if (data && data.Experimental) {
const { Experimental, ChainInfo } = data;
if (Experimental) {
@@ -84,31 +77,30 @@ function CardConfig({ color }) {
});
setRpcAddress(rpcAddress);
};
- const handleExperimentalData = (experimental) => {
+ const handleExperimentalData = experimental => {
if (!experimental) return [];
- const { StorageHostEnabled, ReportOnline, ReportStatusContract } =
- experimental;
+ const { StorageHostEnabled, ReportOnline, ReportStatusContract } = experimental;
const configList = [
{
- title: "enable_storage_host",
+ title: 'enable_storage_host',
checked: StorageHostEnabled,
- key: "StorageHostEnabled",
- tips: "enable_storage_host_tips",
+ key: 'StorageHostEnabled',
+ tips: 'enable_storage_host_tips',
children: [
{
- title: "enable_report_online",
- tips: "enable_report_online_tips",
+ title: 'enable_report_online',
+ tips: 'enable_report_online_tips',
isChild: true,
checked: ReportOnline,
- key: "ReportOnline",
+ key: 'ReportOnline',
isDisable: StorageHostEnabled ? true : false,
},
{
- title: "enable_report_status_contract",
- tips: "enable_report_status_contract_tips",
+ title: 'enable_report_status_contract',
+ tips: 'enable_report_status_contract_tips',
isChild: true,
checked: ReportStatusContract,
- key: "ReportStatusContract",
+ key: 'ReportStatusContract',
isDisable: StorageHostEnabled ? true : false,
},
],
@@ -121,35 +113,31 @@ function CardConfig({ color }) {
let experimentalData = {};
if (data) {
experimentalData = {
- ReportOnline: data["Experimental.ReportOnline"],
- ReportStatusContract: data["Experimental.ReportStatusContract"],
- StorageHostEnabled: data["Experimental.StorageHostEnabled"],
+ ReportOnline: data['Experimental.ReportOnline'],
+ ReportStatusContract: data['Experimental.ReportStatusContract'],
+ StorageHostEnabled: data['Experimental.StorageHostEnabled'],
};
}
const configList = handleExperimentalData(experimentalData);
- const rpcAddress = data["ChainInfo.Endpoint"];
+ const rpcAddress = data['ChainInfo.Endpoint'];
setRpcAddress(rpcAddress);
setConfigList(() => {
return configList;
});
};
- const changeRpcAddress = async (e) => {
- editHostConfig("ChainInfo.Endpoint", rpcAddressRef.current.value, false);
+ const changeRpcAddress = async e => {
+ editHostConfig('ChainInfo.Endpoint', rpcAddressRef.current.value, false);
};
- const CardConfigItem = ({
- configItem,
- parentIndex,
- childIndex,
- })=>{
- const onChange = (checked) => {
- Emitter.emit("handleConfigChange", { checked, parentIndex, childIndex });
+ const CardConfigItem = ({ configItem, parentIndex, childIndex }) => {
+ const onChange = checked => {
+ Emitter.emit('handleConfigChange', { checked, parentIndex, childIndex });
};
return (
-
+
+
+
+
+ {/* {current === 'expenseList' && (
+
+
+ )} */}
+
+
-
- );
+ {t('expense_list_tip')}
+ {current === 'expenseList' &&
+
-
+
+
{t(configItem.title)}
{t(configItem.tips)}}>
-
+
@@ -164,99 +152,64 @@ function CardConfig({ color }) {
);
};
return (
- <>
-
-
-
- {t("advance_config_tips")}}>
-
-
-
- - {t("advance_config")} -
-
-
-
-
-
-
+
+
+
+ {t('advance_config_tips')}}>
+
- {t('advance_config')}
+
- {configList.map((configItem, configIndex) => {
- return (
-
-
- );
- })}
-
-
- );
- })}
-
-
);
}
-export default memo(CardConfig);
\ No newline at end of file
+export default memo(CardConfig);
diff --git a/src/components/Cards/CardConfigFileDetail.js b/src/components/Cards/CardConfigFileDetail.js
index 16573cc..0345f61 100644
--- a/src/components/Cards/CardConfigFileDetail.js
+++ b/src/components/Cards/CardConfigFileDetail.js
@@ -1,19 +1,14 @@
-/*eslint-disable*/
-import React, { useState, useRef, useEffect, useContext } from "react";
-import ReactJson from "react-json-view";
-import { Breadcrumb } from "antd";
-import { t } from "utils/text.js";
-import { Link } from "react-router-dom";
-import themeStyle from "utils/themeStyle.js";
-import {
- getHostConfigData,
-} from "services/otherService.js";
+import React, { useState, useEffect } from 'react';
+import ReactJson from 'react-json-view';
+import { Breadcrumb } from 'antd';
+import { t } from 'utils/text.js';
+import { Link } from 'react-router-dom';
+import themeStyle from 'utils/themeStyle.js';
+import { getHostConfigData } from 'services/otherService.js';
export default function CardConfigFileDetail({ color }) {
- const jsonTheme = themeStyle.bg[color].includes("white")
- ? "monokai"
- : "ocean";
- const [nodeData,setNodeData] = useState({});
+ const jsonTheme = themeStyle.bg[color].includes('white') ? 'monokai' : 'ocean';
+ const [nodeData, setNodeData] = useState({});
const fetchData = async () => {
const data = await getHostConfigData();
setNodeData(() => {
@@ -25,30 +20,16 @@ export default function CardConfigFileDetail({ color }) {
}, []);
return (
-
-
-
-
-
-
+
+
+
+
+ {configList.map((configItem, configIndex) => {
+ return (
+
-
+
+
+ );
+ })}
+
+
+ );
+ })}
+
+
+
+
+
+
-
-
-
-
- {t("setting_breadcrumb")}
-
-
-
- {t("setting_file_config_breadcrumb")}
-
-
-
- {t("setting_file_config_breadcrumb_des")}
+
+
+
+
+ {t('setting_breadcrumb')}
+
+
+ {t('setting_file_config_breadcrumb')}
+
+ {
-
- fetchData();
- return () => {
- didCancel = true;
- };
- }, []);
-
- const fetchData = async () => {
- didCancel = false;
- const [data2] = await getHostAllScore();
- const newLeftData = data2.leftData;
- const newRightData = data2.rightData;
- if (!didCancel) {
- if(newLeftData.level){
- setNewRingChartData(newLeftData);
- setNewProgressChartData(newRightData);
- setNewScoreInit(false)
- }else{
- setNewScoreInit(true)
- }
-
- }
+export default function CardHostScore({ color }) {
+ const [newRingChartData, setNewRingChartData] = useState({
+ lastUpdated: 0,
+ level: 0,
+ });
+ const [newProgressChartData, setNewProgressChartData] = useState({
+ uptimeLevel: 0,
+ ageLevel: 0,
+ versionLevel: 0,
+ activeLevel: 0,
+ });
+
+ const [newScoreInit, setNewScoreInit] = useState(true);
+
+ useEffect(() => {
+ fetchData();
+ return () => {
+ didCancel = true;
};
-
-
- return (
- <>
-
{t('setting_file_config_breadcrumb_des')}
-
-
- );
+ }, []);
+
+ const fetchData = async () => {
+ didCancel = false;
+ const [data2] = await getHostAllScore();
+ const newLeftData = data2.leftData;
+ const newRightData = data2.rightData;
+ if (!didCancel) {
+ if (newLeftData.level) {
+ setNewRingChartData(newLeftData);
+ setNewProgressChartData(newRightData);
+ setNewScoreInit(false);
+ } else {
+ setNewScoreInit(true);
+ }
+ }
+ };
+
+ return (
+
-
-
-
-
-
-
-
-
-
+
+ );
}
diff --git a/src/components/Cards/CardNetworkFlow.js b/src/components/Cards/CardNetworkFlow.js
index a7a1ab3..bde7117 100644
--- a/src/components/Cards/CardNetworkFlow.js
+++ b/src/components/Cards/CardNetworkFlow.js
@@ -1,62 +1,75 @@
-import React, {useEffect, useState} from "react";
-import NetworkDoughnutChart from "components/Charts/NetworkDoughnutChart.js";
-import themeStyle from "utils/themeStyle.js";
-import {getNetworkFlow} from "services/dashboardService.js";
-import {t} from "utils/text.js";
+import React, { useEffect, useState } from 'react';
+import { Progress } from 'antd';
+import { getNetworkFlow } from 'services/dashboardService.js';
+import { t } from 'utils/text.js';
let didCancel = false;
-export default function CardNetworkFlow({color}) {
+export default function CardNetworkFlow({ color }) {
+ const [receive, setReceive] = useState(0);
+ const [send, setSend] = useState(0);
- const [receive, setReceive] = useState(0);
- const [send, setSend] = useState(0);
+ useEffect(() => {
+ fetchData();
+ let interval = setInterval(() => {
+ fetchData();
+ }, 6000);
+ return () => {
+ didCancel = true;
+ clearInterval(interval);
+ };
+ }, []);
- useEffect(() => {
- fetchData();
- let interval = setInterval(() => {
- fetchData();
- }, 6000);
- return () => {
- didCancel = true;
- clearInterval(interval);
- }
-
- }, [])
-
- const fetchData = async () => {
- didCancel = false;
- let data = await getNetworkFlow();
- if (!didCancel) {
- setReceive(data['receive']);
- setSend(data['send']);
- }
+ const fetchData = async () => {
+ didCancel = false;
+ let data = await getNetworkFlow();
+ if (!didCancel) {
+ setReceive(data['receive']);
+ setSend(data['send']);
}
+ };
- return (
- <>
-
+
+
+
+
+
+
-
-
- );
+ return (
+
-
-
-
-
-
- - {t('network_traffic')} -
-
-
-
-
-
-
-
-
-
-
-
+
+ );
}
diff --git a/src/components/Cards/CardSettings.js b/src/components/Cards/CardSettings.js
index 2d60b22..32f502b 100755
--- a/src/components/Cards/CardSettings.js
+++ b/src/components/Cards/CardSettings.js
@@ -1,198 +1,174 @@
-/*eslint-disable*/
-import React, {useState, useRef, useEffect, useContext} from "react";
-import {Tooltip} from 'antd';
-import {mainContext} from 'reducer';
-import Emitter from "utils/eventBus";
-import {nodeStatusCheck, getPrivateKey, getRepo, setApiUrl} from "services/otherService.js";
-import {t} from "utils/text.js";
-import themeStyle from "utils/themeStyle.js";
-import {urlCheck} from "utils/checks.js";
-import PathConfirmModal from "components/Modals/PathConfirmModal.js";
+import React, { useState, useRef, useEffect, useContext } from 'react';
+import { Tooltip } from 'antd';
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import { mainContext } from 'reducer';
+import Emitter from 'utils/eventBus';
+import { nodeStatusCheck, getPrivateKey, getRepo, setApiUrl } from 'services/otherService.js';
+import { t } from 'utils/text.js';
+import { urlCheck } from 'utils/checks.js';
+import PathConfirmModal from 'components/Modals/PathConfirmModal.js';
import CardConfig from './CardConfig';
import ConfigConfirmModal from 'components/Modals/ConfigConfirmModal';
-import ClipboardCopy from "components/Utils/ClipboardCopy";
-import {getParameterByName} from "utils/BTFSUtil.js";
+import ClipboardCopy from 'components/Utils/ClipboardCopy';
+import { getParameterByName } from 'utils/BTFSUtil.js';
-export default function CardSettings({color}) {
- const apiUrl = getParameterByName("api",location.href);
- let NODE_URL = localStorage.getItem('NODE_URL') ? localStorage.getItem('NODE_URL') : 'http://localhost:5001';
- if(apiUrl && urlCheck(apiUrl) && NODE_URL!==apiUrl){
- setApiUrl(apiUrl);
- NODE_URL = apiUrl;
- }
- const inputRef = useRef(null);
- const {dispatch} = useContext(mainContext);
- const pathRef = useRef(null);
- const [path, setPath] = useState('');
- const [volume, setVolume] = useState(0);
+export default function CardSettings({ color }) {
+ const apiUrl = getParameterByName('api', window.location.href);
+ let NODE_URL = localStorage.getItem('NODE_URL')
+ ? localStorage.getItem('NODE_URL')
+ : 'http://localhost:5001';
+ if (apiUrl && urlCheck(apiUrl) && NODE_URL !== apiUrl) {
+ setApiUrl(apiUrl);
+ NODE_URL = apiUrl;
+ }
+ const inputRef = useRef(null);
+ const { dispatch } = useContext(mainContext);
+ const pathRef = useRef(null);
+ const [path, setPath] = useState('');
+ const [volume, setVolume] = useState(0);
- useEffect(() => {
- if(apiUrl){
- nodeStatusCheck(apiUrl);
- }
- inputRef.current.value = NODE_URL;
- getPath();
- }, []);
- const getCopyUrl = (nodeUrl) => {
- const curUrl = document.location.href;
- const splitUrlList = curUrl.split('?')
- const copyUrl = `${splitUrlList[0]}?api=${nodeUrl}`;
- return copyUrl;
+ useEffect(() => {
+ if (apiUrl) {
+ nodeStatusCheck(apiUrl);
}
- const [copyUrl,setCopyUrl] = useState(getCopyUrl(NODE_URL));
- const reveal = async () => {
- let {privateKey} = await getPrivateKey();
- if (privateKey) {
- Emitter.emit("openMessageModal", {message: privateKey});
- } else {
- Emitter.emit('showMessageAlert', {message: 'api_not_set', status: 'error', type: 'frontEnd'});
- }
- };
-
- const getPath = async () => {
- let {path, size} = await getRepo();
- setPath(path);
- setVolume(size);
- };
- const getNodeUrl = () => {
- let node_url = inputRef.current.value.replace(/\s*/g, "");
- if (node_url.charAt(node_url.length - 1) === '/') {
- node_url = node_url.substr(0, node_url.length - 1);
- }
- if (!urlCheck(node_url)) {
- return null;
- }
- return node_url;
+ inputRef.current.value = NODE_URL;
+ getPath();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+ const getCopyUrl = nodeUrl => {
+ const curUrl = document.location.href;
+ const splitUrlList = curUrl.split('?');
+ const copyUrl = `${splitUrlList[0]}?api=${nodeUrl}`;
+ return copyUrl;
+ };
+ const [copyUrl, setCopyUrl] = useState(getCopyUrl(NODE_URL));
+ const reveal = async () => {
+ let { privateKey } = await getPrivateKey();
+ if (privateKey) {
+ Emitter.emit('openMessageModal', { message: privateKey });
+ } else {
+ Emitter.emit('showMessageAlert', { message: 'api_not_set', status: 'error', type: 'frontEnd' });
}
- const save = async () => {
- const node_url = getNodeUrl();
- if(!node_url) return;
- let result = await nodeStatusCheck(node_url);
- if (result) {
- window.nodeStatus = true;
- dispatch({
- type: 'SET_NODE_STATUS',
- nodeStatus: true
- });
- getPath();
- Emitter.emit('showMessageAlert', {message: 'setting_success', status: 'success', type: 'frontEnd'});
- } else {
- setPath('');
- Emitter.emit('showMessageAlert', {message: 'setting_error', status: 'error', type: 'frontEnd'});
- }
- };
-
- const changePath = async (e) => {
- console.log('pathRef.current.value', pathRef.current.value)
- Emitter.emit('openPathConfirmModal', {type: 'init', path: pathRef.current.value, volume: volume});
- // let {Type, Message} = await changeRepo(pathRef.current.value.replace(/\s*/g, ""), volume);
- // if (Type === 'error') {
- // Emitter.emit('showMessageAlert', {message: Message, status: 'error'});
- // } else {
- // Emitter.emit('showMessageAlert', {message: 'change_success', status: 'success'});
- // }
- };
+ };
- const handleResetDefault = () => {
- Emitter.emit('openConfigConfirmModal', {});
+ const getPath = async () => {
+ let { path, size } = await getRepo();
+ setPath(path);
+ setVolume(size);
+ };
+ const getNodeUrl = () => {
+ let node_url = inputRef.current.value.replace(/\s*/g, '');
+ if (node_url.charAt(node_url.length - 1) === '/') {
+ node_url = node_url.substr(0, node_url.length - 1);
}
- const handleChange = () => {
- const node_url = getNodeUrl();
- if(!node_url) return;
- const copyUrl = getCopyUrl(node_url);
- setCopyUrl(copyUrl)
+ if (!urlCheck(node_url)) {
+ return null;
}
+ return node_url;
+ };
+ const save = async () => {
+ const node_url = getNodeUrl();
+ if (!node_url) return;
+ const copyUrl = getCopyUrl(node_url);
+ setCopyUrl(copyUrl);
+ let result = await nodeStatusCheck(node_url);
+ if (result) {
+ window.nodeStatus = true;
+ dispatch({
+ type: 'SET_NODE_STATUS',
+ nodeStatus: true,
+ });
+ getPath();
+ Emitter.emit('showMessageAlert', { message: 'setting_success', status: 'success', type: 'frontEnd' });
+ } else {
+ setPath('');
+ Emitter.emit('showMessageAlert', { message: 'setting_error', status: 'error', type: 'frontEnd' });
+ }
+ };
+
+ const changePath = async e => {
+ console.log('pathRef.current.value', pathRef.current.value);
+ Emitter.emit('openPathConfirmModal', { type: 'init', path: pathRef.current.value, volume: volume });
+ };
+
+ const handleChange = () => {
+ // const node_url = getNodeUrl();
+ // if (!node_url) return;
+ // const copyUrl = getCopyUrl(node_url);
+ // setCopyUrl(copyUrl);
+ };
- return (
- <>
- {t('network_traffic')}
+
+
+
+
+
+
+
-
+ );
}
diff --git a/src/components/Cards/CardWarning.js b/src/components/Cards/CardWarning.js
index 6b4828e..c202c92 100644
--- a/src/components/Cards/CardWarning.js
+++ b/src/components/Cards/CardWarning.js
@@ -1,55 +1,46 @@
-import React from "react";
-import themeStyle from "utils/themeStyle.js";
-import {t} from "utils/text.js";
+import React from 'react';
+import { t } from 'utils/text.js';
-export default function CardWarning({color, loading}) {
-
- return (
- <>
-
-
+ return (
+
-
- - {t('system_config')} -
- -
-
-
-
-
-
-
-
- {t('copy_url_tips')}}>
-
-
-
-
-
+ {/* api end point */}
+
-
-
+ {/* security */}
+
+
+ {/* advanced settings */}
+
+ {t('copy_url_tips')}}>
+ {/* */}
+
+
+ + API {t('endpoint')} +
+
+
+
+
+
+
+
-
-
-
- - {t('storage_path')} -
-
-
-
-
-
-
+ {/* storage path */}
+
-
- - {t('security')} -
-
-
-
-
+
-
+
+ {t('storage_path')}
+
+
+
+
+
+
-
- );
+
+
+ {t('security')}
+
+
+
+
+
+
+ {t('private_key')}
+
+
+
-
-
+export default function CardWarning({ loading }) {
+ return (
+
-
-
-
-
- {
- !loading && ![...]({require("assets/img/disconnected.png").default})
- }
- {
- loading && ![]({require("assets/img/gear.svg").default})
- }
-
-
- }
- {
- loading &&
- }
-
-
-
-
-
- {
- !loading &&
- - {t('node_not_connected')} -
- } - { - loading &&- {t('node_connecting')} -
- } - - {t('still_not_working')} - -
+
+ );
}
diff --git a/src/components/Charts/ChequeEarningLineChart.js b/src/components/Charts/ChequeEarningLineChart.js
index 8ea9f9f..1441acb 100644
--- a/src/components/Charts/ChequeEarningLineChart.js
+++ b/src/components/Charts/ChequeEarningLineChart.js
@@ -1,19 +1,18 @@
-import React, { memo, useEffect, useState } from 'react'
-import { useIntl } from 'react-intl'
-import { Chart } from 'chart.js'
-import { getChequeEarningAllHistory } from 'services/chequeService.js'
-import themeStyle from 'utils/themeStyle.js'
-import { t } from 'utils/text.js'
-import { INIT_CHART_LINE_DATASETS } from 'utils/constants.js'
+import React, { memo, useEffect, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { Chart } from 'chart.js';
+import ButtonSwitch from 'components/Buttons/ButtonSwitch';
+import { getChequeEarningAllHistory } from 'services/chequeService.js';
+import { t } from 'utils/text.js';
+import { INIT_CHART_LINE_DATASETS } from 'utils/constants.js';
-function ChequeEarningLineChart({ color, type }) {
- const intl = useIntl()
- const [current, setCurrent] = useState('chequesNumber')
- const [earningCurrencyAllHistoryData, setEarningCurrencyAllHistoryData] =
- useState([])
+function ChequeEarningLineChart({ color }) {
+ const intl = useIntl();
+ const [current, setCurrent] = useState('chequesNumber');
+ const [earningCurrencyAllHistoryData, setEarningCurrencyAllHistoryData] = useState([]);
useEffect(() => {
- const datasetsList = JSON.parse(JSON.stringify(INIT_CHART_LINE_DATASETS))
+ const datasetsList = JSON.parse(JSON.stringify(INIT_CHART_LINE_DATASETS));
const axisYConfig =
current === 'chequesNumber'
@@ -45,7 +44,7 @@ function ChequeEarningLineChart({ color, type }) {
color: color === 'light' ? 'black' : 'white',
},
min: 0,
- }
+ };
var config = {
type: 'line',
data: {
@@ -56,27 +55,38 @@ function ChequeEarningLineChart({ color, type }) {
options: {
plugins: {
legend: {
- // display: false,
+ position: 'top',
+ labels: {
+ boxWidth: 12,
+ boxHeight: 12,
+ usePointStyle: true,
+ pointStyle: 'rectRounded',
+ padding: 8,
+ font: {
+ size: 14,
+ weight: 'bold',
+ },
+ },
},
tooltip: {
mode: 'index',
intersect: false,
callbacks: {
label: function (context) {
- var label = context.dataset.label || ''
+ var label = context.dataset.label || '';
if (label) {
if (current === 'chequesNumber') {
- label += ' : ' + context.parsed.y + ' '
+ label += ' : ' + context.parsed.y + ' ';
} else {
- label += ' : ' + context.parsed.y + ' ' + label
+ label += ' : ' + context.parsed.y + ' ' + label;
}
}
- return label
+ return label;
},
},
},
},
- responsive: false,
+ maintainAspectRatio: false,
interaction: {
intersect: false,
},
@@ -93,126 +103,77 @@ function ChequeEarningLineChart({ color, type }) {
y: axisYConfig,
},
},
- }
+ };
- var content = document.getElementById('cheque-earning-line-chart-content')
- content.innerHTML = ' '
- content.innerHTML =
- ""
+ var ctx = document.getElementById('cheque-earning-line-chart').getContext('2d');
+ window.ChequeEarningLineChart = new Chart(ctx, config);
- var ctx = document
- .getElementById('cheque-earning-line-chart')
- .getContext('2d')
- window.ChequeEarningLineChart = new Chart(ctx, config)
-
- update()
+ update();
return () => {
if (window.ChequeEarningLineChart) {
- window.ChequeEarningLineChart.destroy()
- window.ChequeEarningLineChart = null
+ window.ChequeEarningLineChart.destroy();
+ window.ChequeEarningLineChart = null;
}
- }
+ };
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [color, intl, current])
+ }, [color, intl, current]);
const getKeyData = (key, list) => {
- const data = list.find((item) => item.key === key)
+ const data = list.find(item => item.key === key);
return (
data || {
labels: [],
data: [],
}
- )
- }
+ );
+ };
const update = async () => {
- let data = []
+ let data = [];
if (!earningCurrencyAllHistoryData.length) {
- data = await getChequeEarningAllHistory()
- setEarningCurrencyAllHistoryData(data)
+ data = await getChequeEarningAllHistory();
+ setEarningCurrencyAllHistoryData(data);
} else {
- data = earningCurrencyAllHistoryData
+ data = earningCurrencyAllHistoryData;
}
- let dataIndex = 1
+ let dataIndex = 1;
if (current !== 'chequesNumber') {
- dataIndex = 0
+ dataIndex = 0;
}
if (window.ChequeEarningLineChart) {
- window.ChequeEarningLineChart.data.labels = data?.[0]?.labels || []
+ window.ChequeEarningLineChart.data.labels = data?.[0]?.labels || [];
INIT_CHART_LINE_DATASETS.forEach((item, index) => {
- window.ChequeEarningLineChart.data.datasets[index].data = getKeyData(
- item.label,
- data
- ).data[dataIndex]
- })
- window.ChequeEarningLineChart.update()
+ window.ChequeEarningLineChart.data.datasets[index].data = getKeyData(item.label, data).data[
+ dataIndex
+ ];
+ });
+ window.ChequeEarningLineChart.update();
}
- }
+ };
return (
-
+
+
+
+
+
+
+ {!loading && (
+ .default})
+ )}
+ {loading && (
+ .default})
+ )}
+
+
+ )}
+ {loading && (
+
+ )}
+
+
+
+
+
+ {!loading &&
-
- );
+ {t('node_not_connected')}
} + {loading &&{t('node_connecting')}
} + + {t('still_not_working')} +
-
-
-
- )
+ );
}
-export default memo(ChequeEarningLineChart)
+export default memo(ChequeEarningLineChart);
diff --git a/src/components/Charts/ChequeExpenseLineChart.js b/src/components/Charts/ChequeExpenseLineChart.js
index ae043cc..8b476fa 100644
--- a/src/components/Charts/ChequeExpenseLineChart.js
+++ b/src/components/Charts/ChequeExpenseLineChart.js
@@ -1,194 +1,179 @@
-import React, {memo, useEffect, useState} from "react";
-import {useIntl} from "react-intl";
-import {Chart} from "chart.js";
-import {getChequeExpenseAllHistory} from "services/chequeService.js";
-import themeStyle from "utils/themeStyle.js";
-import {t} from "utils/text.js";
-import {INIT_CHART_LINE_DATASETS} from "utils/constants.js";
+import React, { memo, useEffect, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { Chart } from 'chart.js';
+import ButtonSwitch from 'components/Buttons/ButtonSwitch';
+import { getChequeExpenseAllHistory } from 'services/chequeService.js';
+import { t } from 'utils/text.js';
+import { INIT_CHART_LINE_DATASETS } from 'utils/constants.js';
-function ChequeExpenseLineChart({color}) {
+function ChequeExpenseLineChart({ color }) {
+ const intl = useIntl();
+ const [current, setCurrent] = useState('chequesNumber');
+ const [expenseCurrencyAllHistoryData, setExpenseCurrencyAllHistoryData] = useState([]);
- const intl = useIntl();
- const [current, setCurrent] = useState('chequesNumber');
- const [expenseCurrencyAllHistoryData, setExpenseCurrencyAllHistoryData] = useState([]);
-
- useEffect(() => {
- const datasetsList = JSON.parse(JSON.stringify(INIT_CHART_LINE_DATASETS))
- const axisYConfig =
- current === 'chequesNumber'
- ? {
- display: true,
- position: 'left',
- title: {
- display: true,
- text: intl.formatMessage({ id: 'cheques_number' }),
- color: color === 'light' ? 'black' : 'white',
- },
- ticks: {
- color: color === 'light' ? 'black' : 'white',
- },
- min: 0,
- }
- : {
- display: true,
- position: 'left',
- grid: {
- drawOnChartArea: false,
- },
- title: {
- display: true,
- text: intl.formatMessage({ id: 'cheques_amount' }),
- color: color === 'light' ? 'black' : 'white',
- },
- ticks: {
- color: color === 'light' ? 'black' : 'white',
- },
- min: 0,
- }
- var config = {
- type: 'line',
- data: {
- labels: [],
- datasets: datasetsList,
+ useEffect(() => {
+ const datasetsList = JSON.parse(JSON.stringify(INIT_CHART_LINE_DATASETS));
+ const axisYConfig =
+ current === 'chequesNumber'
+ ? {
+ display: true,
+ position: 'left',
+ title: {
+ display: true,
+ text: intl.formatMessage({ id: 'cheques_number' }),
+ color: color === 'light' ? 'black' : 'white',
},
+ ticks: {
+ color: color === 'light' ? 'black' : 'white',
+ },
+ min: 0,
+ }
+ : {
+ display: true,
+ position: 'left',
+ grid: {
+ drawOnChartArea: false,
+ },
+ title: {
+ display: true,
+ text: intl.formatMessage({ id: 'cheques_amount' }),
+ color: color === 'light' ? 'black' : 'white',
+ },
+ ticks: {
+ color: color === 'light' ? 'black' : 'white',
+ },
+ min: 0,
+ };
+ var config = {
+ type: 'line',
+ data: {
+ labels: [],
+ datasets: datasetsList,
+ },
- options: {
- plugins: {
- legend: {
- // display: false
- },
- tooltip: {
- mode: "index",
- intersect: false,
- callbacks: {
- label: function (context) {
- var label = context.dataset.label || '';
- if (label) {
- if(current === 'chequesNumber'){
- label += ' : ' + context.parsed.y + ' ';
- }else{
- label += ' : ' + context.parsed.y + ' ' + label;
- }
- }
- return label;
- }
- }
-
- },
- },
- responsive: false,
- interaction: {
- intersect: false,
- },
- scales: {
- x: {
- display: true,
- title: {
- display: true
- },
- ticks: {
- color: color === 'light' ? 'black' : 'white'
- },
- },
- y: axisYConfig
+ options: {
+ plugins: {
+ legend: {
+ position: 'top',
+ labels: {
+ boxWidth: 12,
+ boxHeight: 12,
+ usePointStyle: true,
+ pointStyle: 'rectRounded',
+ padding: 8,
+ font: {
+ size: 14,
+ weight: 'bold',
+ },
+ },
+ },
+ tooltip: {
+ mode: 'index',
+ intersect: false,
+ callbacks: {
+ label: function (context) {
+ var label = context.dataset.label || '';
+ if (label) {
+ if (current === 'chequesNumber') {
+ label += ' : ' + context.parsed.y + ' ';
+ } else {
+ label += ' : ' + context.parsed.y + ' ' + label;
+ }
}
+ return label;
+ },
},
- };
-
- var content = document.getElementById('cheque-expense-line-chart-content');
- content.innerHTML = ' ';
- content.innerHTML = "";
+ },
+ },
+ maintainAspectRatio: false,
+ interaction: {
+ intersect: false,
+ },
+ scales: {
+ x: {
+ display: true,
+ title: {
+ display: true,
+ },
+ ticks: {
+ color: color === 'light' ? 'black' : 'white',
+ },
+ },
+ y: axisYConfig,
+ },
+ },
+ };
- var ctx = document.getElementById("cheque-expense-line-chart").getContext("2d");
- window.chequeExpenseLineChart = new Chart(ctx, config);
+ var ctx = document.getElementById('cheque-expense-line-chart').getContext('2d');
+ window.chequeExpenseLineChart = new Chart(ctx, config);
- update();
+ update();
- return () => {
- if (window.chequeExpenseLineChart) {
- window.chequeExpenseLineChart.destroy();
- window.chequeExpenseLineChart = null;
- }
- }
+ return () => {
+ if (window.chequeExpenseLineChart) {
+ window.chequeExpenseLineChart.destroy();
+ window.chequeExpenseLineChart = null;
+ }
+ };
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [color, intl, current]);
- const getKeyData = (key,list ) =>{
- const data = list.find(item=>item.key === key);
- return data || {
- labels: [],
- data: []
- }
+ }, [color, intl, current]);
+ const getKeyData = (key, list) => {
+ const data = list.find(item => item.key === key);
+ return (
+ data || {
+ labels: [],
+ data: [],
+ }
+ );
+ };
+ const update = async () => {
+ let data = [];
+ if (!expenseCurrencyAllHistoryData.length) {
+ data = await getChequeExpenseAllHistory();
+ setExpenseCurrencyAllHistoryData(() => data);
+ } else {
+ data = expenseCurrencyAllHistoryData;
+ }
+ let dataIndex = 1;
+ if (current !== 'chequesNumber') {
+ dataIndex = 0;
}
- const update = async () => {
- let data = [];
- if(!expenseCurrencyAllHistoryData.length){
- data = await getChequeExpenseAllHistory();
- setExpenseCurrencyAllHistoryData(()=>data);
- }else{
- data = expenseCurrencyAllHistoryData;
- }
- let dataIndex = 1;
- if(current !== 'chequesNumber'){
- dataIndex = 0;
- }
- if (window.chequeExpenseLineChart) {
- window.chequeExpenseLineChart.data.labels = data?.[0]?.labels || [];
- INIT_CHART_LINE_DATASETS.forEach((item,index) => {
- window.chequeExpenseLineChart.data.datasets[index].data = getKeyData(item.label,data).data[dataIndex];
- });
- window.chequeExpenseLineChart.update();
- }
- };
+ if (window.chequeExpenseLineChart) {
+ window.chequeExpenseLineChart.data.labels = data?.[0]?.labels || [];
+ INIT_CHART_LINE_DATASETS.forEach((item, index) => {
+ window.chequeExpenseLineChart.data.datasets[index].data = getKeyData(item.label, data).data[
+ dataIndex
+ ];
+ });
+ window.chequeExpenseLineChart.update();
+ }
+ };
- return (
- <>
-
-
+ - {t('cheque_earnings_history')} -
-
-
- setCurrent("chequesNumber")}
- className={'inline-block h-6 pl-2 pr-2 rounded cursor-pointer ' + (current === 'chequesNumber' ? 'bg-black text-white ' : themeStyle.title[color])}
- style={{border: '1px solid #000', borderRadius: '0.5rem 0 0 0.5rem'}}
- >
- {t('cheques_number')}
-
- setCurrent("chequesAmount")}
- className={'inline-block h-6 pl-2 pr-2 rounded-r cursor-pointer ' + (current === 'chequesAmount' ? 'bg-black text-white ' : themeStyle.title[color])}
- style={{border: '1px solid #000', borderLeft: 'none', borderRadius: '0 0.5rem 0.5rem 0'}}
- >
- {t('cheques_amount')}
-
-
+
+ setCurrent('chequesNumber'),
+ }}
+ rightButtonProps={{
+ text: t('cheques_amount'),
+ onClick: () => setCurrent('chequesAmount'),
+ }}
+ />
+
+
+
- {t('cheque_earnings_history')}
+
- {/* Chart */}
- {current === 'chequesNumber' && (
-
+
-
-
- )}
- {current === 'chequesAmount' && (
-
-
-
- )}
-
-
-
- );
+ return (
+
-
-
-
-
-
- - {t('cheque_expense_history')} -
-
-
- setCurrent("chequesNumber")}
- className={'inline-block h-6 pl-2 pr-2 rounded cursor-pointer ' + (current === 'chequesNumber' ? 'bg-black text-white ' : themeStyle.title[color])}
- style={{border: '1px solid #000', borderRadius: '0.5rem 0 0 0.5rem'}}
- >
- {t('cheques_number')}
-
- setCurrent("chequesAmount")}
- className={'inline-block h-6 pl-2 pr-2 rounded-r cursor-pointer ' + (current === 'chequesAmount' ? 'bg-black text-white ' : themeStyle.title[color])}
- style={{border: '1px solid #000', borderLeft: 'none', borderRadius: '0 0.5rem 0.5rem 0'}}
- >
- {t('cheques_amount')}
-
-
- {/* Chart */}
- {
- current === 'chequesNumber' &&
-
-
-
-
- }
- {
- current === 'chequesAmount' &&
-
-
-
- }
-
+
+ setCurrent('chequesNumber'),
+ }}
+ rightButtonProps={{
+ text: t('cheques_amount'),
+ onClick: () => setCurrent('chequesAmount'),
+ }}
+ />
+
+
+
+
+ );
}
-
-export default memo(ChequeExpenseLineChart)
\ No newline at end of file
+export default memo(ChequeExpenseLineChart);
diff --git a/src/components/Charts/HostScoreHistoryLineChart.js b/src/components/Charts/HostScoreHistoryLineChart.js
index 8e2a657..6a55b17 100755
--- a/src/components/Charts/HostScoreHistoryLineChart.js
+++ b/src/components/Charts/HostScoreHistoryLineChart.js
@@ -52,7 +52,7 @@ function HostScoreHistoryLineChart({color}) {
},
},
- responsive: false,
+ maintainAspectRatio: false,
interaction: {
intersect: false,
},
@@ -146,4 +146,4 @@ function HostScoreHistoryLineChart({color}) {
}
-export default memo(HostScoreHistoryLineChart)
\ No newline at end of file
+export default memo(HostScoreHistoryLineChart)
diff --git a/src/components/Charts/HostScoreProgressChart.js b/src/components/Charts/HostScoreProgressChart.js
index 8d3b588..19158a5 100644
--- a/src/components/Charts/HostScoreProgressChart.js
+++ b/src/components/Charts/HostScoreProgressChart.js
@@ -1,86 +1,77 @@
-import React from "react";
-import {Progress} from 'antd';
-import themeStyle from "utils/themeStyle.js";
-import {t} from "utils/text.js";
-import HostWarning from "components/Warning/HostWarning.js";
+import React from 'react';
+import { t } from 'utils/text.js';
+import HostWarning from 'components/Warning/HostWarning.js';
-
-
-export default function HostScoreProgressChart({color, data,scoreInit}) {
- const list = new Array(3).fill("");
- const progressData = [
- {
- id: 1,
- text: "online_duration",
- level: data.uptimeLevel,
- },
- {
- id: 2,
- text: "host_age",
- level: data.ageLevel,
- },
- {
- id: 3,
- text: "version",
- level: data.versionLevel,
- },
- {
- id: 4,
- text: "online_active",
- level: data.activeLevel,
- },
- ];
- return (
- <>
- {t('cheque_earnings_history')}
+
+
+
+
-
-
- {scoreInit &&
-
-
-
-
-
- - {t('host_score_factor')} ({t('weight')}) -
-
-
+const ProgressItem = ({ item, list }) => {
+ return (
+
- {progressData.map((item) => {
- return (
-
-
-
- );
- })}
-
- {t(item.text)}
- {item.level}/3
-
-
- {list.map((child, index) => {
- return (
-
-
-
- );
- })}
-
+
+ );
+};
+
+export default function HostScoreProgressChart({ color, data, scoreInit }) {
+ const list = new Array(3).fill('');
+ const progressData = [
+ {
+ id: 1,
+ text: 'online_duration',
+ level: data.uptimeLevel,
+ },
+ {
+ id: 2,
+ text: 'host_age',
+ level: data.ageLevel,
+ },
+ {
+ id: 3,
+ text: 'version',
+ level: data.versionLevel,
+ },
+ {
+ id: 4,
+ text: 'online_active',
+ level: data.activeLevel,
+ },
+ ];
+
+ return (
+
+ {t(item.text)}
+ {item.level}/3
+
+
+ {list.map((child, index) => {
+ return (
+
+
+
-
- );
+ );
+ })}
+ index ? ' theme-fill-base' : ' theme-fill-shallow') +
+ (index < 2 ? ' mr-1' : '')
}
+ style={{ height: 6 }}>
+
+ );
}
diff --git a/src/components/Charts/HostScoreRingChart.js b/src/components/Charts/HostScoreRingChart.js
index 7ae80ee..f008cc0 100644
--- a/src/components/Charts/HostScoreRingChart.js
+++ b/src/components/Charts/HostScoreRingChart.js
@@ -1,90 +1,57 @@
-import React from "react";
-import {Progress} from 'antd';
-import themeStyle from "utils/themeStyle.js";
-import {t} from "utils/text.js";
+import React from 'react';
+import { t } from 'utils/text.js';
-
-export default function HostScoreRingChart({color, data}) {
+export default function HostScoreRingChart({ color, data }) {
const scoreConfig = {
1: {
- color: "#C33730",
- icon: "bad-icon",
- text: "poor",
- },
+ color: '#dc4242',
+ icon: ,
+ text: 'poor',
+ },
2: {
- color: "#F99600",
- icon: "general-icon",
- text: "general",
+ color: '#f99600',
+ icon: ,
+ text: 'general',
},
3: {
- color: "#2EBBB9",
- icon: "good-icon",
- text: "good",
+ color: '#2ebbb9',
+ icon: ,
+ text: 'good',
},
4: {
- color: "#06A561",
- icon: "excellent-icon",
- text: "excellent",
+ color: '#06a561',
+ icon: ,
+ text: 'excellent',
},
- };
- const level = data.level || 1;
- const scoreLevelObj = scoreConfig[level]
+ };
+ const level = data.level || 1;
+ const scoreLevelObj = scoreConfig[level];
+
return (
- <>
- + {t('host_score_factor')} ({t('weight')}) +
+
+ {scoreInit ? (
+
+
+ {progressData.map(item => {
+ return
+ )}
+
-
-
-
-
);
}
diff --git a/src/components/Charts/LocalStorageGaugeChart.js b/src/components/Charts/LocalStorageGaugeChart.js
index f902a14..c3bbfb1 100644
--- a/src/components/Charts/LocalStorageGaugeChart.js
+++ b/src/components/Charts/LocalStorageGaugeChart.js
@@ -1,66 +1,63 @@
-/*eslint-disable*/
-import React, {memo, useEffect} from "react";
-import Chart from "chartjs-gauge";
-import themeStyle from "utils/themeStyle.js";
+import React, { memo, useEffect } from 'react';
+import Chart from 'chartjs-gauge';
-function LocalStorageGaugeChart({color, data}) {
- useEffect(async () => {
- var config = {
- type: 'gauge',
- data: {
- datasets: [{
- value: data,
- data: [data, 100],
- backgroundColor: ['green', 'gray'],
- }]
- },
- options: {
- events: ['click'],
- responsive: false,
- cutoutPercentage: 90,
- layout: {
- padding: {
- bottom: 10
- }
- },
- needle: {
- radiusPercentage: 2,
- widthPercentage: 3,
- lengthPercentage: 80,
- color: 'rgba(0, 0, 0, 1)'
- },
- valueLabel: {
- fontSize: 30,
- formatter: function () {
- return data + '%';
- },
- }
- }
- };
+function LocalStorageGaugeChart({ data }) {
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ useEffect(async () => {
+ var config = {
+ type: 'gauge',
+ data: {
+ datasets: [
+ {
+ value: data,
+ data: [data, 100],
+ backgroundColor: ['green', 'gray'],
+ },
+ ],
+ },
+ options: {
+ events: ['click'],
+ maintainAspectRatio: false,
+ cutoutPercentage: 90,
+ layout: {
+ padding: {
+ bottom: 10,
+ },
+ },
+ needle: {
+ radiusPercentage: 2,
+ widthPercentage: 3,
+ lengthPercentage: 80,
+ color: 'rgba(0, 0, 0, 1)',
+ },
+ valueLabel: {
+ fontSize: 30,
+ formatter: function () {
+ return data + '%';
+ },
+ },
+ },
+ };
- var ctx = document.getElementById("local-storage-gauge-chart").getContext("2d");
- window.localStorageGaugeChart = new Chart(ctx, config);
+ var ctx = document.getElementById('local-storage-gauge-chart').getContext('2d');
+ window.localStorageGaugeChart = new Chart(ctx, config);
- return () => {
- if (window.localStorageGaugeChart) {
- window.localStorageGaugeChart.destroy();
- window.localStorageGaugeChart = null;
- }
- }
+ return () => {
+ if (window.localStorageGaugeChart) {
+ window.localStorageGaugeChart.destroy();
+ window.localStorageGaugeChart = null;
+ }
+ };
+ }, [data]);
- }, [data]);
-
-
- return (
- <>
- - {t('host_score')} -
+
+
+ {t('host_score')}
+
+ {!!(data.level && scoreLevelObj) && (
+
-
+
-
+
{scoreLevelObj.icon}
+ {t(scoreLevelObj['text'])}
-
+ )}
+
-
-
-
- { (
- data.level && scoreLevelObj?
-
- {/* Divider */}
- -
-
-
- {t('last_updated')}
-
-
- { data.lastUpdated ? new Date(data.lastUpdated).toLocaleString() : '--' }
-
-
+
-
+ {t('last_updated')}
+ {data.lastUpdated ? new Date(data.lastUpdated).toISOString() : '--'}
- {/* Chart */}
-
-
- );
+ return (
+
-
-
-
+ {/* Chart */}
+
+ );
}
-export default memo(LocalStorageGaugeChart)
\ No newline at end of file
+export default memo(LocalStorageGaugeChart);
diff --git a/src/components/Charts/NetworkDoughnutChart.js b/src/components/Charts/NetworkDoughnutChart.js
index 3986a90..5504612 100644
--- a/src/components/Charts/NetworkDoughnutChart.js
+++ b/src/components/Charts/NetworkDoughnutChart.js
@@ -38,7 +38,7 @@ function NetworkDoughnutChart({color, id, text, data}) {
},
options: {
- responsive: false,
+ maintainAspectRatio: false,
cutoutPercentage: 90,
circumference: 300,
cutout: '80%',
@@ -101,4 +101,4 @@ function NetworkDoughnutChart({color, id, text, data}) {
}
-export default memo(NetworkDoughnutChart)
\ No newline at end of file
+export default memo(NetworkDoughnutChart)
diff --git a/src/components/Charts/NetworkLineChart.js b/src/components/Charts/NetworkLineChart.js
index 8480ded..dc39b8f 100644
--- a/src/components/Charts/NetworkLineChart.js
+++ b/src/components/Charts/NetworkLineChart.js
@@ -1,173 +1,161 @@
-/*eslint-disable*/
-import React, {memo, useEffect} from "react";
-import {useIntl} from "react-intl";
-import {Chart} from "chart.js";
-import {getNetworkFlow} from "services/dashboardService.js";
-import themeStyle from "utils/themeStyle.js";
-import {t} from "utils/text.js";
+import React, { memo, useEffect } from 'react';
+import { useIntl } from 'react-intl';
+import { Chart } from 'chart.js';
+import { getNetworkFlow } from 'services/dashboardService.js';
+import { t } from 'utils/text.js';
let data = {
- labels: [],
- data: [[], []]
+ labels: [],
+ data: [[], []],
};
let interval = null;
-function NetworkLineChart({color}) {
-
- const intl = useIntl();
-
- useEffect(() => {
-
- var config = {
- type: "line",
- data: {
- labels: [],
- datasets: [
- {
- label: intl.formatMessage({id: 'in'}),
- borderColor: "#4c51bf",
- backgroundColor: "#4c51bf",
- data: [],
- fill: false,
- tension: 0,
- },
- {
- label: intl.formatMessage({id: 'out'}),
- fill: false,
- borderColor: "#ed64a6",
- backgroundColor: "#ed64a6",
- data: [],
- tension: 0,
- },
- ],
+function NetworkLineChart({ color }) {
+ const intl = useIntl();
+
+ useEffect(() => {
+ var config = {
+ type: 'line',
+ data: {
+ labels: [],
+ datasets: [
+ {
+ label: intl.formatMessage({ id: 'in' }),
+ borderColor: '#06a561',
+ backgroundColor: '#06a561',
+ data: [],
+ fill: false,
+ tension: 0,
+ },
+ {
+ label: intl.formatMessage({ id: 'out' }),
+ fill: false,
+ borderColor: '#f99600',
+ backgroundColor: '#f99600',
+ data: [],
+ tension: 0,
+ },
+ ],
+ },
+
+ options: {
+ plugins: {
+ legend: {
+ position: 'top',
+ labels: {
+ boxWidth: 12,
+ boxHeight: 12,
+ usePointStyle: true,
+ pointStyle: 'rectRounded',
+ padding: 8,
+ font: {
+ size: 14,
+ weight: 'bold',
+ },
},
-
- options: {
- plugins: {
- legend: {
- labels: {
- color: color === 'light' ? 'black' : 'white'
- }
- },
- tooltip: {
- mode: "index",
- intersect: false,
- callbacks:{
- label:function(context){
- var label = context.dataset.label ||'';
- if(label){
- label += ' : ' + context.parsed.y + ' M/s ';
- }
- return label;
- }
- }
-
- },
- },
- maintainAspectRatio: false,
- responsive: false,
- title: {
- display: false,
- text: "Sales Charts",
- },
-
- interaction: {
- mode: 'index',
- intersect: false,
- },
- scales: {
- x: {
- display: true,
- title: {
- display: true
- },
- ticks: {
- color: color === 'light' ? 'black' : 'white'
- },
- },
- y: {
- min: 0,
- display: true,
- title: {
- display: true,
- text: 'M / s',
- color: color === 'light' ? 'black' : 'white'
- },
- ticks: {
- color: color === 'light' ? 'black' : 'white'
- },
- }
- },
+ },
+ tooltip: {
+ mode: 'index',
+ intersect: false,
+ callbacks: {
+ label: function (context) {
+ var label = context.dataset.label || '';
+ if (label) {
+ label += ' : ' + context.parsed.y + ' KB/s ';
+ }
+ return label;
+ },
},
- };
-
- var content = document.getElementById('network-line-chart-content');
- content.innerHTML = ' ';
- content.innerHTML = "";
-
- var ctx = document.getElementById("network-line-chart").getContext("2d");
- window.networkLineChart = new Chart(ctx, config);
-
- update();
-
- return () => {
- if (window.networkLineChart) {
- window.networkLineChart.destroy();
- window.networkLineChart = null;
- }
- if (interval) {
- clearInterval(interval);
- }
-
- }
+ },
+ },
+ maintainAspectRatio: false,
+ title: {
+ display: false,
+ text: 'Sales Charts',
+ },
+
+ interaction: {
+ mode: 'index',
+ intersect: false,
+ },
+ scales: {
+ x: {
+ display: true,
+ title: {
+ display: true,
+ },
+ ticks: {
+ color: color === 'light' ? 'black' : 'white',
+ },
+ },
+ y: {
+ min: 0,
+ display: true,
+ title: {
+ display: true,
+ text: 'KB / s',
+ color: color === 'light' ? 'black' : 'white',
+ },
+ ticks: {
+ color: color === 'light' ? 'black' : 'white',
+ },
+ },
+ },
+ },
+ };
- }, [color, intl]);
+ var content = document.getElementById('network-line-chart-content');
+ content.innerHTML = ' ';
+ content.innerHTML = "";
- const update = async () => {
- fetchData();
- interval = setInterval(async () => {
- fetchData();
- }, 60000);
+ var ctx = document.getElementById('network-line-chart').getContext('2d');
+ window.networkLineChart = new Chart(ctx, config);
- };
+ update();
- const fetchData = async () => {
- let {receive, send} = await getNetworkFlow();
- let date = new Date();
- let time = date.getHours() + ':' + date.getMinutes();
- data.labels.push(time);
- data.data[0].push(receive);
- data.data[1].push(send);
- if (window.networkLineChart) {
- window.networkLineChart.data.labels = data.labels;
- window.networkLineChart.data.datasets[0].data = data.data[0];
- window.networkLineChart.data.datasets[1].data = data.data[1];
- window.networkLineChart.update();
- }
+ return () => {
+ if (window.networkLineChart) {
+ window.networkLineChart.destroy();
+ window.networkLineChart = null;
+ }
+ if (interval) {
+ clearInterval(interval);
+ }
};
-
- return (
- <>
-
+
+
+
-
-
- );
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [color, intl]);
+
+ const update = async () => {
+ fetchData();
+ interval = setInterval(async () => {
+ fetchData();
+ }, 60000);
+ };
+
+ const fetchData = async () => {
+ let { receive, send } = await getNetworkFlow();
+ let date = new Date();
+ let time = date.getHours() + ':' + date.getMinutes();
+ data.labels.push(time);
+ data.data[0].push(receive);
+ data.data[1].push(send);
+ if (window.networkLineChart) {
+ window.networkLineChart.data.labels = data.labels;
+ window.networkLineChart.data.datasets[0].data = data.data[0];
+ window.networkLineChart.data.datasets[1].data = data.data[1];
+ window.networkLineChart.update();
+ }
+ };
+
+ return (
+
-
-
-
-
-
- - {t('bandwidth_over_time')} -
-
- {/* Chart */}
-
-
-
-
-
+
+ );
}
-export default memo(NetworkLineChart)
\ No newline at end of file
+export default memo(NetworkLineChart);
diff --git a/src/components/Charts/RevenueHistoryLineChart.js b/src/components/Charts/RevenueHistoryLineChart.js
index a7aff34..f55d615 100644
--- a/src/components/Charts/RevenueHistoryLineChart.js
+++ b/src/components/Charts/RevenueHistoryLineChart.js
@@ -1,205 +1,180 @@
-import React, { memo, useState, useEffect } from 'react'
-import { useIntl } from 'react-intl'
-import { Chart } from 'chart.js'
-import { getChequeEarningAllHistory } from 'services/chequeService.js'
-import themeStyle from 'utils/themeStyle.js'
-import { t } from 'utils/text.js'
-import { INIT_CHART_LINE_DATASETS } from 'utils/constants'
+import React, { memo, useState, useEffect } from 'react';
+import { useIntl } from 'react-intl';
+import { Chart } from 'chart.js';
+import { getChequeEarningAllHistory } from 'services/chequeService.js';
+import { t } from 'utils/text.js';
+import { INIT_CHART_LINE_DATASETS } from 'utils/constants';
+import ButtonSwitch from 'components/Buttons/ButtonSwitch';
function RevenueHistoryLineChart({ color }) {
- const intl = useIntl()
- const [current, setCurrent] = useState('chequesNumber');
- const [earningCurrencyAllHistoryData, setEarningCurrencyAllHistoryData] = useState([])
+ const intl = useIntl();
+ const [current, setCurrent] = useState('chequesNumber');
+ const [earningCurrencyAllHistoryData, setEarningCurrencyAllHistoryData] = useState([]);
- useEffect(() => {
- const datasetsList = JSON.parse(JSON.stringify(INIT_CHART_LINE_DATASETS))
+ useEffect(() => {
+ const datasetsList = JSON.parse(JSON.stringify(INIT_CHART_LINE_DATASETS));
- const axisYConfig =
- current === 'chequesNumber'
- ? {
- display: true,
- position: 'left',
- title: {
- display: true,
- text: intl.formatMessage({ id: 'cheques_number' }),
- color: color === 'light' ? 'black' : 'white',
- },
- ticks: {
- color: color === 'light' ? 'black' : 'white',
- },
- min: 0,
- }
- : {
- display: true,
- position: 'left',
- grid: {
- drawOnChartArea: false,
- },
- title: {
- display: true,
- text: intl.formatMessage({ id: 'cheques_amount' }),
- color: color === 'light' ? 'black' : 'white',
- },
- ticks: {
- color: color === 'light' ? 'black' : 'white',
- },
- min: 0,
- }
- var config = {
- type: 'line',
- data: {
- labels: [],
- datasets: datasetsList,
+ const axisYConfig =
+ current === 'chequesNumber'
+ ? {
+ display: true,
+ position: 'left',
+ title: {
+ display: true,
+ text: intl.formatMessage({ id: 'cheques_number' }),
+ color: color === 'light' ? 'black' : 'white',
},
-
- options: {
- plugins: {
- legend: {
- // display: false,
- },
- tooltip: {
- mode: 'index',
- intersect: false,
- callbacks: {
- label: function (context) {
- var label = context.dataset.label || ''
- if (label) {
- if (current === 'chequesNumber') {
- label += ' : ' + context.parsed.y + ' '
- } else {
- label += ' : ' + context.parsed.y + ' ' + label
- }
- }
- return label
- },
- },
- },
- },
- responsive: false,
- interaction: {
- intersect: false,
- },
- scales: {
- x: {
- display: true,
- title: {
- display: true,
- },
- ticks: {
- color: color === 'light' ? 'black' : 'white',
- },
- },
- y: axisYConfig,
- },
+ ticks: {
+ color: color === 'light' ? 'black' : 'white',
+ },
+ min: 0,
+ }
+ : {
+ display: true,
+ position: 'left',
+ grid: {
+ drawOnChartArea: false,
},
- }
+ title: {
+ display: true,
+ text: intl.formatMessage({ id: 'cheques_amount' }),
+ color: color === 'light' ? 'black' : 'white',
+ },
+ ticks: {
+ color: color === 'light' ? 'black' : 'white',
+ },
+ min: 0,
+ };
+ var config = {
+ type: 'line',
+ data: {
+ labels: [],
+ datasets: datasetsList,
+ },
- var content = document.getElementById('revenue-history-line-chart-content')
- content.innerHTML = ' '
- content.innerHTML =
- ""
+ options: {
+ plugins: {
+ legend: {
+ position: 'top',
+ labels: {
+ boxWidth: 12,
+ boxHeight: 12,
+ usePointStyle: true,
+ pointStyle: 'rectRounded',
+ padding: 8,
+ font: {
+ size: 14,
+ weight: 'bold',
+ },
+ },
+ },
+ tooltip: {
+ mode: 'index',
+ intersect: false,
+ callbacks: {
+ label: function (context) {
+ var label = context.dataset.label || '';
+ if (label) {
+ if (current === 'chequesNumber') {
+ label += ' : ' + context.parsed.y + ' ';
+ } else {
+ label += ' : ' + context.parsed.y + ' ' + label;
+ }
+ }
+ return label;
+ },
+ },
+ },
+ },
+ maintainAspectRatio: false,
+ interaction: {
+ intersect: false,
+ },
+ scales: {
+ x: {
+ display: true,
+ title: {
+ display: true,
+ },
+ ticks: {
+ color: color === 'light' ? 'black' : 'white',
+ },
+ },
+ y: axisYConfig,
+ },
+ },
+ };
- var ctx = document
- .getElementById('revenue-history-line-chart')
- .getContext('2d')
- window.revenueHistoryLineChart = new Chart(ctx, config)
+ var ctx = document.getElementById('revenue-history-line-chart').getContext('2d');
+ window.revenueHistoryLineChart = new Chart(ctx, config);
- update()
+ update();
- return () => {
- if (window.revenueHistoryLineChart) {
- window.revenueHistoryLineChart.destroy()
- window.revenueHistoryLineChart = null
- }
- }
+ return () => {
+ if (window.revenueHistoryLineChart) {
+ window.revenueHistoryLineChart.destroy();
+ window.revenueHistoryLineChart = null;
+ }
+ };
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [color, intl, current])
+ }, [color, intl, current]);
- const getKeyData = (key, list) => {
- const data = list.find((item) => item.key === key)
- return (
- data || {
- labels: [],
- data: [],
- }
- )
- }
+ const getKeyData = (key, list) => {
+ const data = list.find(item => item.key === key);
+ return (
+ data || {
+ labels: [],
+ data: [],
+ }
+ );
+ };
- const update = async () => {
- let data = []
- if (!earningCurrencyAllHistoryData.length) {
- data = await getChequeEarningAllHistory()
- setEarningCurrencyAllHistoryData(data)
- } else {
- data = earningCurrencyAllHistoryData
- }
- let dataIndex = 1
- if (current !== 'chequesNumber') {
- dataIndex = 0
- }
- if (window.revenueHistoryLineChart) {
- window.revenueHistoryLineChart.data.labels = data?.[0]?.labels || []
- INIT_CHART_LINE_DATASETS.forEach((item, index) => {
- window.revenueHistoryLineChart.data.datasets[index].data = getKeyData(
- item.label,
- data
- ).data[dataIndex]
- })
- window.revenueHistoryLineChart.update()
- }
+ const update = async () => {
+ let data = [];
+ if (!earningCurrencyAllHistoryData.length) {
+ data = await getChequeEarningAllHistory();
+ setEarningCurrencyAllHistoryData(data);
+ } else {
+ data = earningCurrencyAllHistoryData;
+ }
+ let dataIndex = 1;
+ if (current !== 'chequesNumber') {
+ dataIndex = 0;
}
+ if (window.revenueHistoryLineChart) {
+ window.revenueHistoryLineChart.data.labels = data?.[0]?.labels || [];
+ INIT_CHART_LINE_DATASETS.forEach((item, index) => {
+ window.revenueHistoryLineChart.data.datasets[index].data = getKeyData(item.label, data).data[
+ dataIndex
+ ];
+ });
+ window.revenueHistoryLineChart.update();
+ }
+ };
- return (
- {t('bandwidth_over_time')}
+
+
+
+
-
+
);
-}
\ No newline at end of file
+}
diff --git a/src/components/Modals/CashConfirmModal.js b/src/components/Modals/CashConfirmModal.js
index aac1856..a99fdf1 100644
--- a/src/components/Modals/CashConfirmModal.js
+++ b/src/components/Modals/CashConfirmModal.js
@@ -1,19 +1,14 @@
-import React, {useEffect, useState, useContext, useRef} from "react";
-import {mainContext} from "reducer";
-import {Progress} from 'antd';
-import ButtonCancel from "components/Buttons/ButtonCancel.js";
-import ButtonConfirm from "components/Buttons/ButtonConfirm.js";
-import {cash} from "services/chequeService.js";
-import Emitter from "utils/eventBus";
-import themeStyle from "utils/themeStyle.js";
-import {t} from "utils/text.js";
-import {PRECISION} from "utils/constants.js";
-import { toNonExponential } from "utils/BTFSUtil";
-
-export default function CashConfirmModal({color}) {
-
- const {state} = useContext(mainContext);
- const {sidebarShow} = state;
+import React, { useEffect, useState, useRef } from 'react';
+import { Progress } from 'antd';
+import ButtonConfirm from 'components/Buttons/ButtonConfirm.js';
+import { cash } from 'services/chequeService.js';
+import Emitter from 'utils/eventBus';
+import { t } from 'utils/text.js';
+import { PRECISION_RATE } from 'utils/constants.js';
+import { toNonExponential } from 'utils/BTFSUtil';
+import CommonModal from './CommonModal';
+
+export default function CashConfirmModal() {
const [showModal, setShowModal] = useState(false);
const [showResult, setShowResult] = useState(false);
const cashList = useRef([]);
@@ -23,50 +18,43 @@ export default function CashConfirmModal({color}) {
useEffect(() => {
const set = async function (params) {
- console.log("openCashConfirmModal event has occured");
+ console.log('openCashConfirmModal event has occured');
const currencyData = {};
const currencyList = [];
- params.data.forEach(item=>{
- const {amount} = item;
- const {key,unit,icon} = item.selectItemData;
- if(!currencyData[key]){
+ params.data.forEach(item => {
+ const { amount } = item;
+ const { key, unit, icon } = item.selectItemData;
+ const rate = item.selectItemData?.price?.rate ?? PRECISION_RATE;
+ if (!currencyData[key]) {
currencyData[key] = {};
currencyData[key].total = 0;
currencyData[key].len = 0;
currencyData[key].unit = unit;
currencyData[key].icon = icon;
-
+ currencyData[key].rate = rate;
}
- currencyData[key].amount = amount
+ currencyData[key].amount = amount;
currencyData[key].total += amount;
currencyData[key].len++;
- })
- Object.keys(currencyData).forEach(key=>{
- currencyData[key].total = currencyData[key].total / PRECISION;
+ });
+ Object.keys(currencyData).forEach(key => {
+ currencyData[key].total = currencyData[key].total / currencyData[key].rate;
currencyList.push(currencyData[key]);
- })
-
+ });
cashList.current.currencyList = currencyList;
cashList.current.list = params.data;
- cashList.current.total = 0;
-
- cashList.current.list.forEach((item) => {
- cashList.current.total = (cashList.current.total + item.amount);
- });
-
- cashList.current.total = cashList.current.total / PRECISION;
setShowModal(true);
};
- Emitter.on("openCashConfirmModal", set);
+ Emitter.on('openCashConfirmModal', set);
return () => {
Emitter.removeListener('openCashConfirmModal');
- }
+ };
}, []);
const onCashProgress = (progress, totalSize) => {
- let percentage = Math.round(progress / totalSize * 100);
+ let percentage = Math.round((progress / totalSize) * 100);
setPercentage(percentage);
};
@@ -97,86 +85,63 @@ export default function CashConfirmModal({color}) {
return (
<>
- {
- showResult ? (
- <>
-
-
-
-
-
-
- - {t('earning_history')} -
-
-
- setCurrent("chequesNumber")}
- className={'inline-block h-6 pl-2 pr-2 rounded cursor-pointer ' + (current === 'chequesNumber' ? 'bg-black text-white ' : themeStyle.title[color])}
- style={{border: '1px solid #000', borderRadius: '0.5rem 0 0 0.5rem'}}
- >
- {t('cheques_number')}
-
- setCurrent("chequesAmount")}
- className={'inline-block h-6 pl-2 pr-2 rounded-r cursor-pointer ' + (current === 'chequesAmount' ? 'bg-black text-white ' : themeStyle.title[color])}
- style={{border: '1px solid #000', borderLeft: 'none', borderRadius: '0 0.5rem 0.5rem 0'}}
- >
- {t('cheques_amount')}
-
-
- {/* Chart */}
-
+ return (
+
-
-
-
+
+ setCurrent('chequesNumber'),
+ }}
+ rightButtonProps={{
+ text: t('cheques_amount'),
+ onClick: () => setCurrent('chequesAmount'),
+ }}
+ />
+
+
+
+
+ );
}
-export default memo(RevenueHistoryLineChart)
+export default memo(RevenueHistoryLineChart);
diff --git a/src/components/Divider/Divider.js b/src/components/Divider/Divider.js
new file mode 100644
index 0000000..fef80f3
--- /dev/null
+++ b/src/components/Divider/Divider.js
@@ -0,0 +1,8 @@
+import React from 'react';
+
+const Divider = ({className}) => {
+ const _className = 'w-full theme-divider';
+ return ;
+};
+
+export default Divider;
diff --git a/src/components/Dropdowns/FileTableDropdown.js b/src/components/Dropdowns/FileTableDropdown.js
index 9b40154..5705dcf 100755
--- a/src/components/Dropdowns/FileTableDropdown.js
+++ b/src/components/Dropdowns/FileTableDropdown.js
@@ -1,90 +1,95 @@
-/*eslint-disable*/
-import React, {useEffect} from "react";
-import {createPopper} from "@popperjs/core";
-import {removeFiles} from "services/filesService.js";
-import themeStyle from "utils/themeStyle.js";
-import Emitter from "utils/eventBus";
-import {t} from "utils/text.js";
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React, { useEffect } from 'react';
+import { createPopper } from '@popperjs/core';
+import { removeFiles } from 'services/filesService.js';
+import Emitter from 'utils/eventBus';
+import { t } from 'utils/text.js';
-const FileTableDropdown = ({color, hash, name, size, path, type}) => {
+const FileTableDropdown = ({ color, hash, name, size, path, type }) => {
+ const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false);
+ const btnDropdownRef = React.createRef();
+ const popoverDropdownRef = React.createRef();
+ const openDropdownPopover = () => {
+ createPopper(btnDropdownRef.current, popoverDropdownRef.current, {
+ placement: 'left-start',
+ });
+ setDropdownPopoverShow(true);
+ };
+ const closeDropdownPopover = () => {
+ setDropdownPopoverShow(false);
+ };
- const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false);
- const btnDropdownRef = React.createRef();
- const popoverDropdownRef = React.createRef();
- const openDropdownPopover = () => {
- createPopper(btnDropdownRef.current, popoverDropdownRef.current, {
- placement: "left-start",
- });
- setDropdownPopoverShow(true);
+ useEffect(() => {
+ const t = function () {
+ closeDropdownPopover();
};
- const closeDropdownPopover = () => {
- setDropdownPopoverShow(false);
+ document.addEventListener('click', t);
+ return () => {
+ document.removeEventListener('click', t);
};
+ }, []);
- useEffect(() => {
- const t = function () {
- closeDropdownPopover();
- };
- document.addEventListener("click", t);
- return () => {
- document.removeEventListener("click", t);
- };
- }, []);
+ const download = async () => {
+ if (type === 1) {
+ Emitter.emit('openDownloadModal', { hash: hash, name: name, size: size, type: 1 });
+ }
+ if (type === 2) {
+ Emitter.emit('openDownloadModal', { hash: hash, name: name, size: size, type: 2 });
+ }
+ };
- const download = async () => {
- if (type === 1) {
- Emitter.emit('openDownloadModal', {hash: hash, name: name, size: size, type: 1});
- }
- if (type === 2) {
- Emitter.emit('openDownloadModal', {hash: hash, name: name, size: size, type: 2});
- }
- };
-
- const remove = async () => {
- let result = await removeFiles(hash, name, path, type);
- if (result) {
- Emitter.emit('showMessageAlert', {message: 'delete_success', status: 'success', type: 'frontEnd'});
- } else {
- Emitter.emit('showMessageAlert', {message: 'delete_fail', status: 'error', type: 'frontEnd'});
- }
- Emitter.emit('updateFiles');
- };
+ const remove = async () => {
+ let result = await removeFiles(hash, name, path, type);
+ if (result) {
+ Emitter.emit('showMessageAlert', { message: 'delete_success', status: 'success', type: 'frontEnd' });
+ } else {
+ Emitter.emit('showMessageAlert', { message: 'delete_fail', status: 'error', type: 'frontEnd' });
+ }
+ Emitter.emit('updateFiles');
+ };
- const trigger = (e) => {
- e.preventDefault();
- setTimeout(() => {
- dropdownPopoverShow ? closeDropdownPopover() : openDropdownPopover();
- }, 50)
- };
+ const trigger = e => {
+ e.preventDefault();
+ setTimeout(() => {
+ dropdownPopoverShow ? closeDropdownPopover() : openDropdownPopover();
+ }, 50);
+ };
- return (
- <>
- {
- trigger(e)
- }}>
-
-
-
-
- );
+ return (
+ <>
+ {
+ trigger(e);
+ }}>
+
+
+
+
+ );
};
export default FileTableDropdown;
diff --git a/src/components/Dropdowns/ImportFilesDropdown.js b/src/components/Dropdowns/ImportFilesDropdown.js
index 20816f8..7bb7de9 100644
--- a/src/components/Dropdowns/ImportFilesDropdown.js
+++ b/src/components/Dropdowns/ImportFilesDropdown.js
@@ -1,144 +1,150 @@
-import React, {useEffect} from "react";
-import {createPopper} from "@popperjs/core";
-import themeStyle from "utils/themeStyle.js";
-import Emitter from "utils/eventBus";
-import {t} from "utils/text.js";
+import React, { useEffect } from 'react';
+import { createPopper } from '@popperjs/core';
+import Emitter from 'utils/eventBus';
+import { t } from 'utils/text.js';
let folderInput = null;
let filesInput = null;
-const ImportFilesDropdown = ({color, path}) => {
-
- const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false);
- const btnDropdownRef = React.createRef();
- const popoverDropdownRef = React.createRef();
- const openDropdownPopover = () => {
- createPopper(btnDropdownRef.current, popoverDropdownRef.current, {
- placement: "bottom-start",
- });
- setDropdownPopoverShow(true);
- };
- const closeDropdownPopover = () => {
- setDropdownPopoverShow(false);
- };
-
- const normalizeFiles = (files) => {
- const streams = [];
- for (const file of files) {
- streams.push({
- path: file.filepath || file.webkitRelativePath || file.name,
- content: file,
- size: file.size
- })
- }
- return streams
- };
-
- const onInputChange = async (e) => {
- let input = e.target.files;
- let file = normalizeFiles(input);
- Emitter.emit('openUploadModal', {data: file, path: path});
- e.target.value = null;
- };
-
- const onAddFile = async (e) => {
- e.preventDefault();
- filesInput.click();
- };
-
- const onAddFolder = (e) => {
- e.preventDefault();
- folderInput.click();
+const ImportFilesDropdown = ({ color, path }) => {
+ const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false);
+ const btnDropdownRef = React.createRef();
+ const popoverDropdownRef = React.createRef();
+ const openDropdownPopover = () => {
+ createPopper(btnDropdownRef.current, popoverDropdownRef.current, {
+ placement: 'bottom-start',
+ });
+ setDropdownPopoverShow(true);
+ };
+ const closeDropdownPopover = () => {
+ setDropdownPopoverShow(false);
+ };
+
+ const normalizeFiles = files => {
+ const streams = [];
+ for (const file of files) {
+ streams.push({
+ path: file.filepath || file.webkitRelativePath || file.name,
+ content: file,
+ size: file.size,
+ });
+ }
+ return streams;
+ };
+
+ const onInputChange = async e => {
+ let input = e.target.files;
+ let file = normalizeFiles(input);
+ Emitter.emit('openUploadModal', { data: file, path: path });
+ e.target.value = null;
+ };
+
+ const onAddFile = async e => {
+ e.preventDefault();
+ filesInput.click();
+ };
+
+ const onAddFolder = e => {
+ e.preventDefault();
+ folderInput.click();
+ };
+
+ const onAddByPath = e => {
+ e.preventDefault();
+ Emitter.emit('openImportModal', { type: 'byPath', path: path });
+ };
+
+ const addNewFolder = e => {
+ e.preventDefault();
+ Emitter.emit('openImportModal', { type: 'newFolder', path: path });
+ };
+
+ useEffect(() => {
+ const t = function () {
+ closeDropdownPopover();
};
-
- const onAddByPath = (e) => {
- e.preventDefault();
- Emitter.emit('openImportModal', {type: 'byPath', path: path});
- };
-
- const addNewFolder = (e) => {
- e.preventDefault();
- Emitter.emit('openImportModal', {type: 'newFolder', path: path});
+ document.addEventListener('click', t);
+ return () => {
+ document.removeEventListener('click', t);
};
-
- useEffect(() => {
- const t = function () {
- closeDropdownPopover();
- };
- document.addEventListener("click", t);
- return () => {
- document.removeEventListener("click", t);
- };
- }, []);
-
- return (
- <>
-
-
-
-
- {
- filesInput = el
- }}
- onChange={onInputChange}/>
-
- {
- folderInput = el
- }}
- onChange={onInputChange}/>
-
-
- );
+ }, []);
+
+ return (
+ <>
+
+
+
+
+ {
+ filesInput = el;
+ }}
+ onChange={onInputChange}
+ />
+
+ {
+ folderInput = el;
+ }}
+ onChange={onInputChange}
+ />
+
+ );
};
export default ImportFilesDropdown;
diff --git a/src/components/Dropdowns/LangDropdown.js b/src/components/Dropdowns/LangDropdown.js
index 4cacd1e..ff0745f 100755
--- a/src/components/Dropdowns/LangDropdown.js
+++ b/src/components/Dropdowns/LangDropdown.js
@@ -1,28 +1,25 @@
-/*eslint-disable*/
-import React, {useContext} from "react";
-import {mainContext} from 'reducer'
+import React, { useContext } from 'react';
+import { mainContext } from 'reducer';
const LangDropdown = () => {
-
- const {dispatch, state} = useContext(mainContext);
- const {locale} = state;
+ const { dispatch, state } = useContext(mainContext);
+ const { locale } = state;
const changeLang = (e, lang) => {
dispatch({
type: 'CHANGE_LOCALE',
- locale: lang
- })
+ locale: lang,
+ });
};
return (
- <>
- {
- changeLang(e, (locale === "zh" ? "en" : "zh"));
- }}>
-
-
-
+
);
};
diff --git a/src/components/Modals/AddConnectionModal.js b/src/components/Modals/AddConnectionModal.js
index af221ea..33493b5 100644
--- a/src/components/Modals/AddConnectionModal.js
+++ b/src/components/Modals/AddConnectionModal.js
@@ -1,42 +1,46 @@
-import React, {useEffect, useContext} from "react";
-import {mainContext} from "reducer";
-import ButtonCancel from "components/Buttons/ButtonCancel.js";
-import ButtonConfirm from "components/Buttons/ButtonConfirm.js";
-import {addPeer} from "services/otherService.js";
-import Emitter from "utils/eventBus";
-import themeStyle from "utils/themeStyle.js";
-import {t} from "utils/text.js";
+import React, { useEffect } from 'react';
+import ButtonCancel from 'components/Buttons/ButtonCancel.js';
+import ButtonConfirm from 'components/Buttons/ButtonConfirm.js';
+import { addPeer } from 'services/otherService.js';
+import Emitter from 'utils/eventBus';
+import { t } from 'utils/text.js';
+import CommonModal from './CommonModal';
let inputRef = null;
-export default function AddConnectionModal({color}) {
-
- const {state} = useContext(mainContext);
- const {sidebarShow} = state;
+export default function AddConnectionModal({ color }) {
const [showModal, setShowModal] = React.useState(false);
useEffect(() => {
const set = function () {
- console.log("openAddConnectionModal event has occured");
+ console.log('openAddConnectionModal event has occured');
openModal();
};
- Emitter.on("openAddConnectionModal", set);
+ Emitter.on('openAddConnectionModal', set);
return () => {
Emitter.removeListener('openAddConnectionModal');
window.body.style.overflow = '';
- }
+ };
}, []);
const add = async () => {
closeModal();
- let {Strings, Type, Message} = await addPeer(inputRef.value);
- if(Strings && Strings.length){
- Emitter.emit('showMessageAlert', {message: 'add_connection_success', status: 'success', type:'frontEnd'});
+ let { Strings, Type, Message } = await addPeer(inputRef.value);
+ if (Strings && Strings.length) {
+ Emitter.emit('showMessageAlert', {
+ message: 'add_connection_success',
+ status: 'success',
+ type: 'frontEnd',
+ });
} else {
- if(Type==='error') {
- Emitter.emit('showMessageAlert', {message: Message, status: 'error'});
+ if (Type === 'error') {
+ Emitter.emit('showMessageAlert', { message: Message, status: 'error' });
} else {
- Emitter.emit('showMessageAlert', {message: 'add_connection_failed', status: 'error', type:'frontEnd'});
+ Emitter.emit('showMessageAlert', {
+ message: 'add_connection_failed',
+ status: 'error',
+ type: 'frontEnd',
+ });
}
}
};
@@ -51,48 +55,30 @@ export default function AddConnectionModal({color}) {
window.body.style.overflow = '';
};
-
return (
- <>
- {showModal ? (
- <>
- {t('earning_history')}
+
+
- )
+
-
-
-
- ) : null}
-
+
- {/*content*/}
-
-
- {/*header*/}
-
-
-
- {/*body*/}
- - {t('add_connection')} -
-
-
- {/*footer*/}
-
- {t('address_to_connect')}
-
- E.G. /ip4/76.176.168.65/tcp/4001/p2p/QmbBHw1Xx9pUpAbrVZUKTPL5R
-
-
-
-
-
+ {t('add_connection')}
+
+
+
+
+
+ {t('address_to_connect')}
+
+ E.G. /ip4/76.176.168.65/tcp/4001/p2p/QmbBHw1Xx9pUpAbrVZUKTPL5R
+
-
-
-
-
-
{t('cashing_status')}
- {!err &&