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

sl+Log

Browse Source
This commit is contained in:
Cannigor
2025-12-16 23:03:33 +03:00
parent f7d7c83d86
commit 9a782ba56d
6 changed files with 172 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
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 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,42 @@ 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';
function RangeSlider() {
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>
<PhoenixReactRange
values={values}
variant="primary"
onChange={val => setValues(val)}
trackHeight={'4px'}
classNames= {'phoenix-react-range-slim mb-4'}
/>
<div>255</div>
</div>
)
}
function Channel() {
const [values, setValues] = useState<number[]>([0]);
return (
<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>
</Button>
</div>
)
}
const routes: RouteObject[] = [
{
@@ -234,9 +269,14 @@ const routes: RouteObject[] = [
},
{
element: (
<div >
<Slider/>
</div>
<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>
),
path: '/monitor'
},

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

@@ -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: 300
}}
>
<div
<div
ref={props.ref}
className="phoenix-react-range-track"
style={{
height: trackHeight,
// height: trackHeight,
height: 300,
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}

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')}>
<div className={classNames(contentClass, 'content pt-0 pe-0 ps-0 d-flex flex-column flex-grow-1')}>
{/*<Footer className={classNames(footerClass, 'position-md-relative')} />*/}
<Header/>
<Outlet />

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

@@ -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={
@@ -30,91 +31,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"
<Navbar.Collapse
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">
<Row>
<Col className="p-0 pe-3" xs="auto">
<div>A:</div>
{/* <Col className="p-3 " xs="auto">
<Row >
<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>
)}

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 = 200;
const defaultHeight = 15;
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