}
.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;
}
.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 {
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>
<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;
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];
}
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();
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);
}
}
}
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);
}
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;
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;
}
if(node['selected']) {
select(node);
- }
- else {
+ } else {
clear(node);
}
process(node);
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);
}
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");
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;
}
}
}
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){
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;
}
Code Review / pharos-tools.git / blobdiff