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

giaoanppt

1 giờ trước

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:

XEM VIDEO DEMO CỦA PROJECT NÀY

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>