diff options
Diffstat (limited to 'src/templates/dashboard/multiple_select_filter_widget.html')
-rw-r--r-- | src/templates/dashboard/multiple_select_filter_widget.html | 149 |
1 files changed, 149 insertions, 0 deletions
diff --git a/src/templates/dashboard/multiple_select_filter_widget.html b/src/templates/dashboard/multiple_select_filter_widget.html new file mode 100644 index 0000000..4302543 --- /dev/null +++ b/src/templates/dashboard/multiple_select_filter_widget.html @@ -0,0 +1,149 @@ +<script src="/static/js/dashboard.js"> +</script> + +<style> +.object_class_wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + border: 0px; +} + +.class_grid_wrapper { + border: 0px; + text-align: center; + border-right: 1px; + border-style: solid; + border-color: grey; +} + +.class_grid_wrapper:last-child { + border-right: none; +} + +.grid_wrapper { + display: grid; + grid-template-columns: 1fr 1fr; +} + +.grid-item { + cursor: pointer; + border: 1px solid #cccccc; + border-radius: 5px; + margin: 20px; + height: 200px; + padding: 7px; + transition: border-color ease-in-out .1s,box-shadow ease-in-out .1s; + box-shadow: 0 1px 1px rgba(0,0,0,.075); + + display: flex; + flex-direction: column; +} + +.grid-item > .btn:active, .grid-item > .btn:focus { + outline: none; !important; + box-shadow: none; +} + +.grid-item-description { + flex: 1; +} + +.selected_node { + border-color: #40c640; + box-shadow: 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(109, 243, 76, 0.6); + transition: border-color ease-in-out .1s,box-shadow ease-in-out .1s; +} + +.grid-item:hover:not(.selected_node):not(.disabled_node) { + box-shadow: 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(100, 100, 100, 0.3); + transition: border-color ease-in-out .1s,box-shadow ease-in-out .1s; +} + +.disabled_node { + cursor: not-allowed; + background-color: #EFEFEF; +} + +.disabled_node:hover {} + +.cleared_node { + background-color: #FFFFFF; +} + +.grid-item-header { + font-weight: bold; + font-size: 20px; + margin-top: 10px; +} + +.dropdown_item { + border: 1px; + border-style: solid; + border-color: lightgray; + border-radius: 5px; + margin: 20px; + padding: 2px; + grid-column: 1; + display: grid; + grid-template-columns: 1fr 3fr 1fr; + justify-items: center; +} + +.dropdown_item > button { + margin: 2px; + justify-self: end; +} + +.dropdown_item > h5 { + margin: auto; +} + +.dropdown_item > input { + padding: 7px; + margin: 2px; + width: 90%; +} + +#dropdown_wrapper { + display: grid; + grid-template-columns: 4fr 5fr; +} +</style> + +<input name="filter_field" id="filter_field" type="hidden"/> +<div id="grid_wrapper" class="grid_wrapper"> +{% for object_class, object_list in display_objects %} + <div class="class_grid_wrapper"> + <div style="display:inline-block;margin:auto"> + <h4>{{object_class}}</h4> + </div> + <div id="{{object_class}}" class="object_class_wrapper"> + {% for obj in object_list %} + <div id="{{ obj.id|default:'not_provided' }}" class="grid-item" onclick="multi_filter_widget.processClick( + '{{obj.id}}');"> + <p class="grid-item-header">{{obj.name}}</p> + <p class="grid-item-description">{{obj.description}}</p> + <button type="button" class="btn btn-success grid-item-select-btn"> + {% if obj.multiple %}Add{% else %}Select{% endif %} + </button> + </div> + {% endfor %} + </div> + </div> +{% endfor %} +</div> + +<div id="dropdown_wrapper"> +</div> +<script> +function multipleSelectFilterWidgetEntry() { + const graph_neighbors = {{ neighbors|safe }}; + const filter_items = {{ filter_items|safe }}; + const initial_value = {{ initial_value|default_if_none:"{}"|safe }}; + + //global variable + multi_filter_widget = new MultipleSelectFilterWidget(graph_neighbors, filter_items, initial_value); +} + +multipleSelectFilterWidgetEntry(); +</script> |