SeatMap Lookup

by Austin Anderson

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class='seatmap-json'>
  <label>seatmap JSON (example provided)</label>
  <textarea id="seatmapdata"></textarea>
</div>
<label>filter properties (Key | Value)</label>
<i>placeholder examples, can use any .Seats field</i>
<div class="filter-properties">
  <div>
    <input id="key1" placeholder="SeatStyle" />
    <input id="value1" placeholder="0" />
  </div>
  <div>
    <input id="key2" placeholder="Priority" />
    <input id="value2" placeholder="3" />
  </div>
  <div>
    <input id="key3" placeholder="Status" />
    <input id="value3" placeholder="2" />
  </div>
</div>
<button class="btn btn-primary" onclick="getSeats()">
  Get Seats
</button>
<hr />
<label>Seats matching criteria</label>
<div class="container">

</div>

CSS

#seatmapdata {
  width: 100%;
  height: 50px;
}

label {
  font-weight: bold;
  display: block;
  padding-top: 5px;
}

.container {
  background: lightblue;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
}

.btn {
  margin-top: 10px;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  border-bottom: solid 1px black;
  width: 100%;
}

.row .col:first-of-type {
  font-weight: bold;
}

.col {
  flex-grow: 0;
}

JavaScript

function getSeats() {
$('.row').remove();

  //edit this with as many object properties as needed
  var filterObject = {
    //'SeatStyle': 0,
    //"Priority": 1
  };

  var key1 = document.getElementById("key1").value
  var value1 = document.getElementById("value1").value
  var key2 = document.getElementById("key2").value
  var value2 = document.getElementById("value2").value
  var key3 = document.getElementById("key3").value
  var value3 = document.getElementById("value3").value

  if (key1) {
    filterObject[key1] = _.toNumber(value1);
  }
  if (key2) {
    filterObject[key2] = _.toNumber(value2);
  }
  if (key3) {
    filterObject[key3] = _.toNumber(value3);
  }
  console.log(filterObject);

  var data = document.getElementById("seatmapdata").value
  var parsed = JSON.parse(data);
  //console.log(parsed);

  var standardseatsFiltered = _.flatten(_.map(parsed.SeatLayoutData.Areas, function(areas) {
    var area = areas.Number;
    var mapped = _.flatten(_.map(areas.Rows, function(rows) {
      var row = rows.PhysicalName;
      var filtered = _.filter(rows.Seats, filterObject);
      var newArr = _.map(filtered, function(element) {
        return {
          Seat: element.Id,
          SeatStyle: element.SeatStyle,
          Status: element.Status,
          Row: row,
          Area: area
        };
        //return _.extend({}, element, {Row: row, Area: area});
      });
      return newArr;
    }));
    return mapped;
  }));
  
  var grouped = _.groupBy(standardseatsFiltered, 'Row');
  grouped = _.reverse(grouped)
//console.log(grouped);
  var order = 99;
  _.forOwn(grouped, function(value, key) {
    var $row = '<div class="row" style="order:' + order + '"><div class="col">' + key + '</div>';

    var reverseSeats = _.reverse(value);
    _.forEach(reverseSeats, function(seat) {
      var $col = '<div class="col">';
      $col += '<div>' + seat.Seat + '</div>';
      $col += '</div>';
      $row += $col;
    });
    $row += '</div>';
    --order;
   ...