main-scripts

This section of the documentation elaborates on the JavaScript files within the main-scripts directory. These scripts are crucial for the core operations of the platform, these scripts faciliate the pages in which users can view potential roommates, interact with these recommendations and interact with users they have matched with.

matches.js

matches.js plays a critical role in the renting website’s platform by managing the display and interactions with user matches. It incorporates various utility modules to present matches dynamically, facilitate chat functionalities, and ensure a smooth user experience in reporting and managing matches.

Key Functionalities

  • Dynamic Match Display: Leverages the displayMatches function from the matchUtilitySetup module to fetch and present user matches from the server.

  • Interactive User Experience: Offers functionalities such as initiating chats, reporting matches, and removing matches directly from the user interface.

  • Responsive Navigation: Integrates the setupSideMenu module to enable a responsive side navigation menu, enhancing navigation.

  • Modal Interaction Enhancement: Improves user interaction with modals through window click event listeners, allowing users to easily close contact modals by clicking outside of them.

Integration and Usage

This script integrates seamlessly with the platform’s frontend, ensuring matches are displayed upon the user’s request. The script is structured to wait for the document’s content to be fully loaded before initializing its main functionalities, thus ensuring a consistent user experience.

  • DOMContentLoaded: Waits for the full document to load before initializing form elements and functionalities.

  • Firebase SDK: Required for managing chat functionalities and user authentication, underscoring the script’s reliance on external libraries for critical features.

  • Pikaday Library: Utilized within the match cards for displaying calendar inputs, allowing users to specify availability or view match availability.

recommendations.js

recommendations.js is at the heart of the renting website prototype’s recommendation system, providing a seamless and interactive experience for users exploring potential matches. This script integrates various modules to present user recommendations dynamically, allowing for a rich interaction with geographical data, calendar inputs, and responsive UI elements.

Key Functionalities

  • Dynamic Recommendation Display: Utilizes the RecommendationHandler module to fetch, display, and update user recommendations in response to interactions.

  • Interactive Map and Calendar Views: Integrates with MapManager for displaying geographical preferences and DatePicker for managing viewing move-in dates, offering users a comprehensive view of potential matches.

  • Tabbed Interface for Enhanced Usability: Employs TabHandler for toggling between budget/calendar views and user info/map views, enhancing the user interface with interactive elements.

Integration and Usage

This script acts as a comprehensive framework for managing user recommendations, ensuring that all components work together seamlessly to enhance the user experience.

  • DOMContentLoaded: Waits for the full document to load before initializing form elements and functionalities.

  • setupSideMenu: Enhances site navigation by providing a responsive side menu, ensuring users can easily access different parts of the platform.

  • RecommendationHandler: Central to managing the logic behind fetching and displaying recommendations, adapting to user preferences and interactions.

  • TabHandler: Facilitates seamless transitions between different views within the recommendation interface, such as switching between budget and calendar views or between user info and map views.

  • MapManager: Vital for visualizing geographical data, allowing users to see where potential matches are located in relation to their own preferences.

  • DatePicker: Integrates a calendar functionality within the recommendation interface, enabling users to filter recommendations based on availability.

HTML Integration

The scripts interact with various HTML elements defined in recommendations.html and matches.html. These elements include buttons, containers, and modals, which are manipulated based on user actions and server responses.

<!-- Sample of script inclusion in HTML for recommendations -->
<script type="module" src="../static/scripts/main-scripts/recommendations.js"></script>

For more detailed instructions on usage and customization, refer to the usage and comments within each script and the associated HTML files for context.

See Also

Note

For a complete overview of all modules, visit the modules overview page.