Amenities select

.gitignore

@@ -0,0 +1,3 @@
+v4/
+installer.sh
+

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

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

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)

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)

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)

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);
+  };
+});

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");
+            }
+        }
+    });
+  });

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,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;
+}

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;
+}