Implement dynamic amenity selection feature

fazzy12 · Dec 30, 2023 · 7a5991f · 7a5991f
1 parent fca5584
commit 7a5991f
Show file tree

Hide file tree

Showing 3 changed files with 156 additions and 0 deletions.
diff --git a/web_dynamic/1-hbnb.py b/web_dynamic/1-hbnb.py
@@ -0,0 +1,48 @@
+#!/usr/bin/python3
+""" Starts a Flash Web Application """
+from models import storage
+from models.state import State
+from models.city import City
+from models.amenity import Amenity
+from models.place import Place
+from os import environ
+from flask import Flask, render_template
+import uuid
+app = Flask(__name__)
+# app.jinja_env.trim_blocks = True
+# app.jinja_env.lstrip_blocks = True
+
+
+@app.teardown_appcontext
+def close_db(error):
+    """ Remove the current SQLAlchemy Session """
+    storage.close()
+
+
+@app.route('/1-hbnb/', strict_slashes=False)
+def hbnb():
+    """ HBNB is alive! """
+    states = storage.all(State).values()
+    states = sorted(states, key=lambda k: k.name)
+    cache_id = str(uuid.uuid4())
+    st_ct = []
+
+    for state in states:
+        st_ct.append([state, sorted(state.cities, key=lambda k: k.name)])
+
+    amenities = storage.all(Amenity).values()
+    amenities = sorted(amenities, key=lambda k: k.name)
+
+    places = storage.all(Place).values()
+    places = sorted(places, key=lambda k: k.name)
+
+    return render_template('1-hbnb.html',
+                           cache_id=cache_id,
+                           states=st_ct,
+                           amenities=amenities,
+                           places=places)
+
+
+if __name__ == "__main__":
+    """ Main Function """
+    app.run(host='0.0.0.0', port=5000)
diff --git a/web_dynamic/static/scripts/1-hbnb.js b/web_dynamic/static/scripts/1-hbnb.js
@@ -0,0 +1,18 @@
+$(document).ready(function () {
+  const selectedAmenities = {};
+
+  $('.amenity-checkbox').change(function () {
+    const amenityId = $(this).closest('li').data('id');
+    const amenityName = $(this).closest('li').data('name');
+
+    if ($(this).is(':checked')) {
+      selectedAmenities[amenityId] = amenityName;
+    } else {
+      delete selectedAmenities[amenityId];
+    }
+
+    // Update the h4 tag with the list of selected amenities
+    const amenitiesList = Object.values(selectedAmenities).join(', ');
+    $('div#Amenities h4').text(amenitiesList);
+  });
+});
diff --git a/web_dynamic/templates/1-hbnb.html b/web_dynamic/templates/1-hbnb.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" type="text/css" href="../static/styles/4-common.css?{{ cache_id }}" />
+    <link rel="stylesheet" type="text/css" href="../static/styles/3-header.css?{{ cache_id }}" />
+    <link rel="stylesheet" type="text/css" href="../static/styles/3-footer.css?{{ cache_id }}" />
+    <link rel="stylesheet" type="text/css" href="../static/styles/6-filters.css?{{ cache_id }}" />
+    <link type="text/css" rel="stylesheet" href="../static/styles/8-places.css?{{ cache_id }}" />
+    <link rel="icon" href="../static/images/icon.png" />
+    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+    <script src="../static/scripts/1-hbnb.js?cache_id={{ cache_id }}"></script>
+    <title>HBnB</title>
+</head>
+
+<body>
+    <header>
+        <div class="logo"></div>
+    </header>
+    <div class="container">
+        <section class="filters">
+            <div class="locations">
+                <h3>States</h3>
+                <h4>&nbsp;</h4>
+                <div class="popover">
+                    <ul>
+                        {% for state in states %}
+                        <li>
+                            <h2>{{ state[0].name }}:</h2>
+                            <ul>
+                                {% for city in state[1] %}
+                                <li>{{ city.name }}</li>
+                                {% endfor %}
+                            </ul>
+                        </li>
+                        {% endfor %}
+                    </ul>
+                </div>
+            </div>
+            <div class="amenities">
+                <h3>Amenities</h3>
+                <h4>&nbsp;</h4>
+                <div class="popover">
+                    <ul>
+                        {% for amenity in amenities %}
+                        <li data-id="{{ amenity.id }}" data-name="{{ amenity.name }}">
+                            <input type="checkbox" class="amenity-checkbox">
+                            {{ amenity.name }}
+                        </li>
+                        {% endfor %}
+                    </ul>
+                </div>
+            </div>
+            <button type="button">Search</button>
+        </section>
+        <div class="placesh1">
+            <h1>Places</h1>
+        </div>
+        <section class="places">
+            <!-- <h1>Places</h1> -->
+            {% for place in places %}
+            <article>
+                <div class="title_box">
+                    <h2>{{ place.name }}</h2>
+                    <div class="price_by_night">${{ place.price_by_night }}</div>
+                </div>
+                <div class="information">
+                    <div class="max_guest">{{ place.max_guest }} Guest{% if place.max_guest != 1 %}s{% endif %}</div>
+                    <div class="number_rooms">{{ place.number_rooms }} Bedroom{% if place.number_rooms != 1 %}s{% endif
+                        %}</div>
+                    <div class="number_bathrooms">{{ place.number_bathrooms }} Bathroom{% if place.number_bathrooms != 1
+                        %}s{% endif %}</div>
+                </div>
+                <div class="user">
+                    <b>Owner:</b> {{ place.user.first_name }} {{ place.user.last_name }}
+                </div>
+                <div class="description">
+                    {{ place.description | safe }}
+                </div>
+            </article>
+            {% endfor %}
+        </section>
+    </div>
+    <footer>
+        <p>Holberton School</p>
+    </footer>
+</body>
+
+</html>