|
|
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>{" "}
|
|
|
{this.props.PackageName.Name.split("/")[0]}
|
|
|
</span>
|
|
|
<div className="cVer" style={{ float: "flex" }}>
|
|
|
<b>{this.ui.versions}:</b>
|
|
|
{this.IntstallPackageParamms.Version}
|
|
|
</div>
|
|
|
<div style={{}}>
|
|
|
<Accordion title={this.ui.uses}>
|
|
|
<div
|
|
|
className="sUse"
|
|
|
style={{
|
|
|
overflowY: "scroll",
|
|
|
maxHeight: "150px",
|
|
|
background: "#EEE"
|
|
|
}}
|
|
|
>
|
|
|
{this.IntstallPackageParamms.USE.map((u, j) => (
|
|
|
<span style={{ padding: "3px" }} key={u} id={u}>
|
|
|
{this.chech_targent(u)}
|
|
|
</span>
|
|
|
))}
|
|
|
</div>
|
|
|
</Accordion>
|
|
|
</div>
|
|
|
<div>
|
|
|
<b>
|
|
|
<div id="useInfo" className="useInfo" style={{}}></div>
|
|
|
</b>
|
|
|
</div>
|
|
|
<div>
|
|
|
<p>
|
|
|
<b>{this.ui.decription}</b>{" "}
|
|
|
{this.props.PackageName.Description}
|
|
|
</p>
|
|
|
</div>
|
|
|
<div className="Btm">
|
|
|
<strong>
|
|
|
<span
|
|
|
className="btn right"
|
|
|
id={this.props.PackageName.Name}
|
|
|
style={{ cursor: "pointer" }}
|
|
|
onClick={() => this.vInstall()}
|
|
|
>
|
|
|
{this.ui.InstallButton.text}
|
|
|
</span>
|
|
|
</strong>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</ModalForm>,
|
|
|
document.getElementById("containerInfo")
|
|
|
);
|
|
|
} else {
|
|
|
let statblVer = "";
|
|
|
for (let v = 0; v < this.props.PackageName.version.length; v++) {
|
|
|
if (this.props.PackageName.version[v].split("[U]")[1] === "") {
|
|
|
statblVer = this.props.PackageName.version[v].split("[U]")[0];
|
|
|
}
|
|
|
}
|
|
|
this.IntstallPackageParamms.Version = statblVer;
|
|
|
this.vInstall();
|
|
|
|
|
|
/* ReactDOM.render(
|
|
|
<ModalForm
|
|
|
title={"Error"}
|
|
|
root={this.props.PackageName}
|
|
|
PropMain={this.props.rec}
|
|
|
icons={this.props.icons}
|
|
|
useDes={this.props.useDes}
|
|
|
Ipkg={this.props.Ipkg}
|
|
|
>
|
|
|
<div
|
|
|
style={{
|
|
|
background: "#F00",
|
|
|
color: "#000",
|
|
|
padding: "20px",
|
|
|
fontSize: "1.1em"
|
|
|
}}
|
|
|
>
|
|
|
Error
|
|
|
</div>
|
|
|
</ModalForm>,
|
|
|
document.getElementById("containerInfo")
|
|
|
);*/
|
|
|
}
|
|
|
}
|
|
|
|
|
|
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++) {
|
|
|
console.log(i);
|
|
|
if (use === this.IntstallPackageParamms.USE[i]) {
|
|
|
this.IntstallPackageParamms.USE.slice(i, i); // delete this.IntstallPackageParamms.USE[i];
|
|
|
}
|
|
|
}
|
|
|
} else {
|
|
|
document.getElementById(use).style.background = "#0F0";
|
|
|
this.IntstallPackageParamms.USE[
|
|
|
this.IntstallPackageParamms.USE.length
|
|
|
] = 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>
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
chech_targent(t) {
|
|
|
let lt = "";
|
|
|
if (t.split("+").length > 1) {
|
|
|
lt = t.split("+")[1];
|
|
|
} else {
|
|
|
lt = t;
|
|
|
}
|
|
|
let targets = ["single_target_", "modules_", "cpu_flags"];
|
|
|
|
|
|
if (lt.split("single_target_").length > 1) {
|
|
|
this.IntstallPackageParamms.TargetUses[
|
|
|
String(t.split("single_target_")[0]).toUpperCase()
|
|
|
] = String(t.split("single_target_")[1]);
|
|
|
return (
|
|
|
String(t.split("single_target_")[0]).toUpperCase() +
|
|
|
"=\t" +
|
|
|
String(t.split("single_target_")[1])
|
|
|
);
|
|
|
}
|
|
|
if (lt.split("modules_").length > 1) {
|
|
|
this.IntstallPackageParamms.TargetUses[
|
|
|
String(t.split("_modules_")[0]).toUpperCase()
|
|
|
] = String(t.split("_modules_")[1]);
|
|
|
return (
|
|
|
String(t.split("_modules_")[0]).toUpperCase() +
|
|
|
"=\t" +
|
|
|
String(t.split("_modules_")[1])
|
|
|
);
|
|
|
} else if (lt.split("cpu_flags").length > 1) {
|
|
|
this.IntstallPackageParamms.TargetUses["CPU_FLAGS"] = String(
|
|
|
t.split("cpu_flags_")[1]
|
|
|
);
|
|
|
return "CPU_FLAGS=\t" + String(t.split("cpu_flags_")[1]);
|
|
|
} else {
|
|
|
return t;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
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.split("+").length > 1) {
|
|
|
use = use.split("+")[1];
|
|
|
}
|
|
|
if (
|
|
|
use in this.props.useDes.LocalUSE ||
|
|
|
use in this.props.useDes.GlobalUSE
|
|
|
//use.split("+")[1] in this.props.useDes.LocalUSE ||
|
|
|
//use.split("+")[1] in this.props.useDes.GlobalUSE
|
|
|
) {
|
|
|
if (use in this.props.useDes.LocalUSE) {
|
|
|
document.getElementById(
|
|
|
"useInfo"
|
|
|
).textContent = this.props.useDes.LocalUSE[use];
|
|
|
console.log(use);
|
|
|
} else if (use in this.props.useDes.GlobalUSE) {
|
|
|
document.getElementById(
|
|
|
"useInfo"
|
|
|
).textContent = this.props.useDes.GlobalUSE[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;
|
|
|
}
|
|
|
clear_VuseInfo() {
|
|
|
document.getElementById("useInfo").textContent = "";
|
|
|
}
|
|
|
|
|
|
render() {
|
|
|
this.IntstallPackageParamms.USE = [];
|
|
|
//document.getElementById("HomePage").style.display = "block";
|
|
|
return (
|
|
|
// Карточка пакета с возможностью установки
|
|
|
<div className="fullCard">
|
|
|
<div className="sCard">
|
|
|
<div className="title" style={{}}>
|
|
|
{this.props.PackageName.Name.split("/")[1]}
|
|
|
<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>
|
|
|
</div>
|
|
|
<hr />
|
|
|
<div
|
|
|
style={{
|
|
|
flex: "6",
|
|
|
//display: "flex",
|
|
|
justifyContent: "center",
|
|
|
alignItems: "center",
|
|
|
flexDirection: "column"
|
|
|
}}
|
|
|
>
|
|
|
<img
|
|
|
// Иконка пакета в карточке
|
|
|
className="card__img"
|
|
|
src={this.props.icons[this.props.PackageName.Name.split("/")[1]]}
|
|
|
style={{
|
|
|
width: "128px",
|
|
|
height: "128px",
|
|
|
align: "middle",
|
|
|
float: "left",
|
|
|
marginRight: "20px"
|
|
|
}}
|
|
|
alt={this.props.PackageName.Name.split("/")[1]}
|
|
|
/>
|
|
|
</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 style={{ padding: "5px" }}>
|
|
|
<Accordion title={this.ui.uses}>
|
|
|
<div
|
|
|
style={{
|
|
|
overflowY: "scroll",
|
|
|
height: "175px",
|
|
|
width: "100vw",
|
|
|
border: "1px outset #CCC",
|
|
|
display: "grid"
|
|
|
}}
|
|
|
>
|
|
|
{this.props.PackageName.USE.map((u, j) => (
|
|
|
<span
|
|
|
key={u}
|
|
|
id={u}
|
|
|
onMouseOver={() =>
|
|
|
this.VuseInfo(this.props.PackageName.USE[j])
|
|
|
}
|
|
|
onMouseOut={() => this.clear_VuseInfo()}
|
|
|
onClick={() => this.addUse(this.props.PackageName.USE[j])}
|
|
|
>
|
|
|
{this.chech_targent(u)}
|
|
|
</span>
|
|
|
))}
|
|
|
</div>
|
|
|
</Accordion>
|
|
|
<b>
|
|
|
<div
|
|
|
id="useInfo"
|
|
|
className="useInfo"
|
|
|
style={
|
|
|
this.isMobile
|
|
|
? this.styleUseinfo.nomob
|
|
|
: this.styleUseinfo.mobile
|
|
|
}
|
|
|
></div>
|
|
|
</b>
|
|
|
<div>
|
|
|
<b>Оверлеи:</b>
|
|
|
<span>{this.props.PackageName.repo}</span>
|
|
|
</div>
|
|
|
</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" }}
|
|
|
onClick={() => this.vInstall()}
|
|
|
>
|
|
|
{this.ui.InstallButton.text}
|
|
|
</span>
|
|
|
</strong>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
export default FullCard;
|