feat(pets): adds bp, service and filters template and logic

app/__init__.py

@@ -31,5 +31,7 @@ def create_app(config_class=Config):
     app.register_blueprint(main_bp)
     from app.users import bp as users_bp
     app.register_blueprint(users_bp, url_prefix="/users")
+    from app.pets import bp as pets_bp
+    app.register_blueprint(pets_bp, url_prefix="/pets")
 
     return app

app/pets/__init__.py

@@ -0,0 +1,4 @@
+from flask import Blueprint
+
+bp = Blueprint('pets', __name__)
+from app.pets import routes

app/pets/routes.py

@@ -0,0 +1,7 @@
+from flask import request, render_template
+from app.pets import bp
+from app.services.pet_service import PetService
+
+@bp.route('/')
+def index():
+    return render_template("pets/index.html", options=PetService.get_options(request))

app/services/pet_service.py

@@ -0,0 +1,93 @@
+from flask import Request
+from app.extensions import db
+from app.models.pet_kind import PetKind
+
+class PetService:
+    
+    @staticmethod
+    def get_options(request: Request):
+        type = request.args.get('type')
+        sex = request.args.get('sex')
+        age_from = request.args.get('age-from')
+        options = dict()
+        options["type"] = PetService.get_pets_kind_options(type)
+        options["sex"] = PetService.get_sex_options(sex)
+        options["age_from"] = PetService.get_age_from_options(age_from)
+        return options
+    
+    @staticmethod
+    def get_pets_kind_options(selected_kind=None):
+        pet_kinds = db.session.execute(db.select(PetKind)).scalars()
+        options = []
+        options.append({
+                "value": "",
+                "text": "Type",
+                "selected": selected_kind == None
+            })
+        options.append({
+                "value": "0",
+                "text": "Any",
+                "selected": selected_kind == "0"
+            })
+        for pet_kind in pet_kinds:
+            options.append({
+                "value": str(pet_kind.id),
+                "text": pet_kind.name,
+                "selected": selected_kind == str(pet_kind.id)
+            })
+        PetService.selected_safeguard(selected_kind,options[0],len(options))
+        return options
+
+    @staticmethod
+    def get_age_from_options(selected_year=None):
+        options = []
+        options.append({
+                "value": "0",
+                "text": "0",
+                "selected": selected_year == "0" or selected_year == None
+            })
+        for i in range(1,7):
+            options.append({
+                "value": str(i),
+                "text": str(i),
+                "selected": selected_year == str(i)
+            })
+        options.append({
+                        "value": "7",
+                        "text": "7+",
+                        "selected": selected_year == "7"
+                    })
+        PetService.selected_safeguard(selected_year,options[0],len(options))
+        return options
+    
+    @staticmethod
+    def get_sex_options(selected_sex=None):
+        options = [
+            {
+                "value": "",
+                "text": "Sex",
+                "selected": selected_sex == None
+            },
+            {
+                "value": "0",
+                "text": "Any",
+                "selected": selected_sex == "0" 
+            },
+                        {
+                "value": "1",
+                "text": "Female",
+                "selected": selected_sex == "1" 
+            },
+            {
+                "value": "2",
+                "text": "Male",
+                "selected": selected_sex == "2" 
+            },
+        ]
+        PetService.selected_safeguard(selected_sex,options[0],len(options))
+        return options
+    
+    @staticmethod
+    def selected_safeguard(selected_arg, select_default, options_length):
+        if selected_arg is not isinstance(selected_arg, int) or selected_arg < 0 or selected_arg > len(options_length):
+            select_default["selected"] = True

app/static/js/pets-filter.js

