Angelo

web_dynamic/0-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('/hbnb', strict_slashes=False)
+def hbnb():
+    """ HBNB is alive! """
+    states = storage.all(State).values()
+    states = sorted(states, key=lambda k: k.name)
+    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('0-hbnb.html',
+                           states=st_ct,
+                           amenities=amenities,
+                           places=places,
+                           cache_id=str(uuid.uuid4()))
+
+
+if __name__ == "__main__":
+    """ Main Function """
+    app.run(host='0.0.0.0', port=5000)
+

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('/hbnb', strict_slashes=False)
+def hbnb():
+    """ HBNB is alive! """
+    states = storage.all(State).values()
+    states = sorted(states, key=lambda k: k.name)
+    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',
+                           states=st_ct,
+                           amenities=amenities,
+                           places=places,
+                           cache_id=str(uuid.uuid4()))
+
+
+if __name__ == "__main__":
+    """ Main Function """
+    app.run(host='0.0.0.0', port=5000)
+

web_dynamic/scripts/1-hbnb.js

@@ -0,0 +1,20 @@
+$(document).ready(function () {
+  const maxLength = 30;
+
+  const amenityIdDict = {};
+
+  $('input[type=checkbox]').change(function () {
+    if (this.checked) {
+      amenityIdDict[$(this).data('id')] = $(this).data('name');
+    } else {
+      delete amenityIdDict[$(this).data('id')];
+    }
+
+    const amenityNames = Object.values(amenityIdDict).join(', ');
+    const truncatedText =
+      amenityNames.length > maxLength
+        ? amenityNames.substring(0, maxLength) + '...'
+        : amenityNames;
+    $('.amenities').find('h4').text(truncatedText);
+  });
+});

web_dynamic/static/styles/3-footer.css

@@ -0,0 +1,16 @@
+footer {
+    position: fixed;
+    background: white;
+    height: 60px;
+    width: 100%;
+    bottom: 0;
+    border-top: 1px solid #CCCCCC;
+}
+footer p {
+    position: absolute;
+    text-align: center;
+    top: 10%;
+    bottom: 0;
+    right: 0;
+    left: 0;
+}

web_dynamic/static/styles/3-header.css

@@ -0,0 +1,11 @@
+header {
+    background: white;
+    height: 70px;
+    width: 100%;
+    border-bottom: 1px solid #CCCCCC;
+}
+header .logo {
+    background: url("../images/logo.png") no-repeat;
+    left: 20px;
+    height: 100%;
+}

web_dynamic/static/styles/4-common.css

@@ -0,0 +1,11 @@
+body {
+    margin: 0;
+    padding: 0;
+    color: #484848;
+    font-size: 14px;
+    font-family: Circular,"Helvetica Neue",Helvetica,Arial,sans-serif;
+}
+body .container {
+    max-width: 1000px;
+    margin: 30px auto;
+}

web_dynamic/static/styles/6-filters.css

@@ -0,0 +1,103 @@
+.container .filters {
+    position: relative;
+    background: white;
+    height: 70px;
+    width: 100%;
+    border: 1px solid #DDDDDD;
+    border-radius: 4px;
+}
+button {
+    position: absolute;
+    font-size: 18px;
+    background: #FF5A5F;
+    color: #FFFFFF;
+    height: 48px;
+    width: 20%;
+    border-style: none;
+    border-radius: 4px;
+    top: 15%;
+    right: 30px;
+}
+button:hover {
+    opacity: 0.9;
+}
+.filters div {
+    display: inline-grid;
+}
+.filters h2 {
+    margin-left: 15%;
+    margin-top: 0;
+    margin-bottom: 0;
+    font-weight: 600;
+}
+.filters h3 {
+    margin-left: 15%;
+    margin-bottom: 0;
+    font-weight: 600;
+}
+.filters h4 {
+    margin-left: 15%;
+    margin-top: 0;
+    font-weight: 400;
+    font-size: 14px;
+}
+.locations {
+    height: 100%;
+    width: 25%;
+    border-right: 1px solid #DDDDDD;
+}
+.amenities {
+    height: 100%;
+    width: 25%;
+}
+
+.popover {
+    visibility: hidden;
+    width: 100%;
+    border: 1px solid #DDDDDD;
+    border-radius: 4px;
+    background: #FAFAFA;
+    padding-bottom: 15px;
+    height: 300px;
+    overflow-y: scroll;
+    scrollbar-width: none;
+    max-height: 300px;
+}
+
+.popover::-webkit-scrollbar{
+    width: 0px;
+}
+
+.amenities .popover {
+    padding: 10px 0;
+    margin-left: -5px;
+    margin-top: 0%;
+}
+
+.amenities .popover ul{
+    margin: 0px;
+}
+
+.locations .popover {
+    margin-top: 0%;
+}
+.popover ul {
+    list-style-type: none;
+    padding-bottom: 10px;
+    padding-left: 10px;
+}
+.popover ul li{
+    padding: 4px;
+    padding-left: 10px;
+}
+
+.popover ul h2{
+    margin-top: 1.5%;
+    margin-bottom: 5%;
+    margin-left: 0px;
+}
+
+.amenities:hover .popover,
+.locations:hover .popover {
+    visibility: visible;
+}

web_dynamic/static/styles/8-places.css

@@ -0,0 +1,101 @@
+.places {
+    column-count: 2;
+    columns: 30em;
+    justify-content: center;
+    padding: 0 20px;
+    margin-top: 1%;
+    margin-bottom: 8%;
+}
+@media only screen and (max-width: 920px)
+{
+    .places {
+	display: flex;
+	flex-wrap: wrap;
+    }
+}
+
+.placesh1 h1 {
+    width: 100%;
+    margin-right: 400px;
+    text-align: left;
+    font-size: 35px;
+}
+
+.places article {
+    -webkit-column-break-inside: avoid;
+    page-break-inside: avoid;
+    display: inline-block;
+    width: 390px;
+    height: 100%;
+    padding: 20px;
+    margin: 20px;
+    border: 1px solid #FF5A5F;
+    border-radius: 4px;
+}
+.places h2 {
+    font-size: 30px;
+    text-align: center;
+    margin-top: 0;
+}
+.title_box {
+    display: flex;
+    justify-content: space-between;
+    margin-top: -2%;
+}
+
+.title_box h2 {
+    text-align: left;
+    margin: 25px 3% 40px 2%;
+    max-width: 75%;
+    word-wrap: break-word;
+}
+.price_by_night {
+    display: flex;
+    height: 60px;
+    min-width: 60px;
+    font-size: 30px;
+    justify-content: center;
+    align-items: center;
+    color: #FF5A5F;
+    border: 4px solid #FF5A5F;
+    border-radius: 50%;
+    align-items: center;
+    padding: 2.3%;
+}
+
+.information {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 80px;
+    border-top: 1px solid #DDDDDD;
+    border-bottom: 1px solid #DDDDDD;
+    margin-bottom: 5%;
+}
+
+.information div {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    flex-direction: column;
+    height: 65px;
+}
+
+.information .max_guest {
+    background: url("../images/icon_group.png") no-repeat top center;
+    width: 100px;
+}
+
+.information .number_rooms {
+    background: url("../images/icon_bed.png") no-repeat top center;
+    width: 100px;
+}
+
+.information .number_bathrooms {
+    background: url("../images/icon_bath.png") no-repeat top center;
+    width: 100px;
+}
+
+.user {
+  margin-bottom: 1.5%;
+}