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

sl+log2

Browse Source
This commit is contained in:
Cannigor
2025-12-16 23:04:31 +03:00
parent 9a782ba56d
commit 8d06f67b5e
7 changed files with 83 additions and 35 deletions
Download Patch File Download Diff File 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>
<!-- <!--

86
src/Routes.tsx
View File

@@ -216,39 +216,79 @@ import { Range } from 'react-range';
import PhoenixReactRange from './components/forms/PhoenixReactRange'; import PhoenixReactRange from './components/forms/PhoenixReactRange';
import { ProgressBar } from 'module-dimmer/ProgressBar'; import { ProgressBar } from 'module-dimmer/ProgressBar';
import { Button, Col, Row } from 'react-bootstrap'; import { Button, Col, Row } from 'react-bootstrap';
import { Log } from 'module-dimmer/Log';
function RangeSlider() { function RangeSlider({ index }: { index: number }) {
const [values, setValues] = useState<number[]>([0]); const [values, setValues] = useState<number[]>([0]);
return ( return (
<div className="w-25 d-flex flex-column text-center align-items-center h3 bg-body-secondary p-2 mb-2 bg-body-secondary"> <div className="p-2">
<div>1d</div> <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 <PhoenixReactRange
values={values} values={values}
variant="primary" variant="primary"
onChange={val => setValues(val)} onChange={val => setValues(val)}
trackHeight={'4px'} trackHeight="4px"
classNames= {'phoenix-react-range-slim mb-4'} classNames="phoenix-react-range-slim"
/> />
<div>255</div>
</div> </div>
<div className="h3">255</div>
) </div>
</div>
);
} }
function Channel() { function Channel({ index }: { index: number }) {
const [values, setValues] = useState<number[]>([0]);
return ( 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>
<div className="w-25 d-flex flex-column text-center align-items-center h3 bg-body-secondary flex-grow-1 p-2 mb-2 bg-body-secondary"> <ProgressBar
<Button variant="outline-secondary" className="h-100 d-flex flex-column flex-grow-1"> value={80}
<div>2d</div> min={0}
<ProgressBar value={80} min={0} fillColor="blue" max={255} orientation={'vertical'} /> max={255}
<div>255</div> fillColor="blue"
orientation="vertical"
/>
<div className="h3">255</div>
</Button> </Button>
</div> </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[] = [
@@ -265,23 +305,17 @@ const routes: RouteObject[] = [
children: [ children: [
{ {
index: true, index: true,
element: <div> body </div>
element: <Monitor />
}, },
{ {
element: ( element: (
<Row className="p-3 d-flex flex-column h-100 flex-grow-1"> <div> body </div>
<Col className="d-flex flex-column">
<Channel/>
</Col>
<Col>
<RangeSlider />
</Col>
</Row>
), ),
path: '/monitor' path: '/monitor'
}, },
{ {
element: <div>log</div>, element: <Log/>,
path: '/log' path: '/log'
}, },
{ {

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

@@ -65,7 +65,7 @@ const PhoenixReactRange = ({
style={{ style={{
...props.style, ...props.style,
width: 10, width: 10,
height: 300 height: 50
}} }}
> >
<div <div
@@ -73,7 +73,7 @@ const PhoenixReactRange = ({
className="phoenix-react-range-track" className="phoenix-react-range-track"
style={{ style={{
// height: trackHeight, // height: trackHeight,
height: 300, height: 100,
cursor: !draggableTrack ? 'pointer' : 'ew-resize', cursor: !draggableTrack ? 'pointer' : 'ew-resize',
background: getTrackBackground({ background: getTrackBackground({
direction: Direction.Up, direction: Direction.Up,

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 d-flex flex-column flex-grow-1')}> <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 />

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>

4
src/module-dimmer/ProgressBar.tsx
View File

@@ -19,8 +19,8 @@ export const ProgressBar = ({
label, label,
style style
}: ProgressBarProps) => { }: ProgressBarProps) => {
const defaultWidth = 200; const defaultWidth = 50;
const defaultHeight = 15; const defaultHeight = 100;
let overridedStyle: CSSProperties = let overridedStyle: CSSProperties =
style === undefined || style === null ? {} : style; style === undefined || style === null ? {} : style;
const width = overridedStyle?.width; const width = overridedStyle?.width;