@@ -0,0 +1,47 @@
+(() => {
+    'use strict'
+    const fromYearsFilter = document.querySelector('#from-years-filter');
+    const toYearsFilter = document.querySelector('#to-years-filter');
+    const toTextSpan = document.querySelector('#to-text');
+    fromYearsFilter.addEventListener('change', updateToYearsFilter);
+    fromYearsFilter.dispatchEvent(new Event('change'));
+    updateToYearsFilterWithQueryParams();
+    
+    function updateToYearsFilter(event) {
+        const startYear = event.target.value;
+        toYearsFilter.replaceChildren(null);
+        if(startYear == 7) {
+            toYearsFilter.removeAttribute('name');
+            toYearsFilter.classList.add('d-none');
+            toTextSpan.classList.add('d-none');
+        } else {
+            toYearsFilter.setAttribute('name', 'age-to');
+            toYearsFilter.classList.remove('d-none');
+            toTextSpan.classList.remove('d-none');            
+        }
+
+        const option = document.createElement('option');
+        option.value = "7";
+        option.innerText = "7+";
+        option.selected = true;
+        toYearsFilter.appendChild(option);
+
+        for(let i = 6; i > startYear; i--) {
+            const option = document.createElement('option');
+            const value = i.toString();
+            option.value = value;
+            option.innerText = value;
+            toYearsFilter.appendChild(option);
+        }
+        
+    }
+
+    function updateToYearsFilterWithQueryParams() {
+        let address = window.location.search;
+        let parameterList = new URLSearchParams(address)
+        let ageToParam = parameterList.get('age-to');
+        for (const option of toYearsFilter.children) {
+            if (option.value === ageToParam) option.setAttribute("selected","")
+        }
+    }
+})()

app/templates/pets/index.html

@@ -0,0 +1,77 @@
+{% extends "layout/layout.html" %} 
+{% block title %} Home {% endblock %}
+{% block head %} 
+  {{ super() }}
+{% endblock %} 
+{% block content %}
+<div class="pets container">
+    <div class="row px-2">
+        <div class="card py-4 my-4">
+            <div class="col-12">
+                <form action="" method="get">
+                    <div class="row">
+                        <div class="col-12 col-md-3 col-lg-3 mb-3 mb-lg-0">
+                            <select aria-label="type select field" class="form-select" name="type">
+                                {% for option in options['type'] %}
+                                    <option 
+                                        {% if loop.index0 == 0 %} {{"disabled"}} {% endif %}
+                                        value="{{option['value']}}" 
+                                        {%if option['selected'] %} {{"selected"}} {% endif %}
+                                    >{{option['text']}}</option>
+                                {% endfor %}
+                            </select>
+                        </div>
+                        <div class="col-12 col-md-3 col-lg-3 mb-3 mb-lg-0">
+                            <select aria-label="sex select field" class="form-select" name="sex">
+                                {% for option in options['sex'] %}
+                                    <option 
+                                        {% if loop.index0 == 0 %} {{"disabled"}} {% endif %}
+                                        value="{{option['value']}}" 
+                                        {%if option['selected'] %} {{"selected"}} {% endif %}
+                                    >{{option['text']}}</option>
+                                {% endfor %}
+                                </select>
+                        </div>
+                        <div class="col-12 col-md-6 col-lg-4 mb-3 mb-lg-0">
+                            <div class="input-group">
+                                <span class="input-group-text">From</span>
+                                <select 
+                                    aria-label="from years select field"
+                                    class="form-select"
+                                    id="from-years-filter"
+                                    name="age-from"
+                                >
+                                    {% for option in options["age_from"] %}
+                                        <option 
+                                            value="{{option['value']}}" 
+                                            {%if option['selected'] %} {{"selected"}} {% endif %}
+                                        >{{option['text']}}</option>
+                                    {% endfor %}
+                                </select>
+                                <span class="input-group-text" id="to-text">to</span>
+                                <select 
+                                    aria-label="years to select field" 
+                                    class="form-select" 
+                                    id="to-years-filter" 
+                                    name="age-to"
+                                >
+                                    <option value="7" default>7+</option>
+                                </select>
+                                <span class="input-group-text">yrs old</span>
+                            </div>
+                        </div>
+                        <div class="col-12 col-md-12 col-lg-2">
+                            <button class="btn btn-outline-primary w-100" type="submit">Filter</button>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+    </div>
+    <div class="row">
+        <h1>This is pets!</h1>
+    </div>
+</div>
+<script src="{{ url_for('static', filename='js/pets-filter.js') }}"></script>
+{% endblock %}