sidebar for searching and filtering resources

web/app/resources.py

     db.session.delete(deletion)
     db.session.commit()
     flash('Successfully deleted!')
+
+# function to get filters for a specific field 
+def get_filter_values(field):
+    field_filter = Resource.query.filter_by(type='tool').with_entities(getattr(Resource, field))
+    field_filter = [i for i, in field_filter]
+    field_filter = list(dict.fromkeys(field_filter))
+    field_filter = filter(None, field_filter)
+    field_filter = sorted(field_filter)
+    return field_filter

web/app/static/js/main.js

 
 // filtering resources by search
 $(document).ready(function(){
-  $("#searchInput").on("keyup", function() {
+  $("#searchResources").on("keyup", function() {
     var value = $(this).val().toLowerCase();
     $("#resource-boxes #resource").filter(function() {
       $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

web/app/static/styles/custom.css

   background-color: #efefef;
   padding: 5px;
   padding-top: 10px;
-  border: 1px solid #cdcdcd;
+  border-radius: 0.25rem;
+}
+
+#searchResources {
+  height: calc(1.5em + 0.5rem + 2px);
+  padding: 0.25rem 0.5rem;
+  font-size: .875rem;
+  line-height: 1.5;
+  border-radius: 0.2rem;
+  border-bottom: 0px;
+}
+
+.filter-title {
+    padding: 5px;
+    font-weight: 600;
+}
+
+.filter-items {
+  margin: 0;
+  padding-left: 1.5rem;
+  line-height: 1.5;
+  font-size: 13px;
+}
+
+.accordion-body {
+    padding: 0;
 }
 
 ol,

web/app/templates/base.html

       <div class="layer-bg w-100">
         <img class="img-fluid w-100" src="{{ url_for('static',filename='images/dots-bg.png') }}" alt="bg-shape">
       </div>
-      <div class="container">
+      <div class="container-fluid">
           {% with messages = get_flashed_messages() %}
           {% if messages %}
               <div class="alert alert-danger">

web/app/templates/resources.html

     <div class="row">
       <div class="col-md-4 col-lg-3 py-3">
         <div class="search-filter-sidebar">
-          <input class="form-control" id="searchInput" type="text" placeholder="Search...">
+          <input class="form-control" id="searchResources" type="text" placeholder="filter by search...">
+          <div class="row">
+          {% if practices_filter %}
+            <div class="col-sm-6 d-md-block d-sm-none d-none">
+              <div class="filter-title">Practices</div>
+              <ul class="filter-items">
+                {% for practice in practices_filter %}
+                <li {% if request.args.get('practice') == practice[0]|string %} class="fw-bold"{% endif %}>
+                  <a href="/tools?practice={{practice[0]}}">{{ practice[1] }}</a>
+                </li>
+                {% endfor %}
+              </ul>
+            </div>
+            <div class="d-md-none accordion">
+              <div class="accordion-item">
+                <div class="filter-title accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#filter-practice">Practices</div>
+                <div class="accordion-body">
+                  <ul id="filter-practice" class="collapse filter-items">
+                    {% for practice in practices_filter %}
+                    <li {% if request.args.get('practice') == practice[0]|string %} class="fw-bold"{% endif %}>
+                      <a href="/tools?practice={{practice[0]}}">{{ practice[1] }}</a>
+                    </li>
+                    {% endfor %}
+                  </ul>
+                </div>
+              </div>
+            </div>
+          {% endif %}
+          </div>
+          <div class="row">
+          {% if languages_filter %}
+            <div class="col-sm-6 d-md-block d-sm-none d-none">
+              <div class="filter-title">Scripting languages</div>
+              <ul class="filter-items">
+                {% for language in languages_filter %}
+                <li {% if request.args.get('scriptingLanguage') == language %} class="fw-bold"{% endif %}>
+                  <a href="/tools?scriptingLanguage={{language}}">{{ language }}</a>
+                </li>
+                {% endfor %}
+              </ul>
+            </div>
+            <div class="d-md-none accordion">
+              <div class="accordion-item">
+                <div class="filter-title accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#filter-language">Scripting language</div>
+                <div class="accordion-body">
+                  <ul id="filter-language" class="collapse filter-items">
+                    {% for language in languages_filter %}
+                    <li {% if request.args.get('scriptingLanguage') == language %} class="fw-bold"{% endif %}>
+                      <a href="/tools?scriptingLanguage={{language}}">{{ language }}</a>
+                    </li>
+                    {% endfor %}
+                  </ul>
+                </div>
+              </div>
+            </div>
+          {% endif %}
+          {% if licenses_filter %}
+            <div class="col-sm-6 d-md-block d-sm-none d-none">
+              <div class="filter-title">License</div>
+              <ul class="filter-items">
+                {% for license in licenses_filter %}
+                <li {% if request.args.get('license') == license %} class="fw-bold"{% endif %}>
+                  <a href="/tools?license={{license}}">{{ license }}</a>
+                </li>
+                {% endfor %}
+              </ul>
+            </div>
+            <div class="d-md-none accordion">
+              <div class="accordion-item">
+                <div class="filter-title accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#filter-license">License</div>
+                <div class="accordion-body">
+                  <ul id="filter-license" class="collapse filter-items">
+                    {% for license in licenses_filter %}
+                    <li {% if request.args.get('license') == license %} class="fw-bold"{% endif %}>
+                      <a href="/tools?license={{license}}">{{ license }}</a>
+                    </li>
+                    {% endfor %}
+                  </ul>
+                </div>
+              </div>
+            </div>
+          {% endif %}
+          </div>
         </div>
       </div>
       <div class="col-md-8 col-lg-9">

web/app/tool.py

 @tool.route('/tools')
 def get_tools():
     tools = Resource.query.filter_by(type='tool')
-    return render_template('resources.html', resources=tools, type='tool')
+    for key in request.args.keys():
+        if key == 'practice':
+            query = 'SELECT * FROM Resource LEFT JOIN Relationship ON Resource.id=Relationship.first_resource_id WHERE Relationship.second_resource_id=' + request.args.get(key) + ';'
+            tools = db.engine.execute(query)
+        else:
+            kwargs = {'type': 'tool', key: request.args.get(key)}
+            tools = Resource.query.filter_by(**kwargs)
+    # get filters
+    # practices 
+    practices_filter = Resource.query.filter_by(type='practice').with_entities(Resource.id, Resource.name)
+    #FOR LATER: SELECT Resource.name, second.name FROM Resource LEFT JOIN Relationship ON Resource.id=Relationship.first_resource_id LEFT JOIN Resource second ON Relationship.second_resource_id=second.id;
+    # license
+    licenses_filter = get_filter_values('license')
+    # language
+    languages_filter = get_filter_values('scriptingLanguage')
+    return render_template('resources.html', resources=tools, type='tool', practices_filter=practices_filter, licenses_filter=licenses_filter, languages_filter=languages_filter)
 
 # route for displaying a single tool based on the ID in the database
 @tool.route('/tools/<int:tool_id>')