Jukebox/jukebox-web
10
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

local push

Browse Source
This commit is contained in:
scarlett kadan
2024-05-10 01:50:18 -04:00
parent fa8f1441c8
commit ac94ad837f
6 changed files with 252 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/BrowseComponent.js
View File

@@ -152,6 +152,7 @@ export default class BrowseComponent extends Component {
<img src={BeldenLogo} alt="Belden" />
</div>
<div className="browse-fieldContainer">
<h1 className="browse-title">Browse</h1>
{this.state.cableList.map((cableObj, index) => (
<React.Fragment key={index}>{cableObj.returnDiv()}</React.Fragment>
))}

96
src/components/MapComponent.js
View File

@@ -3,6 +3,17 @@ import BeldenLogo from "../assets/images/belden-white.png";
import "../assets/stylesheets/map.scss";
export default class MapComponent extends Component {
renderCircle(id, color) {
return (
<div className="map-box-circle" id={id}>
<div
className="map-box-circle-inner"
style={{ border: `${color} 4px solid` }}
></div>
</div>
);
}
render() {
return (
<div className="map">
@@ -10,6 +21,91 @@ export default class MapComponent extends Component {
<img src={BeldenLogo} alt="Belden" />
</div>
<div className="map-fieldContainer">
<h1 className="map-title">Map</h1>
<div className="map-boxContainer">
<div className="map-box">
<div className="map-box-row" id="row-1">
{this.renderCircle("circle-1", "#004990")}
{this.renderCircle("circle-2", "#004990")}
{this.renderCircle("circle-3", "#004990")}
{this.renderCircle("circle-4", "#004990")}
{this.renderCircle("circle-5", "#004990")}
</div>
<div className="map-box-row" id="row-2">
{this.renderCircle("circle-1", "#004990")}
{this.renderCircle("circle-2", "#004990")}
{this.renderCircle("circle-3", "#004990")}
{this.renderCircle("circle-4", "#004990")}
{this.renderCircle("circle-5", "#004990")}
{this.renderCircle("circle-6", "#004990")}
</div>
<div className="map-box-row" id="row-3">
{this.renderCircle("circle-1", "#004990")}
{this.renderCircle("circle-2", "#004990")}
{this.renderCircle("circle-3", "#004990")}
{this.renderCircle("circle-4", "#004990")}
{this.renderCircle("circle-5", "#004990")}
{this.renderCircle("circle-6", "#004990")}
{this.renderCircle("circle-7", "#004990")}
</div>
<div className="map-box-row" id="row-4">
{this.renderCircle("circle-1", "#004990")}
{this.renderCircle("circle-2", "#004990")}
{this.renderCircle("circle-3", "#004990")}
<div className="map-box-spacer"></div>
<div className="map-box-spacer"></div>
{this.renderCircle("circle-4", "#004990")}
{this.renderCircle("circle-5", "#004990")}
{this.renderCircle("circle-6", "#004990")}
</div>
<div className="map-box-row" id="row-5">
{this.renderCircle("circle-1", "#004990")}
{this.renderCircle("circle-2", "#004990")}
{this.renderCircle("circle-3", "#004990")}
<div className="map-box-spacer"></div>
<div className="map-box-spacer"></div>
<div className="map-box-spacer"></div>
{this.renderCircle("circle-4", "#004990")}
{this.renderCircle("circle-5", "#004990")}
{this.renderCircle("circle-6", "#004990")}
</div>
<div className="map-box-row" id="row-6">
{this.renderCircle("circle-1", "#004990")}
{this.renderCircle("circle-2", "#004990")}
{this.renderCircle("circle-3", "#004990")}
<div className="map-box-spacer"></div>
<div className="map-box-spacer"></div>
{this.renderCircle("circle-4", "#004990")}
{this.renderCircle("circle-5", "#004990")}
{this.renderCircle("circle-6", "#004990")}
</div>
<div className="map-box-row" id="row-7">
{this.renderCircle("circle-1", "#004990")}
{this.renderCircle("circle-2", "#004990")}
{this.renderCircle("circle-3", "#004990")}
{this.renderCircle("circle-4", "#004990")}
{this.renderCircle("circle-5", "#004990")}
{this.renderCircle("circle-6", "#004990")}
{this.renderCircle("circle-7", "#004990")}
</div>
<div className="map-box-row" id="row-8">
{this.renderCircle("circle-1", "#004990")}
{this.renderCircle("circle-2", "#004990")}
{this.renderCircle("circle-3", "#004990")}
{this.renderCircle("circle-4", "#004990")}
{this.renderCircle("circle-5", "#004990")}
{this.renderCircle("circle-6", "#004990")}
</div>
<div className="map-box-row" id="row-9">
{this.renderCircle("circle-1", "#004990")}
{this.renderCircle("circle-2", "#004990")}
{this.renderCircle("circle-3", "#004990")}
{this.renderCircle("circle-4", "#004990")}
{this.renderCircle("circle-5", "#004990")}
</div>
</div>
<div className="map-details"></div>
</div>
</div>
</div>
);

18
src/components/SummaryComponent.js
View File

@@ -12,7 +12,23 @@ export default class SummaryComponent extends Component {
<div className="summary-fieldContainer">
<h1 className="summary-title">Summary</h1>
<div className="summary-grid">
<div className="summary-grid-container"></div>
<div className="summary-grid-container">
<iframe src="http://localhost:3000" title="Belden" className="summary-iframe"/>
</div>
<div className="summary-grid-container">
<iframe src="http://localhost:3000" title="Belden" className="summary-iframe"/>
</div>
<div className="summary-grid-container">
<iframe src="http://localhost:3000" title="Belden" className="summary-iframe"/>
</div>
<div className="summary-grid-container">
<iframe src="http://localhost:3000" title="Belden" className="summary-iframe"/>
</div>
<div className="summary-grid-container">
<iframe src="http://localhost:3000" title="Belden" className="summary-iframe"/>
</div>
</div>
</div>
</div>