You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
269 lines
8.0 KiB
269 lines
8.0 KiB
import React from "react";
|
|
import ReactDOM from "react-dom";
|
|
import ModalForm from "../Modal";
|
|
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: []
|
|
};
|
|
|
|
vInstall() {
|
|
//document.getElementById("conteinerInfo").display = "block";
|
|
|
|
ReactDOM.render(
|
|
<ModalForm title={this.props.PackageName.Name}></ModalForm>,
|
|
document.getElementById("mainpage")
|
|
);
|
|
}
|
|
|
|
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>
|
|
);
|
|
}
|
|
}
|
|
chech_targent(t) {
|
|
let lt = "";
|
|
if (t.split("+").length > 1) {
|
|
lt = t.split("+")[1];
|
|
} else {
|
|
lt = t;
|
|
}
|
|
|
|
if (lt.split("single_target_").length > 1) {
|
|
return (
|
|
String(t.split("single_target_")[0]).toUpperCase() +
|
|
"=\t" +
|
|
String(t.split("single_target_")[1])
|
|
);
|
|
} else if (lt.split("cpu_flags").length > 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() {
|
|
document.getElementById("HomePage").style.display = "block";
|
|
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])
|
|
}
|
|
onMouseOut={() => this.clear_VuseInfo()}
|
|
onClick={() => this.addUse(this.props.PackageName.USE[j])}
|
|
>
|
|
{this.chech_targent(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" }}
|
|
onClick={() => this.vInstall()}
|
|
>
|
|
{this.ui.InstallButton.text}
|
|
</span>
|
|
</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default FullCard;
|