<file_sep>"use strict";

var taskList;

$(function () {
  if (window.location.hash.length > 16) {
    TaskList.load(window.location.hash.substring(1), function (tl) {
      taskList = tl;
      $('#taskList').html(taskList.render());
    });
  } else {
    taskList = new TaskList();
    taskList.createTask('');
    $('#taskList').html(taskList.render());
  }

  $("#createTask").click(function (event) {
    event.preventDefault();
    var task = taskList.createTask("");
    $("#taskList ul").append(task.render());
  });

  $("#taskList").on("change", ":checkbox", function () {
    if ($(this).is(":checked")) {
      $(this)
        .closest('li')
        .slideUp("fast", function () {
          $(this)
            .addClass("finished")
            .appendTo("#taskList ul");
        })
        .slideDown();
    } else {
      $(this)
        .closest('li')
        .slideUp("fast", function () {
          $(this)
            .removeClass("finished")
            .prependTo("#taskList ul");
        })
        .slideDown();
    }
  });
  $('#saveTasks').click(function (event) {
    taskList.save();
  });

  $('#openList').click(function (event) {
    var listId = prompt("Bitte geben Sie die Tasklisten ID an", "demo");
    if (listId != null) {
      TaskList.load(listId, function (taskList) {
        $('#taskList').html(taskList.render());
      });
    }
  });

  $('#newList').click(function (event) {
    taskList = new TaskList();
    taskList.createTask('');
    $('#taskList').html(taskList.render());

  });

});<file_sep>"use strict";

function Task(title) {
    this.done = false;
    this.title = title || "";
}


Task.prototype.render = function () {
    var done = this.done;
    var title = this.title;

    var templateStringMarkup = `
        <label>
            <input name="done" type="checkbox" ${done ? 'checked' : ''} >
            <span></span>
        </label>
        <div class="input-field inline">
            <input name="title" type="text" placeholder="new task" value="${title}" >
        </div>
    `;
    var task = $('<li>').append(templateStringMarkup);

    task.data('task', this);

    task.find('input').change(function (event) {
        var taskObject = $(this).closest('li').data("task");
        taskObject.done = $(this).is(":checked");
        taskObject.title = $(this).val();

    });
    return task;
};<file_sep>"use strict";

function TaskList(title) {
  this.id = title;
  this.tasks = [];
  this.title = title || "";
}

TaskList.prototype.size = function () {
  return this.tasks.length;
};

TaskList.prototype.createTask = function (title) {
  var task = new Task(title);
  this.tasks.push(task);
  return task;
};


TaskList.prototype.render = function () {
  var $tasks = [];
  $.each(this.tasks, function (index, task) {
    $tasks.push(task.render());
  });

  return $('<ul>').append($tasks);
};


TaskList.prototype.toJSON = function () {
  var jsonString = {
    id: this.id,
    title: this.title,
    tasks: []
  };
  var i;
  for (i = 0; i < this.tasks.length; i += 1) {
    jsonString.tasks.push({
      title: this.tasks[i].title,
      done: this.tasks[i].done
    });
  }
  return JSON.stringify(jsonString);
};

/*
 * persists the tasklist to the server.
 *
 * for tasklists without id (not yet persisted) the id
 * is written back to the model after it is received from
 * the server.
 */
TaskList.prototype.save = function () {
  var that = this;
  var url = 'http://zhaw.herokuapp.com/task_lists/';
  if (this.id) {
    url += this.id;
  }
  $.post(url, this.toJSON(), function (returnedData) {
    that.id = JSON.parse(returnedData).id;
    window.location.hash = that.id;
  });
};

// TaskList.prototype.shuffle = function () {
//   var tasksArray = this.tasks;
//   var i;
//   for (i = 0; i < this.tasks.length; i += 1) {
//     var checked = tasksArray[i].done;

//     if (checked) {
//       // tasksArray[i].appendTo("#taskList ul")
//     }
//   }
// };

/*
 * Loads the given tasklist from the server.
 */
TaskList.load = function (id, callback) {
  var taskList = new TaskList();
  $.getJSON('http://zhaw.herokuapp.com/task_lists/' + id, function (returnedData) {
    taskList.id = returnedData.id;
    $.each(returnedData.tasks, function (index, task) {
      var t = taskList.createTask(task.title);
      t.done = task.done;
    });
    taskList.title = returnedData.title;
    callback(taskList);
    // taskList.shuffle();

  });
};<file_sep>"use strict";

function Task(title) {
    this.done = false;
    this.title = title || "";
}

Task.prototype.render = function () {
    var $markup;
    var $done = $('<input>', {
        name: 'done',
        type: 'checkbox',
        checked: this.done
    });

    var $label = $('<label>').append([$done, '<span>']);

    var $title = $('<input>', {
        name: 'title',
        type: 'text',
        placeholder: "new task"
    }).val(this.title);

    var $textInputWrapper = $('<div>', {
        'class': 'input-field inline'
    }).append($title);

    $markup = $('<li>').append([$label, $textInputWrapper]);

    // TODO: connect object instance to data attribute 'task'
    $markup.data('task', this);
    // TODO: react on change of the checkbox and the input field:
    //       - populate done field from checkbox
    //       - populate title field from input text field
    //       - write new value using console.log
    $markup.find('input').change(function (event) {
        var taskObject = $(this).closest('li').data("task");
        taskObject.done = $done.is(":checked");
        taskObject.title = $title.val();

        console.log(taskObject);

    });
    return $markup;
};