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     display: flex;
  39     flex-direction: column;
  40 }
  41
  42 .grid-item > .btn:active, .grid-item > .btn:focus {
  43     outline: none; !important;
  44     box-shadow: none;
  45 }
  46
  47 .grid-item-description {
  48     flex: 1;
  49 }
  50
  51 .selected_node {
  52     border-color: #40c640;
  53     box-shadow: 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(109, 243, 76, 0.6);
  54     transition: border-color ease-in-out .1s,box-shadow ease-in-out .1s;
  55 }
  56
  57 .grid-item:hover:not(.selected_node):not(.disabled_node) {
  58     box-shadow: 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(100, 100, 100, 0.3);
  59     transition: border-color ease-in-out .1s,box-shadow ease-in-out .1s;
  60 }
  61
  62 .disabled_node {
  63     cursor: not-allowed;
  64     background-color: #EFEFEF;
  65 }
  66
  67 .disabled_node:hover {}
  68
  69 .cleared_node {
  70     background-color: #FFFFFF;
  71 }
  72
  73 .grid-item-header {
  74     font-weight: bold;
  75     font-size: 20px;
  76     margin-top: 10px;
  77 }
  78
  79 .dropdown_item {
  80     border: 1px;
  81     border-style: solid;
  82     border-color: lightgray;
  83     border-radius: 5px;
  84     margin: 20px;
  85     padding: 2px;
  86     grid-column: 1;
  87     display: grid;
  88     grid-template-columns: 1fr 3fr 1fr;
  89     justify-items: center;
  90 }
  91
  92 .dropdown_item > button {
  93     margin: 2px;
  94     justify-self: end;
  95 }
  96
  97 .dropdown_item > h5 {
  98     margin: auto;
  99 }
 100
 101 .dropdown_item > input {
 102     padding: 7px;
 103     margin: 2px;
 104     width: 90%;
 105 }
 106
 107 #dropdown_wrapper {
 108     display: grid;
 109     grid-template-columns: 4fr 5fr;
 110 }
 111 </style>
 112
 113 <input name="filter_field" id="filter_field" type="hidden"/>
 114 <div id="grid_wrapper" class="grid_wrapper">
 115 {% for object_class, object_list in display_objects %}
 116     <div class="class_grid_wrapper">
 117         <div style="display:inline-block;margin:auto">
 118             <h4>{{object_class}}</h4>
 119         </div>
 120         <div id="{{object_class}}" class="object_class_wrapper">
 121         {% for obj in object_list %}
 122             <div id="{{ obj.id|default:'not_provided' }}" class="grid-item" onclick="multi_filter_widget.processClick(
 123                     '{{obj.id}}');">
 124                 <p class="grid-item-header">{{obj.name}}</p>
 125                 <p class="grid-item-description">{{obj.description}}</p>
 126                 <button type="button" class="btn btn-success grid-item-select-btn">
 127                     {% if obj.multiple %}Add{% else %}Select{% endif %}
 128                 </button>
 129             </div>
 130         {% endfor %}
 131         </div>
 132     </div>
 133 {% endfor %}
 134 </div>
 135
 136 <div id="dropdown_wrapper">
 137 </div>
 138 <script>
 139 function multipleSelectFilterWidgetEntry() {
 140     const graph_neighbors = {{ neighbors|safe }};
 141     const filter_items = {{ filter_items|safe }};
 142     const initial_value = {{ initial_value|default_if_none:"{}"|safe }};
 143
 144     //global variable
 145     multi_filter_widget = new MultipleSelectFilterWidget(graph_neighbors, filter_items, initial_value);
 146 }
 147
 148 multipleSelectFilterWidgetEntry();
 149 </script>