From 1f3a770d2547848590f39e9d9b9bdffeb94eec14 Mon Sep 17 00:00:00 2001
From: Parker Berberian <pberberian@iol.unh.edu>
Date: Wed, 10 Oct 2018 16:06:47 -0400
Subject: Lab as a Service 2.0

See changes here:
https://wiki.opnfv.org/display/INF/Pharos+Laas

Change-Id: I59ada5f98e70a28d7f8c14eab3239597e236ca26
Signed-off-by: Sawyer Bergeron <sbergeron@iol.unh.edu>
Signed-off-by: Parker Berberian <pberberian@iol.unh.edu>
---
 .../dashboard/searchable_select_multiple.html      | 408 +++++++++++++++++++++
 1 file changed, 408 insertions(+)
 create mode 100644 src/templates/dashboard/searchable_select_multiple.html

(limited to 'src/templates/dashboard/searchable_select_multiple.html')

diff --git a/src/templates/dashboard/searchable_select_multiple.html b/src/templates/dashboard/searchable_select_multiple.html
new file mode 100644
index 0000000..e7128b0
--- /dev/null
+++ b/src/templates/dashboard/searchable_select_multiple.html
@@ -0,0 +1,408 @@
+<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
+
+<div class="autocomplete" style="width:400px;">
+    <input id="user_field" name="ignore_this" class="form-control" autocomplete="off" type="text" placeholder="{{placeholder}}" value="{{initial.name}}" oninput="search(this.value)"
+    {% if disabled %} disabled {% endif %}
+    >
+
+    <input type="hidden" id="selector" name="{{ name }}" class="form-control" style="display: none;"
+    {% if disabled %} disabled {% endif %}
+    >
+    </input>
+
+    <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>
+    <div id="added_counter" style="text-align: center; margin: 10px;"><p id="added_number" style="display: inline;">0</p><p style="display: inline;">/
+        {% if selectable_limit > -1 %} {{ selectable_limit }} {% else %} &infin; {% endif %}added</p></div>
+    <style>
+        #user_field {
+            font-size: 14pt;
+            width: 400px;
+            padding: 5px;
+
+        }
+
+        #drop_results{
+            list-style-type: none;
+            padding: 0;
+            margin: 0;
+            max-height: 300px;
+            min-height: 0;
+            overflow-y: scroll;
+            overflow-x: hidden;
+            border: solid 1px #ddd;
+            display: none;
+
+        }
+
+        #drop_results li a{
+            font-size: 14pt;
+            border: 1px solid #ddd;
+            background-color: #f6f6f6;
+            padding: 12px;
+            text-decoration: none;
+            display: block;
+            width: 400px;
+        }
+
+        .btn-remove {
+            float: right;
+            height: 30px;
+            margin: 4px;
+        }
+
+        .list_entry {
+            width: 400px;
+            border: 1px solid #ddd;
+            border-radius: 3px;
+            margin-top: 5px;
+            vertical-align: middle;
+            line-height: 40px;
+            height: 40px;
+            padding-left: 12px;
+        }
+
+        #drop_results li a:hover{
+            background-color: #ffffff;
+        }
+
+        .small_name {
+            display: inline-block;
+        }
+
+        .full_name {
+            display: inline-block;
+        }
+
+    </style>
+</div>
+
+<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}}";
+
+    //needed info
+    var items = {{items|safe}}
+
+    //tries
+    var expanded_name_trie = {}
+    expanded_name_trie.isComplete = false;
+    var small_name_trie = {}
+    small_name_trie.isComplete = false;
+    var string_trie = {}
+    string_trie.isComplete = false;
+
+    var added_items = [];
+
+    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;
+    }
+
+    init();
+
+    if( show_from_noentry )
+    {
+        search("");
+    }
+
+    function disable() {
+        var textfield = document.getElementById("user_field");
+        var drop = document.getElementById("drop_results");
+
+        textfield.disabled = "True";
+        drop.style.display = "none";
+
+        var btns = document.getElementsByClassName("btn-remove");
+        for( var i = 0; i < btns.length; i++ )
+        {
+            btns[i].classList.add("disabled");
+        }
+    }
+
+    function init() {
+        build_all_tries(items);
+
+        var initial = {{ initial|safe }};
+
+        for( var i = 0; i < initial.length; i++)
+        {
+            select_item(String(initial[i]));
+        }
+        if(initial.length == 1)
+        {
+            search(items[initial[0]]["small_name"]);
+            document.getElementById("user_field").value = items[initial[0]]["small_name"];
+        }
+    }
+
+    function build_all_tries(dict)
+    {
+        for( var i in dict )
+        {
+            add_item(dict[i]);
+        }
+    }
+
+    function add_item(item)
+    {
+        var id = item['id'];
+        add_to_tree(item['expanded_name'], id, expanded_name_trie);
+        add_to_tree(item['small_name'], id, small_name_trie);
+        add_to_tree(item['string'], id, string_trie);
+    }
+
+    function add_to_tree(str, id, trie)
+    {
+        inner_trie = trie;
+        while( str )
+        {
+            if( !inner_trie[str.charAt(0)] )
+            {
+                new_trie = {};
+                inner_trie[str.charAt(0)] = new_trie;
+            }
+            else
+            {
+                new_trie = inner_trie[str.charAt(0)];
+            }
+
+            if( str.length == 1 )
+            {
+                new_trie.isComplete = true;
+                new_trie.itemID = id;
+            }
+            inner_trie = new_trie;
+            str = str.substring(1);
+        }
+    }
+
+    function search(input)
+    {
+        if( input.length == 0 && !show_from_noentry){
+            dropdown([]);
+            return;
+        }
+        else if( input.length == 0 && show_from_noentry)
+        {
+            dropdown(items); //show all items
+        }
+        else
+        {
+            var trees = []
+            var tr1 = getSubtree(input, expanded_name_trie);
+            trees.push(tr1);
+            var tr2 = getSubtree(input, small_name_trie);
+            trees.push(tr2);
+            var tr3 = getSubtree(input, string_trie);
+            trees.push(tr3);
+            var results = collate(trees);
+            dropdown(results);
+        }
+    }
+
+    function getSubtree(input, given_trie)
+    {
+        /*
+        recursive function to return the trie accessed at input
+        */
+
+        if( input.length == 0 ){
+            return given_trie;
+        }
+
+        else{
+        var substr = input.substring(0, input.length - 1);
+        var last_char = input.charAt(input.length-1);
+        var subtrie = getSubtree(substr, given_trie);
+        if( !subtrie ) //substr not in the trie
+        {
+            return {};
+        }
+        var indexed_trie = subtrie[last_char];
+        return indexed_trie;
+        }
+    }
+
+    function serialize(trie)
+    {
+        /*
+        takes in a trie and returns a list of its item id's
+        */
+        var itemIDs = [];
+        if ( !trie )
+        {
+            return itemIDs; //empty, base case
+        }
+        for( var key in trie )
+        {
+            if(key.length > 1)
+            {
+                continue;
+            }
+            itemIDs = itemIDs.concat(serialize(trie[key]));
+        }
+        if ( trie.isComplete )
+        {
+            itemIDs.push( trie.itemID );
+        }
+
+        return itemIDs;
+    }
+
+    function collate(trees)
+    {
+        /*
+        takes a list of tries
+        returns a list of ids of objects that are available
+        */
+        results = [];
+        for( var i in trees )
+        {
+            var available_IDs = serialize(trees[i]);
+            for( var j=0; j<available_IDs.length; j++){
+                var itemID = available_IDs[j];
+                results[itemID] = items[itemID];
+            }
+        }
+        return results;
+    }
+
+    function dropdown(ids)
+    {
+        /*
+        takes in a mapping of ids to objects in  items
+        and displays them in the dropdown
+        */
+        var drop = document.getElementById("drop_results");
+        while(drop.firstChild)
+        {
+            drop.removeChild(drop.firstChild);
+        }
+
+        for( var id in ids )
+        {
+            var result_entry = document.createElement("li");
+            var result_button = document.createElement("a");
+            var obj = items[id];
+            var result_text = document.createTextNode(obj['small_name'] + " : " + obj['expanded_name']);
+            result_button.appendChild(result_text);
+            result_button.setAttribute('onclick', 'select_item("' + obj['id'] + '")');
+            result_entry.appendChild(result_button);
+            drop.appendChild(result_entry);
+        }
+
+        if( !drop.firstChild )
+        {
+            drop.style.display = 'none';
+        }
+        else
+        {
+            drop.style.display = 'inherit';
+        }
+    }
+
+    function select_item(item_id)
+    {
+        //TODO make faster
+        var item = items[item_id];
+        if( (selectable_limit > -1 && added_items.length < selectable_limit) || selectable_limit < 0 )
+        {
+            if( added_items.indexOf(item) == -1 )
+            {
+                added_items.push(item);
+            }
+        }
+
+        update_selected_list();
+        document.getElementById("user_field").focus();
+    }
+
+    function remove_item(item_ref)
+    {
+
+        item = Object.values(items)[item_ref];
+        var index = added_items.indexOf(item);
+        added_items.splice(index, 1);
+
+        update_selected_list()
+        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;
+        selector = document.getElementById('selector');
+        selector.value = JSON.stringify(added_items);
+        added_list = document.getElementById('added_list');
+
+        while(selector.firstChild)
+        {
+            selector.removeChild(selector.firstChild);
+        }
+        while(added_list.firstChild)
+        {
+            added_list.removeChild(added_list.firstChild);
+        }
+
+        list_html = "";
+
+        for( var key in added_items )
+        {
+            item = added_items[key];
+
+            list_html += '<div class="list_entry"><p class="full_name">'
+                + item["expanded_name"]
+                + '</p><p class="small_name">, '
+                + item["small_name"]
+                + '</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>';
+        }
+
+        added_list.innerHTML = list_html;
+    }
+
+</script>
+<style>
+    .full_name {
+        display: inline-block;
+    }
+    .small_name {
+        display: inline-block;
+    }
+</style>
-- 
cgit 1.2.3-korg