itne1/tickets.js

Naučíme tě pracovat na home-office.

Zjistit více...

Client-side část logiky

JavaScript

// Add button (and handler) to every part in list
function initParts(identifier, partsElement) {
  var partsElements = partsElement.getElementsByTagName('li');
  Array.prototype.forEach.call(partsElements, function(partElement) {
    var id = partElement.dataset.id;
    var button = document.createElement('button');
    button.innerText = 'smazat';
    button.addEventListener('click', function() {
      removePart(identifier, id);
    });
    partElement.appendChild(button);
  });
}

function loadParts(identifier) {
  var ticketElement = document.getElementById(identifier);
  var partsElement = ticketElement.getElementsByClassName('parts')[0];
  var ticket_id = ticketElement.dataset.id;
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState === 4) {
      if (this.status === 200) {
        partsElement.innerHTML = this.response;
        initParts(identifier, partsElement);
        console.log('Parts loaded.');
      } else {
        partsElement.className = 'error';
        console.log(this.response);
        alert(this.response);
      }
    }
  };
  xhttp.open('GET', './parts.php?ticket_id=' + ticket_id, true);
  xhttp.send();
}

function addPart(ticket_identifier) {
  var ticketElement = document.getElementById(ticket_identifier);
  var ticketId = ticketElement.dataset.id;
  var partElement = ticketElement.getElementsByTagName('form')[0];
  var partName = partElement.querySelector('[name=part_name]').value;
  var partPrice = partElement.querySelector('[name=part_price]').value;
  var data = 'action=add&ticket_id=' + ticketId + '&part_name=' + partName +
      '&part_price=' + partPrice;
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState === 4) {
      if (this.status === 200) {
        console.log(this.response);
        partElement.reset();
        loadParts(ticket_identifier);
      } else {
        console.log(this.response);
        alert(this.response);
      }
    }
  };
  xhttp.open(partElement.method, partElement.action, true);
  xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  xhttp.send(data);
}

function removePart(identifier, partId) {
  var data = 'action=remove&part_id=' + partId;
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState === 4) {
      if (this.status === 200) {
        console.log(this.response);
        loadParts(identifier);
      } else {
        console.log(this.response);
      }
      alert(this.response);
    }
  };
  xhttp.open('POST', 'parts.php', true);
  xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  xhttp.send(data);
}

function initializeTicket(identifier) {
  var ticketElement = document.getElementById(identifier);
  if (ticketElement) {
    var partElement = ticketElement.getElementsByTagName('form')[0];
    partElement.addEventListener('submit', function(event) {
      event.preventDefault();
      addPart(identifier);
    });
    loadParts(identifier);
  }
}

document.addEventListener('DOMContentLoaded', function() {
  initializeTicket('ticket');
});

Neformátovaný

Přidáno: 8.7.2017
Expirace: Neuvedeno

Autor: Jakub Žák