diff options
Diffstat (limited to 'dashboard/src/templates/dashboard/searchable_select_multiple.html')
| -rw-r--r-- | dashboard/src/templates/dashboard/searchable_select_multiple.html | 209 |
1 files changed, 209 insertions, 0 deletions
diff --git a/dashboard/src/templates/dashboard/searchable_select_multiple.html b/dashboard/src/templates/dashboard/searchable_select_multiple.html new file mode 100644 index 0000000..8bcf890 --- /dev/null +++ b/dashboard/src/templates/dashboard/searchable_select_multiple.html @@ -0,0 +1,209 @@ +<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> +<script src="/static/js/dashboard.js"></script> + +<div id="search_select_outer" class="autocomplete"> + <div id="warning_pane" style="background: #FFFFFF; color: #CC0000;"> + {% if incompatible == "true" %} + <h3>Warning: Incompatible Configuration</h3> + <p>Please make a different selection, as the current config conflicts with the selected pod</p> + {% endif %} + </div> + <div id="added_counter"> + <p id="added_number">0</p> + <p id="addable_limit">/ {% if selectable_limit > -1 %} {{ selectable_limit }} {% else %} ∞ {% endif %}added</p> + </div> + + <div id="added_list"> + + </div> + + <input id="user_field" name="ignore_this" class="form-control" autocomplete="off" type="text" placeholder="{{placeholder}}" value="" oninput="searchable_select_multiple_widget.search(this.value)" + {% if disabled %} disabled {% endif %} + > + </input> + + <input type="hidden" id="selector" name="{{ name }}" class="form-control" style="display: none;" + {% if disabled %} disabled {% endif %} + > + </input> + + <div id="scroll_restrictor"> + <ul id="drop_results"></ul> + </div> + <style> + #scroll_restrictor { + flex: 1; + position: relative; + overflow-y: auto; + padding-bottom: 10px; + } + + #added_list { + margin-bottom: 5px; + } + + .autocomplete { + display: flex; + flex: 1; + flex-direction: column; + } + #user_field { + font-size: 14pt; + padding: 5px; + height: 40px; + border: 1px solid #ccc; + border-radius: 5px; + + } + + #drop_results{ + list-style-type: none; + padding: 0; + margin: 0; + min-height: 0; + border: solid 1px #ddd; + border-top: none; + border-bottom: none; + visibility: inherit; + flex: 1; + + position: absolute; + width: 100%; + + } + + #drop_results li a{ + font-size: 14pt; + background-color: #f6f6f6; + padding: 7px; + text-decoration: none; + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + #drop_results li a { + border-bottom: 1px solid #ddd; + } + + .list_entry { + border: 1px solid #ccc; + border-radius: 5px; + margin-top: 5px; + vertical-align: middle; + line-height: 40px; + height: 40px; + padding-left: 12px; + width: 100%; + display: flex; + } + + #drop_results li a:hover{ + background-color: #ffffff; + } + + .added_entry_text { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: inline; + width: 100%; + } + + .btn-remove { + float: right; + height: 30px; + margin: 4px; + padding: 1px; + max-width: 20%; + width: 15%; + min-width: 70px; + overflow: hidden; + text-overflow: ellipsis; + } + + .entry_tooltip { + display: none; + } + + #drop_results li a:hover .entry_tooltip { + position: absolute; + background: #444; + color: #ddd; + text-align: center; + font-size: 12pt; + border-radius: 3px; + + } + + #drop_results { + max-width: 100%; + display: inline-block; + list-style-type: none; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + #drop_results li { + overflow: hidden; + text-overflow: ellipsis; + } + + #added_counter { + text-align: center; + } + + #added_number, #addable_limit { + display: inline; + } + </style> +</div> + +<script type="text/javascript"> + function searchableSelectMultipleWidgetEntry() { + let format_vars = { + "show_from_noentry": {{show_from_noentry|yesno:"true,false"}}, + "show_x_results": {{show_x_results|default:-1}}, + "results_scrollable": {{results_scrollable|yesno:"true,false"}}, + "selectable_limit": {{selectable_limit|default:-1}}, + "placeholder": "{{placeholder|default:"begin typing"}}" + }; + + let field_dataset = {{items|safe}}; + + let field_initial = {{ initial|safe }}; + + //global + searchable_select_multiple_widget = new SearchableSelectMultipleWidget(format_vars, field_dataset, field_initial); + } + + searchableSelectMultipleWidgetEntry(); + + /* + var show_from_noentry = context(show_from_noentry|yesno:"true,false") // whether to show any results before user starts typing + var show_x_results = context(show_x_results|default:-1) // how many results to show at a time, -1 shows all results + var results_scrollable = {{results_scrollable|yesno:"true,false") // whether list should be scrollable + var selectable_limit = {{selectable_limit|default:-1) // how many selections can be made, -1 allows infinitely many + var placeholder = "context(placeholder|default:"begin typing")" // placeholder that goes in text box + + needed info + var items = context(items|safe) // items to add to trie. Type is a dictionary of dictionaries with structure: + { + id# : { + "id": any, identifiable on backend + "small_name": string, displayed first (before separator), searchable (use for e.g. username) + "expanded_name": string, displayed second (after separator), searchable (use for e.g. email address) + "string": string, not displayed, still searchable + } + } + + used later: + context(selectable_limit): changes what number displays for field + context(name): form identifiable name, relevant for backend + // when submitted, form will contain field data in post with name as the key + context(placeholder): "greyed out" contents put into search field initially to guide user as to what they're searching for + context(initial): in search_field_init(), marked safe, an array of id's each referring to an id from items + */ +</script> |