dashboard/src/templates/dashboard/multiple_select_filter_widget.html

   1 <script src="/static/js/dashboard.js">
   2 </script>
   3
   4 <style>
   5 .object_class_wrapper {
   6     display: grid;
   7     grid-template-columns: 1fr 1fr 1fr;
   8     border: 0px;
   9 }
  10
  11 .class_grid_wrapper {
  12     border: 0px;
  13     text-align: center;
  14     border-right: 1px;
  15     border-style: solid;
  16     border-color: grey;
  17 }
  18
  19 .class_grid_wrapper:last-child {
  20     border-right: none;
  21 }
  22
  23 .grid_wrapper {
  24     display: grid;
  25     grid-template-columns: 1fr 1fr;
  26 }
  27
  28 .grid-item {
  29     cursor: pointer;
  30     border: 1px solid #cccccc;
  31     border-radius: 5px;
  32     margin: 20px;
  33     height: 200px;
  34     padding: 7px;
  35     transition: border-color ease-in-out .1s,box-shadow ease-in-out .1s;
  36     box-shadow: 0 1px 1px rgba(0,0,0,.075);
  37 }
  38
  39 .selected_node {
  40     border-color: #40c640;
  41     box-shadow: 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(109, 243, 76, 0.6);
  42     transition: border-color ease-in-out .1s,box-shadow ease-in-out .1s;
  43 }
  44
  45 .disabled_node {
  46     cursor: not-allowed;
  47     background-color: #EFEFEF;
  48 }
  49
  50 .disabled_node:hover {}
  51
  52 .cleared_node {
  53     background-color: #FFFFFF;
  54 }
  55
  56 .grid-item-header {
  57     font-weight: bold;
  58     font-size: 20px;
  59     margin-top: 10px;
  60 }
  61
  62 .dropdown_item {
  63     border: 1px;
  64     border-style: solid;
  65     border-color: lightgray;
  66     border-radius: 5px;
  67     margin: 20px;
  68     padding: 2px;
  69     grid-column: 1;
  70     display: grid;
  71     grid-template-columns: 1fr 3fr 1fr;
  72     justify-items: center;
  73 }
  74
  75 .dropdown_item > button {
  76     margin: 2px;
  77     justify-self: end;
  78 }
  79
  80 .dropdown_item > h5 {
  81     margin: auto;
  82 }
  83
  84 .dropdown_item > input {
  85     padding: 7px;
  86     margin: 2px;
  87     width: 90%;
  88 }
  89
  90 #dropdown_wrapper {
  91     display: grid;
  92     grid-template-columns: 4fr 5fr;
  93 }
  94 </style>
  95
  96 <input name="filter_field" id="filter_field" type="hidden"/>
  97 <div id="grid_wrapper" class="grid_wrapper">
  98 {% for object_class, object_list in display_objects %}
  99     <div class="class_grid_wrapper">
 100         <div style="display:inline-block;margin:auto">
 101             <h4>{{object_class}}</h4>
 102         </div>
 103         <div id="{{object_class}}" class="object_class_wrapper">
 104         {% for obj in object_list %}
 105             <div id="{{ obj.id|default:'not_provided' }}" class="grid-item">
 106                 <p class="grid-item-header">{{obj.name}}</p>
 107                 <p class="grid-item-description">{{obj.description}}</p>
 108                 <button type="button" class="btn btn-success grid-item-select-btn" onclick="multi_filter_widget.processClick(
 109                     '{{obj.id}}');">{% if obj.multiple %}Add{% else %}Select{% endif %}</button>
 110             </div>
 111         {% endfor %}
 112         </div>
 113     </div>
 114 {% endfor %}
 115 </div>
 116
 117 <div id="dropdown_wrapper">
 118 </div>
 119 <script>
 120 function multipleSelectFilterWidgetEntry() {
 121     const graph_neighbors = {{ neighbors|safe }};
 122     const filter_items = {{ filter_items|safe }};
 123     const initial_value = {{ initial_value|default_if_none:"{}"|safe }};
 124
 125     //global variable
 126     multi_filter_widget = new MultipleSelectFilterWidget(graph_neighbors, filter_items, initial_value);
 127 }
 128
 129 multipleSelectFilterWidgetEntry();
 130 </script>