Compare commits
2 Commits
f7d7c83d86
...
8d06f67b5e
| Author | SHA1 | Date | |
|---|---|---|---|
| 8d06f67b5e | |||
| 9a782ba56d |
@@ -29,7 +29,7 @@
|
||||
<title>Phoenix React | ReactJS Dashboard & WebApp Template</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="overflow-x-hidden">
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
|
||||
@@ -160,7 +160,7 @@ import SplitForgotPassword from 'pages/pages/authentication/split/ForgotPassword
|
||||
import SplitResetPassword from 'pages/pages/authentication/split/ResetPassword';
|
||||
import SplitLockScreen from 'pages/pages/authentication/split/LockScreen';
|
||||
import SplitTwoFA from 'pages/pages/authentication/split/TwoFA';
|
||||
import { Suspense, lazy } from 'react';
|
||||
import { Suspense, lazy, useState } from 'react';
|
||||
import PhoenixLoader from 'components/common/PhoenixLoader';
|
||||
import Migrations from 'pages/documentation/Migrations';
|
||||
import Kanban from 'pages/apps/kanban/Kanban';
|
||||
@@ -214,7 +214,82 @@ import TripCheckout from 'pages/apps/travel-agency/trip/Checkout';
|
||||
import TripLayout from 'layouts/TripLayout';
|
||||
import { Range } from 'react-range';
|
||||
import PhoenixReactRange from './components/forms/PhoenixReactRange';
|
||||
import { Slider } from './module-dimmer/Slider';
|
||||
import { ProgressBar } from 'module-dimmer/ProgressBar';
|
||||
import { Button, Col, Row } from 'react-bootstrap';
|
||||
import { Log } from 'module-dimmer/Log';
|
||||
|
||||
|
||||
|
||||
function RangeSlider({ index }: { index: number }) {
|
||||
const [values, setValues] = useState<number[]>([0]);
|
||||
|
||||
return (
|
||||
<div className="p-2">
|
||||
<div className="h-100 d-flex flex-column align-items-center justify-content-between bg-body-secondary p-2 rounded-2">
|
||||
<div className="h3">{index + 1}d</div>
|
||||
<div className="p-2">
|
||||
<PhoenixReactRange
|
||||
values={values}
|
||||
variant="primary"
|
||||
onChange={val => setValues(val)}
|
||||
trackHeight="4px"
|
||||
classNames="phoenix-react-range-slim"
|
||||
/>
|
||||
</div>
|
||||
<div className="h3">255</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
function Channel({ index }: { index: number }) {
|
||||
return (
|
||||
<div className="h-100 d-flex flex-column align-items-center p-2 ">
|
||||
<Button
|
||||
variant="outline-secondary"
|
||||
className="h-100 w-100 d-flex flex-column align-items-center justify-content-between p-2"
|
||||
>
|
||||
<div className="h3">{index + 1}d</div>
|
||||
|
||||
<ProgressBar
|
||||
value={80}
|
||||
min={0}
|
||||
max={255}
|
||||
fillColor="blue"
|
||||
orientation="vertical"
|
||||
/>
|
||||
|
||||
<div className="h3">255</div>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const CHANNELS_COUNT = 12;
|
||||
|
||||
function Monitor() {
|
||||
return (
|
||||
<div className="flex-grow-1 d-flex flex-column gap-3 ">
|
||||
|
||||
{/* ===== CHANNELS ===== */}
|
||||
<Row className="flex-grow-1 rounded-2">
|
||||
{Array.from({ length: CHANNELS_COUNT }).map((_, i) => (
|
||||
<Col key={i} xs={1} className="d-flex">
|
||||
<Channel index={i} />
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
|
||||
{/* ===== SLIDERS ===== */}
|
||||
<Row className="flex-grow-1 rounded-2">
|
||||
{Array.from({ length: CHANNELS_COUNT }).map((_, i) => (
|
||||
<Col key={i} xs={1} className="d-flex">
|
||||
<RangeSlider index={i} />
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const routes: RouteObject[] = [
|
||||
{
|
||||
@@ -230,18 +305,17 @@ const routes: RouteObject[] = [
|
||||
children: [
|
||||
{
|
||||
index: true,
|
||||
element: <div> body </div>
|
||||
|
||||
element: <Monitor />
|
||||
},
|
||||
{
|
||||
element: (
|
||||
<div >
|
||||
<Slider/>
|
||||
</div>
|
||||
<div> body </div>
|
||||
),
|
||||
path: '/monitor'
|
||||
},
|
||||
{
|
||||
element: <div>log</div>,
|
||||
element: <Log/>,
|
||||
path: '/log'
|
||||
},
|
||||
{
|
||||
|
||||
@@ -3,7 +3,8 @@ import { Range, getTrackBackground } from 'react-range'; // import the types dir
|
||||
import {
|
||||
IRenderTrackParams,
|
||||
IRenderThumbParams,
|
||||
IRenderMarkParams
|
||||
IRenderMarkParams,
|
||||
Direction
|
||||
} from 'react-range/lib/types';
|
||||
import { useAppContext } from 'providers/AppProvider';
|
||||
|
||||
@@ -57,20 +58,25 @@ const PhoenixReactRange = ({
|
||||
} = useAppContext();
|
||||
const Track = ({ props, children }: IRenderTrackParams): React.ReactNode => (
|
||||
<div
|
||||
|
||||
onMouseDown={props.onMouseDown}
|
||||
onTouchStart={props.onTouchStart}
|
||||
className={`phoenix-react-range ${classNames ? classNames : ''}`}
|
||||
style={{
|
||||
...props.style
|
||||
...props.style,
|
||||
width: 10,
|
||||
height: 50
|
||||
}}
|
||||
>
|
||||
<div
|
||||
ref={props.ref}
|
||||
className="phoenix-react-range-track"
|
||||
style={{
|
||||
height: trackHeight,
|
||||
// height: trackHeight,
|
||||
height: 100,
|
||||
cursor: !draggableTrack ? 'pointer' : 'ew-resize',
|
||||
background: getTrackBackground({
|
||||
direction: Direction.Up,
|
||||
values,
|
||||
colors:
|
||||
values.length === 2
|
||||
@@ -117,6 +123,7 @@ const PhoenixReactRange = ({
|
||||
|
||||
return (
|
||||
<Range
|
||||
direction={Direction.Up}
|
||||
draggableTrack={draggableTrack}
|
||||
values={values}
|
||||
step={step}
|
||||
|
||||
@@ -30,7 +30,7 @@ const MainLayout = () => {
|
||||
{/*)}*/}
|
||||
{/*{navbarPosition === 'dual' && <NavbarDual />}*/}
|
||||
|
||||
<div className={classNames(contentClass, 'content pt-0 pe-0 ps-0')}>
|
||||
<div className={classNames(contentClass, 'content p-0 d-flex flex-column flex-grow-1 ')} style={{minHeight: '98.5vh'}}>
|
||||
{/*<Footer className={classNames(footerClass, 'position-md-relative')} />*/}
|
||||
<Header/>
|
||||
<Outlet />
|
||||
|
||||
@@ -18,11 +18,12 @@ export const Header = () => {
|
||||
}
|
||||
} = useAppContext();
|
||||
|
||||
|
||||
const { breakpoints } = useBreakpoints();
|
||||
|
||||
return (
|
||||
<Navbar
|
||||
className="navbar-top"
|
||||
className="navbar-top p-2"
|
||||
expand="lg"
|
||||
variant=""
|
||||
data-navbar-appearance={
|
||||
@@ -31,91 +32,95 @@ export const Header = () => {
|
||||
>
|
||||
{!(navbarPosition === 'combo' && breakpoints.down('lg')) && (
|
||||
<Navbar.Collapse
|
||||
className="w-50 navbar-top-collapse order-1 order-lg-0 justify-content-between pb-0"
|
||||
className="w-50 navbar-top-collapse order-1 order-lg-0 justify-content-between pb-0 border border-gray-400 rounded-3 p-3"
|
||||
in={openNavbarVertical}
|
||||
>
|
||||
<Col className="p-0" xs="auto">
|
||||
|
||||
{/* <Col className="p-3 " xs="auto">
|
||||
<Row >
|
||||
<Col className="p-0 pe-3" xs="auto">
|
||||
<div>A:</div>
|
||||
<Col className="p-0 pe-3 fs-7 " xs="auto">
|
||||
<div>Имя:</div>
|
||||
</Col>
|
||||
<Col className="p-0 pe-3" xs="auto">
|
||||
<Col className="p-0 pe-3 fs-7" xs="auto">
|
||||
<div>DDSR 24</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col className="p-0 pe-3" xs="auto">
|
||||
<div>B.:</div>
|
||||
<Col className="p-0 pe-3 fs-7" xs="auto">
|
||||
<div>Ист.:</div>
|
||||
</Col>
|
||||
<Col className="p-0 pe-3" xs="auto">
|
||||
<Col className="p-0 pe-3 fs-7 text-warning-lighter" xs="auto">
|
||||
<div>выкл.</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col className="p-0 pe-3" xs="auto">
|
||||
<div>C:</div>
|
||||
<Col className="p-0 pe-3 fs-7" xs="auto">
|
||||
<div>IP:</div>
|
||||
</Col>
|
||||
<Col className="p-0 pe-3" xs="auto">
|
||||
<div>123</div>
|
||||
<Col className="p-0 pe-3 fs-7 text-success-light" xs="auto">
|
||||
<div><div> </div>192.168.1.200</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col> */}
|
||||
<Col className="p-0" xs="auto">
|
||||
<Row>
|
||||
<Col className="p-2 pe-2 fs-7" xs="auto">
|
||||
<div>Имя:</div>
|
||||
<div>Ист.:</div>
|
||||
<div>IP:</div>
|
||||
|
||||
|
||||
</Col>
|
||||
<Col className="p-2 pe-2 fs-7" xs="auto">
|
||||
<div>DDSR 24</div>
|
||||
<div className="text-warning-lighter">выкл</div>
|
||||
<div className="text-success-light">192.168.1.200</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
</Col>
|
||||
|
||||
|
||||
|
||||
|
||||
<Col className="p-0" xs="auto">
|
||||
<Row>
|
||||
<Col className="p-0 pe-3" xs="auto">
|
||||
<div>A:</div>
|
||||
<Col className="p-2 pe-2 fs-7" xs="auto">
|
||||
<div>Частота:</div>
|
||||
<div>Вент.:</div>
|
||||
<div>Темп.:</div>
|
||||
|
||||
|
||||
</Col>
|
||||
<Col className="p-0 pe-3" xs="auto">
|
||||
<div>DDSR 24</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col className="p-0 pe-3" xs="auto">
|
||||
<div>B.:</div>
|
||||
</Col>
|
||||
<Col className="p-0 pe-3" xs="auto">
|
||||
<div>выкл.</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col className="p-0 pe-3" xs="auto">
|
||||
<div>C:</div>
|
||||
</Col>
|
||||
<Col className="p-0 pe-3" xs="auto">
|
||||
<div>123</div>
|
||||
<Col className="p-2 pe-2 fs-7" xs="auto">
|
||||
<div>50 Гц</div>
|
||||
<div>50 %</div>
|
||||
<div>75 c</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
</Col>
|
||||
|
||||
|
||||
<Col className="p-0" xs="auto">
|
||||
<Row>
|
||||
<Col className="p-0 pe-3" xs="auto">
|
||||
<div>A:</div>
|
||||
<Col className="p-2 pe-2 fs-7" xs="auto">
|
||||
<div>Частота:</div>
|
||||
<div>Вент.:</div>
|
||||
<div>Темп.:</div>
|
||||
|
||||
|
||||
</Col>
|
||||
<Col className="p-0 pe-3" xs="auto">
|
||||
<div>DDSR 24</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col className="p-0 pe-3" xs="auto">
|
||||
<div>B.:</div>
|
||||
</Col>
|
||||
<Col className="p-0 pe-3" xs="auto">
|
||||
<div>выкл.</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col className="p-0 pe-3" xs="auto">
|
||||
<div>C:</div>
|
||||
</Col>
|
||||
<Col className="p-0 pe-3" xs="auto">
|
||||
<div>123</div>
|
||||
<Col className="p-2 pe-2 fs-7" xs="auto">
|
||||
<div>50 Гц</div>
|
||||
<div>50 %</div>
|
||||
<div>75 c</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
</Col>
|
||||
|
||||
|
||||
</Navbar.Collapse>
|
||||
)}
|
||||
|
||||
|
||||
14
src/module-dimmer/Log.tsx
Normal file
14
src/module-dimmer/Log.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
import { Col, Row } from "react-bootstrap";
|
||||
|
||||
export const Log = () => {
|
||||
return (
|
||||
|
||||
<div className="p-3 pe-3 w-100 h-100 d-flex flex-grow-1 bg-secondary rounded-2 ">
|
||||
|
||||
<Row className="h-25 border-bottom border-gray-800 w-100 pe-3 fs-3"> Журнал событий </Row>
|
||||
|
||||
</div>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
@@ -12,7 +12,7 @@ const pages: NavItemPage[] = [
|
||||
]
|
||||
const NavbarTopNav = () => {
|
||||
return (
|
||||
<Nav fill variant='pills' className="navbar-bottom">
|
||||
<Nav fill variant='pills' className="navbar-bottom position-relative">
|
||||
{pages.map(x => (
|
||||
<Nav.Item>
|
||||
<NavLink className="nav-link" to={x.path}>{x.label}</NavLink>
|
||||
|
||||
55
src/module-dimmer/ProgressBar.tsx
Normal file
55
src/module-dimmer/ProgressBar.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import { CSSProperties } from 'react';
|
||||
|
||||
type ProgressBarProps = {
|
||||
value: number;
|
||||
max?: number;
|
||||
min?: number;
|
||||
fillColor?: string;
|
||||
unfilledColor?: string;
|
||||
orientation: 'horizontal' | 'vertical';
|
||||
label?: string;
|
||||
style?: CSSProperties;
|
||||
};
|
||||
export const ProgressBar = ({
|
||||
value,
|
||||
min = 0,
|
||||
max = 100,
|
||||
fillColor = 'blue',
|
||||
orientation,
|
||||
label,
|
||||
style
|
||||
}: ProgressBarProps) => {
|
||||
const defaultWidth = 50;
|
||||
const defaultHeight = 100;
|
||||
let overridedStyle: CSSProperties =
|
||||
style === undefined || style === null ? {} : style;
|
||||
const width = overridedStyle?.width;
|
||||
const height = overridedStyle?.height;
|
||||
if (orientation === 'horizontal') {
|
||||
overridedStyle.width = width ?? defaultWidth;
|
||||
overridedStyle.height = height ?? defaultHeight;
|
||||
} else {
|
||||
overridedStyle.height = width ?? defaultWidth;
|
||||
overridedStyle.width = height ?? defaultHeight;
|
||||
}
|
||||
let internalBarStyle: CSSProperties = { backgroundColor: fillColor };
|
||||
|
||||
let procentedValue = `${(value / (max ?? 100)) * 100}%`;
|
||||
orientation == 'horizontal'
|
||||
? (internalBarStyle.width = procentedValue)
|
||||
: (internalBarStyle.height = procentedValue);
|
||||
|
||||
return (
|
||||
<div className="progress progress-channel w-25 d-flex flex-column-reverse" style={overridedStyle}>
|
||||
<div
|
||||
className="progress-bar w-100 progress-bar-channel progress-bar-striped progress-bar-animated"
|
||||
role="progressbar"
|
||||
style={internalBarStyle}
|
||||
aria-valuemin={min}
|
||||
aria-valuemax={max}
|
||||
>
|
||||
{label}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
0
src/module-dimmer/Slider.tsx
Normal file
0
src/module-dimmer/Slider.tsx
Normal file
Reference in New Issue
Block a user