Mopck up Administracion Cursos Fit - JSFiddle

by Benjamín Xolotl Torres Luna

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jqueryui-editable/css/jqueryui-editable.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jqueryui-editable/js/jqueryui-editable.min.js"></script>
<body>
  <h1>Administración de Cursos Fit</h1>
  <div class="barra-busqueda">
    <label for="periodo">Periodo</label>
    <select name="periodo" id="periodo">
      <option> Seleccionar </option>
      <option>201711</option>
      <option>201712</option>
      <option>201713</option>
      <option>201811</option>
    </select>
    Materia o grupo:
    <input type="text" name="materia">
    <button id="search" class="search-button" name="search" onclick="showTable('tablaAdminFit');">Buscar</button>
  </div>
  <table id="tablaAdminFit" class="escondido">
    <tr>
      <th>Grupo <span class="ui-icon ui-icon-info" title="La clave de grupo para campus diferentes a campus nacional es igual a : Clave de grupo campus nacional + 1000"></span></th>
      <th>CRN</th>
      <th>Cupo Nacional</th>
      <th>Ofrecido en Campus</th>
      <th>Alumnos inscritos</th>
    </tr>
    <tr class="principalTr">
      <td>CD1003.801 <span class="ui-icon ui-icon-info" title="Clave de grupo para campus diferentes al nacional es: CD1003.1801 (Clave grupo de campus nacional +1000)"></span></td>
      <td>33174</td>
      <td class="editableField">
        <span class="edit">25</span>
        <span class="ui-icon ui-icon-pencil"></span>
      </td>
      <td>
        <table class="SubCampus">
          <tr>
            <th rowspan="2">Campus</th>
            <th rowspan="2">Valida Major</th>
            <th>Cupo asignado</th>
            <th>Alumnos inscritos</th>
          </tr>
          <tr>
           ...

CSS

body {
  background-color: #EEEEEE;
}

.th-seleccionados {
  width: 120px;
}

.thExitos{
  background-color: green;
}
.thError{
  background-color: red;
}

.reubicasDialog {
  width: 1000px;
}

.search-button {
  padding: 2px 2px 2px 2px;
  width: 120px;
}

.barra-busqueda {
  padding: 0px 5px 15px 5px;
  text-align: center;
}

.barra-regreso {
  padding: 10px 5px 15px 5px;
  text-align: right;
}

h1 {
  text-align: center;
  color: #58574B;
  text-shadow: 1px 1px 0 white;
}

table {
  background-color: white;
  border-collapse: collapse;
  width: 100%;
  text-align: center;
  border: 0 solid black;
}

th {
  padding: 12px 2px 12px 2px;
  text-align: center;
  border-bottom: 0 solid #DDDDDD;
  background-color: #0065A9;
  color: white;
}

.SubCampus th {
  padding-top: 2px;
  padding-bottom: 2px;
}

.tooltipCupoDisponible tr:nth-of-type(even),
.tablaAlumnos tr:nth-of-type(even),
.SubCampus tr:nth-of-type(even),
.mensajesError tr:nth-of-type(even){
  background: #EEEEEE;
}

td {
  padding: 3px;
  border-bottom: 0 solid #ddd;
  text-align: center;
}

.tablaAlumnos th {
  padding-top: 1px;
  padding-bottom: 1px;
  background-color: #B2B1B5;
}

.SubCampus td,
.tablaAlumnos td,
.principalTr td {
  border-top: 1px solid #ddd;
}

.escondido {
  display: none;
}

.config-button,
.reubicar-button,
.view-button {
  padding: 5px 5px 5px 5px;
}

.config-button {
  width: 270px;
}

.reubicar-button {
  width: 220px;
}

.ui-dialog button.custom {
  background: orange
}

.view-button {
  width: 160px;
}

.ui-progressbar {
  position: relative;
  height: 20px;
  width: 200px;
  text-align: center;
  overflow: hidden;
  vertical-align: middle;
  line-height: 20px;
  display: inline-block;
  background-color: #C8C9D0;
}

.progress-label {
  float: left;
  width: 100%;
  height: 100%;
  position: absolute;
  vertical-align: middle;
  font-weight: bold;
  text-shadow: 1px 1px 0 #000000;
  color: #FFFFFF;
}

.editable {
  text-decoration: none;
  border-bottom: dashed 1px...

JavaScript

$(function() {

  $.fn.editable.defaults.mode = 'inline';
  $.fn.editable.defaults.showbuttons = true;
  $.fn.editable.defaults.url = '/post';
  $.fn.editable.defaults.type = 'select';

  checkState = [];
  var buttons = {
    'Cancelar': cancel,
    'Reubicar': save
  };

  $('.reubicar-button').click(function() {
    $('#reubicaDialog').dialog('open');
  });

  $('#reubicaDialog').dialog({
    autoOpen: false,
    modal: true,
    buttons: {
      'Reubica': function() {
        $('#reubicaResponse').dialog('open');
        $(this).dialog('close');
      },
      'Cancel': function() {
        $(this).dialog('close');
      }
    },
    open: openDialog,
    minWidth: 600
  });

  $('#reubicaResponse').dialog({
    autoOpen: false,
    modal: true,
    buttons: {
      'Cerrar': function() {
        $(this).dialog('close');
      }
    },
    open: openDialog,
    minWidth: 800
  });

  $('.labelRadio').tooltip({
    content: $('#tooltipCupoDisponible').html()
  });

  $('#radio-1').checkboxradio({
    icon: false
  });
  $('#radio-2').checkboxradio({
    icon: false
  });
  $('#radio-3').checkboxradio({
    icon: false
  });

  $("#progressbarC1").progressbar({
    value: 80
  });

  $("#progressbarI1").progressbar({
    value: 60
  });

  $("#progressbarC2").progressbar({
    value: 100
  });

  $("#progressbarI2").progressbar({
    value: 63
  });

  $("#progressbarC11").progressbar({
    value: 66
  });

  $("#progressbarC12").progressbar({
    value: 50
  });

  $("#progressbarC21").progressbar({
    value: 90
  });

  $("#progressbarC22").progressbar({
    value: 70
  });

  $("#progressbarC23").progressbar({
    value: 30
  });

  $('.progressbar').each(function(i, obj) {
    var value = $(this).progressbar("value");
    if (value > 80) {
      colorProgressBar = "green";
    } else if (value > 40) {
      colorProgressBar = "#FF9900";
    } else {
      colorProgressBar = "red";
    }
    $(this).find(".ui-progressbar-value").css("background-color",...