CTV Sweeps

Station Convey -> CTV Manager

by Hilarius Doren

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
<script src="https://github.com/Mottie/tablesorter/blob/master/js/jquery.tablesorter.js"></script>
<script src="https://github.com/Mottie/tablesorter/blob/master/js/jquery.tablesorter.widgets.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.29.0/css/theme.bootstrap.min.css">
<div class="container-fluid">
  <div class="col-sm-9">
    <form action="/SIMSTATION/index.php/ctv/manage_ctv" role="form" method="post" accept-charset="utf-8">
      <div class="row">
        <table id="ctv-table" class="tablesorter table-striped table-bordered">
          <thead>
            <th class="col-sm-2">CTV</th>
            <th class="col-sm-2">DEPART</th>
            <th class="col-sm-2">ARRIVAL</th>
            <th class="col-sm-2">TYPE</th>
            <th class="col-sm-1">Is Softside (Y/N)</th>
            <th class="col-sm-2">DEST RAMP</th>
            <th class="col-sm-1 text-center sorter-false"><b>SELECT<br><input class="ctv-check" type="checkbox" name="all"></b></th>
          </thead>
          <tbody>
            <tr>
              <td class="col-sm-2 rtenum-box"><a href="#" class="ctv-rtenum" data-pk="340" data-url="/SIMSTATION/index.php/ctv/edit">POC04</a>
                <a href="#340" data-toggle="collapse" class="sub-table-triger collapsed"><span class="glyphicon glyphicon-chevron-right" title="Details"></span></a>
              </td>
              <td class="col-sm-2"><a href="#"...

CSS

body {
  position: relative;
}


/* Navbar Link */

.navbar-default {
  border-bottom-color: #fff;
  background-color: #dbd2d2;
}

.navbar-default .navbar-nav > li > a {
  color: #000000;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  background-color: #ccc;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #337ab7;
  background-color: #fff;
  /*font-size: 18px;*/
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.no-padding {
  padding: 0;
}

.vertical-center {
  height: 100%;
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  align-items: center;
  /* for IE10 */
  -ms-flex-align: center;
}

.badge {
  background-color: #f89406;
}


/** header */

.header {
  margin-bottom: 0;
  background: url(../img/header-background.gif) repeat-y right;
  height: 90px;
  padding-left: 20px;
}

.toptext {
  position: relative;
  top: 20%;
  font-size: 30px;
  letter-spacing: 4px;
}

#topimg {
  position: relative;
  left: 70%;
  pointer-events: none;
  opacity: 0.6;
}

nav {
  padding: 0 15px;
}

nav.affix {
  z-index: 100;
  top: 0;
  width: 100%;
}

nav.affix ~ .container {
  padding-top: 180px;
}


/** scenario */

#scn-list div {
  margin: 5px;
}

#scn-panel {
  border-right: 1px solid #ccc;
}

#prof-stations {
  height: 150px;
  overflow: auto;
  position: relative;
}

#prof-stations div:hover,
#prof-stations div:focus {
  background-color: #eee;
}

.sim-body {
  margin: 10px;
}

.prof-del {
  position: absolute;
  right: 10px;
}

.scn-btn {
  display: none;
}

.new-scn-form {
  width: 70%;
  margin: auto !important;
}

#newScnName span {
  display: none;
}

.highlight {
  background-color: #ffff66;
}


/** set location (profile)*/

.prof-list {
  height: 300px;
  overflow-y: scroll;
  border: black solid 1px;
  margin-bottom: 25px;
  padding: 20px;
}

.access-reasons div {
  margin-top:...

JavaScript

var ctvTable = $("#ctv-table").tablesorter({
     widthFixed: false,
     showProcessing: true,
     headerTemplate: '{content} {icon}',
     selectorHeaders: '> thead tr th',
     cssChildRow: 'expand-child',
     //sortList: [[0,0]], //to display intial sort order
     widgets: ['zebra', 'stickyHeaders'],
     widgetOptions: {
       zebra: ["ui-widget-content even", "ui-state-default odd"],
       stickyHeaders_offset: 212 //stick table headers to an offset from top
     }
   });

   $(".ctvloadplantable").tablesorter({
     widthFixed: true,
     showProcessing: true,
     headerTemplate: '{content} {icon}',
     //selectorHeaders: '> thead tr th',
     cssChildRow: 'expand-child',
     widgets: ['zebra', 'stickyHeaders'],
     widgetOptions: {
       zebra: ["ui-widget-content even", "ui-state-default odd"],
       stickyHeaders_offset: 0
     }
   });