<!DOCTYPE html>
<html>
<%- include ../partial/head.ejs %>
  <body>
    <div class="container-fluid" id="container">
      <div class="row row-offcanvas row-offcanvas-left">
<%- include ../partial/stranski-menu.ejs %>
        <div class="container-fluid main col-sm-12">
          <div id="opozorilo"></div>
          <div class="page-header">
            <h1><%= title %></h1>
          </div>
          <p>Pozdravljen, <%= uporabnik.ime %></p>
          <h2>Shranjeni seti</h2>
          <table class="table" id="seti">
            <thead>
              <tr>                
                <th>ID</th>
                <th>Ime</th>
                <th></th>
                <th></th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
          <h2>Shrani podatke</h2>
          <p>Podatke iz lokalne shrambe lahko prenesete na strežnik, kjer vam bodo dostopni tudi na drugih napravah.</p>
          <div class="col-sm-5">
            <div class="form-group row">
              <label for="ime-seta">Ime seta, ki se bo shranilo v bazo.</label>
              <input class="form-control" type="text" placeholder="ime seta" id="ime-seta">
            </div>
            <div class="form-group row">
              <button type="button" class="btn btn-outline-success" id="shrani-set">Shrani</button>
            </div>
          </div>
          <div class="clearfix"></div>
          <h2>Odjava iz sistema</h2>
          <p>Iz sistema se lahko odjavite tukaj: <a href="/user/odjava" class="btn btn-outline-success" href="#" role="button"><i class="fa fa-sign-out"></i> Odjava</a></p>
          <h2>Aktivne seje</h2>
          <table class="table" id="seje">
            <thead>
              <tr>                
                <th>Veljavnost</th>
                <th>ID seje</th>
                <th>Naprava</th>
                <th></th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </div>
    </div>
    <script>
      $("#shrani-set").click(function() {
        $.post("/user/api/shrani", {
          setJS: localStorage.getItem("organi"),
          setZS: localStorage.getItem("podjetja"),
          setIme: $("#ime-seta").val(),
        }, function(data, status) {
          if(data == "OK" && status == "success") {
            $('#opozorilo').html(
              '<div class="alert alert-success alert-dismissible fade show" role="alert">'+
              '  <button type="button" class="close" data-dismiss="alert" aria-label="Close">'+
              '    <span aria-hidden="true">&times;</span>'+
              '  </button>'+
              '  <strong>Uspeh:</strong> Set je dodan v zbirko podatkov. Za prikaz v seznamu osvežite stran.'+
              '</div>'
            )
          } else {
            $('#opozorilo').html(
              '<div class="alert alert-danger alert-dismissible fade show" role="alert">'+
              '  <button type="button" class="close" data-dismiss="alert" aria-label="Close">'+
              '    <span aria-hidden="true">&times;</span>'+
              '  </button>'+
              '  <strong>Napaka:</strong> Prišlo je do napake. Poskusite ponovno.'+
              '</div>'
            );
          }
        })
      })

      $(document).ready(function() {
        var tabela = $('#seje').DataTable({
          "ajax": {
            "url": "/user/api/vseseje",
          },
          "columnDefs": [{
            "targets": 3,
            "data": null,
            "defaultContent": "<button type='button' class='btn btn-outline-danger icon-delete'><i class='fa fa-trash-o'></i> Izbriši</button>"
          },
          {
            className: "dt-right", "targets": [ 0, 1, 3 ]
          }],
          "columns": [            
            {"data": "potece"},
            {"data": "sid"},
            {"data": "naprava"}
          ],
          language: {
            decimal:        ",",
            thousands:      ".",
            processing:     "Obdelava v teku...",
            search:         "Išči:",
            lengthMenu:     "Prikaži _MENU_ elementov",
            info:           "Elementi od _START_ do _END_ od skupaj _TOTAL_ elementov",
            infoEmpty:      "Ni elementov za prikaz",
            infoFiltered:   "(filtrirano od _MAX_ elementov)",
            infoPostFix:    "",
            loadingRecords: "Rezultati se nalagajo ...",
            zeroRecords:    "Noben element ne ustreza",
            emptyTable:     "Ni podatkov za prikaz",
            paginate: {
              first:      "Prva",
              previous:   "&lt;",
              next:       "&gt;",
              last:       "Zadnja"
            },
            aria: {
              sortAscending:  ": razvrsti naraščajoče",
              sortDescending: ": razvrsti padajoče"
            }
          }
        });

        var tabelaSeti = $('#seti').DataTable({
          "ajax": {
            "url": "/user/api/vsiseti",
          },
          "columnDefs": [{
            "targets": 2,
            "data": null,
            "defaultContent": "<button type='button' class='btn btn-outline-danger icon'><i class='fa fa-trash-o'></i> Izbriši</button>"
          },
          {
            "targets": 3,
            "data": null,
            "defaultContent": "<button type='button' class='btn btn-outline-success icon-insert'><i class='fa fa-folder-open-o'></i> Naloži</button>"
          },
          {
            className: "dt-right", "targets": [ 2, 3  ]
          }],
          "columns": [            
            {"data": "id"},
            {"data": "ime"},
          ],
          language: {
            decimal:        ",",
            thousands:      ".",
            processing:     "Obdelava v teku...",
            search:         "Išči:",
            lengthMenu:     "Prikaži _MENU_ elementov",
            info:           "Elementi od _START_ do _END_ od skupaj _TOTAL_ elementov",
            infoEmpty:      "Ni elementov za prikaz",
            infoFiltered:   "(filtrirano od _MAX_ elementov)",
            infoPostFix:    "",
            loadingRecords: "Rezultati se nalagajo ...",
            zeroRecords:    "Noben element ne ustreza",
            emptyTable:     "Ni podatkov za prikaz",
            paginate: {
              first:      "Prva",
              previous:   "&lt;",
              next:       "&gt;",
              last:       "Zadnja"
            },
            aria: {
              sortAscending:  ": razvrsti naraščajoče",
              sortDescending: ": razvrsti padajoče"
            }
          }
        });

        $('#seje tbody').on( 'click', 'button.icon-delete', function () {
          var idx = tabela.row($(this).parents('tr')).data().sid
          tabela
            .row($(this).parents('tr'))
            .remove()
            .draw()
          $.getJSON('/user/api/zbrisisejo/'+idx, function(dataM) {console.log('dataM: ' + dataM)})    
        });

        $('#seti tbody').on( 'click', 'button.icon', function () {
          var idx = tabelaSeti.row($(this).parents('tr')).data().id
          tabelaSeti
            .row($(this).parents('tr'))
            .remove()
            .draw()
          $.getJSON('/user/api/zbrisiset/'+idx, function(dataM) {console.log('dataM: ' + dataM)})    
        });

        $('#seti tbody').on( 'click', 'button.icon-insert', function () {
          var idx = tabelaSeti.row($(this).parents('tr')).data().id
          
          $.getJSON('/user/api/getset/'+idx, function(data, status) {
            localStorage.setItem("organi", data.set_js)
            localStorage.setItem("podjetja", data.set_zs)
          })    
        });
      });
    </script>
<%- include ../partial/eof.ejs %>
  </body>
</html>
