javascript.html

<!--
 Copyright 2022 Google LLC

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
-->

<!-- Load the jQuery and jQuery UI libraries. -->
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.0/jquery-ui.min.js"></script>

<!-- Custom client-side JavaScript code. -->
<script>
  // When the page loads.
  $(function() {
    $('#tasklist').bind('change', loadTasks);
    $('#new-task').bind('submit', onNewTaskFormSubmit);
    loadTaskLists();
  });

  /**
   * Load the available task lists.
   */
  function loadTaskLists() {
    google.script.run.withSuccessHandler(showTaskLists)
        .withFailureHandler(showError)
        .getTaskLists();
  }

  /**
   * Show the returned task lists in the dropdown box.
   * @param {Array.<Object>} taskLists The task lists to show.
   */
  function showTaskLists(taskLists) {
    var select = $('#tasklist');
    select.empty();
    taskLists.forEach(function(taskList) {
      var option = $('<option>')
          .attr('value', taskList.id)
          .text(taskList.name);
      select.append(option);
    });
    loadTasks();
  }

  /**
   * Load the tasks in the currently selected task list.
   */
  function loadTasks() {
    $('#tasks').text('Loading...');
    var taskListId = $('#tasklist').val();
    google.script.run.withSuccessHandler(showTasks)
        .withFailureHandler(showError)
        .getTasks(taskListId);
  }

  /**
   * Show the returned tasks on the page.
   * @param {Array.<Object>} tasks The tasks to show.
   */
  function showTasks(tasks) {
    var list = $('#tasks').empty();
    if (tasks.length > 0) {
      tasks.forEach(function(task) {
        var item = $('<li>');
        var checkbox = $('<input type="checkbox">')
            .data('taskId', task.id)
            .bind('change', onCheckBoxChange);
        item.append(checkbox);

        var title = $('<span>')
            .text(task.title);
        item.append(title);

        if (task.completed) {
          checkbox.prop('checked', true);
          title.css('text-decoration', 'line-through')
        }

        list.append(item);
      });
    } else {
      list.text('No tasks');
    }
  }

  /**
   * A callback function that runs when a task is checked or unchecked.
   */
  function onCheckBoxChange() {
    var checkbox = $(this);
    var title = checkbox.siblings('span');
    var isChecked = checkbox.prop('checked');
    var taskListId = $('#tasklist').val();
    var taskId = checkbox.data('taskId');
    if (isChecked) {
      title.css('text-decoration', 'line-through');
    } else {
      title.css('text-decoration', 'none');
    }
    google.script.run.withSuccessHandler(function() {
      title.effect("highlight", {
        duration: 1500
      });
    }).withFailureHandler(showError)
      .setCompleted(taskListId, taskId, isChecked);
  }

  /**
   * A callback function that runs when the new task form is submitted.
   */
  function onNewTaskFormSubmit() {
    var taskListId = $('#tasklist').val();
    var titleTextBox = $('#task-title');
    var title = titleTextBox.val();
    google.script.run.withSuccessHandler(function() {
      titleTextBox.val('');
      titleTextBox.effect("highlight", {
        duration: 1500
      });
      loadTasks();
    }).withFailureHandler(showError)
      .addTask(taskListId, title);
    return false;
  }

  /**
   * Logs an error message and shows an alert to the user.
   */
  function showError(error) {
    console.log(error);
    window.alert('An error has occurred, please try again.');
  }
</script>