1 files changed, 149 insertions, 0 deletions
diff --git a/dashboard/src/templates/dashboard/multiple_select_filter_widget.html b/dashboard/src/templates/dashboard/multiple_select_filter_widget.html
new file mode 100644
index 0000000..4302543
--- /dev/null
+++ b/dashboard/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>