CreateNewJavaScript.html

<script>
  $(function() {
    $('#sidebar-fillup-frequency').change(onFrequencyChanged);
    $('#sidebar-create-button').click(onCreateClick);

    // TODO: on date change, update weekly options
    $("#sidebar-fillup-start-date").datepicker({
      altFormat: "dd-MM-yy",
      dateFormat: "dd-M-yy",
      showOn: "focus"
    });
    $("#sidebar-fillup-end-date").datepicker({
      altFormat: "dd-MM-yy",
      dateFormat: "dd-M-yy",
      showOn: "focus"
    });

    utils.disableButtons();

    clearOptions();
    onFrequencyChanged();

    utils.enableButtons();
  });

  /**
   * Show the start/end date if frequency is Daily/Weekly
   */
  function updateStartEndDates() {
    var freq = $('#sidebar-fillup-frequency').find(":selected").val();
    var $startDate = $('#sidebar-fillup-start-date-panel');
    var $endDate = $('#sidebar-fillup-end-date-panel');

    if (freq === 'd' || freq === 'w') {
      // daily or weekly
      $startDate.removeClass('hidden');
      $endDate.removeClass('hidden');
    } else {
      // others
      $startDate.addClass('hidden');
      $endDate.addClass('hidden');
    }
  }

  /**
   * TODO
   * Show the ?? if frequency is Daily
   */
  function updateFrequencyDaily() {
    var freq = $('#sidebar-fillup-frequency').find(":selected").val();
    
    if (freq === 'd') {
      // daily
      // TODO
    } else {
      // others
      // TODO
    }
  }

  /**
   * Show the selection of days in week if frequency is Weekly
   */
  function updateFrequencyWeekly() {
    var freq = $('#sidebar-fillup-frequency').find(":selected").val();
    var $daysInWeek = $('#sidebar-fillup-days-in-week-panel');

    if (freq === 'w') {
      // weekly
      $daysInWeek.removeClass('hidden');
    } else {
      // others
      $daysInWeek.addClass('hidden');
    }
  }

  /**
   * Show the sheet name and range for custom dates if frequency is Custom Dates
   */
  function updateFrequencyCustomDates() {
    var freq = $('#sidebar-fillup-frequency').find(":selected").val();
    var $customDates = $('#sidebar-fillup-custom-dates-panel');

    if (freq === 'c') {
      // custom dates
      $customDates.removeClass('hidden');
    } else {
      // others
      $customDates.addClass('hidden');
    }
  }

  function onFrequencyChanged() {
    updateStartEndDates();
    updateFrequencyDaily();
    updateFrequencyWeekly();
    updateFrequencyCustomDates();
  }

  function onCreateClick() {
    utils.disableButtons();
    utils.enableLoader();

    var createOptions = getOptions();

    google.script.run
      .withSuccessHandler(
        function(msg) {
          utils.success('Success! The roster timetable has been created');
        })
      .withFailureHandler(
        function(msg) {
          utils.failure(msg);
        })
      .createNew(
        createOptions.sheetname, 
        createOptions.frequency, 
        createOptions.startDate.toISOString(), 
        createOptions.endDate.toISOString(), 
        createOptions.daysInWeek, 
        createOptions.customSheetname, 
        createOptions.customRange
        );
  }

  function getOptions() {
    return {
      sheetname: $('#sidebar-fillup-sheetname').val().trim(),
      frequency: $('#sidebar-fillup-frequency').val(),
      startDate: $('#sidebar-fillup-start-date').datepicker("getDate"),
      endDate: $('#sidebar-fillup-end-date').datepicker("getDate"),
      daysInWeek: $.map($('#sidebar-fillup-days-in-week-panel input:checked'), function(e) {
        return $(e).val();
      }),
      customSheetname: $('#sidebar-fillup-custom-dates-sheetname').val(),
      customRange: $('#sidebar-fillup-custom-dates-range').val()
    };
  }

  function clearOptions() {
    $('#sidebar-fillup-sheetname').val($('#sidebar-fillup-sheetname-default').val());
    $('#sidebar-fillup-frequency').val('d');
    $('#sidebar-fillup-start-date').datepicker("setDate", new Date());
    $('#sidebar-fillup-end-date').datepicker("setDate", new Date());
    $('#sidebar-fillup-days-in-week-panel input:checkbox').removeAttr('checked');
    $('#sidebar-fillup-custom-dates-sheetname').val('');
    $('#sidebar-fillup-custom-dates-range').val('');
  }
</script>