webportClient/sources/src/Componets/Cards/fullCard.js

import React from "react";

import "./style.css";
class FullCard extends React.Component {
  ui = {
    name: "Имя",
    category: "Категория:",
    versions: "Доступные версии",
    uses: " USE:",
    decription: "Описание:",
    site: "Сайт:",

    InstallButton: {
      text: "Установить"
    }
  };
  IntstallPackageParamms = {
    NamePackage: this.props.PackageName.Name,
    Version: "",
    USE: []
  };

  addUse(use) {
    if (
      document.getElementById(use).style.background === "#0F0" ||
      document.getElementById(use).style.background === "rgb(0, 255, 0)"
    ) {
      document.getElementById(use).style.background = "#FFF";
      for (let i = 0; i < this.IntstallPackageParamms.USE.length; i++) {
        if (this.IntstallPackageParamms.USE[i] === use) {
          delete this.IntstallPackageParamms.USE[1];
        }
      }
    } else {
      document.getElementById(use).style.background = "#0F0";
      this.IntstallPackageParamms.USE[
        this.IntstallPackageParamms.USE.length + 1
      ] = use;
    }
    console.log(this.IntstallPackageParamms);
  }
  addVersion(version) {
    console.log(typeof version);
    if (this.IntstallPackageParamms.Version !== "") {
      if (this.IntstallPackageParamms.Version !== version) {
        document.getElementById(
          this.IntstallPackageParamms.Version
        ).style.background = "#FFF";
        this.IntstallPackageParamms.Version = version;
        document.getElementById(
          version
        ).style.background = document
          .getElementById(version)
          .style.border.split("2px solid")[1];
      } else {
        document.getElementById(
          this.IntstallPackageParamms.Version
        ).style.background = "#FFF";
        this.IntstallPackageParamms.Version = "";
      }
    } else {
      this.IntstallPackageParamms.Version = version;
      document.getElementById(
        version
      ).style.background = document
        .getElementById(version)
        .style.border.split("2px solid")[1];
      console.log(this.IntstallPackageParamms);
    }
  }

  checkVersion(item) {
    //console.log(item.split("[U]")[1] === "");
    console
      .log
      //this.props.Ipkgthis.props.PackageName.Name.split("/")[1])
      ();

    if (item.split("[U]")[1] === "") {
      return (
        <span
          key={item}
          id={item.split("[U]")[0]}
          style={{ border: " 2px solid #0F0", marginLeft: "5px" }}
          onClick={() => this.addVersion(item.split("[U]")[0])}
        >
          {item.split("[U]")[0]}
        </span>
      );
    } else {
      return (
        <span
          key={item}
          id={item.split("[M]")[0]}
          style={{ border: "2px solid #F00", marginLeft: "5px" }}
          onClick={() => this.addVersion(item.split("[M]")[0])}
        >
          {item.split("[M]")[0]}
        </span>
      );
    }
  }

  VuseInfo(use) {
    //console.log(use);
    //console.log(this.props.useDes);
    //console.log(Object.keys(this.props.uses));
    //document.getElementById(uId).style.background = "orange";
    if (use in this.props.useDes || use.split("+")[1] in this.props.useDes) {
      if (use in this.props.useDes) {
        document.getElementById("useInfo").textContent = this.props.useDes[use];
        console.log(use);
      } else {
        document.getElementById("useInfo").textContent = this.props.useDes[
          use.split("+")[1]
        ];
        console.log(this.props.useDes[use.split("+")[1]]);
      }
      //document.getElementById(uId).style.background = "orange";
      //alert(this.props.useDes[use]);
    } else {
      document.getElementById("useInfo").textContent = use;
    }
    //document.getElementById("useInfo").textContent = use;
  }
  render() {
    return (
      <div className="fullCard">
        <div className=" sCard">
          <h1 className="title">{this.props.PackageName.Name.split("/")[1]}</h1>
          <hr />
          <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"
              }}
            />
          </div>
          <div
            style={{
              flex: "9"
              /*float: "left" */
            }}
          >
            <span>
              {" "}
              <b>{this.ui.category}</b>{" "}
              {this.props.PackageName.Name.split("/")[0]}
            </span>
            <div className="cVer">
              <b>{this.ui.versions}:</b>
              {this.props.PackageName.version.map((v) => this.checkVersion(v))}
            </div>
            <div className="sUse">
              <b>{this.ui.uses}</b>
              {this.props.PackageName.USE.map((u, j) => (
                <span
                  key={u}
                  id={u}
                  onMouseOver={() =>
                    this.VuseInfo(this.props.PackageName.USE[j])
                  }
                  onClick={() => this.addUse(this.props.PackageName.USE[j])}
                >
                  {u}
                </span>
              ))}
              <div>
                <b>Оверлеи:</b>
                <span>{this.props.PackageName.repo}</span>
              </div>
              <b>
                <div
                  id="useInfo"
                  className="useInfo"
                  style={{ marging: "5px" }}
                ></div>
              </b>
            </div>
            <div>
              <p>
                <b>{this.ui.decription}</b> {this.props.PackageName.Description}
              </p>
              <a href={this.props.PackageName.Home_page}>{this.ui.site} </a>
            </div>
            <div className="Btm">
              <strong>
                <span
                  className="btn right"
                  id={this.props.PackageName.Name}
                  style={{ cursor: "pointer" }}
                >
                  {this.ui.InstallButton.text}
                </span>
              </strong>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
export default FullCard;