Skip to content

Commit

Permalink
Update codeDocumentation.md
Browse files Browse the repository at this point in the history
  • Loading branch information
tonyjurg authored Aug 8, 2024
1 parent 0ae6459 commit 8ff349a
Showing 1 changed file with 27 additions and 29 deletions.
56 changes: 27 additions & 29 deletions docs/codeDocumentation.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,86 +7,84 @@ The provided codebase consists of two primary files: `index.js` (running on the

Together, these files create a web-based interface for using Tasmota-powered devices as a timer. The following description outlines the functionality and interactions between these files.

# index.html
# File: index.html

The `index.html` file is a web page designed to control the timerfunction on a Tasmota devices via a simple user interface. It contains several HTML elements, JavaScript functions, and CSS references to facilitate control and status monitoring of the Tasmota timer. This part is rendered and executed at the client side, to create a GUI and define actions for its control elements. The static file index.html together with the ascociated stylesheet (`index.css`) are served by a call to index.js.

<details>
<summary><b>Details on HTML Structure</b></summary>
##Details on HTML Structure

<br><b>Head Section:</b><br>
*Head Section:*
<ul><li>Sets up meta tags for character set and viewport settings.
</li><li>Includes app title and links to an external CSS stylesheet for styling (<code>index.css</code>).
</li></ul>

<b>Body Section:</b>
*Body Section:*
<ul><li>Formats app including its title image (header.png).
</li><li>A <code>div</code> with the ID <code>controls</code> including a dropdown menu for selecting a device, a switch to toggle device power, Inputs for setting timer duration in hours and minutes and Buttons to set and clear timers.
</li><li>A <code>div</code> with the ID <code>log</code> displays the current timer status, last user action, and error messages when aplicable.
</li></ul>
</details>

<details>
<summary><b>Details on JavaScript functionality</b></summary>
<br>Embedded within the HTML file, the JavaScript handles the interaction logic:
Embedded within the HTML file, the JavaScript handles the interaction using the following logic:

<br><b>Initialization and WebSocket Setup:</b>
*Initialization and WebSocket Setup:*
<ul><li>The WebSocket connection is established with the server.
</li><li>Functions to update the device status and handle WebSocket events are defined.
</li></ul>

<b>Device Control Functions:</b>
*Device Control Functions:*
<ul><li><code>togglePower()</code>: Toggles the power state of the selected device and updates the status display.
</li><li><code>setTimerWithDelta()</code>: Sets a timer based on user input for hours and minutes and enables timers on the device.
</li><li><code>clearTimer()</code>: Clears any active timers on the device and updates the status display.
</li><li><code>updateDeviceStatus()</code>: Fetches and displays the current power and timer status of the selected device.
</li><li><code>deviceChanged()</code>: Updates the status display when a different device is selected.
</li></ul>

<b>Utility Functions:</b>
*Utility Functions:*
<ul><li><code>getLocalTimeString()</code>: Returns the current local time as a formatted string.
</li><li><code>getSelectedDevice()</code>: Retrieves the currently selected device from the dropdown menu.
</li><li><code>sendCommand()</code>: Sends commands to the server to interact with the device, handling responses and errors appropriately.
</li></ul>

<b>Event Listeners:</b>
*Event Listeners:*
<ul><li>On page load, the list of devices is fetched from the server, and the first device is selected by default.
</li><li>Periodic updates to device status are set to occur every minute.
</li></ul>
</details>

# index.js
# File: index.js

The <code>index.js</code> file implements the server-side logic using Node.js, handling HTTP requests to interact with Tasmota devices. It reads configuration settings, manages user authentication, and serves static files and API endpoints. This part is executed at the server side.
The <code>index.js</code> file implements the server-side logic using Node.js, handling HTTP requests to interact with Tasmota devices. It reads configuration settings, manages user authentication, and serves static files and API endpoints. This part is executed at the server side. The following functionality is provided:

<details>
<summary><b>Server Setup and Configuration</b></summary>
## Server Setup and Configuration

Dependencies and Initialization:*

<br><b>Dependencies and Initialization:</b>
<ul><li>Requires essential modules: <code>http</code>, <code>fs</code>, <code>path</code>, <code>crypto</code>, and <code>url</code>.
</li><li>Initializes server settings like hostname, port, and debug mode.
</li><li>Defines utility functions for password hashing, input sanitization, and authentication.
</li></ul>

<b>Configuration File Loading:</b><br><br>
*Configuration File Loading:*

Reads and parses <code>config.json</code> and <code>settings.json</code> to load user credentials and device accounts.<br>
</details>

<details>
<summary><b>HTTP Server</b></summary>
<br>
<b>Server Creation:</b><br><br>

## HTTP Server

*Server Creation:*

Creates an HTTP server to listen for incoming requests.<br>

<b>Request Handling:</b><br><br>
*Request Handling:*

Handles different routes based on the request URL:
<ul><li><code>POST /login</code>: Authenticates users using credentials from the request body.
</li><li>Serves static files (<code>index.html</code>, <code>styles.css</code>, <code>favicon.ico</code>, and <code>header.png</code>).
</li><li><code>GET /devices</code>: Returns a list of available Tasmota devices defined in <code>settings.json</code>.
</li><li>The following device-specific routes are defined (<code>/setPower</code>, <code>/getTime</code>, <code>/setTimer</code>, <code>/clearTimer</code>, <code>/getTimerStatus</code>, <code>/getPowerStatus</code>, <code>/enableTimers</code>, <code>/disableTimers</code>).
</li></ul>

<b>Command Execution:</b>
*Command Execution:*

Defines functions to handle device commands:
<ul><li><code>handleSetPower()</code>: Sets the power state of a device.
</li><li><code>handleSetTimer()</code>: Sets a timer on a device.
Expand All @@ -95,7 +93,8 @@ Handles different routes based on the request URL:
</li><li><code>handleEnableTimers()</code>, <code>handleDisableTimers()</code> Enables or disables timers on a device.
</li></ul>

<b>Utility Functions:</b>
*Utility Functions:*

<ul><li><code>isAuthorized()</code>: Checks if a request contains valid authentication credentials.
</li><li><code>serveStaticFile()</code>: Serves static files from the server's public directory.
</li><li><code>logMessage()</code>: Logs messages to a file if debug mode is enabled.
Expand All @@ -104,7 +103,6 @@ Handles different routes based on the request URL:
</li><li><code>getCurrentDeviceTime()</code>: Get the current time from the Tasmota device.
</li><li><code>sanitizeInput()</code>: Sanitize input to prevent XSS attacks.
</li></ul>
</details>

## Logging and Debugging

Expand Down

0 comments on commit 8ff349a

Please sign in to comment.