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>
</head>
<body>
<body class="overflow-x-hidden">
<noscript>You need to enable JavaScript to run this app.</noscript>
<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 { ProgressBar } from 'module-dimmer/ProgressBar';
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]);
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>1d</div>
<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 mb-4'}
trackHeight="4px"
classNames="phoenix-react-range-slim"
/>
<div>255</div>
</div>
)
<div className="h3">255</div>
</div>
</div>
);
}
function Channel() {
const [values, setValues] = useState<number[]>([0]);
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>
<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">
<Button variant="outline-secondary" className="h-100 d-flex flex-column flex-grow-1">
<div>2d</div>
<ProgressBar value={80} min={0} fillColor="blue" max={255} orientation={'vertical'} />
<div>255</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[] = [
@@ -265,23 +305,17 @@ const routes: RouteObject[] = [
children: [
{
index: true,
element: <div> body </div>
element: <Monitor />
},
{
element: (
<Row className="p-3 d-flex flex-column h-100 flex-grow-1">
<Col className="d-flex flex-column">
<Channel/>
</Col>
<Col>
<RangeSlider />
</Col>
</Row>
<div> body </div>
),
path: '/monitor'
},
{
element: <div>log</div>,
element: <Log/>,
path: '/log'
},
{

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

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

2
src/layouts/MainLayout.tsx
View File

@@ -30,7 +30,7 @@ const MainLayout = () => {
{/*)}*/}
{/*{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')} />*/}
<Header/>
<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 = () => {
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>

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

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