.flex-fill {
        flex: 1;
    }

    .border-grid {
        border: 1px solid #ddd;
    }

    .middle-content {
        display: grid;
        grid-template-rows: repeat(3, 1fr);
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        flex-grow: 1;
        padding: 10px;
        background-color: #272822; /* Monokai Dark background color */
    }

    .middle-column {
        border: 1px solid #ddd;
        padding: 10px;
        display: flex;
        flex-direction: column;
        overflow: auto; /* Enable scrolling for content */
        word-wrap: break-word; /* Wrap long words */
        background-color: #2C2D2E; /* Monokai Dark column background color */
        color: #F8F8F2; /* Text color for Monokai Dark theme */
    }

    .cell-content {
        flex-grow: 1;
    }
</style>

const socket = io('http://hc4nas01.yushei.com.tw:48597'); // Connect to the backend WebSocket server

const maxEntries = 1; // Set the maximum number of visible entries

// Create an object to store picture counts for each cameraSource
let pictureCounts = JSON.parse(localStorage.getItem('pictureCounts')) || {};

socket.on('saveAndResetPictureCounts', (message) => {
  let now = new Date(); // this fucion has been called
  console.log("saveAndResetPictureCounts was called" + now.toISOString());
  let keyYesterday =
  `pictureCountsData_${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate() - 1).padStart(2, '0')}`;

  // save yessterday's
  localStorage.setItem(keyYesterday, JSON.stringify(pictureCounts));
  localStorage.setItem('lastResetTime', now.toISOString()); // Store the reset time
  localStorage.setItem('pictureCounts', JSON.stringify(pictureCounts)); // Store pictureCounts
  // reset pictureCounts
  pictureCounts = {}; // Reset pictureCounts

  const messageDiv = document.getElementById('row3-col1');
  messageDiv.textContent = message;
});

socket.on('change', (change) => {
  const { operationType, fullDocument } = change;

  if (operationType === 'insert') {
    const { _id, plateText, cameraSource, inTime, inCarJpg } = fullDocument;

    // Get the target cell based on cameraSource
    let targetCellId;
    if (cameraSource == 1) {
      targetCellId = 'row1-col2';
    } else if (cameraSource == 2) {
      targetCellId = 'row2-col1';
    } else if (cameraSource == 3) {
      targetCellId = 'row2-col2';
    }

    const changesDiv = document.getElementById(targetCellId);

    // const changesDiv = document.getElementById('row1-col1');
    pictureCounts[cameraSource] = (pictureCounts[cameraSource] || 0) + 1;

    // Create a new entry
    const changeElement = document.createElement('div');
    // p>Change ID: ${_id}</p>
    changeElement.innerHTML = `
      <p>Plate Text: ${plateText}</p>
      <p>Camera Source: ${cameraSource}</p>
      <p>Toal Pictures Taken: ${pictureCounts[cameraSource]}</p>
      <p>In Time: ${inTime}</p>
      <p><img src="data:image/jpeg;base64,${inCarJpg}" alt="Car Image" width="200"></p>
      <hr>
    `;

    // Limit the number of visible entries
    while (changesDiv.children.length >= maxEntries) {
      changesDiv.removeChild(changesDiv.lastChild);
    }

    // Insert the new entry at the top
    changesDiv.insertBefore(changeElement, changesDiv.firstChild);
  }
});


// Listen for the replicationStatus event

socket.on('replicationStatus', (simpleLog) => { const rsStatusDiv = document.getElementById('row1-col1');

// Create a new entry const rsStatusElement = document.createElement('div'); rsStatusElement.innerHTML = <p><strong>Replication Status:</strong></p> <table class="table table-bordered"> <thead> <tr> <th>_id</th> <th>Name</th> <th>Health</th> <th>State</th> <th>StateStr</th> </tr> </thead> <tbody> ${simpleLog.map(member => ${member._id} ${member.name} ${member.health} ${member.state} ${member.stateStr} ).join('')} </tbody> </table> <p><em>Last Updated: ${new Date().toLocaleString()}</em></p> <hr> ;

// Limit the number of visible entries while (rsStatusDiv.children.length >= maxEntries) { rsStatusDiv.removeChild(rsStatusDiv.lastChild); }

// Insert the new entry at the top rsStatusDiv.insertBefore(rsStatusElement, rsStatusDiv.firstChild); });

</script>



<footer class="bg-dark text-white p-3">Bottom Bar</footer>

Return to Top