API tools faq
paste
Advertisement
danielsantoso

widget doctor schedule table html

danielsantoso
Dec 20th, 2017
81
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.45 KB | None | 0 0
raw download clone embed print report
  1. <section id="group-doctor-schedule-table">
  2. <div class="row">
  3. <!--<div class="col-md-4 offset-8" style="height:50px" innerHTML="{{resultMessage}}">-->
  4. <!--</div>-->
  5. <div class="col-md-4 offset-8" style="height:70px">
  6. <ngb-alert *ngIf="successMessage" type="success" (close)="successMessage = null">{{ successMessage }}</ngb-alert>
  7. <ngb-alert *ngIf="errorMessage" type="danger" (close)="errorMessage = null">{{ errorMessage }}</ngb-alert>
  8. </div>
  9.  
  10. <div class="col-md-12">
  11. <!--<div class="row">-->
  12. <!--<div class="col-md-3">-->
  13. <!--<div class="alert alert-success" role="alert">-->
  14. <!--{{reloadMessage}}-->
  15. <!--</div>-->
  16. <!--</div>-->
  17. <!--</div>-->
  18. <form [formGroup]="postScheduleForm" novalidate (ngSubmit)="editSchedule(postScheduleForm)">
  19. <table class="table table-bordered">
  20. <thead>
  21. <tr>
  22. <th colspan="5">{{doctorName}}</th>
  23. <!--<th>-->
  24. <!--<select class="form-control">-->
  25. <!--<option value="">Choose Gender</option>-->
  26. <!--<option value="1">Male</option>-->
  27. <!--<option value="2">Female</option>-->
  28. <!--</select>-->
  29. <!--</th>-->
  30. <!--<th>-->
  31. <!--<select class="form-control">-->
  32. <!--<option value="">Choose Specialty</option>-->
  33. <!--<option value="1">Specialty</option>-->
  34. <!--<option value="2">Female</option>-->
  35. <!--</select>-->
  36. <!--</th>-->
  37. </tr>
  38. <tr>
  39. <th style="width:200px;">Day</th>
  40. <th style="width:200px;">Time Start</th>
  41. <th style="width:200px;">Time End</th>
  42. <th>Room</th>
  43. <th>Action</th>
  44. </tr>
  45. </thead>
  46.  
  47. <tbody>
  48. <tr>
  49. <td>
  50. <select class="form-control" formControlName="new_day" [required]="true">
  51. <option value="">---</option>
  52. <option value="1">Monday</option>
  53. <option value="2">Tuesday</option>
  54. <option value="3">Wednesday</option>
  55. <option value="4">Thursday</option>
  56. <option value="5">Friday</option>
  57. <option value="6">Saturday</option>
  58. <option value="7">Sunday</option>
  59. </select>
  60. </td>
  61. <td class="time_start">
  62. <input type="number" min="0" max="24" maxlength="2"
  63. formControlName="new_time_start_hour" #ts_hour
  64. (change)="validateFormAdd(ts_hour, ts_minute, '', '')"
  65. class="form-control" placeholder="HH" pattern="[0-9]{1,2}">
  66. <span>:</span>
  67. <input type="number" min="0" max="59" maxlength="2"
  68. formControlName="new_time_start_minute" #ts_minute
  69. (change)="validateFormAdd(ts_hour, ts_minute, '', '')"
  70. class="form-control" placeholder="MM" pattern="[0-9]{1,2}">
  71. <!--<input type="time" formControlName="new_time_start" value="" class="form-control">-->
  72. </td>
  73.  
  74. <td class="time_end">
  75. <!--<input type="time" formControlName="new_time_end" value="" class="form-control">-->
  76. <input type="number" min="0" max="24" maxlength="2"
  77. formControlName="new_time_end_hour" #te_hour
  78. (change)="validateFormAdd(te_hour, te_minute, ts_hour, ts_minute)"
  79. class="form-control" placeholder="HH" pattern="[0-9]{1,2}">
  80. <span>:</span>
  81. <input type="number" min="0" max="59" maxlength="2"
  82. formControlName="new_time_end_minute" #te_minute
  83. (keydown)="onKeyDown($event, te_minute)"
  84. (change)="validateFormAdd(te_hour, te_minute, ts_hour, ts_minute)"
  85. class="form-control" placeholder="MM" pattern="[0-9]{1,2}">
  86. </td>
  87. <td>
  88. <input type="text" disabled value="-" class="form-control">
  89. <input type="text" style="display:none;" value="e879620b-cc0a-4a40-b038-4275edd64859" formControlName="new_room">
  90. </td>
  91. <td>
  92. <button class="btn btn-light"
  93. [disabled]="!postScheduleForm.controls.new_day.valid ||
  94. !postScheduleForm.controls.new_time_start_hour.valid ||
  95. !postScheduleForm.controls.new_time_start_minute.valid ||
  96. !postScheduleForm.controls.new_time_end_hour.valid ||
  97. !postScheduleForm.controls.new_time_end_minute.valid" style="display: none">Add New</button>
  98. </td>
  99. </tr>
  100. </tbody>
  101.  
  102. <!--<tbody formArrayName="sch">-->
  103. <!--<div *ngFor="let schedule of postScheduleForm.controls.sch.controls; let i=index">-->
  104. <!--<tr [formGroupName]="i">-->
  105. <!--<td>-->
  106. <!--<input type="text" value="" formControlName="schedule_id" style="display: none" #sch_id>-->
  107. <!--<select class="form-control custom-select" formControlName="day" #sch_day>-->
  108. <!--<option value="">-&#45;&#45;</option>-->
  109. <!--<option value="Monday">Monday</option>-->
  110. <!--<option value="Tuesday">Tuesday</option>-->
  111. <!--<option value="Wednesday">Wednesday</option>-->
  112. <!--<option value="Thursday">Thursday</option>-->
  113. <!--<option value="Friday">Friday</option>-->
  114. <!--<option value="Saturday">Saturday</option>-->
  115. <!--<option value="Sunday">Sunday</option>-->
  116. <!--</select>-->
  117. <!--</td>-->
  118. <!--<td>-->
  119. <!--&lt;!&ndash;<ngb-timepicker formControlName="time_start"></ngb-timepicker>&ndash;&gt;-->
  120. <!--<input type="time" formControlName="time_start" value="" class="form-control" #sch_time_start>-->
  121. <!--</td>-->
  122. <!--<td> - </td>-->
  123. <!--<td>-->
  124. <!--&lt;!&ndash;<ngb-timepicker formControlName="time_end"></ngb-timepicker>&ndash;&gt;-->
  125. <!--<input type="time" formControlName="time_end" value="" class="form-control" #sch_time_end>-->
  126. <!--</td>-->
  127. <!--<td>-->
  128. <!--&lt;!&ndash;<input type="text" value="e879620b-cc0a-4a40-b038-4275edd64859" formControlName="room" #sch_room>&ndash;&gt;-->
  129. <!--<select class="form-control custom-select" formControlName="room" #sch_room>-->
  130. <!--<option *ngFor="let room of roomList let i=index" value="{{room.room_id}}" [selected]="'e879620b-cc0a-4a40-b038-4275edd64859'">{{room.name}}</option>-->
  131. <!--</select>-->
  132.  
  133. <!--</td>-->
  134. <!--<td>-->
  135. <!--<button class="btn btn-light">Save</button>-->
  136. <!--<a class="btn btn-light" (click)="deleteSchedule(sch_id)">Delete</a>-->
  137. <!--</td>-->
  138.  
  139. <!--</tr>-->
  140. <!--</div>-->
  141. <!--</tbody>-->
  142.  
  143. <tbody formArrayName="sch" *ngFor="let i=index; let day of scheduleList; let i=index;let schedule of postScheduleForm.controls.sch.controls; let i=index">
  144. <tr [formGroupName]="i">
  145. <td>
  146. <input type="text" value="{{day.schedule_id}}" formControlName="schedule_id" [ngModel]="day.schedule_id" style="display: none" #sch_id>
  147. <select class="form-control" formControlName="day" [ngModel]="day.day" (change)="validateFormEdit(sch_time_start_hour, sch_time_start_minute, '', '')" #sch_day>
  148. <option value="">---</option>
  149. <option value="1" [selected]="day.day == '1'">Monday</option>
  150. <option value="2" [selected]="day.day == '2'">Tuesday</option>
  151. <option value="3" [selected]="day.day == '3'">Wednesday</option>
  152. <option value="4" [selected]="day.day == '4'">Thursday</option>
  153. <option value="5" [selected]="day.day == '5'">Friday</option>
  154. <option value="6" [selected]="day.day == '6'">Saturday</option>
  155. <option value="7" [selected]="day.day == '7'">Sunday</option>
  156. </select>
  157. </td>
  158. <td class="time_start">
  159. <!--(focus)="validateTime(sch_id, sch_day, sch_time_start_hour, sch_time_start_minute, '', '')"-->
  160. <input type="number" min="0" max="24" maxlength="2"
  161. formControlName="time_start_hour" [ngModel]="day.time_start.substring(0,2)" value="{{day.time_start.substring(0,2)}}" #sch_time_start_hour
  162. (keyup)="validateFormEdit(sch_time_start_hour, sch_time_start_minute, '', '')"
  163. (change)="validateFormEdit(sch_time_start_hour, sch_time_start_minute, '', '')"
  164. (blur)="validateFormEdit(sch_time_start_hour, sch_time_start_minute, '', '')"
  165. class="form-control" placeholder="HH" pattern="[0-9]{1,2}">
  166. <span>:</span>
  167. <input type="number" min="0" max="59" maxlength="2"
  168. formControlName="time_start_minute" [ngModel]="day.time_start.substring(3,5)" value="{{day.time_start.substring(3,5)}}" #sch_time_start_minute
  169. (keyup)="validateFormEdit(sch_time_start_hour, sch_time_start_minute, '', '')"
  170. (change)="validateFormEdit(sch_time_start_hour, sch_time_start_minute, '', '')"
  171. (blur)="validateFormEdit(sch_time_start_hour, sch_time_start_minute, '', '')"
  172. class="form-control" placeholder="MM" pattern="[0-9]{1,2}">
  173. </td>
  174. <td class="time_end">
  175. <!--(focus)="validateTime(sch_time_end_hour, sch_time_end_minute, sch_time_start_hour, sch_time_start_minute)"-->
  176. <input type="number" min="0" max="24" maxlength="2"
  177. formControlName="time_end_hour" [ngModel]="day.time_end.substring(0,2)" value="{{day.time_end.substring(0,2)}}" #sch_time_end_hour
  178. (keyup)="validateFormEdit(sch_time_end_hour, sch_time_end_minute, sch_time_start_hour, sch_time_start_minute)"
  179. (change)="validateFormEdit(sch_time_end_hour, sch_time_end_minute, sch_time_start_hour, sch_time_start_minute)"
  180. (blur)="validateFormEdit(sch_time_end_hour, sch_time_end_minute, sch_time_start_hour, sch_time_start_minute)"
  181. class="form-control" placeholder="HH" pattern="[0-9]{1,2}">
  182. <span>:</span>
  183. <input type="number" min="0" max="59" maxlength="2"
  184. formControlName="time_end_minute" [ngModel]="day.time_end.substring(3,5)" value="{{day.time_end.substring(3,5)}}" #sch_time_end_minute
  185. (keyup)="validateFormEdit(sch_time_end_hour, sch_time_end_minute, sch_time_start_hour, sch_time_start_minute)"
  186. (change)="validateFormEdit(sch_time_end_hour, sch_time_end_minute, sch_time_start_hour, sch_time_start_minute)"
  187. (blur)="validateFormEdit(sch_time_end_hour, sch_time_end_minute, sch_time_start_hour, sch_time_start_minute)"
  188. class="form-control" placeholder="MM" pattern="[0-9]{1,2}">
  189. </td>
  190. <td>
  191. <input type="text" disabled value="-" class="form-control">
  192. <input type="text" style="display:none;" value="e879620b-cc0a-4a40-b038-4275edd64859" formControlName="room" #sch_room>
  193. <!--<select class="form-control custom-select" formControlName="room" #sch_room>-->
  194. <!--<option *ngFor="let room of roomList let i=index" value="{{room.room_id}}" [selected]="'e879620b-cc0a-4a40-b038-4275edd64859'">{{room.name}}</option>-->
  195. <!--</select>-->
  196. </td>
  197. <td>
  198. <a class="btn btn-light" (click)="deleteSchedule(sch_id)">Delete</a>
  199. </td>
  200. </tr>
  201. </tbody>
  202. <tbody>
  203. <tr>
  204. <!--<td colspan="6"><button class="btn btn-light" (mouseenter)="validateEdit()">Save</button></td>-->
  205. </tr>
  206. </tbody>
  207.  
  208. </table>
  209. </form>
  210. <!--{{postScheduleForm.controls.sch.value | json}}-->
  211. <!--{{postScheduleForm.value | json}}-->
  212. </div>
  213. </div>
  214. <simple-notifications [options]="options"></simple-notifications>
  215. </section>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!