summaryrefslogtreecommitdiffstats
path: root/dashboard/src/templates/dashboard/multiple_select_filter_widget.html
blob: bfcbed679e71d748e813e1d5631490b61d8a5131 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<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);
}

.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;
}

.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">
                <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" onclick="multi_filter_widget.processClick(
                    '{{obj.id}}');">{% 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>