diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000000..316ac1f1fb4 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +v4/ +installer.sh + diff --git a/README.md b/README.md index ae0c24c98f4..9648b8ba35c 100644 --- a/README.md +++ b/README.md @@ -158,6 +158,8 @@ Alexa Orrico - [Github](https://github.com/alexaorrico) / [Twitter](https://twit Jennifer Huang - [Github](https://github.com/jhuang10123) / [Twitter](https://twitter.com/earthtojhuang) Jhoan Zamora - [Github](https://github.com/jzamora5) / [Twitter](https://twitter.com/JhoanZamora10) David Ovalle - [Github](https://github.com/Nukemenonai) / [Twitter](https://twitter.com/disartDave) +Lawson Omoregbee - [Github](https://github.com/Lawsonredeye) / [Twitter](https://twitter.com/LawsonRedeye) +Justin Ebedi - [Github](https://github.com/La-Programmer) Second part of Airbnb: Joann Vuong ## License diff --git a/set.sh b/set.sh new file mode 100644 index 00000000000..7d10f676b68 --- /dev/null +++ b/set.sh @@ -0,0 +1,9 @@ +#!/usr/bin/bash +# - used for setting up flask web dynamics + +mkdir -p web_dynamic +cp -r web_flask/static web_flask/templates/100-hbnb.html web_flask/__init__.py web_flask/100-hbnb.py web_dynamic +mv web_dynamic/100-hbnb.py web_dynamic/0-hbnb.py +mv web_dynamic/100-hbnb.html web_dynamic/0-hbnb.html + +sed -i "s#/hbnb#/0-hbnb/#g" web_dynamic/0-hbnb.py \ No newline at end of file diff --git a/web_dynamic/0-hbnb.py b/web_dynamic/0-hbnb.py new file mode 100755 index 00000000000..cc169aef498 --- /dev/null +++ b/web_dynamic/0-hbnb.py @@ -0,0 +1,46 @@ +#!/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 +from uuid import uuid4 +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('/0-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=uuid4()) + + +if __name__ == "__main__": + """ Main Function """ + app.run(host='0.0.0.0', port=5000) diff --git a/web_dynamic/1-hbnb.py b/web_dynamic/1-hbnb.py new file mode 100755 index 00000000000..6dd7bd437fe --- /dev/null +++ b/web_dynamic/1-hbnb.py @@ -0,0 +1,46 @@ +#!/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 +from uuid import uuid4 +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) + 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=uuid4()) + + +if __name__ == "__main__": + """ Main Function """ + app.run(debug=True, host='0.0.0.0', port=5000) diff --git a/web_dynamic/2-hbnb.py b/web_dynamic/2-hbnb.py new file mode 100755 index 00000000000..6bb3ccc43b6 --- /dev/null +++ b/web_dynamic/2-hbnb.py @@ -0,0 +1,46 @@ +#!/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 +from uuid import uuid4 +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('/2-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('2-hbnb.html', + states=st_ct, + amenities=amenities, + places=places, cache_id=uuid4()) + + +if __name__ == "__main__": + """ Main Function """ + app.run(debug=True, host='0.0.0.0', port=5000) diff --git a/web_dynamic/__init__.py b/web_dynamic/__init__.py new file mode 100755 index 00000000000..e69de29bb2d diff --git a/web_dynamic/__pycache__/0-hbnb.cpython-38.pyc b/web_dynamic/__pycache__/0-hbnb.cpython-38.pyc new file mode 100644 index 00000000000..50e88301e8a Binary files /dev/null and b/web_dynamic/__pycache__/0-hbnb.cpython-38.pyc differ diff --git a/web_dynamic/__pycache__/1-hbnb.cpython-38.pyc b/web_dynamic/__pycache__/1-hbnb.cpython-38.pyc new file mode 100644 index 00000000000..d11dcd4625c Binary files /dev/null and b/web_dynamic/__pycache__/1-hbnb.cpython-38.pyc differ diff --git a/web_dynamic/__pycache__/2-hbnb.cpython-38.pyc b/web_dynamic/__pycache__/2-hbnb.cpython-38.pyc new file mode 100644 index 00000000000..1ff38cb5518 Binary files /dev/null and b/web_dynamic/__pycache__/2-hbnb.cpython-38.pyc differ diff --git a/web_dynamic/__pycache__/__init__.cpython-38.pyc b/web_dynamic/__pycache__/__init__.cpython-38.pyc new file mode 100644 index 00000000000..ba0f184bea6 Binary files /dev/null and b/web_dynamic/__pycache__/__init__.cpython-38.pyc differ diff --git a/web_dynamic/static/images/icon.png b/web_dynamic/static/images/icon.png new file mode 100644 index 00000000000..93492bb8df2 Binary files /dev/null and b/web_dynamic/static/images/icon.png differ diff --git a/web_dynamic/static/images/icon_bath.png b/web_dynamic/static/images/icon_bath.png new file mode 100644 index 00000000000..7a9bfed9d8d Binary files /dev/null and b/web_dynamic/static/images/icon_bath.png differ diff --git a/web_dynamic/static/images/icon_bed.png b/web_dynamic/static/images/icon_bed.png new file mode 100644 index 00000000000..2a632848770 Binary files /dev/null and b/web_dynamic/static/images/icon_bed.png differ diff --git a/web_dynamic/static/images/icon_group.png b/web_dynamic/static/images/icon_group.png new file mode 100644 index 00000000000..3e012ab4d5c Binary files /dev/null and b/web_dynamic/static/images/icon_group.png differ diff --git a/web_dynamic/static/images/logo.png b/web_dynamic/static/images/logo.png new file mode 100644 index 00000000000..9b255c95555 Binary files /dev/null and b/web_dynamic/static/images/logo.png differ diff --git a/web_dynamic/static/scripts/1-hbnb.js b/web_dynamic/static/scripts/1-hbnb.js new file mode 100644 index 00000000000..9496b44ed20 --- /dev/null +++ b/web_dynamic/static/scripts/1-hbnb.js @@ -0,0 +1,29 @@ +$(document).ready(function () { + const listElement = $('.amenities div.popover ul li input'); + let amenityList = []; + let amenityListName = []; + listElement.click(function() { + if ($(this).is(':checked')) { + console.log(amenityList); // DEBUG PRINT + amenityList.push($(this).attr("data-id")); + amenityListName.push($(this).attr("data-name")) + console.log(amenityListName); // DEBUG PRINT + updateH4(amenityListName); + } else { + console.log(amenityList); // DEBUG PRINT + const elementAttr = listElement.attr("data-id"); + const elementIndex = amenityList.indexOf(elementAttr); + console.log(elementIndex); // DEBUG PRINT + amenityList.splice(elementIndex, 1); + console.log(amenityList); // DEBUG PRINT + updateH4(amenityList); + } + }); + + function updateH4(list) { + const headerElement = $(".amenities h4"); + amenityListString = list.join(", "); + console.log(amenityListString); + headerElement.text(amenityListString); + }; +}); diff --git a/web_dynamic/static/scripts/2-hbnb.js b/web_dynamic/static/scripts/2-hbnb.js new file mode 100644 index 00000000000..f3567d05b7d --- /dev/null +++ b/web_dynamic/static/scripts/2-hbnb.js @@ -0,0 +1,41 @@ +$(document).ready(function () { + const listElement = $('.amenities div.popover ul li input'); + let amenityList = []; + let amenityListName = []; + listElement.click(function() { + if ($(this).is(':checked')) { + console.log(amenityList); // DEBUG PRINT + amenityList.push($(this).attr("data-id")); + amenityListName.push($(this).attr("data-name")) + console.log(amenityListName); // DEBUG PRINT + updateH4(amenityListName); + } else { + console.log(amenityList); // DEBUG PRINT + const elementAttr = listElement.attr("data-id"); + const elementIndex = amenityList.indexOf(elementAttr); + console.log(elementIndex); // DEBUG PRINT + amenityList.splice(elementIndex, 1); + console.log(amenityList); // DEBUG PRINT + updateH4(amenityList); + } + }); + + function updateH4(list) { + const headerElement = $(".amenities h4"); + amenityListString = list.join(", "); + console.log(amenityListString); + headerElement.text(amenityListString); + }; + + $.ajax({ + url: 'http://0.0.0.0:5001/api/v1/status/', + success: function (data) { + indicator = $('#api_status'); + if (data.status == "OK") { + indicator.addClass("available"); + } else { + indicator.removeClass("available"); + } + } + }); + }); diff --git a/web_dynamic/static/styles/3-footer.css b/web_dynamic/static/styles/3-footer.css new file mode 100644 index 00000000000..2cd4ff05d90 --- /dev/null +++ b/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; +} diff --git a/web_dynamic/static/styles/3-header.css b/web_dynamic/static/styles/3-header.css new file mode 100644 index 00000000000..4667a2c3cfd --- /dev/null +++ b/web_dynamic/static/styles/3-header.css @@ -0,0 +1,27 @@ +header { + background: white; + height: 70px; + width: 100%; + display: grid; + grid-template-columns: 95% 5%; + border-bottom: 1px solid #CCCCCC; +} + +header .logo { + background: url("../images/logo.png") no-repeat; + left: 20px; + height: 100%; +} + +header #api_status { + border-radius: 100%; + height: 40px; + margin-top: 22%; + width: 40px; + margin-right: 30px; + background-color: #CCCCCC; +} + +.available { + background-color: #ff545f; +} diff --git a/web_dynamic/static/styles/4-common.css b/web_dynamic/static/styles/4-common.css new file mode 100644 index 00000000000..46cfc19d1c1 --- /dev/null +++ b/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; +} diff --git a/web_dynamic/static/styles/6-filters.css b/web_dynamic/static/styles/6-filters.css new file mode 100644 index 00000000000..0383e702dfe --- /dev/null +++ b/web_dynamic/static/styles/6-filters.css @@ -0,0 +1,114 @@ +.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; + width: 300px; + position: absolute; + margin-left: -5px; + margin-top: 70px; +} + +.amenities .popover ul{ + margin: 0px; +} + +.amenities h4 { + margin-top: 5px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + height: fit-content; + width: 150%; +} + +.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; +} diff --git a/web_dynamic/static/styles/8-places.css b/web_dynamic/static/styles/8-places.css new file mode 100644 index 00000000000..9dac66c0d7f --- /dev/null +++ b/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%; +} diff --git a/web_dynamic/static/styles/w3c_validator.py b/web_dynamic/static/styles/w3c_validator.py new file mode 100755 index 00000000000..ee9593fce40 --- /dev/null +++ b/web_dynamic/static/styles/w3c_validator.py @@ -0,0 +1,123 @@ +#!/usr/bin/python3 +""" +W3C validator for Holberton School + +For HTML and CSS files. + +Based on 2 APIs: + +- https://validator.w3.org/nu/ +- http://jigsaw.w3.org/css-validator/validator + + +Usage: + +Simple file: + +``` +./w3c_validator.py index.html +``` + +Multiple files: + +``` +./w3c_validator.py index.html header.html styles/common.css +``` + +All errors are printed in `STDERR` + +Return: +Exit status is the # of errors, 0 on Success + +References + +https://developer.mozilla.org/en-US/ + +""" +import sys +import requests + + +def __print_stdout(msg): + """Print message in STDOUT + """ + sys.stdout.write(msg) + + +def __print_stderr(msg): + """Print message in STDERR + """ + sys.stderr.write(msg) + + +def __analyse_html(file_path): + """Start analyse of HTML file + """ + h = {'Content-Type': "text/html; charset=utf-8"} + d = open(file_path, "rb").read() + u = "https://validator.w3.org/nu/?out=json" + r = requests.post(u, headers=h, data=d) + res = [] + messages = r.json().get('messages', []) + for m in messages: + res.append("[{}:{}] {}".format(file_path, m['lastLine'], m['message'])) + return res + + +def __analyse_css(file_path): + """Start analyse of CSS file + """ + d = {'output': "json"} + f = {'file': (file_path, open(file_path, 'rb'), 'text/css')} + u = "http://jigsaw.w3.org/css-validator/validator" + r = requests.post(u, data=d, files=f) + res = [] + errors = r.json().get('cssvalidation', {}).get('errors', []) + for e in errors: + res.append("[{}:{}] {}".format(file_path, e['line'], e['message'])) + return res + + +def __analyse(file_path): + """Start analyse of a file and print the result + """ + nb_errors = 0 + try: + result = None + if file_path.endswith('.css'): + result = __analyse_css(file_path) + else: + result = __analyse_html(file_path) + + if len(result) > 0: + for msg in result: + __print_stderr("{}\n".format(msg)) + nb_errors += 1 + else: + __print_stdout("{}: OK\n".format(file_path)) + + except Exception as e: + __print_stderr("[{}] {}\n".format(e.__class__.__name__, e)) + return nb_errors + + +def __files_loop(): + """Loop that analyses for each file from input arguments + """ + nb_errors = 0 + for file_path in sys.argv[1:]: + nb_errors += __analyse(file_path) + + return nb_errors + + +if __name__ == "__main__": + """Main + """ + if len(sys.argv) < 2: + __print_stderr("usage: w3c_validator.py file1 file2 ...\n") + exit(1) + + """execute tests, then exit. Exit status = # of errors (0 on success) + """ + sys.exit(__files_loop()) diff --git a/web_dynamic/templates/0-hbnb.html b/web_dynamic/templates/0-hbnb.html new file mode 100644 index 00000000000..afa4622833f --- /dev/null +++ b/web_dynamic/templates/0-hbnb.html @@ -0,0 +1,78 @@ + + + + + + + + + + + HBnB + + +
+ +
+
+
+
+

States

+

 

+
+
    + {% for state in states %} +
  • +

    {{ state[0].name }}:

    +
      + {% for city in state[1] %} +
    • {{ city.name }}
      • + {% endfor %} +
    +
    • + {% endfor %} +
+
+
+
+

Amenities

+

 

+
+
    + {% for amenity in amenities %} +
  • {{ amenity.name }}
    • + {% endfor %} +
+
+
+ +
+

Places

+
+ + {% for place in places %} +
+
+

{{ place.name }}

+
${{ place.price_by_night }}
+
+
+
{{ place.max_guest }} Guest{% if place.max_guest != 1 %}s{% endif %}
+
{{ place.number_rooms }} Bedroom{% if place.number_rooms != 1 %}s{% endif %}
+
{{ place.number_bathrooms }} Bathroom{% if place.number_bathrooms != 1 %}s{% endif %}
+
+
+ Owner: {{ place.user.first_name }} {{ place.user.last_name }} +
+
+ {{ place.description | safe }} +
+
+ {% endfor %} +
+
+ + + diff --git a/web_dynamic/templates/1-hbnb.html b/web_dynamic/templates/1-hbnb.html new file mode 100644 index 00000000000..83be770838e --- /dev/null +++ b/web_dynamic/templates/1-hbnb.html @@ -0,0 +1,80 @@ + + + + + + + + + + + + + HBnB + + +
+ +
+
+
+
+

States

+

 

+
+
    + {% for state in states %} +
  • +

    {{ state[0].name }}:

    +
      + {% for city in state[1] %} +
    • {{ city.name }}
      • + {% endfor %} +
    +
    • + {% endfor %} +
+
+
+
+

Amenities

+

 

+
+
    + {% for amenity in amenities %} +
  • {{ amenity.name }}
    • + {% endfor %} +
+
+
+ +
+

Places

+
+ + {% for place in places %} +
+
+

{{ place.name }}

+
${{ place.price_by_night }}
+
+
+
{{ place.max_guest }} Guest{% if place.max_guest != 1 %}s{% endif %}
+
{{ place.number_rooms }} Bedroom{% if place.number_rooms != 1 %}s{% endif %}
+
{{ place.number_bathrooms }} Bathroom{% if place.number_bathrooms != 1 %}s{% endif %}
+
+
+ Owner: {{ place.user.first_name }} {{ place.user.last_name }} +
+
+ {{ place.description | safe }} +
+
+ {% endfor %} +
+
+ + + diff --git a/web_dynamic/templates/2-hbnb.html b/web_dynamic/templates/2-hbnb.html new file mode 100644 index 00000000000..fa00ffbacb6 --- /dev/null +++ b/web_dynamic/templates/2-hbnb.html @@ -0,0 +1,81 @@ + + + + + + + + + + + + + HBnB + + +
+ +
+
+
+
+
+

States

+

 

+
+
    + {% for state in states %} +
  • +

    {{ state[0].name }}:

    +
      + {% for city in state[1] %} +
    • {{ city.name }}
      • + {% endfor %} +
    +
    • + {% endfor %} +
+
+
+
+

Amenities

+

 

+
+
    + {% for amenity in amenities %} +
  • {{ amenity.name }}
    • + {% endfor %} +
+
+
+ +
+

Places

+
+ + {% for place in places %} +
+
+

{{ place.name }}

+
${{ place.price_by_night }}
+
+
+
{{ place.max_guest }} Guest{% if place.max_guest != 1 %}s{% endif %}
+
{{ place.number_rooms }} Bedroom{% if place.number_rooms != 1 %}s{% endif %}
+
{{ place.number_bathrooms }} Bathroom{% if place.number_bathrooms != 1 %}s{% endif %}
+
+
+ Owner: {{ place.user.first_name }} {{ place.user.last_name }} +
+
+ {{ place.description | safe }} +
+
+ {% endfor %} +
+
+ + +