.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 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')) || {};

// Function to reset pictureCounts at midnight
function resetPictureCountsAtMidnight() {
  const now = new Date();
  const midnight = new Date(now);
  let today = new Date();
  let month = String(today.getMonth() + 1).padStart(2, '0'); // Months are zero-based
  let day = String(today.getDate()).padStart(2, '0');
  let formattedDate = `${month}-${day}`;
  let keyWithDate = `pictureCountsData_${formattedDate}`;
  midnight.setHours(24, 0, 0, 0); // Set time to midnight

  const lastResetTime = localStorage.getItem('lastResetTime');
  if (!lastResetTime || new Date(lastResetTime) < now) {
    const timeUntilMidnight = midnight - now;
    setTimeout(() => {
      today = new Date();
      // Get the month and day
      month = String(today.getMonth() + 1).padStart(2, '0'); // Months are zero-based
      day = String(today.getDate()).padStart(2, '0');
      // Create the MM-DD format
      formattedDate = `${month}-${day}`;

      // console.log(formattedDate); // Outputs something like "08-13"
      keyWithDate = `pictureCountsData_${formattedDate}`;
      localStorage.setItem(keyWithDate, JSON.stringify(pictureCounts));
      pictureCounts = {}; // Reset pictureCounts
      localStorage.setItem('lastResetTime', new Date().toISOString()); // Store the reset time
      localStorage.setItem('pictureCounts', JSON.stringify(pictureCounts)); // Store pictureCounts
      resetPictureCountsAtMidnight(); // Schedule the next reset
    }, timeUntilMidnight);
  }
}

// Start the initial reset
resetPictureCountsAtMidnight();

// Save pictureCounts to localStorage when the browser is reloaded or closed
window.addEventListener('beforeunload', () => {
  localStorage.setItem('pictureCounts', JSON.stringify(pictureCounts));
});

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