roma.lyan/module-dimmer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: roma.lyan:f7d7c83d862c2fd4e007b659d7f50234c2a79bfc
Branches Tags
roma.lyan:master
..
compare: roma.lyan:8d06f67b5e539a0b480302e8e9aed5d8d4593515
Branches Tags
roma.lyan:master

2 Commits
f7d7c83d86 ... 8d06f67b5e

Author SHA1 Message Date
Cannigor
8d06f67b5e sl+log2 2025-12-16 23:04:31 +03:00
Cannigor
9a782ba56d sl+Log 2025-12-16 23:03:33 +03:00
9 changed files with 224 additions and 69 deletions
Expand all files Collapse all files

2
public/index.html
View File

@@ -29,7 +29,7 @@
<title>Phoenix React | ReactJS Dashboard & WebApp Template</title> <title>Phoenix React | ReactJS Dashboard & WebApp Template</title>
</head> </head>
<body> <body class="overflow-x-hidden">
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<!-- <!--

88
src/Routes.tsx
View File

@@ -160,7 +160,7 @@ import SplitForgotPassword from 'pages/pages/authentication/split/ForgotPassword
import SplitResetPassword from 'pages/pages/authentication/split/ResetPassword'; import SplitResetPassword from 'pages/pages/authentication/split/ResetPassword';
import SplitLockScreen from 'pages/pages/authentication/split/LockScreen'; import SplitLockScreen from 'pages/pages/authentication/split/LockScreen';
import SplitTwoFA from 'pages/pages/authentication/split/TwoFA'; 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 PhoenixLoader from 'components/common/PhoenixLoader';
import Migrations from 'pages/documentation/Migrations'; import Migrations from 'pages/documentation/Migrations';
import Kanban from 'pages/apps/kanban/Kanban'; 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 TripLayout from 'layouts/TripLayout';
import { Range } from 'react-range'; import { Range } from 'react-range';
import PhoenixReactRange from './components/forms/PhoenixReactRange'; 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[] = [ const routes: RouteObject[] = [
{ {
@@ -230,18 +305,17 @@ const routes: RouteObject[] = [
children: [ children: [
{ {
index: true, index: true,
element: <div> body </div>
element: <Monitor />
}, },
{ {
element: ( element: (
<div > <div> body </div>
<Slider/>
</div>
), ),
path: '/monitor' path: '/monitor'
}, },
{ {
element: <div>log</div>, element: <Log/>,
path: '/log' path: '/log'
}, },
{ {

13
src/components/forms/PhoenixReactRange.tsx
View File

@@ -3,7 +3,8 @@ import { Range, getTrackBackground } from 'react-range'; // import the types dir
import { import {
IRenderTrackParams, IRenderTrackParams,
IRenderThumbParams, IRenderThumbParams,
IRenderMarkParams IRenderMarkParams,
Direction
} from 'react-range/lib/types'; } from 'react-range/lib/types';
import { useAppContext } from 'providers/AppProvider'; import { useAppContext } from 'providers/AppProvider';
@@ -57,20 +58,25 @@ const PhoenixReactRange = ({
} = useAppContext(); } = useAppContext();
const Track = ({ props, children }: IRenderTrackParams): React.ReactNode => ( const Track = ({ props, children }: IRenderTrackParams): React.ReactNode => (
<div <div
onMouseDown={props.onMouseDown} onMouseDown={props.onMouseDown}
onTouchStart={props.onTouchStart} onTouchStart={props.onTouchStart}
className={`phoenix-react-range ${classNames ? classNames : ''}`} className={`phoenix-react-range ${classNames ? classNames : ''}`}
style={{ style={{
...props.style ...props.style,
width: 10,
height: 50
}} }}
> >
<div <div
ref={props.ref} ref={props.ref}
className="phoenix-react-range-track" className="phoenix-react-range-track"
style={{ style={{
height: trackHeight, // height: trackHeight,
height: 100,
cursor: !draggableTrack ? 'pointer' : 'ew-resize', cursor: !draggableTrack ? 'pointer' : 'ew-resize',
background: getTrackBackground({ background: getTrackBackground({
direction: Direction.Up,
values, values,
colors: colors:
values.length === 2 values.length === 2
@@ -117,6 +123,7 @@ const PhoenixReactRange = ({
return ( return (
<Range <Range
direction={Direction.Up}
draggableTrack={draggableTrack} draggableTrack={draggableTrack}
values={values} values={values}
step={step} step={step}

2
src/layouts/MainLayout.tsx
View File

@@ -30,7 +30,7 @@ const MainLayout = () => {
{/*)}*/} {/*)}*/}
{/*{navbarPosition === 'dual' && <NavbarDual />}*/} {/*{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')} />*/} {/*<Footer className={classNames(footerClass, 'position-md-relative')} />*/}
<Header/> <Header/>
<Outlet /> <Outlet />

111
src/module-dimmer/Header.tsx
View File

@@ -18,11 +18,12 @@ export const Header = () => {
} }
} = useAppContext(); } = useAppContext();
const { breakpoints } = useBreakpoints(); const { breakpoints } = useBreakpoints();
return ( return (
<Navbar <Navbar
className="navbar-top" className="navbar-top p-2"
expand="lg" expand="lg"
variant="" variant=""
data-navbar-appearance={ data-navbar-appearance={
@@ -31,91 +32,95 @@ export const Header = () => {
> >
{!(navbarPosition === 'combo' && breakpoints.down('lg')) && ( {!(navbarPosition === 'combo' && breakpoints.down('lg')) && (
<Navbar.Collapse <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} in={openNavbarVertical}
> >
<Col className="p-0" xs="auto">
{/* <Col className="p-3 " xs="auto">
<Row > <Row >
<Col className="p-0 pe-3" xs="auto"> <Col className="p-0 pe-3 fs-7 " xs="auto">
<div>A:</div> <div>Имя:</div>
</Col> </Col>
<Col className="p-0 pe-3" xs="auto"> <Col className="p-0 pe-3 fs-7" xs="auto">
<div>DDSR 24</div> <div>DDSR 24</div>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col className="p-0 pe-3" xs="auto"> <Col className="p-0 pe-3 fs-7" xs="auto">
<div>B.:</div> <div>Ист.:</div>
</Col> </Col>
<Col className="p-0 pe-3" xs="auto"> <Col className="p-0 pe-3 fs-7 text-warning-lighter" xs="auto">
<div>выкл.</div> <div>выкл.</div>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col className="p-0 pe-3" xs="auto"> <Col className="p-0 pe-3 fs-7" xs="auto">
<div>C:</div> <div>IP:</div>
</Col> </Col>
<Col className="p-0 pe-3" xs="auto"> <Col className="p-0 pe-3 fs-7 text-success-light" xs="auto">
<div>123</div> <div><div> </div>192.168.1.200</div>
</Col> </Col>
</Row> </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>
<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"> <Col className="p-0" xs="auto">
<Row> <Row>
<Col className="p-0 pe-3" xs="auto"> <Col className="p-2 pe-2 fs-7" xs="auto">
<div>A:</div> <div>Частота:</div>
<div>Вент.:</div>
<div>Темп.:</div>
</Col> </Col>
<Col className="p-0 pe-3" xs="auto"> <Col className="p-2 pe-2 fs-7" xs="auto">
<div>DDSR 24</div> <div>50 Гц</div>
</Col> <div>50 %</div>
</Row> <div>75 c</div>
<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> </Col>
</Row> </Row>
</Col> </Col>
<Col className="p-0" xs="auto"> <Col className="p-0" xs="auto">
<Row> <Row>
<Col className="p-0 pe-3" xs="auto"> <Col className="p-2 pe-2 fs-7" xs="auto">
<div>A:</div> <div>Частота:</div>
<div>Вент.:</div>
<div>Темп.:</div>
</Col> </Col>
<Col className="p-0 pe-3" xs="auto"> <Col className="p-2 pe-2 fs-7" xs="auto">
<div>DDSR 24</div> <div>50 Гц</div>
</Col> <div>50 %</div>
</Row> <div>75 c</div>
<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> </Col>
</Row> </Row>
</Col> </Col>
</Navbar.Collapse> </Navbar.Collapse>
)} )}

14
src/module-dimmer/Log.tsx Normal file
View 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>
);
};

2
src/module-dimmer/NavBarMy.tsx
View File

@@ -12,7 +12,7 @@ const pages: NavItemPage[] = [
] ]
const NavbarTopNav = () => { const NavbarTopNav = () => {
return ( return (
<Nav fill variant='pills' className="navbar-bottom"> <Nav fill variant='pills' className="navbar-bottom position-relative">
{pages.map(x => ( {pages.map(x => (
<Nav.Item> <Nav.Item>
<NavLink className="nav-link" to={x.path}>{x.label}</NavLink> <NavLink className="nav-link" to={x.path}>{x.label}</NavLink>

55
src/module-dimmer/ProgressBar.tsx Normal file
View 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
View File