meeting.js

Overview

The meeting.js file serves as a dynamic cost and elapsed time visualization component within the meeting cost tracking system. It exports a single default function responsible for rendering up-to-date meeting cost data and elapsed time in the user interface. This function accepts a Meeting instance and a clear flag to either display or reset the visual output.

This module plays a crucial role in the Dynamic Cost Visualization process by formatting the meeting's ongoing cost, burn rates (cost per minute and per second), and elapsed time into a user-friendly HTML snippet. It then updates the DOM element designated for cost display (.cost) efficiently using requestAnimationFrame to ensure smooth UI performance.

Exported Function

Default Exported Function

(meeting = new Meeting(), clear = false) => { ... }

Purpose

• Renders the current meeting cost, cost burn rates, and elapsed time into the UI.

• Clears the display if the clear flag is set to true.

• Optimizes DOM updates with window.requestAnimationFrame.

Parameters

• meeting (Meeting instance, optional):
  The meeting object providing data for total cost, burn rates, and elapsed time.
  Defaults to a new Meeting instance if not provided.

• clear (boolean, optional):
  Flag indicating whether to clear the display output (true) or render the cost/time info (false).
  Defaults to false.

Returns

• No return value. The function updates the inner HTML of the .cost element asynchronously.

Usage Example

import renderMeetingCost from './meeting.js';
import Meeting from '../models/meeting.js';

const currentMeeting = new Meeting();
renderMeetingCost(currentMeeting); // Render current cost/time

// To clear the display:
renderMeetingCost(currentMeeting, true);

Internal Functions

format_time(timeInSeconds)

Purpose

Converts elapsed time in seconds into a formatted, human-readable string comprising multiple time units (seconds, minutes, hours, days, months, years).

Algorithm and Implementation Details

• Uses an array of conversion factors representing time units and their divisors in ascending order of magnitude:

  const conversionFactors = [{ s: 60 }, { m: 60 }, { h: 24 }, { d: 30 }, { m: 12 }];
  

  This corresponds to:

  • 60 seconds in a minute (s)

  • 60 minutes in an hour (m)

  • 24 hours in a day (h)

  • 30 days in a month (d)

  • 12 months in a year (m)

• Uses Array.reduce() to iteratively divide the total seconds by each divisor, extracting the remainder for each time unit and appending it to the output string in descending order.

• The output string concatenates non-zero time units with their corresponding shorthand labels, e.g., "1h 15m 30s".

• If after division there is a remainder (years), it appends this as "Xy" (years).

Parameters

• timeInSeconds (number): Elapsed time in seconds to format.

Returns

• string: A formatted string representing the elapsed time in years, months, days, hours, minutes, and seconds.

Example Outputs

• format_time(3723) → "1h 2m 3s"

• format_time(86400) → "1d "

• format_time(0) → ""

Implementation Details and Workflow

Rendering Logic

• The function conditionally builds an HTML snippet (html) based on the clear flag:

  • If clear is true, the HTML string is empty (''), effectively clearing the display.

  • If clear is false, it constructs an HTML block comprising:

    • The total cost of the meeting formatted as dollars with two decimals.

    • The burn rate per minute and per second, both formatted with four decimals.

    • The formatted elapsed time string from format_time().

• It queries the DOM for the .cost element — the container where the cost/time info is displayed.

• It uses window.requestAnimationFrame() to asynchronously update the .cost element's innerHTML with the constructed HTML string. This method helps avoid layout thrashing and ensures smooth UI updates without jank.

Interaction with Meeting Model

• Calls these methods on the Meeting instance to retrieve data:

  • meeting.getTotalCost() — returns the total cost accrued so far.

  • meeting.burnPerMinute() — returns the cost burn rate per minute.

  • meeting.burnPerSecond() — returns the cost burn rate per second.

  • meeting.getTotalTime() — returns the total elapsed meeting time in seconds.

These methods are part of the Real-Time Meeting Cost Tracking system (79640) and rely on the meeting's incremental cost calculation and lifecycle management.

Interaction with Other Components

• The .cost DOM element targeted by this module is part of the user interface managed primarily via the User Interaction and Interface subtopic (79639).

• This view rendering function is typically called repeatedly at regular intervals (e.g., every 100 ms) by the main application or UI event handlers to provide a live update of meeting cost and time.

• It complements the Meeting Lifecycle Management subtopic (79643) by reflecting real-time changes as the meeting starts, pauses, stops, or resets.

• This module is a key component of the Dynamic Cost Visualization (79642) subtopic, responsible for translating model data into a readable and continuously refreshed UI element.

Mermaid Diagram: Structure of meeting.js

classDiagram
class MeetingView {
+format_time(timeInSeconds)
+(meeting = new Meeting(), clear = false)
-conversionFactors: array
-html: string
-renderedCost: HTMLElement
}

• MeetingView represents the exported function encapsulating:

  • The private helper method format_time.

  • The main rendering logic that updates the .cost element.

  • Uses an internal array of conversion factors for time formatting.

This diagram shows the single functional structure of this utility view module.

References to Relevant Topics

• For detailed behavior and methods of the Meeting class used in this module, refer to Real-Time Meeting Cost Tracking (79640).

• For understanding how this rendering function fits within the UI update loop and event handling, see User Interaction and Interface (79639).

• The time formatting logic here is a crucial part of the Dynamic Cost Visualization subtopic (79642), which focuses on presenting meeting cost/time data live to users.

This file provides a focused, efficient, and user-friendly presentation of meeting cost data, leveraging well-defined model computations and integrating tightly with the UI for seamless real-time feedback.