MARKTPLATZ/marktplatz/templates/marktplatz/product_overview.html

{% extends "base_generic.html" %}
{% load tags %}
{% load countries %}
{% load static %}
{% load crispy_forms_tags %}

{% block script %}
<script>
$(document).ready(function(){

    $("#how").fadeOut(0);

    $("#how").click(function(){

        $("#how").fadeOut(200);
    });

    $("button#show").click(function(){
        $(".card").show();
        $("button").removeClass("mark");
        $("#how").fadeOut(40);

    });

/*
    $("button#vote").click(function(){
        $(".card").show();
        $("button").removeClass("mark");

         $(".card").not(".notvote").hide();
        $("button#vote").addClass("mark");

        if($(".card").filter(":visible").length < 1){
            $("#how").fadeIn(200)
        } else{
           $("#how").fadeOut(10)
        }
    });
*/


    {% for country in count_list %}

    {% if country %}
/*
    $("[id='{{country.code}}']").click(function(){
        $(".card").show();
        $("button").removeClass("mark");

        $(".card").not(".{{country.code}}").hide();
        $("[id='{{country.code}}']").addClass("mark");

        if($(".card").filter(":visible").length < 1){
            $("#how").fadeIn(200)
        } else{
           $("#how").fadeOut(10)
        }

    });
*/
    {% endif %}

    {% endfor %}

    {% for year in year_list %}
/*
    $("[id='{{year}}']").click(function(){
        $(".card").show();
        $("button").removeClass("mark");

        $(".card").not(".{{year}}").hide();
        $("[id='{{year}}']").addClass("mark");

        if($(".card").filter(":visible").length < 1){
            $("#how").fadeIn(200)
        } else{
           $("#how").fadeOut(10)
        }

    });
*/
    {% endfor %}



    {% for key, value in ort_dict.items %}
    /*
      $(".{{ key }}").click(function(){
         $(".card").show();
         $("button").removeClass("mark");

         $(".card").not(".{{ key }}").hide();
         $("button .{{ key }}").addClass("mark");

         if($(".card").filter(":visible").length < 1){
           $("#how").fadeIn(200)
         } else{
           $("#how").fadeOut(10)
         }

      });
      */

    {% endfor %}

    $(".btn-toggle").click (function(elem){

       let toggler = this.getAttribute("toggler");
       console.log(toggler);
       $(".card").show();
       $("button").removeClass("mark");

       $(".card").not("." + toggler).hide();
       $("button ." + toggler).addClass("mark");

       if($(".card").filter(":visible").length < 1){
         $("#how").fadeIn(200)
       } else{
         $("#how").fadeOut(10)
       }

    });


});
</script>


<style media="screen">
  .card-columns .mab-card{
      width: 97%;
      height: 95%;
      display: inline-block;
      margin-top:4px;
      max-width: 100%;
  }

  .mab-card-body{

    padding: 5px;
    padding-left: 5px;

  }



  .mab-Product-title {

    position: absolute;
    bottom: 8px;
    left: 16px;
    color: white;
    font-size: large;
    font-weight: bold;
    text-align: left;
    background-color: rgba(0, 0, 0, 0);
    text-shadow:  0 0 6px #444, 0 0 20px #888;

  }

  .mab-Product-vote {

    position: absolute;
    top: 8px;
    right: 16px;
    color: white;
    font-size: large
  }

  .mab-card-text {

    color: black;
    margin-top: 0px;
}
    .mab-card-highlight {

      background-color: #f0faf0;

    }



</style>

{% endblock %}






{% block content %}

