Refactor selector step logic

Change-Id: I61e361e63da7453b2eee0e0c162a6f4e48460128
Signed-off-by: Sawyer Bergeron <sbergeron@iol.unh.edu>

2 files changed, 100 insertions, 41 deletions

diff --git a/dashboard/src/templates/dashboard/genericselect.html b/dashboard/src/templates/dashboard/genericselect.html
new file mode 100644
index 0000000..fc29ee6
--- /dev/null
+++ b/dashboard/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/dashboard/src/templates/dashboard/searchable_select_multiple.html b/dashboard/src/templates/dashboard/searchable_select_multiple.html
index c08fbe5..69394ab 100644
--- a/dashboard/src/templates/dashboard/searchable_select_multiple.html
+++ b/dashboard/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>';
         }