From 8d06f67b5e539a0b480302e8e9aed5d8d4593515 Mon Sep 17 00:00:00 2001
From: Cannigor <haldinite@gmail.com>
Date: Tue, 16 Dec 2025 23:04:31 +0300
Subject: [PATCH] sl+log2

---
 public/index.html                          |  2 +-
 src/Routes.tsx                             | 90 +++++++++++++++-------
 src/components/forms/PhoenixReactRange.tsx |  4 +-
 src/layouts/MainLayout.tsx                 |  2 +-
 src/module-dimmer/Log.tsx                  | 14 ++++
 src/module-dimmer/NavBarMy.tsx             |  2 +-
 src/module-dimmer/ProgressBar.tsx          |  4 +-
 7 files changed, 83 insertions(+), 35 deletions(-)
 create mode 100644 src/module-dimmer/Log.tsx
diff --git a/public/index.html b/public/index.html
index cf18838..31e2e95 100644
--- a/public/index.html
+++ b/public/index.html
@@ -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>
   <!--
diff --git a/src/Routes.tsx b/src/Routes.tsx
index f29e90b..fae06c4 100644
--- a/src/Routes.tsx
+++ b/src/Routes.tsx
@@ -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="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>
+    <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[] = [
@@ -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'
           },
           {
diff --git a/src/components/forms/PhoenixReactRange.tsx b/src/components/forms/PhoenixReactRange.tsx
index a327ad8..99ddbc6 100644
--- a/src/components/forms/PhoenixReactRange.tsx
+++ b/src/components/forms/PhoenixReactRange.tsx
@@ -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,
diff --git a/src/layouts/MainLayout.tsx b/src/layouts/MainLayout.tsx
index 92daeb5..2a71527 100644
--- a/src/layouts/MainLayout.tsx
+++ b/src/layouts/MainLayout.tsx
@@ -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 />
diff --git a/src/module-dimmer/Log.tsx b/src/module-dimmer/Log.tsx
new file mode 100644
index 0000000..6721998
--- /dev/null
+++ b/src/module-dimmer/Log.tsx
@@ -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>
+  
+  );
+};
+
diff --git a/src/module-dimmer/NavBarMy.tsx b/src/module-dimmer/NavBarMy.tsx
index c891013..01c64f5 100644
--- a/src/module-dimmer/NavBarMy.tsx
+++ b/src/module-dimmer/NavBarMy.tsx
@@ -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>
diff --git a/src/module-dimmer/ProgressBar.tsx b/src/module-dimmer/ProgressBar.tsx
index b0fb84a..5f50330 100644
--- a/src/module-dimmer/ProgressBar.tsx
+++ b/src/module-dimmer/ProgressBar.tsx
@@ -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;
