Google sheet Webapp Script | Quản lý đặt xe cho chuyến đi – Tài xế cập nhật hoàn thành thông tin

Giaoan.link chia sẻ đến các bạn một project mới về “Google sheet Webapp Script | Quản lý đặt xe cho chuyến đi – Tài xế cập nhật hoàn thành thông tin”. Với project này, bạn sẽ có 2 webapp. 

• Webapp thứ nhất: dùng để nhân viên nhận thông tin khách hàng, lên mã chuyến đi, ngày đón, đưa và chọn tài xế. Khi chọn mã tài xế thì các thông tin của tài xế như: Mã tài xế, họ tên, số điện thoại, biển số xe sẽ tự động được load lên. Dữ liệu được lưu trên sheet Data của spreadsheet.
• Webapp thứ hai: dành cho tài xế cập nhật các thông tin còn lại của chuyến đi mà tài xế đó được chỉ định.
• Một số tính năng của form: Kiểm tra mã chuyến đi không đượ trùng lặp, kiểm tra tài xế chại xong mới được lên lịch chạy tiếp.

Dưới đây là mã của form thứ nhất và video demo trên youtube.

Để thực hiện Webapp thứ 2, bạn có thể xem và lấy code này phát triển, truy cập tạ đây.

Hoặc có thể mất ít phí cho webapp này, liên hệ: giaoan.link@gmail.com

Một số project excel và google sheet ngẫu nhiên:

• Google sheet Ứng dụng theo dõi đơn hàng – Danh sách sản phẩm mua, trạng thái đơn hàng
• Tip on Ms Word Hướng dẫn tạo ngắt trang, xóa ngắt trang đơn lẽ hoặc toàn bộ ngắt trang trên file doc
• Google sheet | Generate QR Codes – Mã hóa nội dung Cell – Thêm hình ở giữa mã QR code
• Google sheet App Script | Tạo custom menu – Xóa tất cả dòng Rỗng trên vùng dữ liệu Nhanh chống
• Google Script Web | From upload file – Kiểm tra trùng lặp – Ghi đè hoặc Tạo phiên bản mới cho file
• Google Script Web | Trang Tìm kiếm nhiều điều kiên riêng lẽ hoặc hết hợp – Print, Xuất file PDF
• Hướng dẫn kiểm tra Bàn phím, Tháo và thay bàn phím mới cho Dell Inspirion 15 3000 series
• Google sheet webapp | Quản lý bán hàng – Chức nằn trả góp, In thông tin
• Ổ C đầy Di chuyển dữ liệu ZALO sang Ổ D hoặc ổ khác một cách dễ dàng Không lo zalo báo đầy ổ đĩa
• Google sheet webapp|Nhập liệu-Quản lý khách hàng – Click tên hiển thị popup thông tin thêm – Print

Mã apps script webapp 1 “Code.gs”

function doGet() {  
  return HtmlService.createHtmlOutputFromFile('form');  
}  

function getDriverInfo(driverId) {  
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('taixe');  
  var data = sheet.getDataRange().getValues();  
  for (var i = 0; i < data.length; i++) {  
    if (data[i][0] == driverId) {  
      return {  
        name: data[i][1],    // Tên tài xế từ cột B  
        phone: data[i][2],   // Số điện thoại từ cột C  
        plate: data[i][3]    // Biển số xe từ cột D  
      };  
    }  
  }  
  return {};  
}  

function getDriverOptions() {  
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('taixe');  
  var data = sheet.getDataRange().getValues();  
  var options = '';  
  for (var i = 1; i < data.length; i++) {  
    options += '<option value="' + data[i][0] + '">' + data[i][0] + '</option>';  // Mã tài xế từ cột A  
  }  
  return options;  
}  

function submitForm(formData) {  
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('data');  
  var data = sheet.getDataRange().getValues();  
  if (formData.tripId=="") {  
      return 'Bạn chưa điền mã chuyến đi';  
    } 
  // Kiểm tra mã chuyến đi có bị trùng không  
  for (var i = 1; i < data.length; i++) {  
    if (data[i][0] == formData.tripId) {  
      return 'Mã chuyến đi đã tồn tại';  
    }  
  }  
  
  var driverId = formData.driverId;  
  var driverExists = false;  
  var driverCompleted = false;  
  
  // Kiểm tra nếu mã tài xế đã tồn tại trong dữ liệu  
  for (var j = 1; j < data.length; j++) {  
    if (data[j][1] == driverId) {  // Kiểm tra cột B cho mã tài xế  
      driverExists = true;      
      var kilometers = data[j][7]; // Cột H cho số km  
      var amount = data[j][8];     // Cột I cho số tiền  
      // Chỉ đánh dấu hoàn thành nếu có dữ liệu ở cả hai cột  
      if (kilometers !== '' && amount !== '') {  
        driverCompleted = true;  
      }  
      break;  
    }  
  }  
  
  // Nếu mã tài xế đã tồn tại nhưng chưa hoàn thành chuyến đi, thông báo lỗi  
  if (driverExists && !driverCompleted) {  
    return 'Tài xế chưa hoàn thành chuyến đi';  
  }  
  
  // Nếu tất cả đều ổn, thêm chuyến đi mới  
  sheet.appendRow([  
    formData.tripId,  
    formData.driverId,  
    formData.driverName,  
    formData.phoneNumber,  
    formData.licensePlate,  
    formData.bookingDate,  
    formData.pickupDate  
  ]);  
  return 'Thêm chuyến đi thành công';  
}

