📊 WebData

File: Meesterproef-SNSimulation/js/WebData.js

Description

The WebData class manages web-related data such as battery status and current time. It utilizes the Battery Status API to monitor the battery level and updates the display accordingly. It also regularly updates the current time display on the screen.

Methods

• constructor(): Initializes a new instance of the WebData class, setting up initial battery status and time updates.

  • View Code

• updateBatteryStatus(battery): Updates the battery status display based on the current battery level.

  • Parameters:
    • battery (BatteryManager): The BatteryManager object providing battery status information.
  • Explanation: Updates the battery percentage displayed on the screen and changes the color of the battery level div based on the remaining battery percentage.
  • View Code

• initBatteryStatus(): Initializes the battery status by setting up event listeners for battery level changes.

  • Explanation: Checks if the Battery Status API is available. If it is, sets up event listeners to update the battery status whenever there is a change in the battery charging status or level.
  • View Code

• disableBatteryStatus(): Disables the battery status display if the Battery Status API is not supported.

  • Explanation: Hides the battery status section if the Battery Status API is not available in the user's browser.
  • View Code

• updateTime(): Updates the time display on the screen every minute.

  • Explanation: Updates the current time displayed on the screen, ensuring it reflects the real-time accurately.
  • View Code

Update Battery Status

This guide explains how to use the Battery Status API to monitor and display the battery level on the screen. The updateBatteryStatus function is responsible for updating the battery percentage and adjusting the display accordingly.

Code Explanation

Here is the complete code snippet with detailed comments:

updateBatteryStatus(battery) {
    const level = document.getElementById('level');
    const batteryLevelDiv = document.getElementById('battery-level');

    const percentage = Math.round(battery.level * 100);
    level.textContent = percentage + '%';

    // Update the battery level div width and color
    batteryLevelDiv.style.width = percentage + '%';

    if (percentage > 50) {
        batteryLevelDiv.style.backgroundColor = 'lightgreen';
    } else if (percentage > 20) {
        batteryLevelDiv.style.backgroundColor = 'yellow';
    } else {
        batteryLevelDiv.style.backgroundColor = 'red';
    }
}

Update Time

To update the time we used a web api which updates every minute. The time which is displayed on the phone is similar with the real timezone from Amsterdam.

export default class WebData {
    constructor() {
        this.updateTime();
    }

updateTime() {
        const updateTime = () => {
            const now = new Date();
            const hours = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');
            const timeString = `${hours}:${minutes}`;
            document.getElementById('time').textContent = timeString;
        }

        // Initial call to set the time right away
        updateTime();
        // Update the time every minute
        setInterval(updateTime, 60000);
    }