summary start
This commit is contained in:
parent
bc4d6a6ced
commit
fa8f1441c8
@ -2,6 +2,10 @@ $dark-blue: #002554;
|
||||
$medium-blue: #004990;
|
||||
$light-blue: #007cbe;
|
||||
$hover-blue: #25b3ff;
|
||||
$black: #000;
|
||||
$gray: #bdbdbd;
|
||||
$white: #fff;
|
||||
|
||||
.summary {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
@ -34,57 +38,77 @@ $hover-blue: #25b3ff;
|
||||
}
|
||||
|
||||
.summary-fieldContainer {
|
||||
// width: 100%;
|
||||
// min-height: calc(100% - 250px);
|
||||
// height: auto;
|
||||
// background-color: transparent;
|
||||
// display: flex;
|
||||
// align-items: flex-start;
|
||||
// justify-content: center;
|
||||
// flex-wrap: wrap;
|
||||
|
||||
// below is taken from browse.scss
|
||||
width: 90%;
|
||||
width: 100%;
|
||||
min-height: calc(100% - 200px);
|
||||
height: auto;
|
||||
// display: flex;
|
||||
// align-self: center;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
// justify-content: flex-start;
|
||||
// justify-self: center;
|
||||
// flex-direction: column;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.summary-title {
|
||||
width: 80%;
|
||||
height: auto;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: $white;
|
||||
font-family: "Gotham Medium";
|
||||
margin: 10px;
|
||||
background-color: transparent;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.summary-grid {
|
||||
width: 100%;
|
||||
height: 100%; /* Adjust the height of iframes */
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr); /* 2 columns */
|
||||
grid-gap: 10px; /* Adjust the gap between iframes */
|
||||
grid-row-gap: 5px; /* Adjust the gap between rows */
|
||||
|
||||
|
||||
// Debug Borders
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
width: 80%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
background-color: transparent;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.summary-iframe {
|
||||
width: 100%; /* Ensure iframes take up full width of their grid cell */
|
||||
height: 300px; /* Adjust the height of iframes */
|
||||
|
||||
// Debug Borders
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
.summary-grid-container {
|
||||
width: 32%;
|
||||
height: 300px;
|
||||
background: linear-gradient(
|
||||
-30deg,
|
||||
rgb(187, 208, 236) 0%,
|
||||
rgba(255, 255, 255, 1) 100%
|
||||
);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
border-radius: 20px;
|
||||
border: 1px solid $gray;
|
||||
transition: all 0.3s ease-in-out;
|
||||
text-decoration: none;
|
||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
||||
cursor: pointer;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.summary-grid-container:hover {
|
||||
transform: translate3d(-5px, -5px, 0);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// .summary-iframe {
|
||||
// width: 100%; /* Ensure iframes take up full width of their grid cell */
|
||||
// height: 300px; /* Adjust the height of iframes */
|
||||
|
||||
// // Debug Borders
|
||||
// border-width: 5px;
|
||||
// border-style: solid;
|
||||
// }
|
||||
|
||||
// .summary-iframe {
|
||||
// width: 400px;
|
||||
// height: 400px;
|
||||
@ -102,28 +126,18 @@ $hover-blue: #25b3ff;
|
||||
// padding: 10px;
|
||||
// }
|
||||
|
||||
.summary-fieldContainer-graph {
|
||||
width: 25%;
|
||||
}
|
||||
// .summary-fieldContainer-graph {
|
||||
// width: 25%;
|
||||
// }
|
||||
|
||||
|
||||
.summary-dashboard {
|
||||
width: 100%;
|
||||
height: 900px;
|
||||
border-radius: 20px;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.summary-title {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
color: $dark-blue;
|
||||
margin: 10px;
|
||||
}
|
||||
// .summary-dashboard {
|
||||
// width: 100%;
|
||||
// height: 900px;
|
||||
// border-radius: 20px;
|
||||
// text-align: center;
|
||||
// padding: 10px;
|
||||
// }
|
||||
|
||||
// .summary-fieldContainer-dashboard {
|
||||
// width: 100%;
|
||||
|
||||
@ -118,13 +118,9 @@ export default class CableDetailComponent extends Component {
|
||||
});
|
||||
|
||||
if (modal === "modalOpen_dispense") {
|
||||
this.props.socket.send(
|
||||
`{"type": "cable_get","call": "send","data": {"position": ${this.state.cableDetails.position}}}`
|
||||
);
|
||||
this.props.socket.send(`{"type": "cable_get","call": "send","data": {"position": ${this.state.cableDetails.position}}}`);
|
||||
} else if (modal === "modalOpen_show") {
|
||||
this.props.socket.send(
|
||||
`{"type": "cable_get","call": "request","data": {"position": ${this.state.cableDetails.position}}}`
|
||||
);
|
||||
this.props.socket.send(`{"type": "cable_get","call": "request","data": {"position": ${this.state.cableDetails.position}}}`);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -6,50 +6,16 @@ export default class SummaryComponent extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="summary">
|
||||
<img className="summary-image" src={BeldenLogo} alt="Belden" />
|
||||
<div className="summary-image">
|
||||
<img src={BeldenLogo} alt="Belden" />
|
||||
</div>
|
||||
<div className="summary-fieldContainer">
|
||||
<h1 className="summary-title">Grid of Individual Graphs</h1>
|
||||
|
||||
<h1 className="summary-title">Summary</h1>
|
||||
<div className="summary-grid">
|
||||
{/* <div className="summary-iframe"> */}
|
||||
<iframe
|
||||
className="summary-iframe"
|
||||
src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=9"
|
||||
frameborder="0"
|
||||
></iframe>
|
||||
<iframe
|
||||
className="summary-iframe"
|
||||
src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=8"
|
||||
frameborder="0"></iframe>
|
||||
<iframe
|
||||
className="summary-iframe"
|
||||
src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7"
|
||||
frameborder="0"
|
||||
></iframe>
|
||||
<iframe
|
||||
className="summary-iframe"
|
||||
src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=6"
|
||||
frameborder="0"
|
||||
></iframe>
|
||||
<iframe
|
||||
className="summary-iframe"
|
||||
src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=5"
|
||||
frameborder="0"
|
||||
></iframe>
|
||||
{/* </div> */}
|
||||
{/* <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7" width="450" height="200" frameborder="0"></iframe> */}
|
||||
<div className="summary-grid-container"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<h1 className="summary-title">Embed Dashboard in Kiosk Mode</h1>
|
||||
<iframe
|
||||
className="summary-dashboard"
|
||||
src="http://192.168.1.12:3000/d/cdiqwmlr8c9ogf/sensors?orgId=1&theme=light&refresh=1s&kiosk"
|
||||
frameborder="0"
|
||||
></iframe>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user