title: Updating html table data
body: <p>I have been tasked with making a shift web app which helps my current employees track workers shifts. They gave me a website StaffHub which I should model my web app according to it, currently working on the calendar part.</p>
  
  <p>The calendar has three views:
  1. Monthly
  2. Weekly
  3. Daily</p>
  
  <p>As per my current level skills I have been working on weekly. 
  Once I finish weekly I will move on the Monthly and then Daily</p>
  
  <p><strong>Algorithm for the calendar:</strong></p>
  
  <p>Divide the year into weeks, basically each week start at Monday at particular date. Today is 1/14/2019 so until 1/20/2019 there is a range of days. This range of days together the list of users make out a table, in each row of the table there are 7 days which have a select option which has three options "1st Shift","2nd Shift","3rd Shift" and "Off"<strong>(selectTag just demo purposes)</strong>. To do this a html table was made which does a POST which in written in PHP and Symfony 2.7, the selection of the select option is sent to backend and saved in the backend. A GET then gets the data from the backend.</p>
  
  <p>This is the frontend a twig file:</p>
  
  <p>calendar.html.twig</p>
  
  <pre><code>        &lt;script src="{{ asset('js/jquery.js') }}"&gt;&lt;/script&gt;
          &lt;script src="{{ asset('js/jquery-ui.min.js') }}"&gt;&lt;/script&gt;
          &lt;script src="{{ asset('js/moment.min.js') }}"&gt;&lt;/script&gt;
          &lt;script src="{{ asset('js/moment-range.js') }}"&gt;&lt;/script&gt;
          &lt;link href="{{ asset('css/jquery-ui.css') }}" rel="stylesheet" type="text/css" /&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          //GET funksioni 
          jsonObject = httpGet("http://localhost:8000/users/viewAll").split(',');
          for(i=0;i&lt;jsonObject.length;i++){
  
          jsonObject[i]=jsonObject[i].replace('"',' ').replace('"',' ').replace('[',' ').replace(']',' ').trim();
          }
          testArray = jsonObject;
          window['moment-range'].extendMoment(moment);
          n = [...Array(7).keys()];
          var curr = new Date; // get current date
          var first = curr.getTime() - 1000*60*60*24*(curr.getDay()-1);
          curr.setTime(first);
          var lastDate = new Date;
          lastDate.setTime(curr.getTime() +  1000*60*60*24*7);
          $('#firstDay').val(moment(curr).format('MMM DD YYYY') + ' ' + moment(lastDate).format('MMM DD YYYY'));
          var a = moment(curr);
          var b = moment(lastDate);
          var range = moment.range(a,b);
          var daysOne = daysFromRange(range);
          var headerData = [""];
          $.each(daysOne,function(index,value){
              daysOne[index] = moment(value).format('ddd DD YYYY');
              headerData.push(daysOne[index]);
          });
          var data  = [headerData]
          for(i=0;i&lt;testArray.length;i++){
              data.push(templateArray(testArray,i));
          }       
              $("#arrow-left").click(function () {
                  $(".container").empty();
                  $(".container").append("&lt;div&gt;&lt;/div&gt;");
                  curr.setTime(curr.getTime() - 1000*60*60*24*7);
                  lastDate.setTime(lastDate.getTime() - 1000*60*60*24*7);
                  var p = [];
                  $.each(daysFromRange(moment.range(curr,lastDate)),function(index,value){
                              p.push(moment(value).format('ddd DD MM YYYY'));
                  });
                  data[0] = [""]  
                  $.each(p,function(index,value){
                      data[0].push(p[index]);
                  });
                  $.each($("table th"), function(i,e){
                      $(this).html(data[0][i]);
                  });
                  $('#firstDay').val(moment(curr).format('MMM DD YYYY') + ' ' + moment(lastDate).format('MMM DD YYYY'));    
              });
              $("#arrow-right").click(function () {
                  $(".container").empty();
                  $(".container").append("&lt;div&gt;&lt;/div&gt;");
                  curr.setTime(curr.getTime() + 1000*60*60*24*7);
                  lastDate.setTime(lastDate.getTime() + 1000*60*60*24*7);
                  var p = [];
                  $.each(daysFromRange(moment.range(curr,lastDate)),function(index,value){
                              p.push(moment(value).format('ddd DD MM YYYY'));
                  });
                  data[0] = [""];
                  $.each(p,function(index,value){
                      data[0].push(p[index]);
                  });
                  $.each($("table th"), function(i,e){
                      $(this).html(data[0][i]);
                  });
                  $('#firstDay').val(moment(curr).format('MMM DD YYYY') + ' ' + moment(lastDate).format('MMM DD YYYY'));
              });
              console.log(data);
              var table = makeTable($('#calendar-container'), data);
              var firstTable = getTableInfoFromArray(getTableData(table));
              var prevTable = firstTable;
               $('select').change(function () {
                  currTable = getTableInfoFromArray(getTableData(table));
                  $.ajax({
                          type: 'POST',
                          url: '/saveCalendar',
                          //qit sen data duhet me bo 
                          data: JSON.stringify(diffTables(currTable,prevTable)[0]),
                          dataType: 'json',
                          success: function (useremail) {
                              console.log(useremail);
                          },
                          error: function (xhr, status, err) {
                              console.log(xhr);
                           },
                  });
                  prevTable = currTable;
              });
  
      });
      function daysFromRange(range){
          var range = range;
          var diff = range.diff('days');
          var array = Array.from(range.by('days'));
          array.splice(-1,1);
          return array;
      };
      function templateArray(array,i){
          var selectTag = "&lt;select id='shift'&gt;" +
          "&lt;option value='volvo' selected='selected'&gt;Volvo&lt;/option&gt;" +
          "&lt;option value='saab'&gt;Saab&lt;/option&gt;" +
          "&lt;option value='mercedes'&gt;Mercedes&lt;/option&gt;" +
          "&lt;option value='audi'&gt;Audi&lt;/option&gt;" +
          "&lt;/select&gt;";
          return [array[i],selectTag,selectTag,selectTag,selectTag,selectTag,selectTag,selectTag];
      };
      function diffTables(tb,tc){
          c = []; //stack for return values;
          for(i = 0;i &lt; tb.length ; i ++){
              for(j = 0;j &lt; tb[i].length;j++){
                  if( !arraysEqual(tb[i][j],tc[i][j])){
                      c.push(tb[i][j]);
                  }
              }
          }
          return c;
  
      }
      function httpGet(theUrl)
      {
          var xmlHttp = new XMLHttpRequest();
          xmlHttp.open( "GET", theUrl, false ); // false for synchronous request
          xmlHttp.send( null );
          return xmlHttp.responseText;
      }
      function arraysEqual(a1,a2) {
      /* WARNING: arrays must not contain {objects} or behavior may be undefined */
          return JSON.stringify(a1)==JSON.stringify(a2);
      }
      function makeTable(container,data){
              var table = $("&lt;table/&gt;").addClass('CSSTableGenerator');
              table.css("border","1");
              $.each(data,function(rowIndex,r){
                  var row = $("&lt;tr/&gt;");
                  $.each(r , function(collIndex,c){
                      if(/&lt;\/select&gt;/.test(c)){
                          row.append($("&lt;td/&gt;").html(c));
                      }else{
                      row.append($("&lt;t"+(rowIndex == 0 ?  "h" : "d")+"/&gt;").text(c));
                      };
                  });
                  table.append(row);
              });
          return container.append(table);
      };
      function appedTableColumn(table,rowData){
          var lastRow = $('&lt;tr/&gt;').appendTo(table.find('tbody:last'));
          $.each(rowData,function(collIndex,c){
              lastRow.append($('&lt;td/&gt;'.text(c)));
          });
      };
      function getTableData(table){
          var data = [];
          table.find('tr').each(function(rowIndex,r){
                  var cols = [];
                  $(this).find('td,th').each(function(colIndex,c){
                          if($(this).contents().is("select")){
                              cols.push($(this).contents("select").children("option:selected").val());
                          }else{
                              cols.push(c.textContent);
                          }
                  });
                  data.push(cols);
          });
          return data;  
      };
      function updateTableData(table,data){
  
      }
      function getTableInfoFromArray(data){
          var p = [];
          for(i = 1;i &lt; data.length;i++){
                  var d = [data[0]];
                  d.push(data[i]);
                  p.push(zip(d));
          };
          for(i=0;i&lt;p.length;i++){
              var user = p[i][0][1];
              p[i].shift();
              p[i].forEach(function(element){
                  element.push(user);
              }); 
          };
          return p;
      };
      function zip(arrays) {
      return arrays[0].map(function(_,i){
          return arrays.map(function(array){return array[i]})
      });
  }
  
  &lt;/script&gt;
  &lt;style&gt;
  i {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
  }
  .right:hover { background:green;}
  .left:hover { background:green;}
  .calendar-selector-buttons{
  
      width: 50px;
      height: 50px;
  
  }
  
  .right {
      transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
  
  }
  
  .left {
      transform: rotate(135deg);
      -webkit-transform: rotate(135deg);
  }
  select{
    margin: 0px;
    width: 150px;
    font-size: 16px;
    border: 1px solid #ccc;
    height: 34px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: "Palatino";
  
  }
  textarea{
      background-color: aliceblue;
      margin: 25px;
      margin-bottom: 0px;
      margin-left: 35px;
      border: 1px solid #888; 
      resize: none;
      height: 30px;
      width:  200px;
  }
  &lt;/style&gt;
  &lt;div id='calendar-container'&gt;
      &lt;div id='calendar-dates'&gt;
          &lt;div id='calendar-selector-buttons'&gt;
               &lt;div class ='arrow'&gt;&lt;i class="arrow left" id="arrow-left"&gt;&lt;/i&gt;&lt;i class="arrow right" id="arrow-right"&gt;&lt;/i&gt;&lt;textarea id='firstDay'&gt;&lt;/textarea&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div id='calendar-week-selector'&gt;
              &lt;div class="container"&gt;
                  &lt;div&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="users"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>PHP symfony backend:</p>
  
  <pre><code> public function getCalendarAction(Request $request,$firstDate,$secondDate){
          /*
              select * from test 
              where date between '03/19/2014' and '03/19/2014 23:59:59'
                      // Qka duna me bo qitu
                     // Kejtsenet n databaze mi marr n baze te dates qi osht ne textarea
                    // P.sh Jun 03 2019 Jun 10 2019
                   // duhet memi kthy kejt schedule per qit date
                  // ne URL e shkruj daten, URL date enconding prej textare box e qes nGET request edhe 
                 // query stringun e boj n baze dates
              qito sene duna mi bo datetime mu pershtat me databaze
          */
          $sql = "SELECT period,username FROM os_calendarshift where date(period) between date('".DateTime::createFromFormat('Y-m-d', $firstDate)-&gt;format('Y-m-d')."')  and date('".DateTime::createFromFormat('Y-m-d', $secondDate)-&gt;format('Y-m-d')."');"; 
          //Querying e kryva 
          //tash me kqyr me query databazen
          $em = $this-&gt;getDoctrine()-&gt;getManager();
          $q = $em-&gt;getConnection()-&gt;prepare($sql);
          $q-&gt;execute();
          $response = new JSONResponse($q-&gt;fetchAll());
          $response-&gt;setStatusCode(200);
          return $response;
      }
  </code></pre>
  
  <p>How do I update the HTML data table.
  The date returned from the GET API looks like this:</p>
  
  <pre><code>[
      {
          "period": "2019-01-07 00:00:00",
          "username": "gbinaku",
          "shift": "audi"
      },
      {
          "period": "2019-01-13 00:00:00",
          "username": "gbinaku",
          "shift": "audi"
      },
      {
          "period": "2019-01-07 00:00:00",
          "username": "abc123",
          "shift": "audi"
      },
      {
          "period": "2019-01-09 00:00:00",
          "username": "ekransiqi",
          "shift": "saab"
      },
      {
          "period": "2019-01-11 00:00:00",
          "username": "gbinaku",
          "shift": "mercedes"
      },
      {
          "period": "2019-01-11 00:00:00",
          "username": "abc123",
          "shift": "mercedes"
      },
      {
          "period": "2019-01-09 00:00:00",
          "username": "burim",
          "shift": "audi"
      },
      {
          "period": "2019-01-07 00:00:00",
          "username": "albertina",
          "shift": "saab"
      },
      {
          "period": "2019-01-08 00:00:00",
          "username": "kini",
          "shift": "audi"
      },
      {
          "period": "2019-01-10 00:00:00",
          "username": "burim",
          "shift": "mercedes"
      },
      {
          "period": "2019-01-08 00:00:00",
          "username": "cvb1",
          "shift": "saab"
      },
      {
          "period": "2019-01-07 00:00:00",
          "username": "ragnar",
          "shift": "mercedes"
      },
      {
          "period": "2019-01-11 00:00:00",
          "username": "cvb1",
          "shift": "saab"
      },
      {
          "period": "2019-01-12 00:00:00",
          "username": "ragnar",
          "shift": "audi"
      },
      {
          "period": "2019-01-13 00:00:00",
          "username": "teab",
          "shift": "mercedes"
      },
      {
          "period": "2019-01-07 00:00:00",
          "username": "cvb1",
          "shift": "audi"
      }
  ]
  </code></pre>
  
  <p>Period and Username and Shift are there however, how do I update the HTML table accordingly from the information on the JSON response.</p>