github.com/muhammedhassanm/blockchain@v0.0.0-20200120143007-697261defd4d/Decentralized-Energy-Composer-master/angular-app/src/app/Resident/Resident.component.html (about) 1 2 <div class="modal fade" id="addResidentModal" tabindex="-1" role="dialog" aria-labelledby="addResidentModalLabel"> 3 <div class="modal-dialog" role="document"> 4 <div class="modal-content"> 5 <div class="modal-header"> 6 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 7 <h4 class="modal-title" id="addResidentModalLabel">Add Resident</h4> 8 </div> 9 <form [formGroup]="myForm"> 10 <div class="modal-body"> 11 <div class="form-group text-left"> 12 <label for="residentID">Resident ID</label> 13 <input formControlName="residentID" type="text" class="form-control"> 14 </div> 15 <div class="form-group text-left"> 16 <label for="firstName">First Name</label> 17 <input formControlName="firstName" type="text" class="form-control"> 18 </div> 19 20 <div class="form-group text-left"> 21 <label for="lastName">Last Name</label> 22 <input formControlName="lastName" type="text" class="form-control"> 23 </div> 24 25 <div class="form-group text-left"> 26 <label for="coinsValue">Coins Balance</label> 27 <input formControlName="coinsValue" type="text" class="form-control"> 28 </div> 29 30 <div class="form-group text-left"> 31 <label for="energyValue">Energy Value (meter reading)</label> 32 <input formControlName="energyValue" type="text" class="form-control"> 33 </div> 34 35 <div class="form-group text-left"> 36 <label for="energyUnits">Energy Units</label> 37 38 <div> 39 <select name="energyUnits" formControlName="energyUnits"> 40 <option value="kwh">kWh</option> 41 </select> 42 </div> 43 </div> 44 45 <div class="form-group text-left"> 46 <label for="cashValue">Cash Value</label> 47 <input formControlName="cashValue" type="text" class="form-control"> 48 </div> 49 50 <div class="form-group text-left"> 51 <label for="cashCurrency">Cash Currency</label> 52 53 <div> 54 <select name="cashCurrency" formControlName="cashCurrency"> 55 <option value="USD">USD</option> 56 </select> 57 </div> 58 </div> 59 60 61 </div> 62 <div class="modal-footer"> 63 <button (click)="addResident(myForm);" type="submit" class="btn btn-success" data-dismiss="modal">Submit</button> 64 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 65 </div> 66 </form> 67 </div> 68 </div> 69 </div> 70 71 72 <div class="modal fade" id="updateResidentModal" tabindex="-1" role="dialog" aria-labelledby="updateResidentModalLabel"> 73 <div class="modal-dialog" role="document"> 74 <div class="modal-content"> 75 <div class="modal-header"> 76 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 77 <h4 class="modal-title" id="updateResidentModalLabel">Update Asset</h4> 78 </div> 79 <form [formGroup]="myForm"> 80 <div class="modal-body"> 81 <div class="form-group text-left"> 82 <label for="residentID">ID</label> 83 <input [ngModel]="residentID"formControlName="residentID" type="text" class="form-control"> 84 </div> 85 <div class="form-group text-left"> 86 <label for="firstName">First Name</label> 87 <input [ngModel]="firstName"formControlName="firstName" type="text" class="form-control"> 88 </div> 89 <div class="form-group text-left"> 90 <label for="lastName">Last Name</label> 91 <textarea [ngModel]="lastName" formControlName="lastName" class="form-control" rows="3"></textarea> 92 </div> 93 94 </div> 95 <div class="modal-footer"> 96 <button (click)="updateResident(myForm)" type="submit" class="btn btn-success" data-dismiss="modal">Submit</button> 97 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 98 </div> 99 </form> 100 </div> 101 </div> 102 </div> 103 104 105 106 <div class="modal fade" id="deleteResidentModal" tabindex="-1" role="dialog" aria-labelledby="deleteResidentModalLabel"> 107 <div class="modal-dialog" role="document"> 108 <div class="modal-content"> 109 <div class="modal-header"> 110 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 111 <h4 class="modal-title" id="deleteResidentModalLabel">Delete Asset</h4> 112 </div> 113 <form [formGroup]="myForm" (ngSubmit)="deleteResident()"> 114 <div class="modal-body"> 115 Are you sure you want to delete this asset? 116 </div> 117 <div class="modal-footer"> 118 <button (click)="deleteResident()" type="submit" class="btn btn-danger" data-dismiss="modal">Yes</button> 119 <button type="button" class="btn btn-default" data-dismiss="modal">No</button> 120 </div> 121 </form> 122 </div> 123 </div> 124 </div> 125 126 127 128 129 130 131 <div class="container"> 132 <div *ngIf="errorMessage" class="alert alert-danger" role="alert"> 133 <strong>Error:</strong> {{errorMessage}} 134 </div> 135 <div class="row"> 136 137 <h1 class="heading">Residents </h1> 138 </div> 139 140 <div class="row"> 141 <div class="col-md-12 text-right"> 142 <button (click)="resetForm()" type="button" class="btn btn-primary" data-toggle="modal" data-target="#addResidentModal">Add Resident</button> 143 </div> 144 </div> 145 <br> 146 <div class="row"> 147 <div class="col-md-12"> 148 <table class="table table-bordered table-responsive table-hover"> 149 <thead class="thead"> 150 <tr class="thead-cols"> 151 152 <th class="bc">ID</th> 153 154 <th class="bc">First Name</th> 155 156 <th class="bc">Last Name</th> 157 158 <th class="bc">Coins Balance</th> 159 160 <th class="bc">Energy Value</th> 161 162 <th class="bc">Energy Units</th> 163 164 <th class="bc">Cash Balance</th> 165 166 <th class="bc">Cash Currency</th> 167 168 <th class="bc">Actions</th> 169 </tr> 170 </thead> 171 <tbody> 172 <tr *ngFor="let resident of allResidents"> 173 174 <td>{{resident.residentID}}</td> 175 176 <td>{{resident.firstName}}</td> 177 178 <td>{{resident.lastName}}</td> 179 180 <td>{{resident.coinsValue}}</td> 181 182 <td>{{resident.energyValue}}</td> 183 184 <td>{{resident.energyUnits}}</td> 185 186 <td>{{resident.cashValue}}</td> 187 188 <td>{{resident.cashCurrency}}</td> 189 190 <td> 191 192 <button (click)="getForm(resident.residentID);" type="button" class="btn btn-success" data-toggle="modal" data-target="#updateResidentModal">Update</button> 193 194 <button (click)="setId(resident.residentID);" type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteResidentModal">Delete</button> 195 196 </td> 197 </tr> 198 </tbody> 199 </table> 200 </div> 201 </div> 202 203 </div>