X-Git-Url: https://gerrit.opnfv.org/gerrit/gitweb?a=blobdiff_plain;f=dashboard%2Fsrc%2Ftemplates%2Fdashboard%2Fmultiple_select_filter_widget.html;h=536fdcc37db49f3eeb0cb514a98ba36f65ec014b;hb=78f34347ef16fcbb0a741af02bab198c6d0f8449;hp=31b8f33b00631d03e2d76947ec97ff9131e6bde0;hpb=9ee74e0df422eac470cd8e32606b78030113764b;p=pharos-tools.git

diff --git a/dashboard/src/templates/dashboard/multiple_select_filter_widget.html b/dashboard/src/templates/dashboard/multiple_select_filter_widget.html
index 31b8f33..536fdcc 100644
--- a/dashboard/src/templates/dashboard/multiple_select_filter_widget.html
+++ b/dashboard/src/templates/dashboard/multiple_select_filter_widget.html
@@ -6,40 +6,41 @@
 }
 .class_grid_wrapper {
     border: 0px;
-    border-left: 1px;
+    text-align: center;
     border-right: 1px;
     border-style: solid;
     border-color: grey;
-    text-align: center;
 }
+
+.class_grid_wrapper:last-child {
+    border-right: none;
+}
+
 .grid_wrapper {
     display: grid;
     grid-template-columns: 1fr 1fr;
 }
 .grid-item {
     cursor: pointer;
-    border:2px;
-    border-style:none;
-    border-color:black;
+    border:1px solid #cccccc;
     border-radius: 5px;
     margin:20px;
     height: 200px;
     padding: 7px;
-    box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.75);
     transition-property: box-shadow, background-color;
     transition-duration: .2s;
 }
 
 .grid-item:hover {
-    box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
+    box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.45);
     transition-property: box-shadow;
     transition-duration: .2s;
 
 }
 
 .selected_node {
-    box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
-    background-color: #CCECD7;
+    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.45);
+    background-color: #fff;
     transition-property: background-color;
     transition-duration: .2s;
 }
@@ -47,13 +48,12 @@
 .disabled_node {
     cursor: not-allowed;
     background-color: #EFEFEF;
-    box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.75);
     transition-property: box-shadow;
     transition-duration: .2s;
+    border: 1px solid #ccc;
 }
 
 .disabled_node:hover {
-    box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.75);
 }
 
 .cleared_node {
@@ -67,26 +67,67 @@
     margin-top: 10px;
 }
 
+#dropdown_wrapper > div > h5 {
+    margin: 12px;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+#dropdown_wrapper > div > button {
+    padding: 7px;
+    margin: 2px;
+    float: right;
+    width: 80px;
+}
+#dropdown_wrapper > div > input {
+    padding: 7px;
+    margin: 2px;
+    float: right;
+    width: 300px;
+    width: calc(100% - 240px);
+}
+
+#dropdown_wrapper > div {
+    border:2px;
+    border-style:none;
+    border-color:black;
+    border-radius: 5px;
+    margin:20px;
+    padding: 2px;
+    box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.75);
+    transition-property: box-shadow, background-color;
+    transition-duration: .2s;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+#dropdown_wrapper {
+    display: grid;
+    grid-template-columns: 3fr 5fr;
+}
+
 </style>
 <input name="filter_field" id="filter_field" type="hidden"/>
 <div id="grid_wrapper" class="grid_wrapper">
 {% for object_class, object_list in filter_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="object_parent">
-        <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="processClick('{{obj.id}}', {% if obj.multiple %}true{% else %}false{% endif %});">{% if obj.multiple %}Add{% else %}Select{% endif %}</button>
+    <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="processClick(
+                    '{{obj.id}}',
+                    {% if obj.multiple %}true
+                    {% else %}false
+                    {% endif %});">{% if obj.multiple %}Add{% else %}Select{% endif %}</button>
+            </div>
+            <input type="hidden" name="{{obj.id}}_selected" value="false"/>
+        {% endfor %}
         </div>
-        <input type="hidden" name="{{obj.id}}_selected" value="false"/>
-    </div>
-    {% endfor %}
-    </div>
     </div>
 {% endfor %}
 </div>
@@ -97,7 +138,7 @@
 <script>
 var initialized = false;
 var mapping = {{ mapping|safe }};
