aboutsummaryrefslogtreecommitdiffstats
path: root/src/templates/dashboard
diff options
context:
space:
mode:
authorSawyer Bergeron <sbergeron@iol.unh.edu>2019-05-23 13:30:37 -0400
committerSawyer Bergeron <sbergeron@iol.unh.edu>2019-05-31 15:57:34 -0400
commit63bec7d84cbf1acd3a9a357b58b47584b1701229 (patch)
treecc3f73730dce486752b1380b53d09309a0bfe243 /src/templates/dashboard
parenta8d84499905504da229d1e8829145bf2d8329dd9 (diff)
Refactor selector step logic
Change-Id: I61e361e63da7453b2eee0e0c162a6f4e48460128 Signed-off-by: Sawyer Bergeron <sbergeron@iol.unh.edu>
Diffstat (limited to 'src/templates/dashboard')
-rw-r--r--src/templates/dashboard/genericselect.html71
-rw-r--r--src/templates/dashboard/searchable_select_multiple.html70
2 files changed, 100 insertions, 41 deletions
diff --git a/src/templates/dashboard/genericselect.html b/src/templates/dashboard/genericselect.html
new file mode 100644
index 0000000..fc29ee6
--- /dev/null
+++ b/src/templates/dashboard/genericselect.html
@@ -0,0 +1,71 @@
+{% extends "workflow/viewport-element.html" %}
+{% load staticfiles %}
+
+{% load bootstrap3 %}
+
+{% block content %}
+
+<style>
+#{{select_type}}_form_div {
+ width: 100%;
+ padding: 5%;
+ }
+
+ .panel {
+ border: none;
+ }
+ .select_panels {
+ width: 100%;
+ display: grid;
+ grid-template-columns: 45% 10% 45%;
+
+ }
+
+ .panel_center {
+ text-align: center;
+ border: none;
+
+ }
+ .panel_center p{
+ font-size: 20pt;
+ }
+</style>
+
+<div id="{{select_type}}_form_div">
+ <div class="select_panels">
+ <div class="panel_chooser panel">
+ <form id="{{select_type}}_select_form" method="post" action="" class="form" id="{{select_type}}selectorform">
+ {% csrf_token %}
+ {{ form|default:"<p>no form loaded</p>" }}
+ {% buttons %}
+
+ {% endbuttons %}
+ </form>
+ </div>
+ <div class="panel_center panel"><p>OR</p></div>
+ <div class="panel_add panel">
+ <button class="btn {% if disabled %} disabled {% endif %}"
+ style="width: 100%; height: 100%;"
+ {% if not disabled %}onclick="parent.add_wf({{addable_type_num}})"
+ {% endif %}>Create {{select_type_title}}
+ </button>
+ </div>
+ </div>
+</div>
+<script>
+ {% if disabled %}
+ disable();
+ {% endif %}
+</script>
+
+{% endblock content %}
+{% block onleave %}
+var form = $("#{{select_type}}_select_form");
+var formData = form.serialize();
+var req = new XMLHttpRequest();
+req.open("POST", "/wf/workflow/", false);
+req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+req.onerror = function() { alert("problem with form submission"); }
+req.send(formData);
+{% endblock %}
+
diff --git a/src/templates/dashboard/searchable_select_multiple.html b/src/templates/dashboard/searchable_select_multiple.html
index c08fbe5..69394ab 100644
--- a/src/templates/dashboard/searchable_select_multiple.html
+++ b/src/templates/dashboard/searchable_select_multiple.html
@@ -7,9 +7,10 @@
<p>Please make a different selection, as the current config conflicts with the selected pod</p>
{% endif %}
</div>
- <input id="user_field" name="ignore_this" class="form-control" autocomplete="off" type="text" placeholder="{{placeholder}}" value="{{initial.name}}" oninput="search(this.value)"
+ <input id="user_field" name="ignore_this" class="form-control" autocomplete="off" type="text" placeholder="{{placeholder}}" value="" oninput="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 %}
@@ -18,14 +19,6 @@
<ul id="drop_results"></ul>
-
- <div id="default_entry_wrap" style="display: none;">
- <div class="list_entry unremovable_list_entry">
- <p id="default_text" class="full_name"></p>
- <button class="btn-remove btn disabled">remove</button>
- </div>
- </div>
-
<div id="added_list">
</div>
@@ -96,16 +89,32 @@
<script type="text/javascript">
//flags
- var show_from_noentry = {{show_from_noentry|default:"false"}};
- var show_x_results = {{show_x_results|default:-1}};
- var results_scrollable = {{results_scrollable|default:"false"}};
- var selectable_limit = {{selectable_limit|default:-1}};
- var field_name = "{{name|default:"users"}}";
- var placeholder = "{{placeholder|default:"begin typing"}}";
- var default_entry = "{{default_entry}}";
+ var show_from_noentry = {{show_from_noentry|yesno:"true,false"}}; // whether to show any results before user starts typing
+ var show_x_results = {{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 = "{{placeholder|default:"begin typing"}}"; // placeholder that goes in text box
//needed info
- var items = {{items|safe}}
+ var items = {{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:
+ {{ selectable_limit }}: changes what number displays for field
+ {{ name }}: form identifiable name, relevant for backend
+ // when submitted, form will contain field data in post with name as the key
+ {{ placeholder }}: "greyed out" contents put into search field initially to guide user as to what they're searching for
+ {{ initial }}: in search_field_init(), marked safe, an array of id's each referring to an id from items
+ */
//tries
var expanded_name_trie = {}
@@ -116,18 +125,6 @@
string_trie.isComplete = false;
var added_items = [];
- var initial_log = {{ initial|safe }};
-
- var added_template = {{ added_list|default:"{}" }};
-
- if( default_entry )
- {
- var default_entry_div = document.getElementById("default_entry_wrap");
- default_entry_div.style.display = "inherit";
-
- var entry_p = document.getElementById("default_text");
- entry_p.innerText = default_entry;
- }
search_field_init();
@@ -335,7 +332,7 @@
function select_item(item_id)
{
//TODO make faster
- var item = items[item_id];
+ var item = items[item_id]['id'];
if( (selectable_limit > -1 && added_items.length < selectable_limit) || selectable_limit < 0 )
{
if( added_items.indexOf(item) == -1 )
@@ -357,11 +354,6 @@
document.getElementById("user_field").focus();
}
- function edit_item(item_id){
- var wf_type = "{{wf_type}}";
- parent.add_edit_wf(wf_type, item_id);
- }
-
function update_selected_list()
{
document.getElementById("added_number").innerText = added_items.length;
@@ -382,7 +374,8 @@
for( var key in added_items )
{
- item = added_items[key];
+ item_id = added_items[key];
+ item = items[item_id];
list_html += '<div class="list_entry"><p class="full_name">'
+ item["expanded_name"]
@@ -391,11 +384,6 @@
+ '</p><button onclick="remove_item('
+ Object.values(items).indexOf(item)
+ ')" class="btn-remove btn">remove</button>';
- {% if edit %}
- list_html += '<button onclick="edit_item('
- + item['id']
- + ')" class="btn-remove btn">edit</button>';
- {% endif %}
list_html += '</div>';
}