Mã apps script webapp thứ nhất “Index.html”

<!DOCTYPE html>  
<html>  
  <head>  
    <base target="_top">  
    <style>
      .div-container{
        width: 500px;
        border: 2px solid #f38400;
        border-radius: 10px;
        box-shadow: 2px 2px 3px grey;
        margin-left: auto;
        margin-right: auto;
        padding: 10px;
      }
      .title{
        font-size: 1.8em;
        text-align: center;
        font-weight: bold;
        color: blue;
        margin-bottom: 10px;
        text-shadow: 1px 1px 2px grey;
      }
      input{
        width: 95%;
        border: 1px solid #00c81c;
        outline: none;
        border-radius: 9px;
        padding: 8px;
      }

      input:focus{
       border: 1px solid #ffc600;
      }

      select{
        width: 99%;
        border: 1px solid #00c81c;
        ouline: none;
        border-radius: 9px;
        padding: 8px;
      }

      select:focus{
        border: 1px solid #ffc600;  
      }
      

      options{
        border: 1px solid #00c81c;  
        ouline:none;
      }
       options:checked{
        border: 1px solid #ffc600;  
        ouline:none;
      }

      .btn{
        width: 95%;
        padding: 10px 0px;
        border: 1px solid #ffffff;
        border-radius: 8px;
        outline: none;
        text-align: center;
        color: black;
        font-weight: bold;
        font-size: 1em;
        background-color: #00c81c;
        box-shadow: 1px 1px 2px grey;
        cursor: pointer;
        margin-top: 10px;
        margin-bottom: 20px;
      }

      .btn:hover{
        background-color: #ffc600;
      }
      

      @media (max-width: 800px){
        .div-container{
          width: 95%;
          margin: 5px;
        }
      }

      .result{
        text-align: center;
        padding: 10px;
        color: red;
        font-size: 1em;
        font-weight: bold;
      }

    </style>
  </head>  
  <body>  
    <div class="div-container">
        <div class="title">LÊN LỊCH CHO CHUYẾN ĐI</div>  
        <form id="tripForm">  
          <label for="tripId">Mã chuyến đi:</label>  
          <input type="text" id="tripId" name="tripId" required><br><br>  
          
          <label for="driverId">Mã tài xế:</label>  
          <select id="driverId" name="driverId" onchange="loadDriverInfo()" required>  
            <script>  
              google.script.run.withSuccessHandler(function(options) {  
                document.getElementById('driverId').innerHTML = options;  
              }).getDriverOptions();  
            </script>  
          </select><br><br>  
          
          <label for="driverName">Tên tài xế:</label>  
          <input type="text" id="driverName" name="driverName" readonly><br><br>  
          
          <label for="phoneNumber">Số điện thoại:</label>  
          <input type="text" id="phoneNumber" name="phoneNumber" readonly><br><br>  
          
          <label for="licensePlate">Biển số xe:</label>  
          <input type="text" id="licensePlate" name="licensePlate" readonly><br><br>  
          
          <label for="bookingDate">Ngày đi:</label>  
          <input type="date" id="bookingDate" name="bookingDate" required><br><br>  
          
          <label for="pickupDate">Ngày đón:</label>  
          <input type="date" id="pickupDate" name="pickupDate" required><br><br>  
          <div style="text-align:center">
          <button class="btn" type="button" onclick="submitForm()"> Thêm chuyến đi </button>
          </div>
        </form>  
        <div class="result" id="result"></div>  
     </div>
    <script>  
      function loadDriverInfo() {  
        var driverId = document.getElementById('driverId').value;  
        google.script.run.withSuccessHandler(function(info) {  
          document.getElementById('driverName').value = info.name;  
          document.getElementById('phoneNumber').value = info.phone;  
          document.getElementById('licensePlate').value = info.plate;  
        }).getDriverInfo(driverId);  
      }  
      
      function submitForm() {  
        var formData = {  
          tripId: document.getElementById('tripId').value,  
          driverId: document.getElementById('driverId').value,  
          driverName: document.getElementById('driverName').value,  
          phoneNumber: document.getElementById('phoneNumber').value,  
          licensePlate: document.getElementById('licensePlate').value,  
          bookingDate: document.getElementById('bookingDate').value,  
          pickupDate: document.getElementById('pickupDate').value  
        };  
        
        google.script.run.withSuccessHandler(function(response) {  
          document.getElementById('result').innerText = response;  
          if (response === 'Thêm chuyến đi thành công') {  
            document.getElementById('tripForm').reset();  
          }  
        }).submitForm(formData);  
      }  
    </script>  
  </body>  
</html>