webportClient/sources/webport-main/src/pages/main.js

// Окно на главном меню с рекомендациями, новостями

import React from "react";
import ReactDOM from "react-dom";
//import Scard from "../Componets/Cards/smallCard";
import FullCard from "../Componets/Cards/fullCard";
//import NavBar from "../Componets/NavList/navList";
//import div from "@mui/material/div";
import Widget from "../Componets/WCard/widget";
import "./style.css";
import Accordion from "../Componets/Acardion";

export default class MainPage extends React.Component {
  VVSB = false;
  c = "column__list";

  TitleView() {
    try {
      if (document.getElementById("pTitle").textContent !== "Главная") {
        document.getElementById("pTitle").textContent = "Главная";
      }
    } catch (e) {
      console.log(e);
    }
  }

  mainP() {
    this.TitleView();

    return (
      <div id="HomePage" className="" style={{}}>
        <div
          className={this.c}
          style={{
            marginTop: "35px"
            //overflow: "clip",
            //display: "inline-",

            //float: "left",
            //border: "1px solid #CCC",
            //borderRadius: "6px",
            //boxShadow: "3px 4px 10px #999"
          }}
        >
          <Widget>
            <h3 style={{ borderBottom: "1px solid #AAA" }}> Новости</h3>

            <li>TEST</li>
            <li>TEST</li>
            <li>TEST</li>
            <li>TEST</li>
            <li>TEST</li>
          </Widget>
          <Widget
            className="column__list"
            style={{
              marginTop: "35px",
              overflow: "clip",
              display: "inline-",

              //float: "left",
              //border: "1px solid #CCC",
              //borderRadius: "6px",
              boxShadow: "3px 4px 10px #999"
            }}
          >
            <h3 style={{ borderBottom: "1px solid #AAA" }}>Уведомления</h3>

            <li>TEST</li>
            <li>TEST</li>
            <li>TEST</li>
            <li>TEST</li>
            <li>TEST</li>
          </Widget>
        </div>
        <div className="">
          <h3 style={{ borderBottom: "1px solid #AAA" }}>Рекомендации</h3>
          <div className={this.c}>
            {Object.keys(this.props.rec).map((k) => (
              <Widget>
                <Accordion
                  // Список рекомендуемых пакетов в категории
                  title={k + "\t\t" + this.props.rec[k].length}
                  className="column__list"
                >
                  <div
                    style={{
                      overflowX: "scroll",
                      maxHeight: "375px"
                      //position: "relative"
                      //background: "#2e323f"
                    }}
                  >
                    {this.props.rec[k].map((pn, i) => (
                      <div
                        className="card__item"
                        style={{
                          borderBottom: "1px solid #FFF",
                          //height: "55px",
                          //margin: "10px",
                          background: "#DDD"
                          //background: "#FFF"
                          //height:"75px"
                        }}
                        onClick={() => this.viewInfo(this.props.rec[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",
                                width: "100vw",
                                overflow: "clip",
                                fontSize: "1.1em"
                              }}
                              key={pn.Name}
                            >
                              {pn.Name.split("/")[1]}
                            </span>
                          </b>
                          <div style={{ overflow: "clip" }}>
                            {pn.Description}
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </Accordion>
              </Widget>
            ))}
            <div
              id="info"
              style={{
                position: "fixed",
                top: "0px",
                left: this.posiLetf,
                width: "100%",
                height: "100%",
                background: "#2e323f",
                display: "none"
              }}
            ></div>
          </div>
        </div>
      </div>
    );
  }

  viewSideBar() {
    if (!this.VVSB) {
      document.getElementById("MainContent").style.paddingLeft = "300px";
      document.getElementById("btn-toggle").style.float = "right";
      document.getElementById("navBar").style.left = "0px";
      this.VVSB = true;
    } else {
      document.getElementById("MainContent").style.paddingLeft = "0px";
      document.getElementById("navBar").style.left = "-280px";
      this.VVSB = false;
    }
  }

  viewInfo(pkg) {
    //onClick={() => this.props.ViewPackageInfo(this.props.rec[k][i])}
    //document.getElementById("backBtn").style.display = "block";
    //document.getElementById("pTitle").textContent = pkg.Name.split("/")[1];
    //document.getElementById("container").style.display = "none";

    //document.getElementById("containerInfo").style.display = "block";

    ReactDOM.render(
      <FullCard
        PackageName={pkg}
        PropMain={this.props.rec}
        icons={this.props.icons}
        useDes={this.props.useDes}
        Ipkg={this.props.Ipkg}
      />,
      document.getElementById("containerInfo")
    );
  }

  render() {
    //document.getElementById("pTittle").textContent = "Главная";
    return this.mainP();
  }
}