Oferta académica

index.html 3.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. <html>
  2. <title>UPR-RP Oferta Académica</title>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  7. <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  8. <style>
  9. .table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
  10. background-color: #feb5b5;
  11. table {
  12. border: none !important;
  13. }
  14. table, th, td {
  15. border: none !important;
  16. }
  17. }
  18. </style>
  19. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  20. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  21. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  22. </head>
  23. <body>
  24. <div class="container">
  25. <div class="row">
  26. <h1>Oferta Académica</h1>
  27. </div>
  28. <div ng-app="ccc" ng-controller="cccCtrl">
  29. <form name="myform">
  30. <div class="container">
  31. Powered by: <a href="http://ccom.uprrp.edu"><img style="height: 150px;" src="http://i.imgur.com/xAsIoLE.png"></a>
  32. </div>
  33. <!-- <div class="container">
  34. Powered by: <a href="http://ccom.uprrp.edu"><img height="150px" src="http://i.imgur.com/xAsIoLE.png"></a>
  35. </div> -->
  36. <div class="container-fluid">
  37. <div class="row">
  38. <div class="col-sm-4">
  39. <label class="control-label col-sm-2">Keyword:</label>
  40. </div>
  41. <div class="col-sm-8">
  42. <input type="text" data-toggle="tooltip" title="The filter is applied to all the table fields. Example of keyworkds: ccom, 3033, Ortiz" class="form-control" ng-model="keywords" ng-change="updateTable()">
  43. </div>
  44. </div>
  45. </div>
  46. <div class="container-fluid">
  47. <div class="row">
  48. <div class="col-sm-12">
  49. <p>
  50. <h3>Lista de Cursos</h3>
  51. ** Esta tabla se actualiza con los datos que publíca el registrador. Puede que la información no esté sincronizada con el sistema real.
  52. </p>
  53. <table class="table table-hover table-striped" >
  54. <tr ng-repeat="col in fcourses">
  55. <td>
  56. {{col.code}}
  57. </td>
  58. <td>
  59. <p class="text-center"><b>{{col.name}}</b><br>
  60. Prof. {{col.prof}}</p>
  61. </td>
  62. <td>
  63. <span><b>Tipo:</b> {{col.type}}</span><br>
  64. <span><b>Cupo:</b> {{col.cupo}}</span><br>
  65. <span><b>Creditos:</b> {{col.creds}}</span><br>
  66. </td>
  67. <td>
  68. <ul>
  69. <li ng-repeat="sc in col.schedule">{{sc.days}} {{sc.times}} {{sc.room}}</li>
  70. </ul>
  71. </td>
  72. </tr>
  73. </table>
  74. <br>
  75. </div>
  76. </div>
  77. </div>
  78. </body>
  79. <script src="courses.js"></script>
  80. <script>
  81. $(document).ready(function() {
  82. $('[data-toggle="tooltip"]').tooltip();
  83. });
  84. var app = angular.module('ccc', []);
  85. app.controller('cccCtrl', function($scope, $http) {
  86. $scope.courses = data;
  87. $scope.fcourse = [] ;
  88. $scope.fcourses = $scope.courses;
  89. // Code for the Keyword search box
  90. $scope.updateTable = function() {
  91. $scope.fcourses = [];
  92. searchableKeys = ["code", "name", "prof"] ;
  93. if($scope.keywords){
  94. for (col in $scope.courses) {
  95. found = false;
  96. for (keyIdx in searchableKeys) { // $scope.reu[col]) {
  97. key = searchableKeys[keyIdx];
  98. //console.log(key) ;
  99. if ($scope.courses[col][key]!==null && $scope.courses[col][key].toLowerCase().search($scope.keywords.toLowerCase()) >= 0) {
  100. found = true;
  101. break;
  102. }
  103. }
  104. if (found)
  105. $scope.fcourses.push($scope.courses[col]) ;
  106. }
  107. }
  108. else{
  109. $scope.fcourses=$scope.courses ;
  110. }
  111. }
  112. });
  113. </script>
  114. </html>