frontend/web/js/book.js

;(function () {
  var id = 0;
  var preview = '';
  var description = '';
  var title = '';
  var image = null;
  var data = {
    type: '',
    value : ''
  };
  imageFile = null;
    var maxFileSize = 3000000;
    var types = [
        'image/png',
        'image/jpeg',
        'image/jpg',
        'image/gif'
    ];
    var fileInput = document.getElementById('image');
  var titleSelector = document.getElementById('title');
  var previewSelector = document.getElementById('preview');
  var descriptionSelector = document.getElementById('description');
  var removeFileSelector = document.getElementsByClassName('remove-img-file')[0];
  var buttonAdd = document.getElementById('add');
  function book(){
  }
  function init(string) {
      var st = string.replace(/\n/g, "\\\\n")
                     .replace(/\r/g, "\\\\r")
                     .replace(/\t/g, "\\\\t");
      data = JSON.parse(st);
      console.log(data);
      if (data.length > 0){
          title = data.title;
          description = data.description;
          preview = data.preview;
          image = data.image;
          id = data.id;
      }
  }
  titleSelector.addEventListener('blur', function(e) {
      e.preventDefault();
      addState(titleSelector);
  });
    previewSelector.addEventListener('blur', function(e) {
        e.preventDefault();
        addState(previewSelector);
    });
    descriptionSelector.addEventListener('blur', function(e) {
        e.preventDefault();
        addState(descriptionSelector);
    });
    fileInput.addEventListener('change', function(event){
        event.preventDefault();
        var file = event.target.files[0];
        if(validateFiles(file)){
            displayImage(file);
        }
    });
    buttonAdd.addEventListener('click', function(event) {
        event.preventDefault();
       if (validateForm()){
           sendData();
       } else{
           return false;
       }
    });
    removeFileSelector.addEventListener('click', function(event) {
        console.log('remove');
       event.preventDefault();
       document.getElementsByClassName('img-file')[0].classList.remove('vis_');
       imageFile = null;
    });
    function validateFiles(file) {
            if (types.indexOf(file.type) !== -1 && file.size < maxFileSize) {
                return true;
            }else{
                return false;
            }
    }
    function displayImage(file) {
            var fr = new FileReader();
            console.log(fr);
            fr.onload = (function(file) {
                return function() {
                    console.log(this.result);
                    var selector = $(".img-file");
                    selector.find('img').attr('src', this.result);
                    selector.addClass('vis_');
                }
            })(file);
            fr.readAsDataURL(file);
            imageFile = file;
    }
    function addState(selector) {
        data.type = selector.getAttribute('id');
        data.value = selector.value;
        updateState(data);
    }
  function updateState(data) {
      if (data.type === 'title'){
          title = data.value;
          console.log('test');
      }
      if (data.type === 'description'){
          description = data.value;
      }
      if (data.type === 'preview'){
          preview = data.value;
      }
  }
    function validateForm() {
        errors = document.querySelectorAll('.has-error');
        for(var i = 0; i < errors.length; i++){
            var error = errors[i];
            error.parentNode.removeChild(error);
        }
        var count = 0;
        if (title === '') {
            titleSelector.insertAdjacentHTML('afterend', "<div class='has-error'>Укажите название книги</div>");
            count++;
        }
        if (preview === '') {
            previewSelector.insertAdjacentHTML('afterend', "<div class='has-error'>Укажите краткое описание книги</div>");
            count++;
        }
        if (count > 0) {
            return false;
        } else {
            return true;
        }
    }
    function sendData() {
        var xhr = new XMLHttpRequest();
        var url = '/book/add';
        if (id != 0){
            url = '/book/edit?id='+id;
        }
        xhr.open('POST', url, true);
        var data = new FormData();
        console.log(image);
        data.append('title', title);
        data.append('description', description);
        data.append('preview', preview);
        data.append('file', imageFile);
        if (image != null){
            data.append('image', image);
        }
        xhr.onreadystatechange = function() {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                window.location = '/book/success';
            }
        };
        xhr.send(data);
    }
    window.book = book;
    book.init = init;
}());