From 2045006d6f0ba7c0a699dcbcfa44c2014f81b126 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A4=D1=80=D0=BE=D0=BB=D0=BE=D0=B2?=
 <nikita.grigorevich@gmail.com>
Date: Mon, 31 May 2021 15:02:35 +0500
Subject: [PATCH] =?UTF-8?q?WellSelector=20=D0=B2=20=D0=B7=D0=B0=D0=B3?=
 =?UTF-8?q?=D0=BE=D0=BB=D0=BE=D0=B2=D0=BA=D0=B5=20=D1=82=D0=B5=D0=BF=D0=B5?=
 =?UTF-8?q?=D1=80=D1=8C=20=D1=81=D0=B2=D1=8F=D0=B7=D0=B0=D0=BD=20=D1=81=20?=
 =?UTF-8?q?=D0=BC=D0=B0=D1=80=D1=88=D1=80=D1=83=D1=82=D0=BE=D0=BC.=20?=
 =?UTF-8?q?=D0=BF=D0=BE=D0=BF=D1=80=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=20=D0=B5?=
 =?UTF-8?q?=D0=B3=D0=BE=20=D1=81=D1=82=D0=B8=D0=BB=D1=8C.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/WellTreeSelector.jsx |  9 +++----
 src/pages/Header.jsx                | 33 ++++++++++++------------
 src/pages/LayoutPortal.jsx          | 39 +++++++++++++++++++++++++++++
 src/pages/Main.jsx                  | 38 ++++++++++++----------------
 src/styles/App.less                 | 15 +++++++++++
 src/styles/archive_style.css        |  3 ---
 6 files changed, 90 insertions(+), 47 deletions(-)
 create mode 100644 src/pages/LayoutPortal.jsx
 delete mode 100644 src/styles/archive_style.css

diff --git a/src/components/WellTreeSelector.jsx b/src/components/WellTreeSelector.jsx
index d78c03a..eeab7f5 100644
--- a/src/components/WellTreeSelector.jsx
+++ b/src/components/WellTreeSelector.jsx
@@ -65,11 +65,10 @@ export default function WellTreeSelector(props) {
   return (
     <>
       <TreeSelect
-        style={{
-          width: '25%',
-          alignItems: 'center'
-        }}
-        placeholder="Выберите месторождение"
+        className='header-tree-select'
+        bordered={false}
+        dropdownMatchSelectWidth={false}
+        placeholder='Выберите месторождение'
         treeData={wellsTree}
         treeDefaultExpandAll
         onSelect={onSelect}
diff --git a/src/pages/Header.jsx b/src/pages/Header.jsx
index 34b04e0..ab1de4a 100644
--- a/src/pages/Header.jsx
+++ b/src/pages/Header.jsx
@@ -6,7 +6,7 @@ import WellTreeSelector from '../components/WellTreeSelector'
 
 const { Header } = Layout
 
-export default function PageHeader(props){
+export default function PageHeader({title='Мониторинг', wellsList}){
   const login = localStorage['login']
 
   let handleLogout = () => {
@@ -14,19 +14,18 @@ export default function PageHeader(props){
     localStorage.removeItem('token')
   }
   
-    return(
-        <Layout>
-            <Header className="header">
-                <img src={logo} alt="АСБ" className="logo"/>
-                <WellTreeSelector />
-                <h1 className="title">Мониторинг</h1>
-                
-              <Link to="/login" onClick={handleLogout}>
-                <Button icon={<UserOutlined/>}>            
-                ({login}) Выход
-                </Button>
-              </Link>
-            </Header>
-        </Layout>
-        )
-    };
\ No newline at end of file
+  return(
+    <Layout>
+      <Header className="header">
+        <img src={logo} alt="АСБ" className="logo"/>
+        <WellTreeSelector wellsList={wellsList}/>
+        <h1 className="title">{title}</h1>            
+        <Link to="/login" onClick={handleLogout}>
+          <Button icon={<UserOutlined/>}>            
+          ({login}) Выход
+          </Button>
+        </Link>
+      </Header>
+    </Layout>
+    )
+};
\ No newline at end of file
diff --git a/src/pages/LayoutPortal.jsx b/src/pages/LayoutPortal.jsx
new file mode 100644
index 0000000..eb3c37e
--- /dev/null
+++ b/src/pages/LayoutPortal.jsx
@@ -0,0 +1,39 @@
+import {Layout} from 'antd'
+import PageHeader from './Header'
+// import { useState, useEffect, createContext} from 'react'
+// import { useParams } from 'react-router-dom'
+
+const {Content} = Layout
+
+export default function LayoutPortal({title, children}) {
+  // const [wells, setWells] = useState([])
+  // let { id } = useParams();
+
+  // let updateWellsList = async () => {
+  //   setLoader(true)
+  //   try {
+  //     let newWells = (await WellService.getWells()).map(w => { return { key: w.id, ...w } })
+  //     setWells(newWells)
+  //   }
+  //   catch (e) {
+  //     console.error(`${e.message}`);
+  //   }
+  //   setLoader(false)
+  // }
+
+  // useEffect(() => {
+  //   updateWellsList()
+  // }, [])
+  
+  // const WellsContext = createContext({wells});
+
+  return (     
+      <Content>
+        <PageHeader title={title}/>
+        <Layout>
+          <Content className="site-layout-background sheet">
+            {children}
+          </Content>
+        </Layout>
+      </Content>)
+}
\ No newline at end of file
diff --git a/src/pages/Main.jsx b/src/pages/Main.jsx
index 8ca4432..adf515f 100644
--- a/src/pages/Main.jsx
+++ b/src/pages/Main.jsx
@@ -1,31 +1,25 @@
-import {Layout} from 'antd'
 import Wells from './Wells'
-import PageHeader from './Header'
 import Well from "../components/Well";
+import LayoutPortal from './LayoutPortal'
 import {Redirect, Route, Switch} from "react-router-dom";
 
-const {Content} = Layout
-
 export default function Main() {
 
   return (
-    <Content>
-      <PageHeader/>
-      <Layout>
-        <Content className="site-layout-background sheet">
-          <Switch>
-            <Route path="/well/:id/">
-              <Well/>
-            </Route>
-            <Route path="/well">
-              <Wells/>
-            </Route>
-            <Route path="/">
-              <Redirect to={{pathname: `/well`}}/>
-            </Route>
-          </Switch>
-        </Content>
-      </Layout>
-    </Content>
+    <Switch>
+      <Route path="/well/:id/">
+        <LayoutPortal>
+          <Well/>
+        </LayoutPortal>
+      </Route>
+      <Route path="/well">
+        <LayoutPortal>
+          <Wells/>
+        </LayoutPortal>
+      </Route>
+      <Route path="/">
+        <Redirect to={{pathname: `/well`}}/>
+      </Route>
+    </Switch>
   )
 }
diff --git a/src/styles/App.less b/src/styles/App.less
index e8dc534..d2ef1e5 100644
--- a/src/styles/App.less
+++ b/src/styles/App.less
@@ -145,3 +145,18 @@ tr.table_row_size {
   width: 50%;
   margin-right: 5px;
 }
+
+.header-tree-select *{
+  color: #fff;
+  font-size: '1.5rem';
+}
+
+.header-tree-select{
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+.header-tree-select:hover{
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  background-color: rgba(0, 0, 0, 0.5);
+}
\ No newline at end of file
diff --git a/src/styles/archive_style.css b/src/styles/archive_style.css
deleted file mode 100644
index 0a5d44b..0000000
--- a/src/styles/archive_style.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.content-sheet {
-    display: inline-flex;
-}
\ No newline at end of file