-var items = {{ items|safe }};
+var filter_items = {{ filter_items|safe }};
 var result = {};
 var selection = {{selection_data|default_if_none:"null"|safe}};
 var dropdown_count = 0;
@@ -108,31 +149,32 @@ make_selection({{selection_data|safe}});
 
 function make_selection( selection_data ){
     if(!initialized) {
-        init();
+        filter_field_init();
     }
     for(var k in selection_data) {
         selected_items = selection_data[k];
-        for( var item in selected_items ){
-            var node = items[item];
+        for( var selected_item in selected_items ){
+            var node = filter_items[selected_item];
             if(!node['multiple']){
-                var input_value = selected_items[item];
+                var input_value = selected_items[selected_item];
                 if( input_value != 'false' ) {
                     select(node);
                     markAndSweep(node);
                 }
-                var div = document.getElementById(item)
+                var div = document.getElementById(selected_item)
+                var inputs = div.parentNode.getElementsByTagName("input")
                 var input = div.parentNode.getElementsByTagName("input")[0]
                 input.value = input_value;
-                updateResult(item);
+                updateResult(selected_item);
             } else {
-                make_multiple_selection(selected_items, item);
+                make_multiple_selection(selected_items, selected_item);
             }
         }
     }
 }
 
 function make_multiple_selection(data, item_class){
-    var node = items[item_class];
+    var node = filter_items[item_class];
     select(node);
     markAndSweep(node);
     prepop_data = data[item_class];
@@ -143,14 +185,13 @@ function make_multiple_selection(data, item_class){
 }
 
 function markAndSweep(root){
-    for(var nodeId in items) {
-        node = items[nodeId];
+    for(var nodeId in filter_items) {
+        node = filter_items[nodeId];
         node['marked'] = true; //mark all nodes
         //clears grey background of everything
     }
 
-    toCheck = [];
-    toCheck.push(root);
+    toCheck = [root];
 
     while(toCheck.length > 0){
         node = toCheck.pop();
@@ -164,17 +205,17 @@ function markAndSweep(root){
             var neighbors = mapping[mappingId];
             for(var neighId in neighbors) {
                 neighId = neighbors[neighId];
-                var neighbor = items[neighId];
+                var neighbor = filter_items[neighId];
                 toCheck.push(neighbor);
             }
         }
     }
 
     //now remove all nodes still marked
-    for(var nodeId in items){
-        node = items[nodeId];
+    for(var nodeId in filter_items){
+        node = filter_items[nodeId];
         if(node['marked']){
-            disable(node);
+            disable_node(node);
         }
     }
 }
@@ -186,8 +227,8 @@ function process(node) {
     else {
         var selected = []
         //remember the currently selected, then reset everything and reselect one at a time
-        for(var nodeId in items) {
-            node = items[nodeId];
+        for(var nodeId in filter_items) {
+            node = filter_items[nodeId];
             if(node['selected']) {
                 selected.push(node);
             }
@@ -205,9 +246,9 @@ function process(node) {
 function select(node) {
     elem = document.getElementById(node['id']);
     node['selected'] = true;
-    elem.classList.remove('cleared_node')
-    elem.classList.remove('disabled_node')
-    elem.classList.add('selected_node')
+    elem.classList.remove('cleared_node');
+    elem.classList.remove('disabled_node');
+    elem.classList.add('selected_node');
     var input = elem.parentNode.getElementsByTagName("input")[0];
     input.disabled = false;
     input.value = true;
@@ -218,27 +259,27 @@ function clear(node) {
     node['selected'] = false;
     node['selectable'] = true;
     elem.classList.add('cleared_node')
-    elem.classList.remove('disabled_node')
-    elem.classList.remove('selected_node')
+    elem.classList.remove('disabled_node');
+    elem.classList.remove('selected_node');
     elem.parentNode.getElementsByTagName("input")[0].disabled = true;
 }
 
-function disable(node) {
+function disable_node(node) {
     elem = document.getElementById(node['id']);
     node['selected'] = false;
     node['selectable'] = false;
-    elem.classList.remove('cleared_node')
-    elem.classList.add('disabled_node')
-    elem.classList.remove('selected_node')
+    elem.classList.remove('cleared_node');
+    elem.classList.add('disabled_node');
+    elem.classList.remove('selected_node');
     elem.parentNode.getElementsByTagName("input")[0].disabled = true;
 }
 
 function processClick(id, multiple){
     if(!initialized){
-        init();
+        filter_field_init();
     }
     var element = document.getElementById(id);
-    var node = items[id];
+    var node = filter_items[id];
     if(!node['selectable']){
         return;
     }
@@ -249,8 +290,7 @@ function processClick(id, multiple){
 
     if(node['selected']) {
         select(node);
-    }
-    else {
+    } else {
         clear(node);
     }
     process(node);
@@ -259,26 +299,22 @@ function processClick(id, multiple){
 
 function processClickMultipleObject(node){
     select(node);
-    add_item(node);
+    add_node(node);
     process(node);
 }
 
-function add_item(node){
+function add_node(node){
     return add_item_prepopulate(node, {});
 }
 
 inputs = []
 
-function restrictchars(input)
-{
-    if( input.validity.patternMismatch )
-    {
+function restrictchars(input){
+    if( input.validity.patternMismatch ){
         input.setCustomValidity("Only alphanumeric characters (a-z, A-Z, 0-9), underscore(_), and hyphen (-) are allowed");
         input.reportValidity();
     }
-
     input.value = input.value.replace(/([^A-Za-z0-9-_.])+/g, "");
-
     checkunique(input);
 }
 
@@ -304,9 +340,14 @@ function add_item_prepopulate(node, prepopulate){
     div.id = "dropdown_" + dropdown_count;
     dropdown_count++;
     var label = document.createElement("H5");
-    label.style['display'] = 'inline';
     label.appendChild(document.createTextNode(node['name']));
     div.appendChild(label);
+    button = document.createElement("BUTTON");
+    button.type = "button";
+    button.appendChild(document.createTextNode("Remove"));
+    button.classList.add("btn-danger");
+    button.classList.add("btn");
+    div.appendChild(button);
     for(var i=0; i<node['forms'].length; i++){
         form = node['forms'][i];
         var input = document.createElement("INPUT");
@@ -329,14 +370,12 @@ function add_item_prepopulate(node, prepopulate){
     hiddenInput.name = "class";
     hiddenInput.value = node['id'];
     div.appendChild(hiddenInput);
-    button = document.createElement("BUTTON");
     button.onclick = function(){
         remove_dropdown(div.id);
     }
-    button.type = "button";
-    button.appendChild(document.createTextNode("Remove"));
-    div.appendChild(button);
     document.getElementById("dropdown_wrapper").appendChild(div);
+    var linebreak = document.createElement("BR");
+    document.getElementById("dropdown_wrapper").appendChild(linebreak);
     updateObjectResult(div);
     return div;
 }
@@ -364,24 +403,25 @@ function remove_dropdown(id){
         }
     }
     if(deselect_class){
-        clear(items[div_class]);
+        clear(filter_items[div_class]);
     }
 }
 
 function updateResult(nodeId){
     if(!initialized){
-        init();
+        filter_field_init();
     }
-    if(!items[nodeId]['multiple']){
+    if(!filter_items[nodeId]['multiple']){
         var node = document.getElementById(nodeId);
         var value = {}
         value[nodeId] = node.parentNode.getElementsByTagName("input")[0].value;
-        result[node.parentNode.parentNode.id][nodeId] = value;
+        result[node.parentNode.id] = {};
+        result[node.parentNode.id][nodeId] = value;
     }
 }
 
 function updateObjectResult(parentElem){
-    node_type = document.getElementById(parentElem.class).parentNode.parentNode.id;
+    node_type = document.getElementById(parentElem.class).parentNode.id;
     input = {};
     inputs = parentElem.getElementsByTagName("input");
     for(var i in inputs){
@@ -391,11 +431,11 @@ function updateObjectResult(parentElem){
     result[node_type][parentElem.id] = input;
 }
 
-function init() {
-    for(nodeId in items) {
+function filter_field_init() {
+    for(nodeId in filter_items) {
         element = document.getElementById(nodeId);
-        node = items[nodeId];
-        result[element.parentNode.parentNode.id] = {}
+        node = filter_items[nodeId];
+        result[element.parentNode.id] = {}
         }
     initialized = true;
 }