webportClient/sources/src/pages/settings.js

import React from "react";
import CheckField from "../Componets/CheckField";
//import { FormGroup, FormControlLabel, Switch } from "@material-ui/core";
//import Menu from "../Componets/menu";
const menuItm = [
  { name: "portage", text: "portage", url: "/sport" },
  { name: "webpp", text: "App", url: "/app" }
];
class PageSettings extends React.Component {
  settings = {
    USE: [],
    langs: [
      { title: "RU", link: "" },
      { title: "EN", link: "" },
      { title: "DE", link: "" }
    ]
  };
  styleUseinfo = {
    mobile: {
      position: "fixed",
      bottom: "0px",
      left: "0px",
      width: "100vw",
      background: "#FFF",
      borderTop: "1px  solid #CDC",
      paddingTop: "5px"
    },
    nomob: { margin: "5px" }
  };

  isMobile() {
    try {
      document.createEvent("TouchEvent");
      return true;
    } catch (e) {
      return false;
    }
  }
  changLang(lang) {
    console.log(lang);
    if (
      document.getElementById(lang).style.background === "#0F0" ||
      document.getElementById(lang).style.background === "rgb(0, 255, 0)"
    ) {
      document.getElementById(lang).style.background = "#FFF";
      //this.IntstallPackageParamms.USE.map((us, i)=>(
      //  if( us== use)this.IntstallPackageParamms.USE[i].delete
      //))
    } else {
      document.getElementById(lang).style.background = "#0F0";
      //this.settings.USE[this.IntstallPackageParamms.USE.length + 1] = use;
    }
    console.log(this.settings);
  }

  addUse(use) {
    console.log(use);
    if (
      document.getElementById(use).style.background === "#0F0" ||
      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
      //))
    } else {
      document.getElementById(use).style.background = "#0F0";
      //this.settings.USE[this.IntstallPackageParamms.USE.length + 1] = use;
    }
    console.log(this.settings);
  }
  VuseInfo(uId, use) {
    //console.log(typeof(use));
    console.log(uId);
    //console.log(Object.keys(this.props.uses));

    if (use in this.props.uses) {
      document.getElementById("useInfo").textContent = use;
      //document.getElementById(uId).style.background = "orange";
      //alert(this.props.useDes[use]);
    } else {
      document.getElementById("useInfo").textContent = use;
    }
    //document.getElementById("useInfo").textContent = use;
  }
  TitleView() {
    try {
      if (document.getElementById("pTitle").textContent !== "Настройки") {
        document.getElementById("pTitle").textContent = "Настройки";
      }
    } catch (e) {
      console.log(e);
    }
  }

  render() {
    return (
      <div id="HomePage" className="settings">
        {this.TitleView()}

        <div>
          <h3>UI</h3>
          <hr />
          <div>
            <span>Тема</span>
            <ul className="btn-group">{}</ul>
          </div>
          <div>
            <span>Язык</span>
            <ul
              style={{ display: "inline-flex", listStyle: "none" }}
              className="btn-group"
            >
              {Object.keys(this.settings.langs).map((lng) => (
                <li style={{ marginLeft: "10px" }}>
                  {this.settings.langs[lng].title}
                </li>
              ))}
            </ul>
          </div>
        </div>
        <div>
          <h3>Сервер</h3>
          <hr />
          <p>
            Адресс сервера <input type="text" />{" "}
          </p>
        </div>
        <div>
          <h3>Portage</h3>
          <hr />

          <CheckField text={"Искать в оврелях"} />

          <div className="sUse">
            <b>USE:</b>
            {Object.keys(this.props.uses).map((u, j) => (
              <span
                key={u}
                id={u}
                onMouseOver={() => this.VuseInfo(u, this.props.uses[u])}
                onClick={() => this.addUse(u)}
              >
                {u}
              </span>
            ))}
            <b>
              <div
                id="useInfo"
                className="useInfo"
                style={
                  this.isMobile ? this.styleUseinfo.mobile : this.style.nomob
                }
              ></div>
            </b>
          </div>
        </div>
      </div>
    );
  }
}
export default PageSettings;