Skip to content
This repository was archived by the owner on Jul 31, 2023. It is now read-only.

ETASU UI #30

Merged
smalho01 merged 5 commits into from
Jul 12, 2022
Merged

ETASU UI #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
dea7b3c
created UI data integration, css styling remains
smalho01 Jul 11, 2022
227d7c0
remove unused function paramx
smalho01 Jul 12, 2022
f94d87d
Cleaned up css and UI
zacharyrobin Jul 12, 2022
f491276
Merge branch 'etasu-ui' of https://github.com/mcode/dtr into etasu-ui
zacharyrobin Jul 12, 2022
4691c58
added hover to reveal description
zacharyrobin Jul 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 40 additions & 1 deletion src/components/RemsInterface/RemsInterface.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,16 @@ body {
}

.resource-entry{
clear: both;
border-left: 4px solid #ffcccb;
padding: 5px;
border-bottom: 1px solid grey;
background-color: #ededed;
padding-top: 20px;
padding-bottom:20px;
}

.resource-entry:hover{
.resource-entry:hover {
border-left: 4px solid #ff6663;
background-color: #fdfdfd;
}
Expand Down Expand Up @@ -107,4 +110,40 @@ body {
to {
transform:rotate(360deg);
}
}


/* ETASU styling */
.resource-entry-hover{
display:none;
padding-top:25px;
padding-left:25px;;
}

.etasu-container{
padding-bottom:10px;
padding-left: 10px;
padding-right:10px;
}

.resource-entry-text{
font-weight: bold;
float:left;
width:75%;
}

.etasu-container:hover > .resource-entry-hover{
clear: both;
display: block !important;
}


.resource-entry-icon{
width:25%;
float:right;
text-align:right;
}

.resource-child{
margin-left:35px;
}
62 changes: 46 additions & 16 deletions src/components/RemsInterface/RemsInterface.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,22 +50,52 @@ export default class RemsInterface extends Component {
return options;
}

unfurlJson(jsonData, level) {
var divStyle = {
marginLeft: 20
};
if (jsonData) {
return Object.keys(jsonData).map(element => {
var elementKey = `${element}-${level}`;
return (
<div id={elementKey} className="jsonData" key={element} style={divStyle}>
<span className="elementKey">{element}</span>: <span className="elementBody">{jsonData[element] === null ? "null" : typeof jsonData[element] === "object" ? this.unfurlJson(jsonData[element], level + 1) : jsonData[element]}</span>
unfurlJson(jsonData) {
console.log(jsonData);
return jsonData.metRequirements.map(metReq => {
console.log(metReq);
return (
<div>
<div className={"resource-entry"}>
<div className={"etasu-container"}>
<div className={"resource-entry-text"} >{metReq.requirement.name}</div>
<div className={"resource-entry-icon"}>{metReq.completed ? "✅" : "❌"}</div>
<div className={"resource-entry-hover"}>{metReq.requirement.description}</div>
</div>
</div>
)
});
{
metReq.childMetRequirements.map(subMetReq =>
<div className={"resource-entry resource-child"}>
<div className={"etasu-container"}>
<div className={"resource-entry-text"}>{subMetReq.requirement.name}</div>
<div className={"resource-entry-icon"}>{subMetReq.completed ? "✅" : "❌"}</div>
<div className={"resource-entry-hover"}>{subMetReq.requirement.description}</div>
</div>
</div>
)
}
</div>
)
});

}

}
// if (jsonData) {
// return Object.keys(jsonData).map(element => {
// console.log(element);
// return (
// // <div id={elementKey} className="jsonData" key={element} style={divStyle}>
// // <span className="elementKey">{element}</span>: <span className="elementBody">{jsonData[element] === null ? "null" : typeof jsonData[element] === "object" ? this.unfurlJson(jsonData[element], level + 1) : jsonData[element]}</span>
// // </div>
// <div>
// <div className={"resource-entry"}>
// <div>TEST</div>
// </div>
// </div>
// )
// });
// }

// }

async sendRemsMessage() {
const remsAdminResponse = await axios.post("http://localhost:8090/rems", this.props.specialtyRxBundle, this.getAxiosOptions());
Expand Down Expand Up @@ -157,7 +187,7 @@ export default class RemsInterface extends Component {
</div>
<div className="bundle-entry">
<Button variant="contained" onClick={this.toggleBundle}>View Bundle</Button>
<Button variant="contained" onClick={this.toggleResponse}>View Response</Button>
<Button variant="contained" onClick={this.toggleResponse}>View ETASU</Button>

{this.state.remsAdminResponse?.data?.case_number ?
<AutorenewIcon
Expand All @@ -172,7 +202,7 @@ export default class RemsInterface extends Component {

</Paper>
{this.state.viewResponse ?
<div className="requestBody">
<div className="bundle-view">
{this.unfurlJson(this.state.remsAdminResponse?.data, 0)}
</div>
:
Expand Down