Веб-приложение Google Scripts не заполняет данные Googlesheet данными

Question

Я работаю над приложением Google TimeClock, которое я получил от Packt. Я не могу заставить его работать. Там есть HTML-файл и .gs. Я думаю, что JavaScript в HTML не работает. Это либо функция doGet в коде .gs. Я действительно не знаю. Я попытался вырубить его и изолировать ошибку, и я думаю, что, вероятно, HTML не запускает javascript.

Вот код для соответствующих документов.

Code.gs

var ssid = "1BMb3P0G0nqYHfLrDGS113_CJ-pQx0x0QHrihnalaufk";

// Change date format as per your preference.
var DF = "MM/dd/yyyy HH:mm:ss";
var TZ = Session.getScriptTimeZone();

var ss = SpreadsheetApp.openById(ssid);
var TimeSheet = ss.getSheetByName("TimeSheet");
var EmpSheet = ss.getSheetByName("EmployeesList");
var BackupSheet = ss.getSheetByName("Backup");
var MessageSheet = ss.getSheetByName("Message");
/**
 *  Get employee names from the EmployeesList sheet,
 *  construct the data as an array and return.
 *
 */
function getEmpList(){
  var emp = [];
  var data = EmpSheet.getDataRange().getValues();

  for(var i in data) if(data[i][0]) emp.push(data[i][0]);

  return emp;
}
function doGet(){
  var template = HtmlService.createTemplateFromFile("Timesheet");
  template.message = MessageSheet.getRange("A2").getValue();
  template.empList = getEmpList();

  var html = template.evaluate();
  return html;
}
// Returns employee shift status as an array [status, name].
function getEmpStatus(emp){
  var empData = EmpSheet.getDataRange().getValues();
  var timeData = TimeSheet.getDataRange().getValues();

  // Remove header
  timeData.shift();

  for(var i in timeData){
    if(timeData[i][1] == emp) 
      return [timeData[i][0],empData[j][1]];
  }

  // Return null if employee not in shift
  return ["",""];
}

function fmtDate_(d, format) {
// Set the default date format, if 'format' not passed.
var fmt = format || "MM/dd/yyyy HH:mm:ss";

var timeZone = Session.getScriptTimeZone();
return Utilities.formatDate(d, timeZone, fmt);
}


function postTime(name, val) {
var time = fmtDate_(new Date());

var data = TimeSheet.getDataRange().getValues();

// If 'shift start' clicked
if (val == "sb") {
    // Update start time if clicked again.
    for (var i in data) {
        if (data[i][1] == name && data[i][0] == "sb") {
            data[i][2] = time;
            TimeSheet.getRange(1, 1, data.length, data[0].length)
                .setValues(data);
            return [val, name];
        }
    };

    // Else insert new name and update start time.
    TimeSheet.appendRow([val, name, time]);

    return [val, name];
}

  // If 'break start' clicked.
  if(val == "bb"){
    for(var i in data){
      // Update break start time only if employee is in shift.
      if(data[i][0] == "sb" && data[i][1] == name ){
        data[i][0] = val;
        data[i][3] = time;

        TimeSheet.getRange(1, 1, data.length, data[0].length)
          .setValues(data);

        return [val,name];
      }
    };

    // If 'break start' clicked before 'shift start'.
    throw "Please start your shift.";
  }

  // If 'break end' clicked
  if(val == "be"){
    for(var i in data){
      if(data[i][0] == "bb" && data[i][1] == name ){
        data[i][0] = val;
        data[i][4] = time;
        TimeSheet.getRange(1, 1, data.length, data[0].length)
          .setValues(data);
        return [val,name];
      }
    };

    // If 'break end' clicked before 'break start'.
    throw "Please start your break.";
  }

  // If shift end clicked
  if(val == "se"){
    for(var i in data){
      if(data[i][1] == name 
           && (data[i][0] == "sb"|| data[i][0] == "be") ){
        var backup = [];
        backup.push(
          data[i][1],    // Name
          data[i][2],    // Shift Start
          data[i][3],    // Break Start
          data[i][4],    // Break End
          time,          // Shift end
          '=(E2-B2)*24', // Col F formula,
          '=(D2-C2)*24', // Col G formula
          '=F2-G2'       // Col H formula
        );

        /*
         * Copy Timesheet data to Backup sheet.
         * Insert a new row before row 2,
         * so that the inserted formulas ever work.
         *
         */
        BackupSheet.insertRowBefore(2);

        BackupSheet.getRange(2, 1, 1, backup.length)
          .setValues([backup]);

        /*
         * Tidy timesheet.
         * Ensure at least one data row before deleting,
         *  to avoid error.
         *
         */
        if(i<2) TimeSheet.appendRow(['']);

        // Delete copied row
        TimeSheet.deleteRow(Number(i)+1);

        return [val,name];
      }
    };

    // If 'shift end' clicked before 'break end'.
    if(data[i][0] == "bb")
      throw "Please end your break.";

    // If 'shift end' clicked without starting shift.
    throw "Please start your shift.";
  }
}

И HTML-файл такой ->

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css" />
    <script src= "https://ajax.googleapis.com/ajax/libs /jquery/1.10.1/jquery.min.js"></script>
  </head>

  <body>
    <div>
      <fieldset style="padding-bottom:25px;">
        <legend>Timesheet</legend>
        <select id="employee" name="employee">
          <? for(var i in empList){ ?>
              <option value="<?= empList[i] ?>" > <?= empList[i] ?></option>
          <? } ?>
        </select>
        <br /><br />
        <button id="sb" value="sb"><span>Shift Start</span></button>

        <button id="bb" value="bb"><span>Break Start</span></button>

        <button id="be" value="be"><span>Break End</span></button>
        <button id="se" value="se"><span>Shift End</span></button>
      </fieldset>

      <fieldset>
        <div id="message"><?!= message ?></div>
      </fieldset>
    </div>

    <script>

     $(function() {
        // Disable all buttons.
        $('#sb,#bb,#be,#se').prop("disabled", true);

        // Set drop-down change event.
        $('#employee').change(getStatus);

        // Set buttons click event.
        $('#sb,#bb,#be,#se').click(postTime);

        getStatus();
      });

      function getStatus(){
        // Remove all previous error messages.
        $('#error,#success').remove();

        // Disable all buttons.
        $('#sb,#bb,#be,#se').prop("disabled", true);

        // Get employee shift status.
        google.script.run
          .withSuccessHandler(function(status){
            updateStatus(status);
           })
          .getEmpStatus($("#employee").val());
      }


      function postTime(){
        // Remove all previous error messages.
        $('#error,#success').remove();

        // Disable all buttons.
        $('#sb,#bb,#be,#se').prop("disabled", true);

        // Post shift time to sheet.
        google.script.run
          .withSuccessHandler(function(msg){
             updateStatus(msg[0]);
           })
          .withFailureHandler(function(msg, elm){
             showError(msg, elm);
           })
          .withUserObject(this)
          .postTime($("#employee").val(),$(this).val());
      }


      function updateStatus(status){
        // Enable appropriate buttons only.
        switch(status){
          case "sb": $('#bb,#se').prop("disabled", false); break;
          case "bb": $('#be').prop("disabled", false); break;
          case "be": $('#se').prop("disabled", false); break;
          default: $('#sb').prop("disabled", false);
        }      
      }


      function showError(msg, elm) {
        var span = $('<span id="error" class="error">' + msg + '</span>');
        $(elm).after(span);
      }

    </script>
  </body>
</html>