Frontend Guide - jjaroztegi/BuildingSignalSimulator GitHub Wiki

Frontend Guide

πŸ‡ͺπŸ‡Έ Ver en espaΓ±ol

Overview

The Building Signal Simulator frontend is built using vanilla JavaScript with ES6 modules, HTML5, and Tailwind CSS. The interface is designed to be responsive, intuitive, and follows modern web development practices.

Project Structure

webapp/
β”œβ”€β”€ index.html              # Main application page
β”œβ”€β”€ css/                    # Stylesheets
β”‚   └── tailwind.css       # Tailwind CSS
β”œβ”€β”€ js/                    # JavaScript files
β”‚   β”œβ”€β”€ script.js          # Main application logic
β”‚   └── modules/           # JavaScript modules
β”‚       β”œβ”€β”€ servlet.js     # API communication
β”‚       β”œβ”€β”€ ui.js         # UI updates
β”‚       β”œβ”€β”€ forms.js      # Form handling
β”‚       β”œβ”€β”€ tabs.js       # Tab navigation
β”‚       β”œβ”€β”€ theme.js      # Theme switching
β”‚       └── utils.js      # Utility functions
└── assets/               # Images and other assets

UI Components

1. Main Layout

The application uses a tab-based interface with four main sections:

<div class="container mx-auto">
    <div class="tabs">
        <button class="tab-button" data-tab="configuration">Configuration</button>
        <button class="tab-button" data-tab="components">Components</button>
        <button class="tab-button" data-tab="simulation">Simulation</button>
        <button class="tab-button" data-tab="results">Results</button>
    </div>
    <div class="tab-content">
        <!-- Tab content here -->
    </div>
</div>

2. Configuration Tab

Features for building setup and configuration:

<div id="configuration" class="tab-panel">
    <form id="config-form">
        <div class="form-group">
            <label>Building Name</label>
            <input type="text" name="nombre" required />
        </div>
        <div class="form-group">
            <label>Number of Floors</label>
            <input type="number" name="num_pisos" required />
        </div>
        <div class="form-group">
            <label>Head-end Level (dB)</label>
            <input type="number" name="nivel_cabecera" required />
        </div>
        <button type="submit">Save Configuration</button>
    </form>
</div>

3. Components Tab

Component selection and configuration interface:

<div id="components" class="tab-panel">
    <div class="component-types">
        <button data-type="coaxial">Cable Coaxial</button>
        <button data-type="toma">Base de Toma</button>
        <button data-type="derivador">Derivador</button>
        <button data-type="distribuidor">Distribuidor</button>
    </div>
    <div class="component-list">
        <!-- Component list here -->
    </div>
    <div class="component-details">
        <!-- Component details form -->
    </div>
</div>

4. Simulation Tab

Interactive simulation interface:

<div id="simulation" class="tab-panel">
    <div class="building-layout">
        <!-- Floor layout -->
    </div>
    <div class="component-palette">
        <!-- Component drag-and-drop -->
    </div>
    <button id="calculate">Calculate Signal Levels</button>
</div>

5. Results Tab

Results display with visual feedback:

<div id="results" class="tab-panel">
    <div class="signal-levels">
        <!-- Signal level display -->
    </div>
    <div class="cost-analysis">
        <!-- Cost breakdown -->
    </div>
    <div class="optimization">
        <!-- Optimization suggestions -->
    </div>
</div>

JavaScript Modules

1. servlet.js

Handles API communication:

// servlet.js
export class ApiService {
    static async getComponents(type) {
        const response = await fetch(`/components?type=${type}`);
        return response.json();
    }

    static async calculateSignal(config) {
        const response = await fetch("/calculate", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify(config),
        });
        return response.json();
    }
}

2. ui.js

Manages UI updates:

// ui.js
export class UiManager {
    static updateSignalLevel(floor, level, status) {
        const element = document.querySelector(`#floor-${floor}`);
        element.textContent = `${level} dB`;
        element.className = `signal-level ${status}`;
    }