<nav class="navbar-expand-sm tag" style="margin-left: 0px">


  <button class="navbar-toggler border-thin mybtn rounded-0 tag navbar-expand-sm " type="button" data-toggle="collapse" data-target="#tags" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle tags" style="font-size: 15px">
    <span class="mybtn"></span> Show All Tags ⋁
  </button>



  <div class="row border-dark collapse navbar-collapse" id="tags">

    <div class="container-fluid">
      <button id='show' class="border-thin mybtn " style="margin-right: 2px;margin-bottom: 2px">#Show All</button>

      {% for elem in frei_list %}
      <button id='{{elem.0}}' toggler='{{elem.0}}' class="border-thin mybtn btn-toggle elem.0" style="margin-right: 2px;margin-bottom: 2px">#{{elem.1}}</button>
      {% endfor %}

      {% for key, value in ort_dict.items %}
      <button class="border-thin mybtn btn-toggle {{key}}" toggler='{{key}}' style="margin-right: 2px;margin-bottom: 2px">#{{value}}</button>
      {% endfor %}

      {% for elem in altneu_list %}
      <button class="border-thin mybtn btn-toggle {{elem.0}}" toggler='{{elem.0}}' style="margin-right: 2px;margin-bottom: 2px">#{{elem.1}}</button>
      {% endfor %}

    </div>
  </div>


    <div class="">
      &nbsp;
    </div>

  <div class="row border-dark " id="search_bar">
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-6">
          <form method="post" action="{% url 'search-products' %}" >
            {% csrf_token %}
            <!-- Left here in case we need to debug -->
            {% if signup_errors %}
            <div class='invalid-feedback' style="display: none;">{{ signup_errors }}</div>
            {% endif %}
            {% if contact_errors %}
            <div class='invalid-feedback' style="display: none;">{{ contact_errors }}</div>
            {% endif %}

            <!-- end of debug -->

            {%  crispy textSearchForm  %}

          </form>

        </div>
        <div class="col-sm-6">
          {% include "marktplatz/modal-sa.html" %}
        </div>
      </div>
    </div>
  </div>

</nav>


<div id="how" style="margin-top: 5px;text-align: center;vertical-align: middle; max-height: 40px;" class="container-fluid">

  <p style="color: black"> There are no Products matching your selection, as you have selected multiple tags.
    Click <nobr><button id='show' class="border-thin mybtn" style="margin-right: 2px;margin-top: 15px">#Show All</button></nobr> to deselect all tags.
  </p>
</div>

<! -- Start Cards --><div class="card-columns" style="margin-top: 7px; orphans: 1; windows:1;">

  {{main_card|safe}}

  {% for product in wohnprojekt_list %}


  <div class="mab-card  {{product.ort}} {{product.status}} {{product.frei}} {{product.altneu}} {% if product.frei == 'JAJA' %} mab-card-highlight {% endif %} card rounded-0 border-0 " style="">
    <a href="{% url 'product-detail' product.pk %}">
      <div style="position: relative;text-align: center;">
        <img class="{% if user.is_authenticated %}{% get_vote_class product user %} {% endif %} {% for category in product.category.all %} {{category.short_name}} {% endfor %} card-img-top rounded-0" src="{{product.media_set.first.image_norm.url}}" alt="image">
        <div class="mab-product-title" style="">{{product.name|upper }}</div>
        {% if user.is_authenticated %}
        <div class="mab-product-vote" style="">{% get_vote product user %}</div>
        {% endif %}
      </div>
    </a>
    <div class="card-body mab-card-body" style="">
      <!--<div class="border-0 d-flex justify-content">
        <p class="card-title" style="margin-bottom: 3px"><a href="{% url 'product-detail' product.pk %}"> {{product.header }} </a></p>

      </div>-->

      <p class="mab-card-text card-text" style="">

        <button id='product_{{product.pk}}_{{product.frei}}' toggler='{{product.frei}}' class="border-thin mybtn btn-toggle {{product.frei}}" style="">#{{product.get_frei_display}}</button>
        <button id='product_{{product.pk}}_{{product.status}}' toggler='{{product.status}}' class="border-thin mybtn btn-toggle {{product.status}}" style="">#{{product.get_status_display}}</button>
        <button id='product_{{product.pk}}_{{product.ort}}' toggler='{{product.ort}}' class="border-thin mybtn btn-toggle {{product.ort}}" style="">#{{product.get_ort_display}}</button>
        <button id='product_{{product.pk}}_{{product.altneu}}' toggler='{{product.altneu}}' class="border-thin mybtn btn-toggle {{product.altneu}}" style="">#{{product.get_altneu_display}}</button>

      </p>
    </div>
  </div>

    {% endfor %}




  {{sponsor_cards|safe}}


<! -- End Cards --></div>



{% endblock %}