src/static/js/dashboard.js

   1 ///////////////////
   2 // Global Variables
   3 ///////////////////
   4
   5 form_submission_callbacks = [];  //all runnables will be executed before form submission
   6
   7 ///////////////////
   8 // Global Functions
   9 ///////////////////
  10
  11 // Taken from https://docs.djangoproject.com/en/3.0/ref/csrf/
  12 function getCookie(name) {
  13     var cookieValue = null;
  14     if (document.cookie && document.cookie !== '') {
  15         var cookies = document.cookie.split(';');
  16         for (var i = 0; i < cookies.length; i++) {
  17             var cookie = cookies[i].trim();
  18             // Does this cookie string begin with the name we want?
  19             if (cookie.substring(0, name.length + 1) === (name + '=')) {
  20                 cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
  21                 break;
  22             }
  23         }
  24     }
  25     return cookieValue;
  26 }
  27
  28 function update_page(response) {
  29     if( response.redirect )
  30     {
  31         window.location.replace(response.redirect);
  32         return;
  33     }
  34     draw_breadcrumbs(response.meta);
  35     update_exit_button(response.meta);
  36     update_side_buttons(response.meta);
  37     $("#formContainer").html(response.content);
  38 }
  39
  40 function update_side_buttons(meta) {
  41     const step = meta.active;
  42     const page_count = meta.steps.length;
  43
  44     const back_button = document.getElementById("gob");
  45     if (step == 0) {
  46         back_button.classList.add("disabled");
  47         back_button.disabled = true;
  48     } else {
  49         back_button.classList.remove("disabled");
  50         back_button.disabled = false;
  51     }
  52
  53     const forward_btn = document.getElementById("gof");
  54     if (step == page_count - 1) {
  55         forward_btn.classList.add("disabled");
  56         forward_btn.disabled = true;
  57     } else {
  58         forward_btn.classList.remove("disabled");
  59         forward_btn.disabled = false;
  60     }
  61 }
  62
  63 function update_exit_button(meta) {
  64     if (meta.workflow_count == 1) {
  65         document.getElementById("cancel_btn").innerText = "Exit Workflow";
  66     } else {
  67         document.getElementById("cancel_btn").innerText = "Return to Parent";
  68     }
  69 }
  70
  71 function draw_breadcrumbs(meta) {
  72     $("#topPagination").children().not(".page-control").remove();
  73
  74     for (const i in meta.steps) {
  75         const step_btn = create_step(meta.steps[i], i == meta["active"]);
  76         $("#topPagination li:last-child").before(step_btn);
  77     }
  78 }
  79
  80 function create_step(step_json, active) {
  81     const step_dom = document.createElement("li");
  82     // First create the dom object depending on active or not
  83     step_dom.className = "topcrumb";
  84     if (active) {
  85         step_dom.classList.add("active");
  86     }
  87     $(step_dom).html(`<span class="d-flex align-items-center justify-content-center text-capitalize w-100">${step_json['title']}</span>`)
  88
  89     const code = step_json.valid;
  90
  91     let stat = "";
  92     let msg = "";
  93     if (code < 100) {
  94         $(step_dom).children().first().append("<i class='ml-2 far fa-square'></i>")
  95         stat = "";
  96         msg = "";
  97     } else if (code < 200) {
  98         $(step_dom).children().first().append("<i class='ml-2 fas fa-minus-square'></i>")
  99         stat = "invalid";
 100         msg = step_json.message;
 101     } else if (code < 300) {
 102         $(step_dom).children().first().append("<i class='ml-2 far fa-check-square'></i>")
 103         stat = "valid";
 104         msg = step_json.message;
 105     }
 106
 107     if (step_json.enabled == false) {
 108         step_dom.classList.add("disabled");
 109     }
 110     if (active) {
 111         update_message(msg, stat);
 112     }
 113
 114     return step_dom;
 115 }
 116
 117 function update_description(title, desc) {
 118     document.getElementById("view_title").innerText = title;
 119     document.getElementById("view_desc").innerText = desc;
 120 }
 121
 122 function update_message(message, stepstatus) {
 123     document.getElementById("view_message").innerText = message;
 124     document.getElementById("view_message").className = "step_message";
 125     document.getElementById("view_message").classList.add("message_" + stepstatus);
 126 }
 127
 128 function submitStepForm(next_step = "current"){
 129     run_form_callbacks();
 130     const step_form_data = $("#step_form").serialize();
 131     const form_data = $.param({
 132         "step": next_step,
 133         "step_form": step_form_data,
 134         "csrfmiddlewaretoken": $("[name=csrfmiddlewaretoken]").val()
 135     });
 136     $.post(
 137         '/workflow/manager/',
 138         form_data,
 139         (data) => update_page(data),
 140         'json'
 141     ).fail(() => alert("failure"));
 142 }
 143
 144 function run_form_callbacks(){
 145     for(f of form_submission_callbacks)
 146         f();
 147     form_submission_callbacks = [];
 148 }
 149
 150 function create_workflow(type) {
 151     $.ajax({
 152         type: "POST",
 153         url: "/workflow/create/",
 154         data: {
 155             "workflow_type": type
 156         },
 157         headers: {
 158             "X-CSRFToken": getCookie('csrftoken')
 159         }
 160     }).done(function (data, textStatus, jqXHR) {
 161         window.location = "/workflow/";
 162     }).fail(function (jqxHR, textstatus) {
 163         alert("Something went wrong...");
 164     });
 165 }
 166
 167 function add_workflow(type) {
 168     data = $.ajax({
 169         type: "POST",
 170         url: "/workflow/add/",
 171         data: {
 172             "workflow_type": type
 173         },
 174         headers: {
 175             "X-CSRFToken": getCookie('csrftoken')
 176         }
 177     }).done(function (data, textStatus, jqXHR) {
 178         update_page(data);
 179     }).fail(function (jqxHR, textstatus) {
 180         alert("Something went wrong...");
 181     });
 182 }
 183
 184 function pop_workflow() {
 185     data = $.ajax({
 186         type: "POST",
 187         url: "/workflow/pop/",
 188         headers: {
 189             "X-CSRFToken": getCookie('csrftoken')
 190         }
 191     }).done(function (data, textStatus, jqXHR) {
 192         update_page(data);
 193     }).fail(function (jqxHR, textstatus) {
 194         alert("Something went wrong...");
 195     });
 196 }
 197
 198 function continue_workflow() {
 199     window.location.replace("/workflow/");
 200 }
 201
 202 ///////////////////
 203 //Class Definitions
 204 ///////////////////
 205
 206 class MultipleSelectFilterWidget {
 207
 208     constructor(neighbors, items, initial) {
 209         this.inputs = [];
 210         this.graph_neighbors = neighbors;
 211         this.filter_items = items;
 212         this.currentLab = null;
 213         this.available_resources = {};
 214         this.result = {};
 215         this.dropdown_count = 0;
 216
 217         for(let nodeId in this.filter_items) {
 218             const node = this.filter_items[nodeId];
 219             this.result[node.class] = {}
 220         }
 221
 222         this.make_selection(initial);
 223     }
 224
 225     make_selection(initial_data){
 226         if(!initial_data || jQuery.isEmptyObject(initial_data))
 227             return;
 228
 229         // Need to sort through labs first
 230         let initial_lab = initial_data['lab'];
 231         let initial_resources = initial_data['resource'];
 232
 233         for( let node_id in initial_lab) { // This should only be length one
 234             const node = this.filter_items[node_id];
 235             const selection_data = initial_lab[node_id];
 236             if( selection_data.selected ) {
 237                 this.select(node);
 238                 this.markAndSweep(node);
 239                 this.updateResult(node);
 240             }
 241             if(node['multiple']){
 242                 this.make_multiple_selection(node, selection_data);
 243             }
 244             this.currentLab = node;
 245             this.available_resources = JSON.parse(node['available_resources']);
 246         }
 247
 248         for( let node_id in initial_resources){
 249             const node = this.filter_items[node_id];
 250             const selection_data = initial_resources[node_id];
 251             if( selection_data.selected ) {
 252                 this.select(node);
 253                 this.markAndSweep(node);
 254                 this.updateResult(node);
 255             }
 256             if(node['multiple']){
 257                 this.make_multiple_selection(node, selection_data);
 258             }
 259         }
 260         this.updateAvailibility();
 261     }
 262
 263     make_multiple_selection(node, selection_data){
 264         const prepop_data = selection_data.values;
 265         for(let k in prepop_data){
 266             const div = this.add_item_prepopulate(node, prepop_data[k]);
 267             this.updateObjectResult(node, div.id, prepop_data[k]);
 268         }
 269     }
 270
 271     markAndSweep(root){
 272         for(let i in this.filter_items) {
 273             const node = this.filter_items[i];
 274             node['marked'] = true; //mark all nodes
 275         }
 276
 277         const toCheck = [root];
 278         while(toCheck.length > 0){
 279             const node = toCheck.pop();
 280
 281             if(!node['marked']) {
 282                 continue; //already visited, just continue
 283             }
 284
 285             node['marked'] = false; //mark as visited
 286             if(node['follow'] || node == root){ //add neighbors if we want to follow this node
 287                 const neighbors = this.graph_neighbors[node.id];
 288                 for(let neighId of neighbors) {
 289                     const neighbor = this.filter_items[neighId];
 290                     toCheck.push(neighbor);
 291                 }
 292             }
 293         }
 294
 295         //now remove all nodes still marked
 296         for(let i in this.filter_items){
 297             const node = this.filter_items[i];
 298             if(node['marked']){
 299                 this.disable_node(node);
 300             }
 301         }
 302     }
 303
 304     process(node) {
 305         if(node['selected']) {
 306             this.markAndSweep(node);
 307         }
 308         else {  //TODO: make this not dumb
 309             const selected = []
 310             //remember the currently selected, then reset everything and reselect one at a time
 311             for(let nodeId in this.filter_items) {
 312                 node = this.filter_items[nodeId];
 313                 if(node['selected']) {
 314                     selected.push(node);
 315                 }
 316                 this.clear(node);
 317             }
 318             for(let node of selected) {
 319                 this.select(node);
 320                 this.markAndSweep(node);
 321             }
 322         }
 323     }
 324
 325     select(node) {
 326         const elem = document.getElementById(node['id']);
 327         node['selected'] = true;
 328         elem.classList.remove('bg-white', 'not-allowed', 'bg-light');
 329         elem.classList.add('selected_node');
 330
 331         if(node['class'] == 'resource')
 332             this.reserveResource(node);
 333
 334     }
 335
 336     clear(node) {
 337         const elem = document.getElementById(node['id']);
 338         node['selected'] = false;
 339         node['selectable'] = true;
 340         elem.classList.add('bg-white')
 341         elem.classList.remove('not-allowed', 'bg-light', 'selected_node');
 342     }
 343
 344     disable_node(node) {
 345         const elem = document.getElementById(node['id']);
 346         node['selected'] = false;
 347         node['selectable'] = false;
 348         elem.classList.remove('bg-white', 'selected_node');
 349         elem.classList.add('not-allowed', 'bg-light');
 350     }
 351
 352     labCheck(node){
 353         // if lab is not already selected update available resources
 354         if(!node['selected']) {
 355             this.currentLab = node;
 356             this.available_resources = JSON.parse(node['available_resources']);
 357             this.updateAvailibility();
 358         } else {
 359             // a lab is already selected, clear already selected resources
 360             if(confirm('Unselecting a lab will reset all selected resources, are you sure?')) {
 361                 location.reload();
 362                 return false;
 363             }
 364         }
 365         return true;
 366     }
 367
 368     updateAvailibility() {
 369         const lab_resources = this.graph_neighbors[this.currentLab.id];
 370
 371         // need to loop through and update all quantities
 372         for(let i in lab_resources) {
 373             const resource_node = this.filter_items[lab_resources[i]];
 374             const required_resources = JSON.parse(resource_node['required_resources']);
 375             let elem = document.getElementById(resource_node.id).getElementsByClassName("grid-item-description")[0];
 376             let leastAvailable = 100;
 377             let currCount;
 378             let quantityDescription;
 379             let quantityNode;
 380
 381             for(let resource in required_resources) {
 382                 currCount = Math.floor(this.available_resources[resource] / required_resources[resource]);
 383                 if(currCount < leastAvailable)
 384                     leastAvailable = currCount;
 385
 386                 if(!currCount || currCount < 0) {
 387                     leastAvailable = 0
 388                     break;
 389                 }
 390             }
 391
 392             if (elem.children[0]){
 393                 elem.removeChild(elem.children[0]);
 394             }
 395
 396             quantityDescription = '<br> Quantity Currently Available: ' + leastAvailable;
 397             quantityNode = document.createElement('P');
 398             if (leastAvailable > 0) {
 399                 quantityDescription = quantityDescription.fontcolor('green');
 400             } else {
 401                 quantityDescription = quantityDescription.fontcolor('red');
 402             }
 403
 404             quantityNode.innerHTML = quantityDescription;
 405             elem.appendChild(quantityNode)
 406         }
 407     }
 408
 409     reserveResource(node){
 410         const required_resources = JSON.parse(node['required_resources']);
 411         let hostname = document.getElementById('id_hostname');
 412         let image = document.getElementById('id_image');
 413         let cnt = 0
 414
 415
 416         for(let resource in required_resources){
 417             this.available_resources[resource] -= required_resources[resource];
 418             cnt += required_resources[resource];
 419         }
 420
 421         if (cnt > 1 && hostname && image) {
 422             hostname.readOnly = true;
 423             image.disabled = true;
 424         }
 425
 426         this.updateAvailibility();
 427     }
 428
 429     releaseResource(node){
 430         const required_resources = JSON.parse(node['required_resources']);
 431         let hostname = document.getElementById('id_hostname');
 432         let image = document.getElementById('id_image');
 433
 434         for(let resource in required_resources){
 435             this.available_resources[resource] += required_resources[resource];
 436         }
 437
 438         if (hostname && image) {
 439             hostname.readOnly = false;
 440             image.disabled = false;
 441         }
 442
 443         this.updateAvailibility();
 444     }
 445
 446     processClick(id){
 447         let lab_check;
 448         const node = this.filter_items[id];
 449         if(!node['selectable'])
 450             return;
 451
 452         // If they are selecting a lab, update accordingly
 453         if (node['class'] == 'lab') {
 454             lab_check = this.labCheck(node);
 455             if (!lab_check)
 456                 return;
 457         }
 458
 459         // Can only select a resource if a lab is selected
 460         if (!this.currentLab) {
 461             alert('You must select a lab before selecting a resource');
 462             return;
 463         }
 464
 465         if(node['multiple']){
 466             return this.processClickMultiple(node);
 467         } else {
 468             return this.processClickSingle(node);
 469         }
 470     }
 471
 472     processClickSingle(node){
 473         node['selected'] = !node['selected']; //toggle on click
 474         if(node['selected']) {
 475             this.select(node);
 476         } else {
 477             this.clear(node);
 478             this.releaseResource(node); // can't do this in clear since clear removes border
 479         }
 480         this.process(node);
 481         this.updateResult(node);
 482     }
 483
 484     processClickMultiple(node){
 485         this.select(node);
 486         const div = this.add_item_prepopulate(node, false);
 487         this.process(node);
 488         this.updateObjectResult(node, div.id, "");
 489     }
 490
 491     restrictchars(input){
 492         if( input.validity.patternMismatch ){
 493             input.setCustomValidity("Only alphanumeric characters (a-z, A-Z, 0-9), underscore(_), and hyphen (-) are allowed");
 494             input.reportValidity();
 495         }
 496         input.value = input.value.replace(/([^A-Za-z0-9-_.])+/g, "");
 497         this.checkunique(input);
 498     }
 499
 500     checkunique(tocheck){ //TODO: use set
 501         const val = tocheck.value;
 502         for( let input of this.inputs ){
 503             if( input.value == val && input != tocheck){
 504                 tocheck.setCustomValidity("All hostnames must be unique");
 505                 tocheck.reportValidity();
 506                 return;
 507             }
 508         }
 509         tocheck.setCustomValidity("");
 510     }
 511
 512     make_remove_button(div, node){
 513         const button = document.createElement("BUTTON");
 514         button.type = "button";
 515         button.appendChild(document.createTextNode("Remove"));
 516         button.classList.add("btn", "btn-danger", "d-inline-block");
 517         const that = this;
 518         button.onclick = function(){ that.remove_dropdown(div.id, node.id); }
 519         return button;
 520     }
 521
 522     make_input(div, node, prepopulate){
 523         const input = document.createElement("INPUT");
 524         input.type = node.form.type;
 525         input.name = node.id + node.form.name
 526         input.classList.add("form-control", "w-auto", "d-inline-block");
 527         input.pattern = "(?=^.{1,253}$)(^([A-Za-z0-9-_]{1,62}\.)*[A-Za-z0-9-_]{1,63})";
 528         input.title = "Only alphanumeric characters (a-z, A-Z, 0-9), underscore(_), and hyphen (-) are allowed"
 529         input.placeholder = node.form.placeholder;
 530         this.inputs.push(input);
 531         const that = this;
 532         input.onchange = function() { that.updateObjectResult(node, div.id, input.value); that.restrictchars(this); };
 533         input.oninput = function() { that.restrictchars(this); };
 534         if(prepopulate)
 535             input.value = prepopulate;
 536         return input;
 537     }
 538
 539     add_item_prepopulate(node, prepopulate){
 540         const div = document.createElement("DIV");
 541         div.id = "dropdown_" + this.dropdown_count;
 542         div.classList.add("card", "flex-row", "d-flex", "mb-2");
 543         this.dropdown_count++;
 544         const label = document.createElement("H5")
 545         label.appendChild(document.createTextNode(node['name']))
 546         label.classList.add("p-1", "m-1", "flex-grow-1");
 547         div.appendChild(label);
 548         let remove_btn = this.make_remove_button(div, node);
 549         remove_btn.classList.add("p-1", "m-1");
 550         div.appendChild(remove_btn);
 551         document.getElementById("dropdown_wrapper").appendChild(div);
 552         return div;
 553     }
 554
 555     remove_dropdown(div_id, node_id){
 556         const div = document.getElementById(div_id);
 557         const node = this.filter_items[node_id]
 558         const parent = div.parentNode;
 559         div.parentNode.removeChild(div);
 560         this.result[node.class][node.id]['count']--;
 561         this.releaseResource(node); // This can't be done on clear b/c clear removes border
 562
 563         //checks if we have removed last item in class
 564         if(this.result[node.class][node.id]['count'] == 0){
 565             delete this.result[node.class][node.id];
 566             this.clear(node);
 567         }
 568     }
 569
 570     updateResult(node){
 571         if(!node['multiple']){
 572             this.result[node.class][node.id] = {selected: node.selected, id: node.model_id}
 573             if(!node.selected)
 574                 delete this.result[node.class][node.id];
 575         }
 576     }
 577
 578     updateObjectResult(node, childKey, childValue){
 579         if(!this.result[node.class][node.id])
 580             this.result[node.class][node.id] = {selected: true, id: node.model_id, count: 0}
 581
 582         this.result[node.class][node.id]['count']++;
 583     }
 584
 585     finish(){
 586         document.getElementById("filter_field").value = JSON.stringify(this.result);
 587     }
 588 }
 589
 590 class NetworkStep {
 591     // expects:
 592     //
 593     // debug: bool
 594     // resources: {
 595     //     id: {
 596     //         id: int,
 597     //         value: {
 598     //             description: string,
 599     //         },
 600     //         interfaces: [
 601     //             id: int,
 602     //             name: str,
 603     //             description: str,
 604     //             connections: [
 605     //                 {
 606     //                     network: int, [networks.id]
 607     //                     tagged: bool
 608     //                 }
 609     //             ],
 610     //         ],
 611     //     }
 612     // }
 613     // networks: {
 614     //     id: {
 615     //         id: int,
 616     //         name: str,
 617     //         public: bool,
 618     //     }
 619     // }
 620     //
 621     constructor(debug, resources, networks, graphContainer, overviewContainer, toolbarContainer){
 622         if(!this.check_support()) {
 623             console.log("Aborting, browser is not supported");
 624             return;
 625         }
 626
 627         this.currentWindow = null;
 628         this.netCount = 0;
 629         this.netColors = ['red', 'blue', 'purple', 'green', 'orange', '#8CCDF5', '#1E9BAC'];
 630         this.hostCount = 0;
 631         this.lastHostBottom = 100;
 632         this.networks = new Set();
 633         this.has_public_net = false;
 634         this.debug = debug;
 635         this.editor = new mxEditor();
 636         this.graph = this.editor.graph;
 637
 638         window.global_graph = this.graph;
 639         window.network_rr_index = 5;
 640
 641         this.editor.setGraphContainer(graphContainer);
 642         this.doGlobalConfig();
 643
 644         let mx_networks = {}
 645
 646         for(const network_id in networks) {
 647             let network = networks[network_id];
 648
 649             mx_networks[network_id] = this.populateNetwork(network);
 650         }
 651
 652         this.prefillHosts(resources, mx_networks);
 653
 654         //this.addToolbarButton(this.editor, toolbarContainer, 'zoomIn', '', "/static/img/mxgraph/zoom_in.png", true);
 655         //this.addToolbarButton(this.editor, toolbarContainer, 'zoomOut', '', "/static/img/mxgraph/zoom_out.png", true);
 656         this.addToolbarButton(this.editor, toolbarContainer, 'zoomIn', 'fa-search-plus');
 657         this.addToolbarButton(this.editor, toolbarContainer, 'zoomOut', 'fa-search-minus');
 658
 659         if(this.debug){
 660             this.editor.addAction('printXML', function(editor, cell) {
 661                 mxLog.write(this.encodeGraph());
 662                 mxLog.show();
 663             }.bind(this));
 664             this.addToolbarButton(this.editor, toolbarContainer, 'printXML', 'fa-file-code');
 665         }
 666
 667         new mxOutline(this.graph, overviewContainer);
 668         //sets the edge color to be the same as the network
 669         this.graph.addListener(mxEvent.CELL_CONNECTED, function(sender, event) {this.cellConnectionHandler(sender, event)}.bind(this));
 670         //hooks up double click functionality
 671         this.graph.dblClick = function(evt, cell) {this.doubleClickHandler(evt, cell);}.bind(this);
 672     }
 673
 674     check_support(){
 675         if (!mxClient.isBrowserSupported()) {
 676             mxUtils.error('Browser is not supported', 200, false);
 677             return false;
 678         }
 679         return true;
 680     }
 681
 682     /**
 683      * Expects
 684      * mx_interface: mxCell for the interface itself
 685      * network: mxCell for the outer network
 686      * tagged: bool
 687      */
 688     connectNetwork(mx_interface, network, tagged) {
 689         var cell = new mxCell(
 690             "connection from " + network + " to " + mx_interface,
 691             new mxGeometry(0, 0, 50, 50));
 692         cell.edge = true;
 693         cell.geometry.relative = true;
 694         cell.setValue(JSON.stringify({tagged: tagged}));
 695
 696         let terminal = this.getClosestNetworkCell(mx_interface.geometry.y, network);
 697         let edge = this.graph.addEdge(cell, null, mx_interface, terminal);
 698         this.colorEdge(edge, terminal, true);
 699         this.graph.refresh(edge);
 700     }
 701
 702     /**
 703      * Expects:
 704      *
 705      * to: desired y axis position of the matching cell
 706      * within: graph cell for a full network, with all child cells
 707      *
 708      * Returns:
 709      * an mx cell, the one vertically closest to the desired value
 710      *
 711      * Side effect:
 712      * modifies the <rr_index> on the <within> parameter
 713      */
 714     getClosestNetworkCell(to, within) {
 715         if(window.network_rr_index === undefined) {
 716             window.network_rr_index = 5;
 717         }
 718
 719         let child_keys = within.children.keys();
 720         let children = Array.from(within.children);
 721         let index = (window.network_rr_index++) % children.length;
 722
 723         let child = within.children[child_keys[index]];
 724
 725         return children[index];
 726     }
 727
 728     /** Expects
 729      *
 730      * hosts: {
 731      *     id: {
 732      *         id: int,
 733      *         value: {
 734      *             description: string,
 735      *         },
 736      *         interfaces: [
 737      *             id: int,
 738      *             name: str,
 739      *             description: str,
 740      *             connections: [
 741      *                 {
 742      *                     network: int, [networks.id]
 743      *                     tagged: bool
 744      *                 }
 745      *             ],
 746      *         ],
 747      *     }
 748      * }
 749      *
 750      * network_mappings: {
 751      *     <django network id>: <mxnetwork id>
 752      * }
 753      *
 754      * draws given hosts into the mxgraph
 755      */
 756     prefillHosts(hosts, network_mappings){
 757         for(const host_id in hosts) {
 758             this.makeHost(hosts[host_id], network_mappings);
 759         }
 760     }
 761
 762     cellConnectionHandler(sender, event){
 763         const edge = event.getProperty('edge');
 764         const terminal = event.getProperty('terminal')
 765         const source = event.getProperty('source');
 766         if(this.checkAllowed(edge, terminal, source)) {
 767             this.colorEdge(edge, terminal, source);
 768             this.alertVlan(edge, terminal, source);
 769         }
 770     }
 771
 772     doubleClickHandler(evt, cell) {
 773         if( cell != null ){
 774             if( cell.getParent() != null && cell.getParent().getId().indexOf("network") > -1) {
 775                 cell = cell.getParent();
 776             }
 777             if( cell.isEdge() || cell.getId().indexOf("network") > -1 ) {
 778                 this.createDeleteDialog(cell.getId());
 779             }
 780             else {
 781                 this.showDetailWindow(cell);
 782            }
 783         }
 784     }
 785
 786     alertVlan(edge, terminal, source) {
 787         if( terminal == null || edge.getTerminal(!source) == null) {
 788             return;
 789         }
 790         const form = document.createElement("form");
 791         const tagged = document.createElement("input");
 792         tagged.type = "radio";
 793         tagged.name = "tagged";
 794         tagged.value = "True";
 795         form.appendChild(tagged);
 796         form.appendChild(document.createTextNode(" Tagged"));
 797         form.appendChild(document.createElement("br"));
 798
 799         const untagged = document.createElement("input");
 800         untagged.type = "radio";
 801         untagged.name = "tagged";
 802         untagged.value = "False";
 803         form.appendChild(untagged);
 804         form.appendChild(document.createTextNode(" Untagged"));
 805         form.appendChild(document.createElement("br"));
 806
 807         const yes_button = document.createElement("button");
 808         yes_button.onclick = function() {this.parseVlanWindow(edge.getId());}.bind(this);
 809         yes_button.appendChild(document.createTextNode("Okay"));
 810
 811         const cancel_button = document.createElement("button");
 812         cancel_button.onclick = function() {this.deleteVlanWindow(edge.getId());}.bind(this);
 813         cancel_button.appendChild(document.createTextNode("Cancel"));
 814
 815         const error_div = document.createElement("div");
 816         error_div.id = "current_window_errors";
 817         form.appendChild(error_div);
 818
 819         const content = document.createElement('div');
 820         content.appendChild(form);
 821         content.appendChild(yes_button);
 822         content.appendChild(cancel_button);
 823         this.showWindow("Vlan Selection", content, 200, 200);
 824     }
 825
 826     createDeleteDialog(id) {
 827         const content = document.createElement('div');
 828         const remove_button = document.createElement("button");
 829         remove_button.style.width = '46%';
 830         remove_button.onclick = function() { this.deleteCell(id);}.bind(this);
 831         remove_button.appendChild(document.createTextNode("Remove"));
 832         const cancel_button = document.createElement("button");
 833         cancel_button.style.width = '46%';
 834         cancel_button.onclick = function() { this.closeWindow();}.bind(this);
 835         cancel_button.appendChild(document.createTextNode("Cancel"));
 836
 837         content.appendChild(remove_button);
 838         content.appendChild(cancel_button);
 839         this.showWindow('Do you want to delete this network?', content, 200, 62);
 840     }
 841
 842     checkAllowed(edge, terminal, source) {
 843         //check if other terminal is null, and that they are different
 844         const otherTerminal = edge.getTerminal(!source);
 845         if(terminal != null && otherTerminal != null) {
 846             if( terminal.getParent().getId().split('_')[0] == //'host' or 'network'
 847                 otherTerminal.getParent().getId().split('_')[0] ) {
 848                 //not allowed
 849                 this.graph.removeCells([edge]);
 850                 return false;
 851             }
 852         }
 853         return true;
 854     }
 855
 856     colorEdge(edge, terminal, source) {
 857         if(terminal.getParent().getId().indexOf('network') >= 0) {
 858             const styles = terminal.getParent().getStyle().split(';');
 859             let color = 'black';
 860             for(let style of styles){
 861                 const kvp = style.split('=');
 862                 if(kvp[0] == "fillColor"){
 863                     color = kvp[1];
 864                 }
 865             }
 866
 867             edge.setStyle('strokeColor=' + color);
 868         } else {
 869             console.log("Failed to color " + edge + ", " + terminal + ", " + source);
 870         }
 871     }
 872
 873     showDetailWindow(cell) {
 874         const info = JSON.parse(cell.getValue());
 875         const content = document.createElement("div");
 876         const pre_tag = document.createElement("pre");
 877         pre_tag.appendChild(document.createTextNode("Name: " + info.name + "\nDescription:\n" + info.description));
 878         const ok_button = document.createElement("button");
 879         ok_button.onclick = function() { this.closeWindow();};
 880         content.appendChild(pre_tag);
 881         content.appendChild(ok_button);
 882         this.showWindow('Details', content, 400, 400);
 883     }
 884
 885     restoreFromXml(xml, editor) {
 886         const doc = mxUtils.parseXml(xml);
 887         const node = doc.documentElement;
 888         editor.readGraphModel(node);
 889
 890         //Iterate over all children, and parse the networks to add them to the sidebar
 891         for( const cell of this.graph.getModel().getChildren(this.graph.getDefaultParent())) {
 892             if(cell.getId().indexOf("network") > -1) {
 893                 const info = JSON.parse(cell.getValue());
 894                 const name = info['name'];
 895                 this.networks.add(name);
 896                 const styles = cell.getStyle().split(";");
 897                 let color = null;
 898                 for(const style of styles){
 899                     const kvp = style.split('=');
 900                     if(kvp[0] == "fillColor") {
 901                         color = kvp[1];
 902                         break;
 903                     }
 904                 }
 905                 if(info.public){
 906                     this.has_public_net = true;
 907                 }
 908                 this.netCount++;
 909                 this.makeSidebarNetwork(name, color, cell.getId());
 910             }
 911         }
 912     }
 913
 914     deleteCell(cellId) {
 915         var cell = this.graph.getModel().getCell(cellId);
 916         if( cellId.indexOf("network") > -1 ) {
 917             let elem = document.getElementById(cellId);
 918             elem.parentElement.removeChild(elem);
 919         }
 920         this.graph.removeCells([cell]);
 921         this.currentWindow.destroy();
 922     }
 923
 924     newNetworkWindow() {
 925         const input = document.createElement("input");
 926         input.type = "text";
 927         input.name = "net_name";
 928         input.maxlength = 100;
 929         input.id = "net_name_input";
 930         input.style.margin = "5px";
 931
 932         const yes_button = document.createElement("button");
 933         yes_button.onclick = function() {this.parseNetworkWindow();}.bind(this);
 934         yes_button.appendChild(document.createTextNode("Okay"));
 935
 936         const cancel_button = document.createElement("button");
 937         cancel_button.onclick = function() {this.closeWindow();}.bind(this);
 938         cancel_button.appendChild(document.createTextNode("Cancel"));
 939
 940         const error_div = document.createElement("div");
 941         error_div.id = "current_window_errors";
 942
 943         const content = document.createElement("div");
 944         content.appendChild(document.createTextNode("Name: "));
 945         content.appendChild(input);
 946         content.appendChild(document.createElement("br"));
 947         content.appendChild(yes_button);
 948         content.appendChild(cancel_button);
 949         content.appendChild(document.createElement("br"));
 950         content.appendChild(error_div);
 951
 952         this.showWindow("Network Creation", content, 300, 300);
 953     }
 954
 955     parseNetworkWindow() {
 956         const net_name = document.getElementById("net_name_input").value
 957         const error_div = document.getElementById("current_window_errors");
 958         if( this.networks.has(net_name) ){
 959             error_div.innerHTML = "All network names must be unique";
 960             return;
 961         }
 962         this.addNetwork(net_name);
 963         this.currentWindow.destroy();
 964     }
 965
 966     addToolbarButton(editor, toolbar, action, image) {
 967         const button = document.createElement('button');
 968         button.setAttribute('class', 'btn btn-sm m-1');
 969         if (image != null) {
 970             const icon = document.createElement('i');
 971             icon.setAttribute('class', 'fas ' + image);
 972             button.appendChild(icon);
 973         }
 974         mxEvent.addListener(button, 'click', function(evt) {
 975             editor.execute(action);
 976         });
 977         mxUtils.write(button, '');
 978         toolbar.appendChild(button);
 979     };
 980
 981     encodeGraph() {
 982         const encoder = new mxCodec();
 983         const xml = encoder.encode(this.graph.getModel());
 984         return mxUtils.getXml(xml);
 985     }
 986
 987     doGlobalConfig() {
 988         //general graph stuff
 989         this.graph.setMultigraph(false);
 990         this.graph.setCellsSelectable(false);
 991         this.graph.setCellsMovable(false);
 992
 993         //testing
 994         this.graph.vertexLabelIsMovable = true;
 995
 996         //edge behavior
 997         this.graph.setConnectable(true);
 998         this.graph.setAllowDanglingEdges(false);
 999         mxEdgeHandler.prototype.snapToTerminals = true;
1000         mxConstants.MIN_HOTSPOT_SIZE = 16;
1001         mxConstants.DEFAULT_HOTSPOT = 1;
1002         //edge 'style' (still affects behavior greatly)
1003         const style = this.graph.getStylesheet().getDefaultEdgeStyle();
1004         style[mxConstants.STYLE_EDGE] = mxConstants.EDGESTYLE_ELBOW;
1005         style[mxConstants.STYLE_ENDARROW] = mxConstants.NONE;
1006         style[mxConstants.STYLE_ROUNDED] = true;
1007         style[mxConstants.STYLE_FONTCOLOR] = 'black';
1008         style[mxConstants.STYLE_STROKECOLOR] = 'red';
1009         style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = '#FFFFFF';
1010         style[mxConstants.STYLE_STROKEWIDTH] = '3';
1011         style[mxConstants.STYLE_ROUNDED] = true;
1012         style[mxConstants.STYLE_EDGE] = mxEdgeStyle.EntityRelation;
1013
1014         const hostStyle = this.graph.getStylesheet().getDefaultVertexStyle();
1015         hostStyle[mxConstants.STYLE_ROUNDED] = 1;
1016
1017         this.graph.convertValueToString = function(cell) {
1018             try{
1019                 //changes value for edges with xml value
1020                 if(cell.isEdge()) {
1021                     if(JSON.parse(cell.getValue())["tagged"]) {
1022                         return "tagged";
1023                     }
1024                     return "untagged";
1025                 }
1026                 else{
1027                     return JSON.parse(cell.getValue())['name'];
1028                 }
1029             }
1030             catch(e){
1031                 return cell.getValue();
1032             }
1033         };
1034     }
1035
1036     showWindow(title, content, width, height) {
1037         //create transparent black background
1038         const background = document.createElement('div');
1039         background.style.position = 'absolute';
1040         background.style.left = '0px';
1041         background.style.top = '0px';
1042         background.style.right = '0px';
1043         background.style.bottom = '0px';
1044         background.style.background = 'black';
1045         mxUtils.setOpacity(background, 50);
1046         document.body.appendChild(background);
1047
1048         const x = Math.max(0, document.body.scrollWidth/2-width/2);
1049         const y = Math.max(10, (document.body.scrollHeight ||
1050                     document.documentElement.scrollHeight)/2-height*2/3);
1051
1052         const wnd = new mxWindow(title, content, x, y, width, height, false, true);
1053         wnd.setClosable(false);
1054
1055         wnd.addListener(mxEvent.DESTROY, function(evt) {
1056             this.graph.setEnabled(true);
1057             mxEffects.fadeOut(background, 50, true, 10, 30, true);
1058         }.bind(this));
1059         this.currentWindow = wnd;
1060
1061         this.graph.setEnabled(false);
1062         this.currentWindow.setVisible(true);
1063     };
1064
1065     closeWindow() {
1066         //allows the current window to be destroyed
1067         this.currentWindow.destroy();
1068     };
1069
1070     othersUntagged(edgeID) {
1071         const edge = this.graph.getModel().getCell(edgeID);
1072         const end1 = edge.getTerminal(true);
1073         const end2 = edge.getTerminal(false);
1074
1075         if( end1.getParent().getId().split('_')[0] == 'host' ){
1076             var netint = end1;
1077         } else {
1078             var netint = end2;
1079         }
1080
1081         var edges = netint.edges;
1082         for( let edge of edges) {
1083             if( edge.getValue() ) {
1084                 var tagged = JSON.parse(edge.getValue()).tagged;
1085             } else {
1086                 var tagged = true;
1087             }
1088             if( !tagged ) {
1089                 return true;
1090             }
1091         }
1092
1093         return false;
1094     };
1095
1096
1097     deleteVlanWindow(edgeID) {
1098         const cell = this.graph.getModel().getCell(edgeID);
1099         this.graph.removeCells([cell]);
1100         this.currentWindow.destroy();
1101     }
1102
1103     parseVlanWindow(edgeID) {
1104         //do parsing and data manipulation
1105         const radios = document.getElementsByName("tagged");
1106         const edge = this.graph.getModel().getCell(edgeID);
1107
1108         for(let radio of radios){
1109             if(radio.checked) {
1110                 //set edge to be tagged or untagged
1111                 if( radio.value == "False") {
1112                     if( this.othersUntagged(edgeID) ) {
1113                         document.getElementById("current_window_errors").innerHTML = "Only one untagged vlan per interface is allowed.";
1114                         return;
1115                     }
1116                 }
1117                 const edgeVal = {tagged: radio.value == "True"};
1118                 edge.setValue(JSON.stringify(edgeVal));
1119                 break;
1120             }
1121         }
1122         this.graph.refresh(edge);
1123         this.closeWindow();
1124     }
1125
1126     makeMxNetwork(net_name, is_public = false) {
1127         const model = this.graph.getModel();
1128         const width = 10;
1129         const height = 1700;
1130         const xoff = 400 + (30 * this.netCount);
1131         const yoff = -10;
1132         let color = this.netColors[this.netCount];
1133         if( this.netCount > (this.netColors.length - 1)) {
1134             color = Math.floor(Math.random() * 16777215); //int in possible color space
1135             color = '#' + color.toString(16).toUpperCase(); //convert to hex
1136         }
1137         const net_val = { name: net_name, public: is_public};
1138         const net = this.graph.insertVertex(
1139             this.graph.getDefaultParent(),
1140             'network_' + this.netCount,
1141             JSON.stringify(net_val),
1142             xoff,
1143             yoff,
1144             width,
1145             height,
1146             'fillColor=' + color,
1147             false
1148         );
1149         const num_ports = 45;
1150         for(var i=0; i<num_ports; i++){
1151             let port = this.graph.insertVertex(
1152                 net,
1153                 null,
1154                 '',
1155                 0,
1156                 (1/num_ports) * i,
1157                 10,
1158                 height / num_ports,
1159                 'fillColor=black;opacity=0',
1160                 true
1161             );
1162         }
1163
1164         const ret_val = { color: color, element_id: "network_" + this.netCount };
1165
1166         this.networks.add(net_name);
1167         this.netCount++;
1168         return ret_val;
1169     }
1170
1171     // expects:
1172     //
1173     // {
1174     //     id: int,
1175     //     name: str,
1176     //     public: bool,
1177     // }
1178     //
1179     // returns:
1180     // mxgraph id of network
1181     populateNetwork(network) {
1182         let mxNet = this.makeMxNetwork(network.name, network.public);
1183         this.makeSidebarNetwork(network.name, mxNet.color, mxNet.element_id);
1184
1185         if( network.public ) {
1186             this.has_public_net = true;
1187         }
1188
1189         return mxNet.element_id;
1190     }
1191
1192     addPublicNetwork() {
1193         const net = this.makeMxNetwork("public", true);
1194         this.makeSidebarNetwork("public", net['color'], net['element_id']);
1195         this.has_public_net = true;
1196     }
1197
1198     addNetwork(net_name) {
1199         const ret = this.makeMxNetwork(net_name);
1200         this.makeSidebarNetwork(net_name, ret.color, ret.element_id);
1201     }
1202
1203     updateHosts(removed) {
1204         const cells = []
1205         for(const hostID of removed) {
1206             cells.push(this.graph.getModel().getCell("host_" + hostID));
1207         }
1208         this.graph.removeCells(cells);
1209
1210         const hosts = this.graph.getChildVertices(this.graph.getDefaultParent());
1211         let topdist = 100;
1212         for(const i in hosts) {
1213             const host = hosts[i];
1214             if(host.id.startsWith("host_")){
1215                 const geometry = host.getGeometry();
1216                 geometry.y = topdist + 50;
1217                 topdist = geometry.y + geometry.height;
1218                 host.setGeometry(geometry);
1219             }
1220         }
1221     }
1222
1223     makeSidebarNetwork(net_name, color, net_id){
1224         const colorBlob = document.createElement("div");
1225         colorBlob.className = "square-20 rounded-circle";
1226         colorBlob.style['background'] = color;
1227
1228         const textContainer = document.createElement("span");
1229         textContainer.className = "ml-2";
1230         textContainer.appendChild(document.createTextNode(net_name));
1231
1232         const timesIcon = document.createElement("i");
1233         timesIcon.classList.add("fas", "fa-times");
1234
1235         const deletebutton = document.createElement("button");
1236         deletebutton.className = "btn btn-danger ml-auto square-20 p-0 d-flex justify-content-center";
1237         deletebutton.appendChild(timesIcon);
1238         deletebutton.addEventListener("click", function() { this.createDeleteDialog(net_id); }.bind(this), false);
1239
1240         const newNet = document.createElement("li");
1241         newNet.classList.add("list-group-item", "d-flex", "bg-light");
1242         newNet.id = net_id;
1243         newNet.appendChild(colorBlob);
1244         newNet.appendChild(textContainer);
1245
1246         if( net_name != "public" ) {
1247             newNet.appendChild(deletebutton);
1248         }
1249         document.getElementById("network_list").appendChild(newNet);
1250     }
1251
1252     /**
1253      * Expects format:
1254      * {
1255      *     'id': int,
1256      *     'value': {
1257      *         'description': string,
1258      *     },
1259      *     'interfaces': [
1260      *          {
1261      *              id: int,
1262      *              name: str,
1263      *              description: str,
1264      *              connections: [
1265      *                  {
1266      *                      network: int, <django network id>,
1267      *                      tagged: bool
1268      *                  }
1269      *              ]
1270      *          }
1271      *      ]
1272      * }
1273      *
1274      * network_mappings: {
1275      *     <django network id>: <mxnetwork id>
1276      * }
1277      */
1278     makeHost(hostInfo, network_mappings) {
1279         const value = JSON.stringify(hostInfo['value']);
1280         const interfaces = hostInfo['interfaces'];
1281         const width = 100;
1282         const height = (25 * interfaces.length) + 25;
1283         const xoff = 75;
1284         const yoff = this.lastHostBottom + 50;
1285         this.lastHostBottom = yoff + height;
1286         const host = this.graph.insertVertex(
1287             this.graph.getDefaultParent(),
1288             'host_' + hostInfo['id'],
1289             value,
1290             xoff,
1291             yoff,
1292             width,
1293             height,
1294             'editable=0',
1295             false
1296         );
1297         host.getGeometry().offset = new mxPoint(-50,0);
1298         host.setConnectable(false);
1299         this.hostCount++;
1300
1301         for(var i=0; i<interfaces.length; i++) {
1302             const port = this.graph.insertVertex(
1303                 host,
1304                 null,
1305                 JSON.stringify(interfaces[i]),
1306                 90,
1307                 (i * 25) + 12,
1308                 20,
1309                 20,
1310                 'fillColor=blue;editable=0',
1311                 false
1312             );
1313             port.getGeometry().offset = new mxPoint(-4*interfaces[i].name.length -2,0);
1314             const iface = interfaces[i];
1315             for( const connection of iface.connections ) {
1316                 const network = this
1317                     .graph
1318                     .getModel()
1319                     .getCell(network_mappings[connection.network]);
1320
1321                 this.connectNetwork(port, network, connection.tagged);
1322             }
1323             this.graph.refresh(port);
1324         }
1325         this.graph.refresh(host);
1326     }
1327
1328     prepareForm() {
1329         const input_elem = document.getElementById("hidden_xml_input");
1330         input_elem.value = this.encodeGraph(this.graph);
1331     }
1332 }
1333
1334 class SearchableSelectMultipleWidget {
1335     constructor(format_vars, field_dataset, field_initial) {
1336         this.format_vars = format_vars;
1337         this.items = field_dataset;
1338         this.initial = field_initial;
1339
1340         this.expanded_name_trie = {"isComplete": false};
1341         this.small_name_trie = {"isComplete": false};
1342         this.string_trie = {"isComplete": false};
1343
1344         this.added_items = new Set();
1345
1346         for( let e of ["show_from_noentry", "show_x_results", "results_scrollable", "selectable_limit", "placeholder"] )
1347         {
1348             this[e] = format_vars[e];
1349         }
1350
1351         this.search_field_init();
1352
1353         if( this.show_from_noentry )
1354         {
1355             this.search("");
1356         }
1357     }
1358
1359     disable() {
1360         const textfield = document.getElementById("user_field");
1361         const drop = document.getElementById("drop_results");
1362
1363         textfield.disabled = "True";
1364         drop.style.display = "none";
1365
1366         const btns = document.getElementsByClassName("btn-remove");
1367         for( const btn of btns )
1368         {
1369             btn.classList.add("disabled");
1370             btn.onclick = "";
1371         }
1372     }
1373
1374     search_field_init() {
1375         this.build_all_tries(this.items);
1376
1377         for( const elem of this.initial )
1378         {
1379             this.select_item(elem);
1380         }
1381         if(this.initial.length == 1)
1382         {
1383             this.search(this.items[this.initial[0]]["small_name"]);
1384             document.getElementById("user_field").value = this.items[this.initial[0]]["small_name"];
1385         }
1386     }
1387
1388     build_all_tries(dict)
1389     {
1390         for( const key in dict )
1391         {
1392             this.add_item(dict[key]);
1393         }
1394     }
1395
1396     add_item(item)
1397     {
1398         const id = item['id'];
1399         this.add_to_tree(item['expanded_name'], id, this.expanded_name_trie);
1400         this.add_to_tree(item['small_name'], id, this.small_name_trie);
1401         this.add_to_tree(item['string'], id, this.string_trie);
1402     }
1403
1404     add_to_tree(str, id, trie)
1405     {
1406         let inner_trie = trie;
1407         while( str )
1408         {
1409             if( !inner_trie[str.charAt(0)] )
1410             {
1411                 var new_trie = {};
1412                 inner_trie[str.charAt(0)] = new_trie;
1413             }
1414             else
1415             {
1416                 var new_trie = inner_trie[str.charAt(0)];
1417             }
1418
1419             if( str.length == 1 )
1420             {
1421                 new_trie.isComplete = true;
1422                 if( !new_trie.ids )
1423                 {
1424                     new_trie.ids = [];
1425                 }
1426                 new_trie.ids.push(id);
1427             }
1428             inner_trie = new_trie;
1429             str = str.substring(1);
1430         }
1431     }
1432
1433     search(input)
1434     {
1435         if( input.length == 0 && !this.show_from_noentry){
1436             this.dropdown([]);
1437             return;
1438         }
1439         else if( input.length == 0 && this.show_from_noentry)
1440         {
1441             this.dropdown(this.items); //show all items
1442         }
1443         else
1444         {
1445             const trees = []
1446             const tr1 = this.getSubtree(input, this.expanded_name_trie);
1447             trees.push(tr1);
1448             const tr2 = this.getSubtree(input, this.small_name_trie);
1449             trees.push(tr2);
1450             const tr3 = this.getSubtree(input, this.string_trie);
1451             trees.push(tr3);
1452             const results = this.collate(trees);
1453             this.dropdown(results);
1454         }
1455     }
1456
1457     getSubtree(input, given_trie)
1458     {
1459         /*
1460         recursive function to return the trie accessed at input
1461         */
1462
1463         if( input.length == 0 ){
1464             return given_trie;
1465         }
1466
1467         else{
1468             const substr = input.substring(0, input.length - 1);
1469             const last_char = input.charAt(input.length-1);
1470             const subtrie = this.getSubtree(substr, given_trie);
1471
1472             if( !subtrie ) //substr not in the trie
1473             {
1474                 return {};
1475             }
1476
1477             const indexed_trie = subtrie[last_char];
1478             return indexed_trie;
1479         }
1480     }
1481
1482     serialize(trie)
1483     {
1484         /*
1485         takes in a trie and returns a list of its item id's
1486         */
1487         let itemIDs = [];
1488         if ( !trie )
1489         {
1490             return itemIDs; //empty, base case
1491         }
1492         for( const key in trie )
1493         {
1494             if(key.length > 1)
1495             {
1496                 continue;
1497             }
1498             itemIDs = itemIDs.concat(this.serialize(trie[key]));
1499         }
1500         if ( trie.isComplete )
1501         {
1502             itemIDs.push(...trie.ids);
1503         }
1504
1505         return itemIDs;
1506     }
1507
1508     collate(trees)
1509     {
1510         /*
1511         takes a list of tries
1512         returns a list of ids of objects that are available
1513         */
1514         const results = [];
1515         for( const tree of trees )
1516         {
1517             const available_IDs = this.serialize(tree);
1518
1519             for( const itemID of available_IDs ) {
1520                 results[itemID] = this.items[itemID];
1521             }
1522         }
1523         return results;
1524     }
1525
1526     generate_element_text(obj)
1527     {
1528         const content_strings = [obj.expanded_name, obj.small_name, obj.string].filter(x => Boolean(x));
1529         const result = content_strings.shift();
1530         if( result == null || content_strings.length < 1) {
1531             return result;
1532         } else {
1533             return result + " (" + content_strings.join(", ") + ")";
1534         }
1535     }
1536
1537     dropdown(ids)
1538     {
1539         /*
1540         takes in a mapping of ids to objects in  items
1541         and displays them in the dropdown
1542         */
1543         const drop = document.getElementById("drop_results");
1544         while(drop.firstChild)
1545         {
1546             drop.removeChild(drop.firstChild);
1547         }
1548
1549         for( const id in ids )
1550         {
1551             const obj = this.items[id];
1552             const result_text = this.generate_element_text(obj);
1553             const result_entry = document.createElement("a");
1554             result_entry.href = "#";
1555             result_entry.innerText = result_text;
1556             result_entry.title = result_text;
1557             result_entry.classList.add("list-group-item", "list-group-item-action", "overflow-ellipsis", "flex-shrink-0");
1558             result_entry.onclick = function() { searchable_select_multiple_widget.select_item(obj.id); };
1559             const tooltip = document.createElement("span");
1560             const tooltiptext = document.createTextNode(result_text);
1561             tooltip.appendChild(tooltiptext);
1562             tooltip.classList.add("d-none");
1563             result_entry.appendChild(tooltip);
1564             drop.appendChild(result_entry);
1565         }
1566
1567         const scroll_restrictor = document.getElementById("scroll_restrictor");
1568
1569         if( !drop.firstChild )
1570         {
1571             scroll_restrictor.style.visibility = 'hidden';
1572         }
1573         else
1574         {
1575             scroll_restrictor.style.visibility = 'inherit';
1576         }
1577     }
1578
1579     select_item(item_id)
1580     {
1581         if( (this.selectable_limit > -1 && this.added_items.size < this.selectable_limit) || this.selectable_limit < 0 )
1582         {
1583             this.added_items.add(item_id);
1584         }
1585         this.update_selected_list();
1586         // clear search bar contents
1587         document.getElementById("user_field").value = "";
1588         document.getElementById("user_field").focus();
1589         this.search("");
1590     }
1591
1592     remove_item(item_id)
1593     {
1594         this.added_items.delete(item_id);
1595
1596         this.update_selected_list()
1597         document.getElementById("user_field").focus();
1598     }
1599
1600     update_selected_list()
1601     {
1602         document.getElementById("added_number").innerText = this.added_items.size;
1603         const selector = document.getElementById('selector');
1604         selector.value = JSON.stringify([...this.added_items]);
1605         const added_list = document.getElementById('added_list');
1606
1607         while(selector.firstChild)
1608         {
1609             selector.removeChild(selector.firstChild);
1610         }
1611         while(added_list.firstChild)
1612         {
1613             added_list.removeChild(added_list.firstChild);
1614         }
1615
1616         const list_html = document.createElement("div");
1617         list_html.classList.add("list-group");
1618
1619         for( const item_id of this.added_items )
1620         {
1621             const times = document.createElement("li");
1622             times.classList.add("fas", "fa-times");
1623
1624             const deleteButton = document.createElement("a");
1625             deleteButton.href = "#";
1626             deleteButton.innerHTML = "<i class='fas fa-times'></i>"
1627             // Setting .onclick/.addEventListener does not work,
1628             // which is why I took the setAttribute approach
1629             // If anyone knows why, please let me know :]
1630             deleteButton.setAttribute("onclick", `searchable_select_multiple_widget.remove_item(${item_id});`);
1631             deleteButton.classList.add("btn");
1632             const deleteColumn = document.createElement("div");
1633             deleteColumn.classList.add("col-auto");
1634             deleteColumn.append(deleteButton);
1635
1636             const item = this.items[item_id];
1637             const element_entry_text = this.generate_element_text(item);
1638             const textColumn = document.createElement("div");
1639             textColumn.classList.add("col", "overflow-ellipsis");
1640             textColumn.innerText = element_entry_text;
1641             textColumn.title = element_entry_text;
1642
1643             const itemRow = document.createElement("div");
1644             itemRow.classList.add("list-group-item", "d-flex", "p-0", "align-items-center");
1645             itemRow.append(textColumn, deleteColumn);
1646
1647             list_html.append(itemRow);
1648         }
1649         added_list.innerHTML = list_html.innerHTML;
1650     }
1651 }