    static showError(message) {
        // Error display logic
    }
}

3. forms.js

Form handling and validation:

// forms.js
export class FormHandler {
    static validateConfig(form) {
        // Validation logic
    }

    static serializeForm(form) {
        // Form serialization
    }
}

4. tabs.js

Tab navigation management:

// tabs.js
export class TabManager {
    constructor() {
        this.tabs = document.querySelectorAll(".tab-button");
        this.panels = document.querySelectorAll(".tab-panel");
        this.init();
    }

    init() {
        this.tabs.forEach((tab) => {
            tab.addEventListener("click", () => {
                this.switchTab(tab.dataset.tab);
            });
        });
    }

    switchTab(tabId) {
        // Tab switching logic
    }
}

5. theme.js

Theme switching functionality:

// theme.js
export class ThemeManager {
    constructor() {
        this.darkMode = false;
        this.init();
    }

    init() {
        // Check system preference
        this.darkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
        this.applyTheme();
    }

    toggleTheme() {
        this.darkMode = !this.darkMode;
        this.applyTheme();
    }

    applyTheme() {
        document.documentElement.classList.toggle("dark", this.darkMode);
    }
}

6. utils.js

Utility functions:

// utils.js
export const formatDecimal = (number, decimals = 2) => {
    return Number(number).toFixed(decimals);
};

export const validateSignalLevel = (level, margins) => {
    return level >= margins.min && level <= margins.max;
};

Styling with Tailwind CSS

1. Theme Configuration

// tailwind.config.js
module.exports = {
    darkMode: "class",
    theme: {
        extend: {
            colors: {
                primary: "#4F46E5",
                secondary: "#10B981",
                error: "#EF4444",
                warning: "#F59E0B",
                success: "#10B981",
            },
        },
    },
};

2. Common Classes

<!-- Button styles -->
<button class="px-4 py-2 bg-primary text-white rounded hover:bg-primary-dark">Button</button>

<!-- Form input styles -->
<input class="w-full px-3 py-2 border rounded focus:ring-2 focus:ring-primary" />

<!-- Card styles -->
<div class="p-4 bg-white dark:bg-gray-800 rounded shadow">
    <!-- Card content -->
</div>

3. Dark Mode Support

<!-- Dark mode toggle -->
<button id="theme-toggle" class="theme-toggle">
    <svg class="w-6 h-6 dark:hidden"><!-- Light mode icon --></svg>
    <svg class="w-6 h-6 hidden dark:block"><!-- Dark mode icon --></svg>
</button>

<!-- Dark mode styles -->
<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
    <!-- Content -->
</div>

Best Practices

1. Performance

  • Use event delegation
  • Minimize DOM manipulation
  • Cache DOM queries
  • Debounce frequent events

2. Accessibility

  • Use semantic HTML
  • Include ARIA attributes
  • Ensure keyboard navigation
  • Maintain color contrast

3. Code Organization

  • Follow modular design
  • Use consistent naming
  • Document complex logic
  • Keep functions focused

4. Error Handling

  • Validate user input
  • Show clear error messages
  • Handle API errors gracefully
  • Log errors for debugging

Testing

1. Manual Testing

  • Cross-browser testing
  • Responsive design testing
  • Feature testing
  • Error scenario testing

2. Automated Testing

  • Unit tests for modules
  • Integration tests
  • End-to-end tests
  • Performance testing

Browser Support

  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Edge (latest)

Future Enhancements

  1. UI Improvements

    • Enhanced visualizations
    • Interactive 3D view
    • Drag-and-drop interface
    • Real-time updates

  2. Performance

    • Code splitting
    • Lazy loading
    • Service workers
    • Offline support

  3. Features

    • Advanced filtering
    • Custom reports
    • Data export
    • User preferences
⚠️ **GitHub.com Fallback** ⚠️