Web App Script | Thanh trạng thái Status bar – Giá trị thể hiện theo điểm và label.

06/02/2025 giaoanppt

Ở project này, giaoan.link sẽ chia sẻ đến bạn một project status bar ở trên web. Ở đây, dữ liệu sẽ được lấy từ dòng dữ liệu trên google sheet – khi giá trị thay đổi thì thanh trạng thái này tự động cập nhật thay đổi.

Có hai dạng hiển thị giá trị trên thanh trạng thái này: 1 – Bạn chỉ hiển thị một giá trị cuối của dòng dữ liệu; 2- Hiển thị toàn bộ giá trị trên dòng dữ liệu.

Bạn có thể lựa chọn một trong hai để phú hợp với nhu cầu công việc của mình. Phía dưới là video deo demo và code của project.

Các project khác, bạn có thể tìm kiếm ở đây.

Các project excel, google sheet ngẫu nhiên:

XEM VIDEO DEMO CỦA PROJECT TRÊN YOUTUBE

Mã code trang “code.gs”

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

function getPointsData() {
  const sheetId = '1DDlLcZpsJynmctbxyTaFE9pRJPuxGyQaB2bBAGIsgZc';
  const sheet = SpreadsheetApp.openById(sheetId).getSheetByName('Data');
  
  if (!sheet) {
    throw new Error('Sheet Data không tồn tại');
  }

  const range = sheet.getRange('A1:G2'); // Lấy hàng đầu tiên cho header và hàng thứ hai cho dữ liệu điểm
  const data = range.getValues();
  return data;
}

Mã code trang “index.html”

<!DOCTYPE html>
<html>
<head>
  <!--Hiển thị tất cả điểm giá trị-->
  <base target="_top">
  <style>
    .div-container{
      width: 900px;
      tex-align: center;
      padding: 30px;
      border: 1px solid grey;
      border-radius: 10px;
      box-shadow: 2px 2px 3px grey;
      margin-left: auto;
      margin-right: auto;

    }
    .progress-container {      
      width: 800px; /* Đảm bảo đủ khoảng cách cho hình tròn nằm cuối đường line */
      height: 20px; /* Tăng chiều cao để đảm bảo không chèn lẫn nhau */
      position: relative;
      margin-top: 50px;
      margin-bottom: 30px; /* Thêm khoảng cách để label không đè lên các thành phần khác */     
      margin-left: auto;
      margin-right: auto;
 
    }

   

    .progress-bar {
      width: 100%;
      height: 5px;
      background-color: #76c7c0;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      z-index: 1; /* Đảm bảo rằng đường line nằm phía sau các hình tròn */
    }

    .progress-point {
      width: 20px;
      height: 20px;
      background-color: #ffc107;
      box-shadow: 1px 1px 2px grey;
      border-radius: 50%;
      position: absolute;
      top: 50%; /* Đảm bảo hình tròn nằm trùng với đường line */
      transform: translateY(-50%);
      z-index: 2; /* Đảm bảo hình tròn nằm phía trên đường line */
    }

    .label {
      position: absolute;
      top: -30px; /* Đặt label ở trên hình tròn */
      background-color: #565454;
      box-shadow: 1px 1px 2px grey;
      color: white;
      padding: 2px 7px;
      border-radius: 3px;
      font-size: 1em;
      white-space: nowrap;
      z-index: 3; /* Đảm bảo label nằm trên hình tròn */
    }

    .title{
      font-size: 2em;
      font-weight: bold;
      color: red;
      text-align: center;
    }
  </style>

 
  <script>
    function loadPoints() {
      google.script.run.withSuccessHandler(function(data) {
        console.log("Data retrieved:", data); // Ghi nhật ký dữ liệu để kiểm tra
        displayPoints(data);
      }).getPointsData();
    }

    function displayPoints(data) {
      const maxPoints = 100;
      const lineWidth = 100;

     // const container = document.createElement('div');
      const container = document.getElementById('progressContainer');
       container.innerHTML = '';
      container.className = 'progress-container';
     

      const line = document.createElement('div');
      line.className = 'progress-bar';
      container.appendChild(line);

      for (let i = 1; i < data[0].length; i++) {
        const value = data[1][i];
        if (value !== "") {
          const percentage = (value / maxPoints) * 100;
          const progress = (lineWidth / 100) * percentage;

          const point = document.createElement('div');
          point.className = 'progress-point';
          point.style.left = progress + 'px';

          const label = document.createElement('div');
          label.className = 'label';
          label.style.left = progress + 'px';
          label.textContent = value;

          container.appendChild(point);
          container.appendChild(label);
        }
      }

      document.getElementById('progressContainer').appendChild(container);
    }


   function startAutoUpdate() {
      loadPoints();
      setInterval(loadPoints, 5000); // Cập nhật mỗi 5 giây
    }

    window.onload = startAutoUpdate;
  </script>
</head>
<body>
  <div class="div-container">
  <div class="title"> Thanh trạng thái </div>
  <div id="progressContainer"></div>
  </div>
</body>
</html>