push sources 16.03.2022 #1

sources/.codesandbox/workspace.json

@@ -1,20 +0,0 @@
-{
-  "responsive-preview": {
-    "Mobile": [
-      320,
-      675
-    ],
-    "Tablet": [
-      1024,
-      765
-    ],
-    "Desktop": [
-      1400,
-      800
-    ],
-    "Desktop HD": [
-      1920,
-      1080
-    ]
-  }
-}

sources/Makefile

@@ -1,7 +1,7 @@
 
 
 start:
-		npm install && npm start
+		npm  install && npm  start
 
 build:
-		npm install && npm  run  build ../web
+		npm install && nom build

sources/package.json

@@ -15,7 +15,7 @@
   "version": "0.0.1876",
   "devDependencies": {
     "electron": "^15.1.1",
-    "react-scripts": "1.0.0"
+    "react-scripts": "^2.1.3"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -23,5 +23,11 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   },
-  "keywords": []
+  "keywords": [],
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
 }

sources/src/Componets/Acardion.js

@@ -31,6 +31,7 @@ export default class Accordion extends React.Component {
         <div
           id={this.props.title}
           class="Accrordion"
+          style={this.props.style}
           onClick={() => this.ViewGroup(this.props.title)}
         >
           <h3>

sources/src/Componets/AppContainer.js

@@ -329,7 +329,7 @@ export default class AppContainer extends React.Component {
             <div
               id="containerInfo"
               style={{
-                position: "fixed",
+                //position: "fixed",
                 //navigator.userAgentData.mobile ? width"100vw": width="20vw"
 
                 width: "100vw",

sources/src/Componets/NavList/navList.js

@@ -223,7 +223,7 @@ class NavBar extends Component {
           title={this.ui.catalog.text}
           style={{ paddingRight: "0px", float: "left", overflowY: "scroll" }}
         >
-          {/*CATALOG */}
+          {/*CATALOG 
 
           <SubMenu title={this.ui.catalog.text} style={{ overflowY: "scroll" }}>
             {Object.keys(this.props.category).map((k, i) => (
@@ -265,9 +265,11 @@ class NavBar extends Component {
                     </MenuItem>
                   ))}
                 </SubMenu>
+                    
               </MenuItem>
             ))}
           </SubMenu>
+                    */}
         </MenuItem>
       </Menu>
     );

sources/src/Componets/Tabs/tabs.js

@@ -0,0 +1,82 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+export default class TabsView extends React.Component {
+  menuBtn = {
+    all: {
+      borderBottom: "1px solid #AAA",
+      background: "#1d1d1d",
+      color: "#FFF",
+      textDecoration: "none",
+      marginLeft: "0px",
+      padding: " 10px",
+      borderRight: "1px  solid #FFF",
+      cursor: "pointer",
+      position: "ralative",
+      //left: "-40px",
+      borderRadius: "0px 20px 0px 20px",
+      left: "-20px"
+      //borderRadius: "10px 20px 0px 0px"
+    },
+    active: {
+      background: "blue",
+      //color: "#FFF",
+      textDecoration: "none",
+      marginLeft: "0px",
+      padding: " 10px",
+      borderRight: "1px  solid #FFF",
+      cursor: "pointer",
+      position: "ralative",
+      left: "-40px"
+    }
+  };
+  active = this.props.menuButton[this.props.activeDefault];
+
+  chechActive(id) {
+    for (let p = 0; p < this.props.menuButton.length; p++) {
+      if (this.props.menuButton[p].id === this.active) {
+        document.getElementById(this.props.menuButton[p].id).style.background =
+          "#00F";
+      } else {
+        document.getElementById(
+          this.props.menuButton[p].id
+        ).style.background = this.menuBtn.all.background;
+      }
+    }
+  }
+
+  render() {
+    return (
+      <div
+        // className="btn-group"
+        style={{
+          display: "inline-flex",
+          margin: "0px",
+          marginTop: "20px",
+
+          fontSize: "1.2em"
+
+          // color: "#000"
+        }}
+      >
+        {this.props.menuButton.map((it, p) => (
+          <div
+            id={it.id}
+            style={this.menuBtn.all}
+            onClick={() => (
+              (this.active = it.id),
+              this.chechActive(it.text),
+              console.log(this.active),
+              ReactDOM.render(
+                this.props.menuButton[p].handler(),
+                document.getElementById("listOve")
+              )
+            )}
+          >
+            {it.text}
+          </div>
+        ))}
+      </div>
+    );
+  }
+}

sources/src/Componets/overlayItem.js

@@ -23,10 +23,10 @@ export default class OvItem extends React.Component {
           marginTop: "5px",
           //width: "100vw",
           display: "inline-flex",
-          border: "1px solid #CCC",
+          border: "5px solid #CCC",
           borderRadius: " 10px",
-          boxShadow: "3px 4px 10px #CDC",
-          height: "125px"
+          boxShadow: "3px 4px 10px #CDC"
+          //height: "125px"
           //height:"75px"
           //padding: "15px",
           //display: "inline-flex",
@@ -43,9 +43,9 @@ export default class OvItem extends React.Component {
             //padding: "5px"
           }}
         >
-          <h3 style={{ textAlign: "center" }}>
+          <span style={{ textAlign: "center", fontSize: "1.4em" }}>
             <b>{this.props.over.name}</b>{" "}
-          </h3>
+          </span>
           <div
             style={{ height: "32px", textAlign: "left", overflow: "hidden" }}
           >

sources/src/Componets/players/audio.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+export default class AudioPlayer extends React.Component {
+  render() {
+    return (
+      <div>
+        <audio controls>
+          <source src={this.props.source} />
+        </audio>
+      </div>
+    );
+  }
+}

sources/src/Componets/players/video.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+export default class VideoPlayer extends React.Component {
+  render() {
+    return (
+      <div>
+        <video controls>
+          <source src={this.props.source} />
+        </video>
+      </div>
+    );
+  }
+}

sources/src/example.js

@@ -40,7 +40,7 @@ const recovers = all_pkgs.recovers;
 const aliases = all_pkgs.aliases;
 const useDes = all_pkgs.usesDecription;
 const portENV = all_pkgs.EnvPortage;
-//print(all_pkgs.InstallPkgs);
+print(portENV);
 
 export default class BasicExample extends React.Component {
   //const [null, setPackage] = useState('');
@@ -125,6 +125,8 @@ export default class BasicExample extends React.Component {
               <Route exact path="/">
                 <MainPage
                   icons={this.icons_demo}
+                  category={pkgs}
+                  aliases={aliases}
                   rec={recovers}
                   useDes={useDes} //LocalUSE
                   Ipkg={all_pkgs.InstallPkgs}

sources/src/pages/main.js

@@ -9,10 +9,171 @@ import FullCard from "../Componets/Cards/fullCard";
 import Widget from "../Componets/WCard/widget";
 import "./style.css";
 import Accordion from "../Componets/Acardion";
+import TabsView from "../Componets/Tabs/tabs";
+import {
+  ProSidebar,
+  Menu,
+  MenuItem,
+  SubMenu,
+  SidebarHeader,
+  //SidebarFooter,
+  SidebarContent
+} from "react-pro-sidebar";
 
 export default class MainPage extends React.Component {
   VVSB = false;
   c = "column__list";
+  ui = {
+    menu: {
+      text: "Меню"
+    },
+    catalog: {
+      text: "Каталог"
+    }
+  };
+
+  menuBtn = {
+    all: {
+      borderBottom: "1px solid #AAA",
+      background: "#1d1d1d",
+      color: "#FFF",
+      textDecoration: "none",
+      marginLeft: "0px",
+      padding: " 10px",
+      borderRight: "1px  solid #FFF",
+      cursor: "pointer",
+      position: "ralative",
+      left: "-40px",
+      borderRadius: "0px 20px 0px 20px",
+      left: "-20px"
+      //borderRadius: "10px 20px 0px 0px"
+    },
+    active: {
+      background: "blue",
+      //color: "#FFF",
+      textDecoration: "none",
+      marginLeft: "0px",
+      padding: " 10px",
+      borderRight: "1px  solid #FFF",
+      cursor: "pointer",
+      position: "ralative",
+      left: "-40px"
+    }
+  };
+  menuButton = [
+    { id: "all", text: "Рекомендации", handler: () => this.mainP() },
+    {
+      id: "inclides",
+      text: "Устаовленые",
+      handler: () => this.mainP()
+    },
+    {
+      id: "catalog",
+      text: "Каталог",
+      handler: () => this.viewCatalog()
+    }
+  ];
+  active = "Рекомендации";
+  slideNum = 1;
+
+  checkAlias(text) {
+    //console.log( "aliases:\t" + this.props.aliases)
+    //return text;
+    if (text in this.props.aliases) {
+      return this.props.aliases[text];
+      //console.log(this.props.aliases[text]);
+    } else {
+      return text;
+      //console.log(e);
+    }
+  }
+
+  viewCatalog() {
+    return (
+      <div className={this.c}>
+        {Object.keys(this.props.category).map((k, i) => (
+          <Widget>
+            <Accordion
+              style={{
+                borderRadius: "1.4em",
+                background: "#1d1d1d",
+                color: "#FFF",
+                border: "5px outset rgba(0, 255, 100, 0.5)",
+                textAlign: "center"
+              }}
+              // Список рекомендуемых пакетов в категории
+              title={
+                this.checkAlias(k) + "\t\t" + this.props.category[k].length
+              }
+              className="column__list"
+            >
+              <div
+                style={{
+                  overflowX: "scroll",
+                  maxHeight: "375px"
+                  //position: "relative"
+                  //background: "#2e323f"
+                }}
+              >
+                {/*}
+                  title={
+                    this.checkAlias(k) +
+                    " (" +
+                    this.props.category[k].length +
+                    ")"
+                  }
+                >*/}
+                {this.props.category[k].map((pn, j) => (
+                  <div
+                    className="card__item"
+                    style={{
+                      borderBottom: "1px solid #FFF",
+                      //height: "55px",
+                      //margin: "10px",
+                      background: "#1d1d1d",
+                      color: "#FFF"
+                      //background: "#FFF"
+                      //height:"75px"
+                    }}
+                    onClick={() => this.viewInfo(this.props.category[k][i])}
+                  >
+                    <img
+                      className="card__img"
+                      style={{
+                        width: "32px",
+                        height: "32px"
+                        //background: "#CCC"
+                      }}
+                      //src={this.props.icons[pn.Name.split("/")[1]]}
+                      //alt={pn.Name.split("/")[1]}
+                    />
+                    <div style={{ marginLeft: "10px" }}>
+                      <b>
+                        {" "}
+                        <span
+                          className="card__title"
+                          style={{
+                            color: "red",
+                            color: "#FFF",
+                            //width: "100vw",
+                            overflow: "clip",
+                            fontSize: "1.1em"
+                          }}
+                          key={pn.Name}
+                        >
+                          {pn}
+                        </span>
+                      </b>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </Accordion>
+          </Widget>
+        ))}
+      </div>
+    );
+  }
 
   TitleView() {
     try {
@@ -28,12 +189,16 @@ export default class MainPage extends React.Component {
     this.TitleView();
 
     return (
-      <div id="HomePage" className="" style={{}}>
+      <div
+        id="HomePage"
+        className=""
+        style={{ overflowY: "scroll", paddingBottom: "60px" }}
+      >
         <div
           className={this.c}
           style={{
-            marginTop: "35px"
-            //overflow: "clip",
+            //marginTop: "35px",
+            overflowY: "scroll"
             //display: "inline-",
 
             //float: "left",
@@ -43,7 +208,16 @@ export default class MainPage extends React.Component {
           }}
         >
           <Widget>
-            <h3 style={{ borderBottom: "1px solid #AAA" }}> Новости</h3>
+            <h3
+              style={{
+                borderBottom: "1px solid #AAA",
+                background: "#1d1d1d",
+                color: "#FFF"
+              }}
+            >
+              {" "}
+              Новости
+            </h3>
 
             <li>TEST</li>
             <li>TEST</li>
@@ -64,7 +238,15 @@ export default class MainPage extends React.Component {
               boxShadow: "3px 4px 10px #999"
             }}
           >
-            <h3 style={{ borderBottom: "1px solid #AAA" }}>Уведомления</h3>
+            <h3
+              style={{
+                borderBottom: "1px solid #0F0",
+                background: "#1d1d1d",
+                color: "#FFF"
+              }}
+            >
+              Уведомления
+            </h3>
 
             <li>TEST</li>
             <li>TEST</li>
@@ -74,11 +256,17 @@ export default class MainPage extends React.Component {
           </Widget>
         </div>
         <div className="">
-          <h3 style={{ borderBottom: "1px solid #AAA" }}>Рекомендации</h3>
           <div className={this.c}>
             {Object.keys(this.props.rec).map((k) => (
               <Widget>
                 <Accordion
+                  style={{
+                    borderRadius: "1.4em",
+                    background: "#1d1d1d",
+                    color: "#FFF",
+                    border: "5px outset rgba(0, 255, 100, 0.5)",
+                    textAlign: "center"
+                  }}
                   // Список рекомендуемых пакетов в категории
                   title={k + "\t\t" + this.props.rec[k].length}
                   className="column__list"
@@ -98,7 +286,8 @@ export default class MainPage extends React.Component {
                           borderBottom: "1px solid #FFF",
                           //height: "55px",
                           //margin: "10px",
-                          background: "#DDD"
+                          background: "#1d1d1d",
+                          color: "#FFF"
                           //background: "#FFF"
                           //height:"75px"
                         }}
@@ -121,7 +310,7 @@ export default class MainPage extends React.Component {
                               className="card__title"
                               style={{
                                 color: "red",
-                                width: "100vw",
+                                //width: "100vw",
                                 overflow: "clip",
                                 fontSize: "1.1em"
                               }}
@@ -192,7 +381,13 @@ export default class MainPage extends React.Component {
   }
 
   render() {
-    //document.getElementById("pTittle").textContent = "Главная";
-    return this.mainP();
+    return (
+      <div id="HomePage">
+        {this.TitleView()}
+        <TabsView activeDefault={0} menuButton={this.menuButton} />
+
+        <div id="listOve">{this.menuButton[0].handler()}</div>
+      </div>
+    );
   }
 }

sources/src/pages/overlays.js

@@ -2,6 +2,7 @@ import Accordion from "../Componets/Acardion";
 import React from "react";
 import ReactDOM from "react-dom";
 import OvItem from "../Componets/overlayItem";
+import TabsView from "../Componets/Tabs/tabs";
 //import Button from "../Componets/button";
 //import Grid from "@mui/material/Grid";
 const title = { name: "Имя", discription: "Описание", homepage: "Обзор" };
@@ -11,7 +12,8 @@ class PageOverlays extends React.Component {
 
   menuBtn = {
     all: {
-      background: "orange",
+      borderBottom: "1px solid #AAA",
+      background: "#1d1d1d",
       color: "#FFF",
       textDecoration: "none",
       marginLeft: "0px",
@@ -19,12 +21,14 @@ class PageOverlays extends React.Component {
       borderRight: "1px  solid #FFF",
       cursor: "pointer",
       position: "ralative",
-      left: "-40px"
+      left: "-40px",
+      borderRadius: "0px 20px 0px 20px",
+      left: "-20px"
       //borderRadius: "10px 20px 0px 0px"
     },
     active: {
       background: "blue",
-      color: "#FFF",
+      //color: "#FFF",
       textDecoration: "none",
       marginLeft: "0px",
       padding: " 10px",
@@ -47,7 +51,7 @@ class PageOverlays extends React.Component {
       handler: () => this.viweCategotyOverlays()
     }
   ];
-  active = "Все";
+  active = 0;
   slideNum = 1;
   //routing overalays page
   viewAllOverlay() {
@@ -105,52 +109,12 @@ class PageOverlays extends React.Component {
       console.log(e);
     }
   }
-  chechActive(id) {
-    for (let p = 0; p < this.menuButton.length; p++) {
-      if (this.menuButton[p].text === this.active) {
-        document.getElementById(this.menuButton[p].text).style.background =
-          "#00F";
-      } else {
-        document.getElementById(this.menuButton[p].text).style.background =
-          "orange";
-      }
-    }
-  }
 
   render() {
     return (
       <div id="HomePage">
         {this.TitleView()}
-        <div
-          // className="btn-group"
-          style={{
-            display: "inline-flex",
-            margin: "0px",
-            marginTop: "20px",
-
-            fontSize: "1.2em"
-
-            // color: "#000"
-          }}
-        >
-          {this.menuButton.map((it, p) => (
-            <div
-              id={it.text}
-              style={this.menuBtn.all}
-              onClick={() => (
-                (this.active = it.text),
-                this.chechActive(it.text),
-                console.log(this.active),
-                ReactDOM.render(
-                  this.menuButton[p].handler(),
-                  document.getElementById("listOve")
-                )
-              )}
-            >
-              {it.text}
-            </div>
-          ))}
-        </div>
+        <TabsView activeDefault={0} menuButton={this.menuButton} />
 
         <div id="listOve">{this.menuButton[0].handler()}</div>
       </div>

sources/src/pages/settings.js

@@ -7,6 +7,7 @@ import CheckField from "../Componets/CheckField";
   { name: "portage", text: "portage", url: "/sport" },
   { name: "webpp", text: "App", url: "/app" }
 ];*/
+let act;
 class PageSettings extends React.Component {
   settings = {
     USE: [],
@@ -22,7 +23,9 @@ class PageSettings extends React.Component {
       borderTop: "1px  solid #CDC",
       paddingTop: "5px"
     },
-    nomob: { margin: "5px" }
+    nomob: { margin: "5px" },
+    axtive: { background: "#0F0" },
+    noaxive: { background: "#FFF" }
   };
   themes = [
     { id: "0", name: "Светлая", path: "" },
@@ -33,7 +36,6 @@ class PageSettings extends React.Component {
     { title: "EN", link: "" },
     { title: "DE", link: "" }
   ];
-
   isMobile() {
     try {
       document.createEvent("TouchEvent");
@@ -42,7 +44,7 @@ class PageSettings extends React.Component {
       return false;
     }
   }
-  changLang(lang) {
+  changeLang(lang) {
     console.log(lang);
     if (
       document.getElementById(lang).style.background !== "#0F0" ||
@@ -72,12 +74,18 @@ class PageSettings extends React.Component {
       document.getElementById(use).style.background === "rgb(0, 255, 0)"
     ) {
       document.getElementById(use).style.background = "#FFF";
-      //this.IntstallPackageParamms.USE.map((us, i)=>(
-      //  if( us== use)this.IntstallPackageParamms.USE[i].delete
-      //))
+      /*this.IntstallPackageParamms.USE.map((us, i)=>(
+       if(us == use)delete(this.settings.USE[i])
+      ))*/
+      for (let i = 0; i < this.settings.USE.length; i++) {
+        console.log(i);
+        if (use === this.settings.USE[i]) {
+          this.settings.USE.slice(i, i); // delete this.IntstallPackageParamms.USE[i];
+        }
+      }
     } else {
       document.getElementById(use).style.background = "#0F0";
-      //this.settings.USE[this.IntstallPackageParamms.USE.length + 1] = use;
+      //this.settings.USE[this.IntstallPackageParamms.USE.length] = use;
     }
     console.log(this.settings);
   }
@@ -105,9 +113,18 @@ class PageSettings extends React.Component {
     }
   }
   checkUses(u) {
-    //this.settings.USE.append();
+    act = u in this.props.portENV["make.conf"]["USE"];
+    if (act) {
+      this.settings.USE[this.settings.USE.length + 1] = u;
+      console.log(act);
+    }
+
+    //console.log(act);
+    //console.log(this.settings.USE);
+    // this.settings.USE.append();
     return (
       <span
+        style={act ? this.styleUseinfo.axtive : this.styleUseinfo.noaxive}
         key={u}
         id={u}
         onMouseOver={() => this.VuseInfo(u, this.props.uses[u])}

sources/webport-main/.codesandbox/workspace.json

@@ -1,20 +0,0 @@
-{
-  "responsive-preview": {
-    "Mobile": [
-      320,
-      675
-    ],
-    "Tablet": [
-      1024,
-      765
-    ],
-    "Desktop": [
-      1400,
-      800
-    ],
-    "Desktop HD": [
-      1920,
-      1080
-    ]
-  }
-}

sources/webport-main/.gitignore

@@ -1,21 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*

sources/webport-main/Makefile

@@ -1,7 +0,0 @@
-
-
-start:
-		npm  install && npm  start
-
-build:
-		npm install && nom build

sources/webport-main/package.json

@@ -1,27 +0,0 @@
-{
-  "recpvers": null,
-  "dependencies": {
-    "axios": "0.24.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-id-swiper": "4.0.0",
-    "react-id-swiper2": "1.0.7",
-    "react-pro-sidebar": "0.6.0",
-    "react-router-dom": "5.2.0",
-    "react-token-auth": "2.3.8"
-  },
-  "name": "webport-main",
-  "description": "",
-  "version": "0.0.1876",
-  "devDependencies": {
-    "electron": "^15.1.1",
-    "react-scripts": "1.0.0"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
-  },
-  "keywords": []
-}

sources/webport-main/public/index.html

@@ -1,44 +0,0 @@
-<!DOCTYPE html>
-<html lang="ru">
-  <head>
-    <meta charset="utf-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <meta name="theme-color" content="#000000" />
-    <!--
-    manifest.json provides metadata used when your web app is added to the
-    homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-  -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-    <!--
-    Notice the use of %PUBLIC_URL% in the tags above.
-    It will be replaced with the URL of the `public` folder during the build.
-    Only files inside the `public` folder can be referenced from the HTML.
-
-    Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-    work correctly both with client-side routing and a non-root public URL.
-    Learn how to configure a non-root public URL by running `npm run build`.
-  -->
-    <title>Webport</title>
-  </head>
-  <body>
-    <head>
-      <title</title>
-    </head>
-
-    <div id="root"></div>
-
-    <!--
-    This HTML file is a template.
-    If you open it directly in the browser, you will see an empty page.
-
-    You can add webfonts, meta tags, or analytics to this file.
-    The build step will place the bundled scripts into the <body> tag.
-
-    To begin the development, run `npm start` or `yarn start`.
-    To create a production bundle, use `npm run build` or `yarn build`.
-  --></body>
-</html>

sources/webport-main/public/manifest.json

@@ -1,15 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "192x192",
-      "type": "image/png"
-    }
-  ],
-  "start_url": "./index.html",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

sources/webport-main/src/.codesandbox/workspace.json

@@ -1,20 +0,0 @@
-{
-  "responsive-preview": {
-    "Mobile": [
-      320,
-      675
-    ],
-    "Tablet": [
-      1024,
-      765
-    ],
-    "Desktop": [
-      1400,
-      800
-    ],
-    "Desktop HD": [
-      1920,
-      1080
-    ]
-  }
-}

sources/webport-main/src/Componets/Acardion.js

@@ -1,52 +0,0 @@
-import React from "react";
-import "./style.css";
-export default class Accordion extends React.Component {
-  style = {
-    uptitle: {
-      ontSize: "1.6em",
-      padding: "5px",
-      cursor: "pointer"
-    }
-  };
-
-  ViewGroup(id) {
-    if (document.getElementById(id + "_group").style.display === "none") {
-      document.getElementById(id + "_group").style.display = " block";
-      document.getElementById(id + "_ch").textContent = "";
-    } else {
-      document.getElementById(id + "_group").style.display = "none";
-      document.getElementById(id + "_ch").textContent = "...";
-    }
-  }
-
-  render() {
-    return (
-      <div
-        style={{
-          paddingLeft: "10px",
-          border: "1px dotted #CCC",
-          display: "grid"
-        }}
-      >
-        <div
-          id={this.props.title}
-          class="Accrordion"
-          onClick={() => this.ViewGroup(this.props.title)}
-        >
-          <h3>
-            <b>
-              {this.props.title}{" "}
-              <span id={this.props.title + "_ch"}>{"..."}</span>
-            </b>
-          </h3>
-        </div>
-        <div
-          id={this.props.title + "_group"}
-          style={{ display: "none", cursor: "pointer" }}
-        >
-          <div>{this.props.children}</div>
-        </div>
-      </div>
-    );
-  }
-}

sources/webport-main/src/Componets/AppContainer.js

@@ -1,371 +0,0 @@
-import React from "react";
-import NavBar from "./NavList/navList";
-import AuthForm from "../pages/auth/auth";
-import MainPage from "../pages/main";
-import FullCard from "../Componets/Cards/fullCard";
-//import OverlaPage from "../pages/overlays";
-import "./style.css";
-import ReactDOM from "react-dom";
-//import { useState } from "react";
-
-export default class AppContainer extends React.Component {
-  ui = {
-    BackButton: {
-      text: "Назад"
-    },
-    button: {
-      sync: {
-        text: "Обновить",
-        icon:
-          "https://cdn.icon-icons.com/icons2/3168/PNG/512/refresh_arrow_arrows_icon_193535.png"
-      }
-    }
-  };
-  //VSB = document.getElementById("navbar")style.display
-  Ptitle = () => this.viewSideBar();
-
-  findPakg(pkg) {
-    this.viewPakegeInfo(pkg);
-  }
-
-  viewPakegeInfo(pkgName) {
-    const url = this.props.ServerAddress + "/find?pkg=" + pkgName;
-    const response = fetch(url);
-    /*try {
-      portage_list[pkgName];
-    } catch (e) {*/
-
-    if (response.ok) {
-      // если HTTP-статус в диапазоне 200-299
-      // получаем тело ответа (см. про этот метод ниже)
-      let res = response.json();
-      ReactDOM.render(
-        <FullCard
-          PackageName={res}
-          PropMain={this.props.rec}
-          icons={this.props.icons}
-        />,
-        document.getElementById("HomePage")
-      );
-      document.getElementById("inS").value = "";
-    } else {
-      console.log("Ошибка HTTP: " + response.status);
-      //}
-    }
-
-    console.log(pkgName);
-  }
-
-  toBack() {
-    document.getElementById("backBtn").style.display = "none";
-    //document.getElementById("containerInfo").style.display = "none";
-    document.getElementById("container").style.display = "block";
-    document.getElementById("pTitle").textContent = this.ViewTitle();
-    document.getElementById("pTitle").textContent = "Главная";
-    ReactDOM.render(
-      <MainPage
-        icons={this.props.icons}
-        rec={this.props.rec}
-        useDes={this.props.useDes}
-        Ipkg={this.props.Ipkg}
-        repositores={this.props.repositores}
-      />,
-      document.getElementById("HomePage")
-    );
-
-    //window.location.reload();
-    //this.ViewTitle();
-    //document.getElementById('pTitle').textContent = this.props.menuItems[]
-  }
-
-  viewSideBar() {
-    // Появление меню слева
-    if (document.getElementById("navbar").style.display !== "none") {
-      // document.getElementById("MainContent").style.paddingLeft = "300px";
-      // document.getElementById("MainContent").width = -"300px";
-      //document.getElementById("container").style.width =
-      //  String(document.querySelector(".container").offsetWidth - 300) + "px";
-      console.log("on");
-      //console.log(document.querySelector(".page-content").offsetWidth);
-      //document.getElementById("btn-toggle").style.paddingLeft = "270px";
-      //document.getElementById("btn-toggle").style.float = "right";
-      document.getElementById("navBar").style.display = "none";
-      //this.VVSB = true;
-    } else {
-      //document.getElementById("MainContent").style.paddingLeft = "0px";
-      //document.getElementById("container").style.width =
-      // String(document.querySelector(".container").offsetWidth + 300) + "px";
-
-      //document.getElementById("btn-toggle").style.paddingLeft = "0px";
-      document.getElementById("navBar").style.display = "block"; //left:  "-300px";
-      console.log("off");
-      //console.log(document.querySelector(".container").offsetWidth);
-      //this.VVSB = false;
-    }
-  }
-  btnMenu() {
-    return (
-      <li>
-        <svg
-          c
-          style={{
-            float: "left",
-            paddingLeft: "20px",
-            paddingRight: "10px"
-          }}
-          //onClick={() => this.viewSideBar()}
-          stroke="currentColor"
-          fill="currentColor"
-          stroke-width="0"
-          viewBox="0 0 448 512"
-          height="1.4em"
-          width="1.4em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path>
-        </svg>
-      </li>
-    );
-  }
-  ViewTitle() {
-    // Имя заголовка меню
-    for (let i = 0; i > this.props.menuItems.length; i++) {
-      if (
-        this.props.menuItems[i].url ===
-        window.location.href.split(window.location.host)[1]
-        //this.props.menuItems[i].url
-        //window.location.href.split(window.location.host)[1]
-      ) {
-        //document.getElementById("pTitle").textContent = this.props.menuItems[i].text;
-        this.pTitle = this.props.menuItems[i].text;
-      }
-      console.log(this.title);
-      return (this.pTitle = this.props.menuItems[i].text);
-    }
-  }
-
-  render() {
-    //this.ViewTitle();
-    return (
-      <div>
-        <AuthForm />
-
-        <div className="page-wrapper chiller-theme toggled">
-          <ul
-            // Верхняя полоса
-            id="btn-toggle"
-            class="btn-toggle"
-            style={{
-              display: "inline",
-              padding: "5px 0px",
-              margin: "0px",
-              borderBottom: "1px solid #AAA",
-              width: "100%",
-              background: "#1d1d1d", //"#2e323f",
-              //"1d1d1d",
-              // "#2e323f",
-              position: "fixed",
-              top: "0",
-              color: "#FFF",
-              zIndex: "1",
-              listStyle: "none"
-            }}
-          >
-            {}
-            <li>
-              <span
-                // Кнопка назад
-                className="btn"
-                id="backBtn"
-                style={{
-                  padding: "0px 20px 0px 20px",
-                  float: "left",
-                  color: "#AAA",
-                  background: "#FFF",
-                  marginRight: "0.85em",
-                  fontSize: "1.6em",
-                  borderRadius: "0.9em"
-                  //border: "1px outset #444",
-                  //background: "rgb(78,116,26)",
-                  //background: "rgb(78,116,26)",
-                  //background:
-                  //  "linear-gradient(0deg, rgba(78,116,26,0.5536415249693627) 0%, rgba(229,237,235,0.9093838218881303) 35%)"
-
-                  //borderRadius: ".9em"
-                }}
-                onClick={() => this.toBack()}
-              ></span>
-            </li>
-            {navigator.userAgentData.mobile
-              ? this.btnMenu()
-              : console.log("desktop")}
-            {/*
-            <b>
-              <div
-                id="pTitle"
-                // Заголовок окна. Имеется глюк в том,
-                // что имя окна не появляется при обновлении страницы
-                style={{
-                  float: "left",
-                  width: "50vw",
-                  marginleft: "20px",
-                  textAlign: "center",
-                  fontSize: "1.4em",
-                  color: "#FFF"
-                }}
-              >
-                {this.PackageName}
-              </div>
-            </b>
-              */}
-            {}
-            <li>
-              <NavBar
-                style={{ display: "inline" }}
-                ServerAddress={this.props.ServerAddress}
-                category={this.props.category}
-                menuItem={this.props.menuItems}
-                aliases={this.props.aliases}
-                Ipkgs={this.props.Ipkg}
-              />
-            </li>
-            <li>
-              <div
-                className="d6"
-                style={{ position: "realative", float: "right", right: "20px" }}
-              >
-                <form>
-                  <input
-                    // Кнопка поиска
-                    id="inS"
-                    name="inS"
-                    classname="form-control"
-                    type="text"
-                    placeholder="Введите имя пакета"
-                    onChange={(e) => this.findPakg(e.target.value)}
-                    style={{
-                      /* fontSize: "1.2em",
-                    margin: "10px", */
-                      //backgroundColor: "rgba(81, 81, 81, 0.5)",
-
-                      border: "none",
-                      //padding: "5px",
-                      //ackground: "#2e233f",
-                      //borderRadius: "15px",
-                      //border: "3px inset #2e322f",
-                      color: "#c7c7c7"
-                    }}
-                  />
-                  {/*}
-                <div className="button">
-                <svg
-                    style={{ color: "#FFF" }}
-                    class="l-ss-c-element"
-                    width="18"
-                    height="27"
-                    viewBox="0 0 18 27"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    {" "}
-                    <path
-                      class="l-ss-c-element"
-                      fill="#FFF"
-                      fill-rule="#FFF"
-                      clip-rull="#FFF"
-                      //fill-rule="evenodd"
-                      //clip-rule="evenodd"
-                      d="M11.1897 5.44196V11.9907C11.1897 13.1717 10.2323 14.1291 9.05126 14.1291C7.87025 14.1291 6.91286 13.1717 6.91286 11.9907V5.44196C6.91286 4.26095 7.87026 3.30355 9.05126 3.30355C10.2323 3.30355 11.1897 4.26095 11.1897 5.44196ZM4.37359 5.44196C4.37359 2.85855 6.46786 0.764282 9.05126 0.764282C11.6347 0.764282 13.7289 2.85855 13.7289 5.44196V11.9907C13.7289 14.5741 11.6347 16.6684 9.05126 16.6684C6.46786 16.6684 4.37359 14.5741 4.37359 11.9907V5.44196ZM2.83614 11.0551C2.83614 10.3539 2.26771 9.78547 1.56651 9.78547C0.865309 9.78547 0.296875 10.3539 0.296875 11.0551V12.9262C0.296875 17.3295 3.548 20.9735 7.78077 21.5886V23.8185H6.712C6.0108 23.8185 5.44236 24.387 5.44236 25.0882C5.44236 25.7894 6.0108 26.3578 6.712 26.3578H11.3897C12.0909 26.3578 12.6593 25.7894 12.6593 25.0882C12.6593 24.387 12.0909 23.8185 11.3897 23.8185H10.32V21.5887C14.5532 20.9739 17.8047 17.3298 17.8047 12.9262V11.0551C17.8047 10.3539 17.2363 9.78547 16.5351 9.78547C15.8339 9.78547 15.2654 10.3539 15.2654 11.0551V12.9262C15.2654 16.3584 12.483 19.1408 9.05079 19.1408C5.61853 19.1408 2.83614 16.3584 2.83614 12.9262V11.0551Z"
-                    ></path>{" "}
-                  </svg>
-                </div>*/}
-                  <div
-                  // className="btn-group"
-                  >
-                    {
-                      // <div className="button search"></div>
-                    }
-                    <div
-                      className="button"
-                      style={{
-                        justifyContent: "center"
-                      }}
-                    >
-                      <svg
-                        class="l-ss-c-element"
-                        width="19"
-                        height="20"
-                        viewBox="0 0 19 20"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        {" "}
-                        <path
-                          class="l-ss-c-element"
-                          fill-rule="evenodd"
-                          clip-rule="evenodd"
-                          d="M14.3074 8.03846C14.3074 11.3734 11.6039 14.0769 8.26893 14.0769C4.93398 14.0769 2.23047 11.3734 2.23047 8.03846C2.23047 4.70351 4.93398 2 8.26893 2C11.6039 2 14.3074 4.70351 14.3074 8.03846ZM12.331 14.9766C11.139 15.6759 9.75081 16.0769 8.26893 16.0769C3.82941 16.0769 0.230469 12.478 0.230469 8.03846C0.230469 3.59894 3.82941 0 8.26893 0C12.7085 0 16.3074 3.59894 16.3074 8.03846C16.3074 10.2703 15.3978 12.2897 13.9291 13.7463L18.4758 18.2929C18.8663 18.6834 18.8663 19.3166 18.4758 19.7071C18.0853 20.0977 17.4521 20.0977 17.0616 19.7071L12.331 14.9766Z"
-                          fill="white"
-                        ></path>{" "}
-                      </svg>
-                    </div>
-                  </div>
-                </form>
-              </div>
-            </li>
-          </ul>
-          <main
-            id="MainContent"
-            className="page-content"
-            style={{
-              paddingLeft: "10px",
-              margin: "0px",
-              width: "100vw",
-              height: "100vh",
-              //background: "#1d1d1d",
-              overflow: "scroll",
-              color: "#000"
-            }}
-          >
-            <div
-              id="containerInfo"
-              style={{
-                position: "fixed",
-                //navigator.userAgentData.mobile ? width"100vw": width="20vw"
-
-                width: "100vw",
-                height: "100vh",
-                display: "none",
-                background: "#1D1D1D",
-                overflowY: "scroll",
-                color: "#FFF",
-                right: "0px", //background: "#2e323f"
-                //color: "#AAA"
-                borderLeft: "1px  solid #CCC",
-                marginTop: "20px"
-
-                //paddingLeft: "5px"
-                //marginBottom: "20px"
-              }}
-            ></div>
-            <div
-              id="container"
-              className="container"
-              style={{
-                //float: "left",
-                padding: "0px",
-                width: "100vw",
-                height: "100vh",
-                position: "fixed",
-                overflow: "scroll",
-                marginTop: "38px"
-                //                width: "400px"
-              }}
-            >
-              {this.props.children}
-            </div>
-          </main>
-        </div>
-      </div>
-    );
-  }
-}

sources/webport-main/src/Componets/Cards/OverlayCard.js

@@ -1,50 +0,0 @@
-import "./style.css";
-import React from "react";
-export default class OverlayCard extends React.Component {
-  toBack() {
-    document.getElementById("pTitle").textContent = "Оверлеи";
-    document.getElementById("containerInfo").style.display = "none";
-  }
-  render() {
-    return (
-      <div className="sCard" style={{}}>
-        <h3 style={{}}>
-          <span
-            className="btn"
-            id="backBtn"
-            style={{
-              padding: "0px 20px 0px 20px",
-              float: "left",
-              color: "#FFF",
-              background: "#F00",
-              marginRight: "0.85em",
-              fontSize: "1.1em",
-              borderRadius: "0.9em"
-
-              //border: "1px outset #444",
-              //background: "rgb(78,116,26)",
-              // background: "rgb(78,116,26)",
-              //background:
-              // "linear-gradient(0deg, rgba(78,116,26,0.5536415249693627) 0%, rgba(229,237,235,0.9093838218881303) 35%)"
-            }}
-            onClick={() => this.toBack()}
-          >
-            <b style={{ float: "right" }}> {"X"}</b>
-          </span>
-          <b> {this.props.title.name}:</b> {this.props.OverlayInfo.name}
-        </h3>
-        <div>
-          <p style={{ fontSize: "1.4em" }}>
-            <b>{this.props.title.discription}:</b>
-            {this.props.OverlayInfo.description}
-          </p>
-          <iframe
-            style={{ width: "100%", height: " 100vh" }}
-            src={this.props.OverlayInfo.homepage}
-            seamless="false"
-          ></iframe>
-        </div>
-      </div>
-    );
-  }
-}

sources/webport-main/src/Componets/Cards/fullCard.js

@@ -1,489 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-//import { Link } from "react-router-dom";
-//import { MainPage } from "../../pages/main";
-import Accordion from "../Acardion";
-import ModalForm from "../Modal";
-import "./style.css";
-class FullCard extends React.Component {
-  ui = {
-    name: "Имя",
-    category: "Категория:",
-    versions: "Доступные версии",
-    uses: " USE:",
-    decription: "Описание:",
-    site: "Сайт:",
-
-    InstallButton: {
-      text: "Установить"
-    }
-  };
-
-  styleUseinfo = {
-    mobile: {
-      position: "fixed",
-      bottom: "0px",
-      left: "0px",
-      width: "100vw",
-      background: "#FFF",
-      borderTop: "1px  solid #CDC",
-      paddingTop: "5px"
-    },
-    nomob: { margin: "5px", width: "100vw", display: "inline" }
-  };
-
-  langs = [
-    { title: "RU", link: "" },
-    { title: "EN", link: "" },
-    { title: "DE", link: "" }
-  ];
-
-  isMobile() {
-    return navigator.userAgentData.mobile;
-  }
-
-  IntstallPackageParamms = {
-    NamePackage: this.props.PackageName.Name,
-    Version: "",
-    USE: [],
-    TargetUses: {}
-  };
-
-  toBack() {
-    document.getElementById("pTitle").textContent = "Главная";
-    document.getElementById("containerInfo").style.display = "none";
-  }
-
-  vInstall() {
-    //document.getElementById("containerInfo").display = "block";
-
-    if (this.IntstallPackageParamms.Version !== "") {
-      ReactDOM.render(
-        <ModalForm
-          title={this.props.PackageName.Name}
-          root={this.props.PackageName}
-          PropMain={this.props.rec}
-          icons={this.props.icons}
-          useDes={this.props.useDes}
-          Ipkg={this.props.Ipkg}
-        >
-          <div className="sCard">
-            <h1 className="title"> </h1>
-
-            <div
-              style={{
-                flex: "3",
-                //display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-                flexDirection: "column"
-              }}
-            >
-              <img
-                src={
-                  this.props.icons[this.props.PackageName.Name.split("/")[1]]
-                }
-                style={{
-                  width: "128px",
-                  height: "128px",
-                  float: "left",
-                  marginRight: "20px"
-                }}
-                alt={this.props.PackageName.Name.split("/")[1]}
-              />
-            </div>
-            <div
-              style={{
-                flex: "9"
-                /*float: "left" */
-              }}
-            >
-              <span>
-                {" "}
-                <b>{this.ui.category}</b>{" "}