- <!DOCTYPE html>
- <html>
- <head>
- <title>Bootstrap 101 Template</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta charset="utf-8">
- <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
- <style>
- .hidden{
- display: none;
- }
- .inline{
- display: inline-block;
- }
- .width150{
- width: 150px;
- }
- li {
- line-height: 35px;
- }
- </style>
- </head>
- <body>
- <div id="data" class="hidden">
- <div id="itemElem">
- <div> <span class="title"></span> <div class="btn btn-danger del">x</div></div>
- <ul></ul>
- </div>
- <li id="childElem">
- <div class="inline width150">
- <span class="name"></span>, szt.
- <span class="value"></span>
- </div>
- <div class="btn btn-inverse up">+</div>
- <div class="btn btn-inverse down">-</div>
- <div class="btn btn-danger del">x</div>
- </li>
- </div>
- <div id="list"></div>
- <p>Add category</p>
- <input type="text" id="cat" placeholder=""> <button id="addCat" class="btn">Add</button>
- <p>Add product</p>
- <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>
- <script src="js/jquery.js"></script>
- <script src="js/bootstrap.min.js"></script>
- <?php include('./backend.php'); ?>
- <script>
- CZAREK = {
- store: {},
- init: function(){
- this.getData();
- this.addEvents();
- this.fillList();
- },
- addEvents: function(){
- $('#addCat').click(this.addCat.bind(this));
- $('#addProduct').click(this.addProduct.bind(this));
- },
- ajax: function(){
- $.ajax({
- url: "backend.php",
- type: "POST",
- data: {store: this.store}
- });
- },
- addProduct: function(){
- var v = $('#product')[0].value,
- elem;
- if('' == v){
- return;
- }
- if(isNaN(parseInt($('#val')[0].value))){
- return;
- }
- for(elem in this.store[$('#catList option:selected')[0].value]){
- if(elem == v){
- $('#product')[0].value = 'product already exists';
- return;
- }
- }
- this.store[$('#catList option:selected')[0].value][v] = $('#val')[0].value;
- $('#product')[0].value = '';
- $('#val')[0].value = '';
- this.fillList();
- //ajax
- },
- addCat: function(){
- var v = $('#cat')[0].value,
- elem;
- if('' == v){
- return;
- }
- for(elem in this.store){
- if(elem == v){
- $('#cat')[0].value = 'category already exists';
- return;
- }
- }
- this.store[v] = {'empty':'empty'};
- $('#cat')[0].value = '';
- this.fillList();
- //ajax
- },
- getData: function(){
- this.store = <?php echo $output ?>;
- },
- fillList: function(){
- var i = 0, elem;
- $('#list')[0].innerHTML = '';
- $('#catList')[0].innerHTML = '';
- this.ajax();
- for(elem in this.store){
- if('test' != elem){
- $('#catList')[0].innerHTML += ('<option value="'+elem+'">'+elem+'</option>');
- this.createElem(elem, this.store[elem]);
- i++;
- }
- }
- },
- createElem: function(pName, pData){
- var p = document.getElementById('itemElem').cloneNode(true),
- fragment = document.createDocumentFragment(),
- child;
- p.removeAttribute('id');
- p.querySelector('.title').innerHTML = pName;
- $(p).find('.del').click(function(){
- delete this.store[pName];
- this.fillList();
- //ajax
- }.bind(this));
- for(child in pData){
- if('empty' === child){
- continue;
- }
- var c = document.getElementById('childElem').cloneNode(true);
- c.querySelector('.value').innerHTML = pData[child];
- c.querySelector('.name').innerHTML = child;
- $(c).find('.up').click(function(){
- var v = this.parentNode.querySelector('.value'),
- n = this.parentNode.querySelector('.name');
- pData[n.innerHTML] = v.innerHTML = parseInt(v.innerHTML, 10) + 1;
- CZAREK.ajax();
- //ajax
- });
- $(c).find('.down').click(function(){
- var v = this.parentNode.querySelector('.value'),
- n = this.parentNode.querySelector('.name');
- pData[n.innerHTML] = v.innerHTML = parseInt(v.innerHTML, 10) - 1;
- CZAREK.ajax();
- //ajax
- });
- $(c).find('.del').click(function(){
- var n = this.parentNode.querySelector('.name');
- delete CZAREK.store[pName][n.innerHTML];
- CZAREK.fillList();
- //ajax
- });
- fragment.appendChild(c);
- }
- p.querySelector('ul').appendChild(fragment);
- document.getElementById('list').appendChild(p);
- }
- };
- window.onload = function(){
- CZAREK.init();
- }
- </script>
- </body>
- </html>