<!DOCTYPE html>
<html>
<head>
<title>Online Medical Report Using HyperLedger Fabric</title>
<!-- require jquery and bootstrap scripts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<!-- adding style here -->
<style type="text/css">
body{
background-color: lightblue;
}
header, .form-group{
margin-bottom: 3%;
}
.form-group{
width:50%;
}
#body{
margin-left:3%;
margin-right:3%;
}
.form-control{
margin: 8px;
}
#right_header{
width:20%;
font-size:15px;
margin-right:0px;
}
#left_header{
margin-left:0;
width:40%;
display:inline-block;
}
#id {
width:49%;
display: inline-block;
}
table {
font-family: Montserrat, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #b0b0ce;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #b0b0ce;
}
</style>
</head>
<body ng-app="application" ng-controller="appController">
<header>
<div id="left_header">Hyperledger Fabric Application</div>
<i id="right_header">Online Medical Record Sytem</i>
</header>
<div id="body">
<div class="form-group">
<label>Query All Reports</label>
<p><input id="queryAllReports" type="submit" value="Query" class="btn btn-primary" ng-click="queryAllReports()"></p>
</div>
<table id="all_report" class="table" align="center">
<tr>
<th>ID</th>
<th>Symptoms</th>
<th>Doctor</th>
<th>Prescription</th>
<th>Patient</th>
</tr>
<tr ng-repeat="report in all_report">
<td>{{report.Key}}</td>
<td>{{report.symptoms}}</td>
<td>{{report.doctor}}</td>
<td>{{report.prescription}}</td>
<td>{{report.patient}}</td>
</tr>
</table>
<div class="form-group">
<label>Query a Specific Report</label><br>
<h5 style="color:#eaeaff;margin-bottom:2%" id="error_query">Error: Please enter a valid Id</h5>
Enter a report number: <input id="createName" class="form-control" type="text" placeholder="Ex: 3" ng-model="report_id">
<input id="querySubmit" type="submit" value="Query" class="btn btn-primary" ng-click="queryReport()">
</div>
<table id="query_report" class="table" align="center">
<tr>
<th>Symptoms</th>
<th>Doctor</th>
<th>Prescription</th>
<th>Patient</th>
</tr>
<tr>
<td>{{query_report.symptoms}}</td>
<td>{{query_report.doctor}}</td>
<td>{{query_report.prescription}}</td>
<td>{{query_report.patient}}</td>
</tr>
</table>
<div class="form-group">
<label>Create Report</label>
<h5 style="color:#eaeaff;margin-bottom:2%" id="success_create">Success! Tx ID: {{create_report}}</h5>
<br>
Enter id: <input class="form-control" type="text" placeholder="Ex: 11" ng-model="report.id">
Enter name of patient: <input class="form-control" type="text" placeholder="Ex: Tim" ng-model="report.patient">
Enter symptoms: <input class="form-control" type="text" placeholder="Ex: Headache" ng-model="report.symptoms">
Enter prescription: <input class="form-control" type="text" placeholder="Ex: Aspirin" ng-model="report.prescription">
Enter name of doctor: <input class="form-control" type="text" placeholder="Ex: Hansel" ng-model="report.doctor">
<input id="createSubmit" type="submit" value="Create" class="btn btn-primary" ng-click="createReport()">
</div>
<div class="form-group">
<label>Change Doctor</label><br>
<h5 style="color:#eaeaff;margin-bottom:2%" id="success_doctor">Success! Tx ID: {{change_doctor}}</h5>
<h5 style="color:#eaeaff;margin-bottom:2%" id="error_doctor">Error: Please enter a valid Id</h5>
Enter id between 1 and 10: <input class="form-control" name="assetSelect" placeholder="Ex: 1" ng-model="doctor.id">
Enter name of new doctor: <input class="form-control" name="assetSelect" placeholder="Ex: Barry" ng-model="doctor.name">
<input id="transferSubmit" type="submit" value="Change" class="btn btn-primary" ng-click="changeDoctor()">
</div>
</div>
</body>
<!-- requiring the angular page -->
<script type="text/javascript" src="app.js"> </script>
</html>
The output for the above HTML code is as follows:
Can someone help me understand what I am doing wrong?