<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>PyTrask</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">
    <style>
      #drop_container {min-height: 150px;}
    </style>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  </head>
  <body>
  <section class="section">
    <div class="container">
      <h1 class="title">
        <a href="https://github.com/Nimelli/pytrask">pyTrask</a>
      </h1>
      <p class="subtitle">
        A minimalist kanban task management app that lives <strong>within your code</strong>!
      </p>    

      <div class="columns">

        <div id="todo_container" class="column has-background-info-light">
          <h5 class="title is-5">To Do</h5>

          <div id="drop_container" class="tile is-parent is-vertical" ondrop="drop(event)" ondragover="allowDrop(event)">
            {%for trask in todo_trasks%}   
            <div id={{trask.single_id}} class="tile is-child notification is-primary" draggable="true" ondragstart="drag(event)" ondblclick="trask_double_click(event, '{{trask.single_id}}')">
              <button class="delete" id=rem_{{trask.single_id}}></button>
              <p>{{trask.description}}</p>
              <a href="#" id=find_{{trask.single_id}}>{{trask.in_file}}@{{trask.at_line}}</a>
            </div>
            {%endfor%}
          </div>

        </div>

        <div id="doing_container" class="column has-background-info-light"s>
          <h5 class="title is-5">Doing</h5>

          <div id="drop_container" class="tile is-parent is-vertical" ondrop="drop(event)" ondragover="allowDrop(event)">
            {%for trask in doing_trasks%}   
            <div id={{trask.single_id}} class="tile is-child notification is-info" draggable="true" ondragstart="drag(event)" ondblclick="trask_double_click(event, '{{trask.single_id}}')">
              <button class="delete" id=rem_{{trask.single_id}}></button>
              <p>{{trask.description}}</p>
              <a href="#" id=find_{{trask.single_id}}>{{trask.in_file}}@{{trask.at_line}}</a>
            </div>
            {%endfor%}
          </div>

        </div>

        <div id="done_container" class="column has-background-info-light">
          <h5 class="title is-5">Done</h5>

          <div id="drop_container" class="tile is-parent is-vertical" ondrop="drop(event)" ondragover="allowDrop(event)">
            {%for trask in done_trasks%}   
            <div id={{trask.single_id}} class="tile is-child notification is-warning" draggable="true" ondragstart="drag(event)" ondblclick="trask_double_click(event, '{{trask.single_id}}')">
              <button class="delete" id=rem_{{trask.single_id}}></button>
              <p>{{trask.description}}</p>
              <a href="#" id=find_{{trask.single_id}}>{{trask.in_file}}@{{trask.at_line}}</a>
            </div>
            {%endfor%}
          </div>

        </div>

        <div id="other_container" class="column has-background-info-light">
          <h5 class="title is-5">Other</h5>

          <div id="drop_container" class="tile is-parent is-vertical" ondrop="drop(event)" ondragover="allowDrop(event)">
            {%for trask in other_trasks%}   
            <div id={{trask.single_id}} class="tile is-child notification is-link" draggable="true" ondragstart="drag(event)" ondblclick="trask_double_click(event, '{{trask.single_id}}')">
              <button class="delete" id=rem_{{trask.single_id}}></button>
              <p>{{trask.description}}</p>
              <a href="#" id=find_{{trask.single_id}}>{{trask.in_file}}@{{trask.at_line}}</a>
            </div>
            {%endfor%}
          </div>

        </div>

      </div>

      <a href="/" class="button is-light is-small">Refresh</a>

      <div>
          <label for="editor">Select which editor for opening your tasks:</label>
          <select name="editor" id="editor">
            {% for e in editors %}
            <option value="{{e}}">{{e}}</option>
            {%endfor%}
          </select>
          <a id="updateeditor" href="#" class="button is-light is-small">update editor</a>

      </div>

    </div>

  </section>
  </body>

  <script>
    $(document).ready(function() {
        // Call refresh page function after 3000 milliseconds (or 3 seconds).
        //setInterval('refreshPage()', 3000);
    });

    $(function() {
          $('a#updateeditor').bind('click', function() {
            var selected_editor = $('#editor').children("option:selected").val();
            $.getJSON('/update_editor', {
                editor: selected_editor
              }, function(data) {
                //do nothing
              });
              return false;
          });

          // generate callback (might be a more efficient/elegant way to achieve that)
          {%for trask in all_trasks%}   
            $('a#find_{{trask.single_id}}').bind('click', function() {
              $.getJSON('/background_locate', {
                id: "{{trask.single_id}}"
              }, function(data) {
                //do nothing
              });
              return false;
            });
            $('button#rem_{{trask.single_id}}').bind('click', function() {
              $.getJSON('/background_locate', {
                id: "{{trask.single_id}}"
              }, function(data) {
                //do nothing
              });
              return false;
            });
          {%endfor%}
        });

    function refreshPage() { 
        location.reload(); 
    }

    function allowDrop(ev) {
      
      if (ev.target.id == "drop_container") {
        ev.preventDefault();
      }
      
    }

    function drag(ev) {
      ev.dataTransfer.setData("trask_id", ev.target.id);
      ev.dataTransfer.setData("from", ev.path[2].id);
    }

    function drop(ev) {
      ev.preventDefault();
      var trask_id = ev.dataTransfer.getData("trask_id");
      var source = ev.dataTransfer.getData("from");
      var destination = ev.path[1].id

      ev.target.appendChild(document.getElementById(trask_id));

      console.log(trask_id, ': ', source, ' ---> ', destination)

      $.getJSON('/trask_moved', {
        id: trask_id,
        from: source,
        dest: destination
      }, function(data) {
        //do nothing
      });
    }

    function trask_double_click(ev, trask_id) {      
      $.getJSON('/background_locate', {
        id: trask_id
      }, function(data) {
        //do nothing
      });

    }


  </script>

</html>
