sl+Log

src/Routes.tsx

@@ -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'
           },

src/components/forms/PhoenixReactRange.tsx

@@ -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 
         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}

src/layouts/MainLayout.tsx

@@ -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 />

src/module-dimmer/Header.tsx

@@ -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">
-              <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>
         )}
 

src/module-dimmer/ProgressBar.tsx

@@ -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>
+  );
+};