Skip to content

Commit

Permalink
Additional domain select GUI view functionality.
Browse files Browse the repository at this point in the history
  • Loading branch information
@robertbartel
robertbartel committed Aug 9, 2024
1 parent 8452e0a commit ebd307d
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 17 deletions.
46 changes: 34 additions & 12 deletions python/gui/MaaS/static/common/js/domain.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -417,26 +417,40 @@ function loadFabricTypes() {
);
}

function addDomainChoicesOption(values) {
var select = document.getElementById('domainChoices');
for (var i = 0; i < values.length; i++) {
var option = document.createElement('option');
option.value = values[i];
option.innerHTML = values[i];
select.appendChild(option);
}
}

function insertOptionInOrder(option, newParentSelect) {
for (var i = 0; i < newParentSelect.options.length; i++) {
if (option.value < newParentSelect.options[i].value) {
var next_i, i = 0, next_size = 200;

next_i = i + next_size;
while (next_i < newParentSelect.options.length) {
if (parseInt(option.value) < parseInt(newParentSelect.options[next_i].value)) {
break;
}
else {
i = next_i;
next_i = i + next_size;
}
}

for (i; i < newParentSelect.options.length; i++) {
if (parseInt(option.value) < parseInt(newParentSelect.options[i].value)) {
newParentSelect.options.add(option, newParentSelect.options[i]);
return;
}
}
newParentSelect.appendChild(option);
}

function addDomainChoicesOption(values) {
var select = document.getElementById('domainChoices');
for (var i = 0; i < values.length; i++) {
var option = document.createElement('option');
option.value = values[i].substring(4);
option.innerHTML = values[i];
insertOptionInOrder(option, select);
}
}

function controlSelectAdd() {
var choices = document.getElementById('domainChoices'),
selected = document.getElementById('domainSelections');
Expand Down Expand Up @@ -495,15 +509,19 @@ function controlSelectClear() {
}
}

function loadFabric(event) {
function loadFabricDomain(event) {
var name = $("#fabric-selector").val(),
type = $("#fabric-type-selector").val(),
catLists = [document.getElementById('domainChoices'),
document.getElementById('domainSelections')],
loadingOverDiv = document.getElementById('loadCatsOverlay'),
select,
l,
i;

catLists[0].style.display = "none";
loadingOverDiv.style.display = "block";

$("input[name=fabric]").val(name);

// Clear any existing <option> tags from within "domainChoices" <select>
Expand All @@ -524,11 +542,15 @@ function loadFabric(event) {
data: {"fabric_type": type, "id_only": true},
error: function(xhr, status, error) {
console.error(error);
catLists[0].style.display = "block";
loadingOverDiv.style.display = "none";
},
success: function(result, status, xhr) {
if (result) {
addDomainChoicesOption(result);
}
catLists[0].style.display = "block";
loadingOverDiv.style.display = "none";
}
}
)
Expand Down
56 changes: 51 additions & 5 deletions python/gui/MaaS/templates/maas/domain.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,42 @@
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<style>
#loadCatsOverlay {
position: relative;
top: 0;
z-index: 100;
width: 100%;
height: 100%;
display: none;
background: rgba(0,0,0,0.6);
}

.cat-load-wheel {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.wheel {
width: 40px;
height: 40px;
border: 4px #ddd solid;
border-top: 4px #2e93e6 solid;
border-radius: 50%;
animation: wheel-animated 0.8s infinite linear;
}

@keyframes wheel-animated {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
</style>
{% endblock styles %}

{% block scripts %}
Expand Down Expand Up @@ -65,23 +101,31 @@
<div id="content" class="pane" style="overflow-y: auto; height: 75vh; margin: 20px">
<fieldset id="fabric-fields" style="width: fit-content">
<legend>Hydrofabric</legend>
<select id="fabric-selector" onchange="loadFabric()"></select>
<select id="fabric-selector" onchange="loadFabricDomain()"></select>
<!--
<select id="fabric-type-selector" onchange="loadFabric()"></select>
-->
</fieldset>
<!--
<div id="mapid" style="width: {{ map_width|default:'95vw' }}; height: {{ map_height|default:'70vh' }}; margin: auto"></div>
-->
<div class="domain-selection" style="padding-top: 10px; overflow: auto; display: block; float:left">
<div class="domain-selection" style="padding-top: 10px; overflow: auto; display: block">

<div class="available-domain-options" style="float: left; padding-right: 20px">

<fieldset id="fabric-fields-opts" style="width: 125px">
<legend>Catchments</legend>
<!--
<select id="domainChoices" multiple="multiple" class="form-control"></select>
-->
<select id="domainChoices" multiple="multiple" class="form-control" style="width: 100px; height: 200px; margin: auto; horiz-align: right"></select>
<div id="domain-choices" style="width: 100px; height: 200px; margin: auto">
<div id="loadCatsOverlay">
<div class="cat-load-wheel">
<span class="wheel"></span>
</div>
</div>
<select id="domainChoices" multiple="multiple" class="form-control" style="width: 100%; height: 100%; horiz-align: right"></select>
</div>
</fieldset>
</div>

Expand All @@ -101,8 +145,12 @@
</div>

</div>
<div id="submit-selection" style="padding-top: 25px">
<button type="submit" id="submit-values-button" style="float: left" class="MaaS-btn">Continue</button>
</div>
</div>


<form id="location-selection-form" method="post" style="display: none" action="{% url 'MaaS:create_config' %}">
{# Add the token to provide cross site request forgery protection #}
{% csrf_token %}
Expand All @@ -115,8 +163,6 @@
</form>

<script>
var dataPane = null;

startup_scripts.push(loadFabricNames);
startup_scripts.push(loadFabricTypes);
startup_scripts.push(loadFabric);
Expand Down

0 comments on commit ebd307d

Please sign in to comment.