Facebook
From Gamboge Moth, 5 Years ago, written in Plain Text.
Embed
Download Paste or View Raw
Hits: 194
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>Bootstrap 101 Template</title>
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta charset="utf-8">
  7.   <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  8.   <style>
  9.     .hidden{
  10.       display: none;
  11.     }
  12.     .inline{
  13.       display: inline-block;
  14.     }
  15.     .width150{
  16.       width: 150px;
  17.     }
  18.     li {
  19.       line-height: 35px;
  20.     }
  21.   </style>
  22. </head>
  23. <body>
  24. <div id="data" class="hidden">
  25.   <div id="itemElem">
  26.     <div> <span class="title"></span> <div class="btn btn-danger del">x</div></div>
  27.     <ul></ul>
  28.   </div>
  29.   <li id="childElem">
  30.     <div class="inline width150">
  31.       <span class="name"></span>, szt.
  32.       <span class="value"></span>
  33.     </div>
  34.     <div class="btn btn-inverse up">+</div>
  35.     <div class="btn btn-inverse down">-</div>
  36.     <div class="btn btn-danger del">x</div>
  37.   </li>
  38. </div>
  39.  
  40. <div id="list"></div>
  41.   <p>Add category</p>
  42.   <input type="text" id="cat" placeholder=""> <button id="addCat" class="btn">Add</button>
  43.   <p>Add product</p>
  44.   <input type="text" id="product" placeholder="product"> in <select id="catList"></select> <input type="number" id="val" value="0" placeholder="value"> <button id="addProduct" class="btn">Add</button>
  45. <script src="js/jquery.js"></script>
  46. <script src="js/bootstrap.min.js"></script>
  47.  
  48. <?php include('./backend.php'); ?>
  49.  
  50. <script>
  51.   CZAREK = {
  52.     store: {},
  53.  
  54.     init: function(){
  55.       this.getData();
  56.       this.addEvents();
  57.       this.fillList();
  58.     },
  59.  
  60.     addEvents: function(){
  61.       $('#addCat').click(this.addCat.bind(this));
  62.       $('#addProduct').click(this.addProduct.bind(this));
  63.     },
  64.  
  65.     ajax: function(){
  66.       $.ajax({
  67.         url: "backend.php",
  68.         type: "POST",
  69.         data: {store: this.store}
  70.       });
  71.     },
  72.  
  73.     addProduct: function(){
  74.       var v = $('#product')[0].value,
  75.           elem;
  76.  
  77.       if('' == v){
  78.         return;
  79.       }
  80.  
  81.       if(isNaN(parseInt($('#val')[0].value))){
  82.         return;
  83.       }
  84.  
  85.       for(elem in this.store[$('#catList option:selected')[0].value]){
  86.         if(elem == v){
  87.           $('#product')[0].value = 'product already exists';
  88.  
  89.           return;
  90.         }
  91.       }
  92.  
  93.       this.store[$('#catList option:selected')[0].value][v] = $('#val')[0].value;
  94.       $('#product')[0].value = '';
  95.       $('#val')[0].value = '';
  96.       this.fillList();
  97.       //ajax
  98.     },
  99.  
  100.     addCat: function(){
  101.       var v = $('#cat')[0].value,
  102.           elem;
  103.  
  104.       if('' == v){
  105.         return;
  106.       }
  107.       for(elem in this.store){
  108.         if(elem == v){
  109.           $('#cat')[0].value = 'category already exists';
  110.  
  111.           return;
  112.         }
  113.       }
  114.       this.store[v] = {'empty':'empty'};
  115.       $('#cat')[0].value = '';
  116.       this.fillList();
  117.       //ajax
  118.  
  119.     },
  120.  
  121.     getData: function(){
  122.       this.store = <?php echo $output ?>;
  123.     },
  124.  
  125.     fillList: function(){
  126.       var i = 0, elem;
  127.  
  128.       $('#list')[0].innerHTML = '';
  129.       $('#catList')[0].innerHTML = '';
  130.       this.ajax();
  131.  
  132.       for(elem in this.store){
  133.         if('test' != elem){
  134.           $('#catList')[0].innerHTML += ('<option value="'+elem+'">'+elem+'</option>');
  135.           this.createElem(elem, this.store[elem]);
  136.           i++;
  137.         }
  138.       }
  139.     },
  140.  
  141.     createElem: function(pName, pData){
  142.       var p = document.getElementById('itemElem').cloneNode(true),
  143.           fragment = document.createDocumentFragment(),
  144.           child;
  145.  
  146.       p.removeAttribute('id');
  147.       p.querySelector('.title').innerHTML = pName;
  148.         $(p).find('.del').click(function(){
  149.           delete this.store[pName];
  150.           this.fillList();
  151.           //ajax
  152.         }.bind(this));
  153.  
  154.       for(child in pData){
  155.         if('empty' === child){
  156.           continue;
  157.         }
  158.         var c = document.getElementById('childElem').cloneNode(true);
  159.  
  160.         c.querySelector('.value').innerHTML = pData[child];
  161.         c.querySelector('.name').innerHTML = child;
  162.  
  163.         $(c).find('.up').click(function(){
  164.           var v = this.parentNode.querySelector('.value'),
  165.               n = this.parentNode.querySelector('.name');
  166.           pData[n.innerHTML] = v.innerHTML = parseInt(v.innerHTML, 10) + 1;
  167.           CZAREK.ajax();
  168.           //ajax
  169.         });
  170.         $(c).find('.down').click(function(){
  171.           var v = this.parentNode.querySelector('.value'),
  172.               n = this.parentNode.querySelector('.name');
  173.           pData[n.innerHTML] = v.innerHTML = parseInt(v.innerHTML, 10) - 1;
  174.           CZAREK.ajax();
  175.           //ajax
  176.         });
  177.         $(c).find('.del').click(function(){
  178.           var n = this.parentNode.querySelector('.name');
  179.           delete CZAREK.store[pName][n.innerHTML];
  180.           CZAREK.fillList();
  181.           //ajax
  182.         });
  183.  
  184.         fragment.appendChild(c);
  185.       }
  186.  
  187.       p.querySelector('ul').appendChild(fragment);
  188.       document.getElementById('list').appendChild(p);
  189.     }
  190.   };
  191.   window.onload = function(){
  192.     CZAREK.init();
  193.   }
  194. </script>
  195. </body>
  196. </html>
  197.