You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airavata.apache.org by ma...@apache.org on 2021/05/03 15:15:41 UTC
[airavata-django-portal] branch airavata-3453 updated (49bfe3d ->
03d0d71)
This is an automated email from the ASF dual-hosted git repository.
machristie pushed a change to branch airavata-3453
in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git.
from 49bfe3d AIRAVATA-3453 Initialize radio button inputs with value
new b3c3e63 AIRAVATA-3453: Input event wrappers to simplify slot overrides
new 03d0d71 AIRAVATA-3453 Integrated jquery-textcomplete plugin
The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
django_airavata/apps/workspace/package.json | 1 +
.../jquery.textcomplete.css | 33 +++
.../jquery.textcomplete.min.js | 3 +
.../js/web-components/ExperimentEditor.vue | 85 +++---
.../django_airavata_workspace/supcrtbl2.html | 329 +++++++++++++++++++--
django_airavata/apps/workspace/yarn.lock | 5 +
6 files changed, 401 insertions(+), 55 deletions(-)
create mode 100644 django_airavata/apps/workspace/static/django_airavata_workspace/jquery.textcomplete.css
create mode 100644 django_airavata/apps/workspace/static/django_airavata_workspace/jquery.textcomplete.min.js
[airavata-django-portal] 01/02: AIRAVATA-3453: Input event wrappers
to simplify slot overrides
Posted by ma...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
machristie pushed a commit to branch airavata-3453
in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git
commit b3c3e630fbe9b3906f98dd24c322047544b71cb3
Author: Marcus Christie <ma...@apache.org>
AuthorDate: Wed Apr 28 10:06:28 2021 -0400
AIRAVATA-3453: Input event wrappers to simplify slot overrides
---
.../js/web-components/ExperimentEditor.vue | 59 ++++----
.../django_airavata_workspace/supcrtbl2.html | 149 +++++++++++++++++++--
2 files changed, 172 insertions(+), 36 deletions(-)
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ExperimentEditor.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ExperimentEditor.vue
index 6b956f5..fc36687 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ExperimentEditor.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ExperimentEditor.vue
@@ -1,16 +1,23 @@
<template>
- <form v-if="experiment" @input="onInput" @submit.prevent="onSubmit">
- <slot name="experiment-name">
- <input
- type="text"
- name="experiment-name"
- :value="experiment.experimentName"
- />
- </slot>
+ <form v-if="experiment" @submit.prevent="onSubmit">
+ <div @input="updateExperimentName">
+ <slot name="experiment-name">
+ <input
+ type="text"
+ name="experiment-name"
+ :value="experiment.experimentName"
+ />
+ </slot>
+ </div>
<template v-for="input in experiment.experimentInputs">
- <div :key="input.name">
+ <div :key="input.name" @input="updateInputValue($event, input)">
<slot :name="input.name">
- {{input.name}} <input v-if="input.type.name == 'STRING'" :name="`input:${input.name}`" :value="input.value"/>
+ {{ input.name }}
+ <input
+ v-if="input.type.name == 'STRING'"
+ :name="`input:${input.name}`"
+ :value="input.value"
+ />
</slot>
<!-- TODO: add support for other input types -->
</div>
@@ -56,24 +63,21 @@ export default {
};
},
methods: {
- onInput(event) {
- console.log(event.target.name, event.target.value);
- if (event.target.name === "experiment-name") {
- this.experiment.experimentName = event.target.value;
- }
- if (event.target.name.startsWith("input:")) {
- for (const input of this.experiment.experimentInputs) {
- if (event.target.name === `input:${input.name}`){
- input.value = event.target.value;
- }
- }
- }
+ updateExperimentName(event) {
+ this.experiment.experimentName = event.target.value;
+ },
+ updateInputValue(event, experimentInput) {
+ experimentInput.value = event.target.value;
},
onSubmit(event) {
// console.log(event);
// 'save' event is cancelable. Listener can call .preventDefault() on the event to cancel.
- // composed: true allows the shadow DOM event to bubble up through the shadow shadow root.
- const saveEvent = new CustomEvent('save', {detail: [this.experiment], cancelable: true, composed: true});
+ // composed: true allows the shadow DOM event to bubble up through the shadow root.
+ const saveEvent = new CustomEvent("save", {
+ detail: [this.experiment],
+ cancelable: true,
+ composed: true,
+ });
this.$el.dispatchEvent(saveEvent);
if (saveEvent.defaultPrevented) {
return;
@@ -88,10 +92,9 @@ export default {
return await saveExperiment(this.experiment);
},
async loadExperiment() {
-
if (this.experimentId) {
const experiment = await getExperiment(this.experimentId);
- this.$emit('loaded', experiment);
+ this.$emit("loaded", experiment);
return experiment;
} else {
const experiment = this.appInterface.createExperiment();
@@ -103,10 +106,10 @@ export default {
experiment.projectId = defaultProjectId;
experiment.userConfigurationData.computationalResourceScheduling.resourceHostId =
"bigred3.uits.iu.edu_2141bf96-c458-4ecd-8759-aa3a08f31956";
- this.$emit('loaded', experiment);
+ this.$emit("loaded", experiment);
return experiment;
}
- }
+ },
},
};
</script>
diff --git a/django_airavata/apps/workspace/templates/django_airavata_workspace/supcrtbl2.html b/django_airavata/apps/workspace/templates/django_airavata_workspace/supcrtbl2.html
index de5d017..0d9c78f 100644
--- a/django_airavata/apps/workspace/templates/django_airavata_workspace/supcrtbl2.html
+++ b/django_airavata/apps/workspace/templates/django_airavata_workspace/supcrtbl2.html
@@ -23,14 +23,149 @@
experiment-id="{{ experiment_id }}"
{% endif %} >
<div id="solvent" slot="Specify Solvent Phase Region">
- <label for="input:Specify Solvent Phase Region">Specify solvent phase region:</label>
- <input type="radio" name="input:Specify Solvent Phase Region" value="0">One-phase region</input> <br/>
- <input type="radio" name="input:Specify Solvent Phase Region" value="1">liquid vapor saturation curve</input>
+ <label for="solventPhase">Specify solvent phase region:</label>
+ <input type="radio" name="solventPhase" value="0">One-phase region</input> <br/>
+ <input type="radio" name="solventPhase" value="1">liquid vapor saturation curve</input>
</div>
-
- <div slot="Input-to-Echo">
- My custom input editor: <input id="myinput" style="background-color: lightgrey;" name="input:Input-to-Echo" value=""/>
+ <div id="lipVapSat" slot="Specify Independent Liq-vap Saturation Variable (3)">
+ <label for="lipVapSatVar">Specify independent liq-vap saturation variable:</label>
+ <input type="radio" name="lipVapSatVar" value="0">Temperature (degCel)</input> <br/>
+ <input type="radio" name="lipVapSatVar" value="1">Pressure (bars)</input>
+ </div>
+ <div id="indVar" slot="Specify Independent State Variables">
+ <label for="independentStateVar">Specify independent State Variables:</label>
+ <input type="radio" name="independentStateVar" value="0" >Temperature (degCel), density(H2O) (g/cc)</input> <br/>
+ <input type="radio" name="independentStateVar" value="1">Temperature (degCel), pressure (bars)</input>
+ </div>
+ <div id="univariantCurve" slot="Univariant Curve Option (2)">
+ <label for="univariantCurveOption">Would you like to use the univariant curve option?
+ (i.e., calculate T(logK,P) or P(logK,T):</label>
+ <input type="radio" name="univariantCurveOption" value="0">Yes</input> <br/>
+ <input type="radio" name="univariantCurveOption" value="1">No</input>
+ </div>
+ <div id="tabulationBaric" slot="Specify Tabulation Option (2)">
+ <label for="tabulationBaricOption">Specify tabulation option:</label>
+ <input type="radio" name="tabulationBaricOption" value="0">Calculate ISOBARIC (T) tables</input> <br/>
+ <input type="radio" name="tabulationBaricOption" value="1">Calculate ISOTHERMAL (D) tables</input>
+ </div>
+ <div id="tabulationChoric" slot="Specify Tabulation Option (1)">
+ <label for="tabulatioChoricnOption">Specify tabulation option:</label>
+ <input type="radio" name="tabulationChoricOption" value="0">Calculate ISOCHORIC (T) tables</input> <br/>
+ <input type="radio" name="tabulationChoricOption" value="1">Calculate ISOTHERMAL (D) tables</input>
+ </div>
+ <!-- TODO: Specify Table-increment Option (2) ? -->
+ <!-- TODO: Specify Table-increment Option (3) ?-->
+ <div id="table" slot="Specify Table Increment Option (1)">
+ <label for="tableIncrement">Specify table-increment option:</label>
+ <input type="radio" name="tableIncrement" value="0">Calculate tables having uniform increments</input> <br/>
+ <input type="radio" name="tableIncrement" value="1">Calculate tables having unequal increments</input>
+ </div>
+ <div id="univariantCalc" slot="Specify Univariant Calculation Option (2)">
+ <label for="univariantCalcOption">Specify univariant calculation option:</label>
+ <input type="radio" name="univariantCalcOption" value="0">Calculate T (logK, isobars)</input> <br/>
+ <input type="radio" name="univariantCalcOption" value="1">Calculate P (logK, isotherms)</input>
+ </div>
+ <div id="isochores" slot="Specify ISOCHORES (g/cc) Range (1)">
+ <label for="isochoresRange">Specify ISOCHORES(g/cc) range: <br/>
+ min, max, increment</label>
+ <input type="text" name="isochoresRange" id="isochoresRange" />
+ </div>
+ <!-- TODO: Specify TEMP(degCel) Range (2) ? -->
+ <!-- TODO: Specify TEMP(degCel) Range (3) ? -->
+ <div id="temp" slot="Specify TEMP(degCel) Range (1)">
+ <label for="tempRange">Specify TEMP (degCel) range: <br/>
+ min, max, increment</label>
+ <input type="text" name="tempRange" id="tempRange" />
+ </div>
+ <div id="dH2OTemp" slot="Specify DH2O(g/cc) TEMP(degCel) ValuePairs (1)">
+ <label for="dH2OTempPairs">Specify DH2O(g/cc), TEMP (degCel) value pairs: <br/>
+ One pair per line, ending with 0,0</label>
+ <textarea name="dH2OTempPairs" id="dH2OTempPairs" ></textarea>
+ </div>
+ <!-- TODO: or "Specify ISOTHERMS(degCel) Range (2)" ?-->
+ <div id="isotherms" slot="Specify ISOTHERMS(degCel) range (1)">
+ <label for="isothermsRange">Specify ISOTHERMS (degCel) range: <br/>
+ min, max, increment</label>
+ <input type="text" name="isothermsRange" id="isothermsRange" />
+ </div>
+ <div id="dH2O" slot="Specify DH2O(g/cc) Range (1)">
+ <label for="dH2ORange">Specify DH2O (g/cc) range: <br/>
+ min, max, increment</label>
+ <input type="text" name="dH2ORange" id="dH2ORange" />
+ </div>
+ <div id="tempDH2O" slot="Specify TEMP(degCel) DH2O(g/cc) Value Pairs (1)">
+ <label for="tempDH2OPairs">Specify TEMP (degCel), DH2O(g/cc) value pairs: <br/>
+ One pair per line, ending with 0,0</label>
+ <textarea name="tempDH2OPairs" id="tempDH2OPairs" ></textarea>
+ </div>
+ <div id="isobars" slot="Specify ISOBARS(bars) Range (2)">
+ <label for="isobarsRange">Specify ISOBARS(bars) range: <br/>
+ min, max, increment</label>
+ <input type="text" name="isobarsRange" id="isobarsRange" />
+ </div>
+ <div id="logK" slot="Specify LogK Range (2)">
+ <label for="logKRange">Specify logK range: <br/>
+ Kmin, Kmax, Kincrement</label>
+ <input type="text" name="logKRange" id="logKRange" />
+ </div>
+ <div id="logKBoundingTemp" slot="Specify Bounding TEMP(degCel) Range (2)">
+ <label for="logKBoundingTempRange">Specify bounding TEMP (degCel) range: <br/>
+ T min, T max:</label>
+ <input type="text" name="logKBoundingTempRange" id="logKBoundingTempRange" />
+ </div>
+ <div id="logKBoundingPres" slot="Specify Bounding PRES(bars) Range (2)">
+ <label for="logKBoundingPresRange">Specify bounding PRES (bars) range: <br/>
+ P min, P max:</label>
+ <input type="text" name="logKBoundingPresRange" id="logKBoundingPresRange" />
+ </div>
+ <!-- TODO: what input does this match? -->
+ <div id="presTemp">
+ <label for="presTempPairs">Specify PRES (bars), TEMP (degCel) value pairs: <br/>
+ One pair per line, ending with 0,0</label>
+ <textarea name="presTempPairs" id="presTempPairs"></textarea>
+ </div>
+ <!-- TODO: or Specify PRES(bars) range (2) ?-->
+ <div id="pres" slot="Specify PRES(bars) Range (3)">
+ <label for="presRange">Specify PRES (bars) range: <br/>
+ min, max, increment</label>
+ <input type="text" name="presRange" id="presRange" />
+ </div>
+ <div id="tempPres" slot="Specify TEMP(degCel) Pres(g/cc) Value Pairs (2)">
+ <label for="tempPresPairs">Specify TEMP (degCel), Pres(g/cc) value pairs: <br/>
+ One pair per line, ending with 0,0</label>
+ <textarea name="tempPresPairs" id="tempPresPairs" ></textarea>
+ </div>
+ <div id="lipVapSatTemp" slot="Specify Liq-vap Saturation TEMP(degCel) Values (3)">
+ <label for="lipVapSatTempVal">Specify liq-vap saturation TEMP (degCel) values: <br/>
+ One per line, concluding with 0</label>
+ <textarea name="lipVapSatTempVal" id="lipVapSatTempVal" ></textarea>
+ </div>
+ <div id="lipVapSatPres" slot="Specify Liq-vap Saturation PRES(bars) Values (3)">
+ <label for="lipVapSatPresVal">Specify liq-vap saturation PRES (bars) values: <br/>
+ One per line, concluding with 0</label>
+ <textarea name="lipVapSatPresVal" id="lipVapSatPresVal" ></textarea>
+ </div>
+ <br/><br/>
+ <div id="lipVapSatPres" slot="Reaction">
+ <label for="reaction">Insert reactions here, 1 species per line, empty line between reactions <br/>
+ Numbers are the stoichiometric coefficient of the species. <br/>
+ Positive numbers are products and negative numbers are reactants, e.g. <br/>
+ QUARTZ => SiO2,aq: <br/>
+ <code>
+ -1 QUARTZ <br/>
+ 1 SiO2,aq
+ </code>
+ </label>
+ <textarea rows="15" name="reaction" id="reaction" required style="width:200px;"></textarea>
+ </div>
+ <br/><br/>
+ <!-- TODO: what input does this match? -->
+ <div id="kalFormat">
+ <label for="kalFormatOption">Specify option for x-y plot files:</label>
+ <input type="radio" name="kalFormatOption" value="0" required>Do not generate plot files</input> <br/>
+ <input type="radio" name="kalFormatOption" value="1">Generate plot files in generic format</input>
</div>
+ <br/><br/>
</adpf-experiment-editor>
</div>
</main>
@@ -47,7 +182,6 @@
document.getElementById("experiment-editor").addEventListener('loaded', e => {
const [experiment] = e.detail;
for (const input of experiment.experimentInputs) {
- // This runs before the custom element is registered which is probably why we need setAttribute here
// TODO: just iterate over the slotted inputs
const inputEl = document.querySelector(`[name="input:${input.name}"]`)
if (!inputEl) {
@@ -68,7 +202,6 @@ document.getElementById("experiment-editor").addEventListener('loaded', e => {
inputEl.setAttribute("value", input.value);
}
}
- // document.getElementById("myinput").setAttribute("value", input.value);
}
});
function validateExperiment(event) {
[airavata-django-portal] 02/02: AIRAVATA-3453 Integrated
jquery-textcomplete plugin
Posted by ma...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
machristie pushed a commit to branch airavata-3453
in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git
commit 03d0d718e1bae22cbab478b535323b3ec9efe6fd
Author: Marcus Christie <ma...@apache.org>
AuthorDate: Mon May 3 11:15:17 2021 -0400
AIRAVATA-3453 Integrated jquery-textcomplete plugin
To get the plugin and the hide/show logic to work
I needed to switch from Vue slots to native slots
which are now dynamically generated for exp
inputs in ExperimentEditor.
---
django_airavata/apps/workspace/package.json | 1 +
.../jquery.textcomplete.css | 33 ++++
.../jquery.textcomplete.min.js | 3 +
.../js/web-components/ExperimentEditor.vue | 40 +++--
.../django_airavata_workspace/supcrtbl2.html | 180 +++++++++++++++++++--
django_airavata/apps/workspace/yarn.lock | 5 +
6 files changed, 236 insertions(+), 26 deletions(-)
diff --git a/django_airavata/apps/workspace/package.json b/django_airavata/apps/workspace/package.json
index 6d227b1..883c65d 100644
--- a/django_airavata/apps/workspace/package.json
+++ b/django_airavata/apps/workspace/package.json
@@ -37,6 +37,7 @@
"@vue/cli-plugin-unit-jest": "^3.3.0",
"@vue/cli-service": "^3.1.1",
"@vue/test-utils": "^1.0.0-beta.28",
+ "@vue/web-component-wrapper": "^1.3.0",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/jquery.textcomplete.css b/django_airavata/apps/workspace/static/django_airavata_workspace/jquery.textcomplete.css
new file mode 100644
index 0000000..37a761b
--- /dev/null
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/jquery.textcomplete.css
@@ -0,0 +1,33 @@
+/* Sample */
+
+.dropdown-menu {
+ border: 1px solid #ddd;
+ background-color: white;
+}
+
+.dropdown-menu li {
+ border-top: 1px solid #ddd;
+ padding: 2px 5px;
+}
+
+.dropdown-menu li:first-child {
+ border-top: none;
+}
+
+.dropdown-menu li:hover,
+.dropdown-menu .active {
+ background-color: rgb(110, 183, 219);
+}
+
+
+/* SHOULD not modify */
+
+.dropdown-menu {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.dropdown-menu a:hover {
+ cursor: pointer;
+}
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/jquery.textcomplete.min.js b/django_airavata/apps/workspace/static/django_airavata_workspace/jquery.textcomplete.min.js
new file mode 100644
index 0000000..ce1536d
--- /dev/null
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/jquery.textcomplete.min.js
@@ -0,0 +1,3 @@
+/*! jquery-textcomplete - v1.8.4 - 2017-08-29 */
+!function(a){if("function"==typeof define&&define.amd)define(["jquery"],a);else if("object"==typeof module&&module.exports){var b=require("jquery");module.exports=a(b)}else a(jQuery)}(function(a){if("undefined"==typeof a)throw new Error("jQuery.textcomplete requires jQuery");return+function(a){"use strict";var b=function(a){console.warn&&console.warn(a)},c=1;a.fn.textcomplete=function(d,e){var f=Array.prototype.slice.call(arguments);return this.each(function(){var g=this,h=a(this),i=h.da [...]
+//# sourceMappingURL=dist/jquery.textcomplete.min.map
\ No newline at end of file
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ExperimentEditor.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ExperimentEditor.vue
index fc36687..0de4bff 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ExperimentEditor.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ExperimentEditor.vue
@@ -10,16 +10,12 @@
</slot>
</div>
<template v-for="input in experiment.experimentInputs">
- <div :key="input.name" @input="updateInputValue($event, input)">
- <slot :name="input.name">
- {{ input.name }}
- <input
- v-if="input.type.name == 'STRING'"
- :name="`input:${input.name}`"
- :value="input.value"
- />
- </slot>
- <!-- TODO: add support for other input types -->
+ <div
+ :ref="input.name"
+ :key="input.name"
+ @input="updateInputValue($event, input)"
+ >
+ <!-- programmatically define slots as native slots (not Vue slots), see #mounted() -->
</div>
</template>
<slot name="save-button">
@@ -48,12 +44,32 @@ export default {
required: false,
},
},
- async created() {
+ async created() {},
+ async mounted() {
this.applicationModule = await getApplicationModule(this.applicationId);
this.appInterface = await getApplicationInterfaceForModule(
this.applicationId
);
this.experiment = await this.loadExperiment();
+ // vue-web-component-wrapper clones native slots and turns them into Vue
+ // slots which means they lose any event listeners and they basically aren't
+ // in the DOM any more. As a workaround, programmatically create native
+ // slots. See also https://github.com/vuejs/vue-web-component-wrapper/issues/38
+ this.$nextTick(() => {
+ for (const input of this.experiment.experimentInputs) {
+ const slot = document.createElement("slot");
+ slot.setAttribute("name", input.name);
+ if (input.type.name === "STRING") {
+ slot.textContent = `${input.name} `;
+ const textInput = document.createElement("input");
+ textInput.setAttribute("type", "text");
+ textInput.setAttribute("value", input.value);
+ slot.appendChild(textInput);
+ }
+ // TODO: add support for other input types
+ this.$refs[input.name][0].append(slot);
+ }
+ });
},
data() {
return {
@@ -105,7 +121,7 @@ export default {
const defaultProjectId = await getDefaultProjectId();
experiment.projectId = defaultProjectId;
experiment.userConfigurationData.computationalResourceScheduling.resourceHostId =
- "bigred3.uits.iu.edu_2141bf96-c458-4ecd-8759-aa3a08f31956";
+ "js-169-51.jetstream-cloud.org_6672e8fe-8d63-4bbe-8bf8-4ea04092e72f";
this.$emit("loaded", experiment);
return experiment;
}
diff --git a/django_airavata/apps/workspace/templates/django_airavata_workspace/supcrtbl2.html b/django_airavata/apps/workspace/templates/django_airavata_workspace/supcrtbl2.html
index 0d9c78f..638c6ce 100644
--- a/django_airavata/apps/workspace/templates/django_airavata_workspace/supcrtbl2.html
+++ b/django_airavata/apps/workspace/templates/django_airavata_workspace/supcrtbl2.html
@@ -8,6 +8,7 @@
{% comment %} {% render_bundle 'chunk-vendors' 'css' 'WORKSPACE' %} {% endcomment %}
{% comment %} {% render_bundle 'chunk-common' 'css' 'WORKSPACE' %} {% endcomment %}
{% comment %} {% render_bundle 'adpf' 'css' 'WORKSPACE' %} {% endcomment %}
+ <link href="{% static 'django_airavata_workspace/jquery.textcomplete.css' %}" rel="stylesheet" type="text/css">
{% endblock %}
{% block content %}
@@ -178,31 +179,32 @@
{% comment %} {% render_bundle 'chunk-common' 'js' 'WORKSPACE' %} {% endcomment %}
{% comment %} {% render_bundle 'adpf' 'js' 'WORKSPACE' %} {% endcomment %}
<script src="{% static 'django_airavata_workspace/wc/adpf.min.js' %}"></script>
+<script src="{% static 'django_airavata_workspace/jquery.textcomplete.min.js' %}"></script>
<script>
document.getElementById("experiment-editor").addEventListener('loaded', e => {
const [experiment] = e.detail;
for (const input of experiment.experimentInputs) {
- // TODO: just iterate over the slotted inputs
- const inputEl = document.querySelector(`[name="input:${input.name}"]`)
- if (!inputEl) {
- console.warn("Could not find input editor for ", input);
- } else {
- if (inputEl.type === 'radio') {
- const radios = document.querySelectorAll(`[name="input:${input.name}"]`);
- for (const radio of radios) {
+ const slotEl = document.querySelector(`[slot="${input.name}"]`);
+ // console.log("slotEl=", slotEl);
+ if (slotEl) {
+ const inputEls = slotEl.querySelectorAll('input');
+ // console.log("inputEls=", inputEls);
+ if (!inputEls || inputEls.length === 0) {
+ continue;
+ }
+ if (inputEls[0].type === 'text') {
+ inputEls[0].value = input.value;
+ } else if (inputEls[0].type === 'radio') {
+ for (radio of inputEls) {
if (radio.value === input.value) {
- // Have to set value with setAttribute so it is part of the DOM
- // since the slot content doesn't appear to get added to the custom
- // element until later. Setting as a property doesn't work.
- radio.setAttribute("checked", "checked");
+ radio.checked = true;
break;
}
}
- } else if (inputEl.type === 'text') {
- inputEl.setAttribute("value", input.value);
}
}
}
+ resetViews();
});
function validateExperiment(event) {
const [experiment] = event.detail;
@@ -213,5 +215,155 @@ function validateExperiment(event) {
}
}
document.getElementById('experiment-editor').addEventListener('save', validateExperiment);
+
+$('document').ready(function() {
+ $('#reaction').textcomplete([{
+ match: /(^|\b)(\S{1,})$/,
+ search: function (term, callback) {
+ var words = ["ALMANDINE","ANDRADITE","GROSSULAR","KNORRINGITE","MAJORITE","PYROPE","SPESSARTINE","CLINOHUMITE","FAYALITE","FORSTERITE","MONTICELLITE","TEPHROITE","ANDALUSITE","KYANITE","Al-MULLITE","Si-MULLITE","Fe-CHLORITOID","Mg-CHLORITOID","Mn-CHLORITOID","Fe-STAUROLITE","Mg-STAUROLITE","Mn-STAUROLITE","HYDROXY-TOPAZ","AKERMANITE","JULGOLDITE(FeFe)","MERWINITE","PUMPELLYITE(FeAl)","PUMPELLYITE(MgAl)","RANKINITE","SPURRITE","TILLEYITE","ZIRCON","CLINOZOISITE","EPIDOTE(ORDERED)"," [...]
+ callback($.map(words, function (word) {
+ return word.toLowerCase().indexOf(term.toLowerCase()) === 0 ? word : null;
+ }));
+ },replace: function (word) {
+ return word + ' ';
+ }
+ }]);
+});
+
+function resetViews() {
+ $('#lipVapSat').hide();
+ $('#indVar').hide();
+ $('#tabulationBaric').hide();
+ $('#tabulationChoric').hide();
+ $('#table').hide();
+ $('#univariantCurve').hide();
+ $('#univariantCalc').hide();
+ $('#isochores').hide();
+ $('#temp').hide();
+ $('#dH2OTemp').hide();
+ $('#logK').hide();
+ $('#isotherms').hide();
+ $('#dH2O').hide();
+ $('#tempDH2O').hide();
+ $('#isobars').hide();
+ $('#logKBoundingTemp').hide();
+ $('#logKBoundingPres').hide();
+ $('#presTemp').hide();
+ $('#pres').hide();
+ $('#tempPres').hide();
+ $('#lipVapSatTemp').hide();
+ $('#lipVapSatPres').hide();
+ $('#submit').hide();
+ if($('input:radio[name=solventPhase]:checked').val() == "0"){
+ $('#indVar').show();
+ if($('input:radio[name=independentStateVar]:checked').val() == "0"){
+ $('#tabulationChoric').show();
+ if($('input:radio[name=tabulationChoricOption]:checked').val() == "0"){
+ $('#table').show();
+ if($('input:radio[name=tableIncrement]:checked').val() == "0"){
+ $('#isochores').show();
+ $('#temp').show();
+ $('#submit').show();
+
+ }
+ else if($('input:radio[name=tableIncrement]:checked').val() == "1"){
+ $('#dH2OTemp').show();
+ $('#submit').show();
+ }
+ }
+ else if($('input:radio[name=tabulationChoricOption]:checked').val() == "1"){
+ $('#table').show();
+ if($('input:radio[name=tableIncrement]:checked').val() == "0"){
+ $('#isotherms').show();
+ $('#dH2O').show();
+ $('#submit').show();
+
+ }
+ else if($('input:radio[name=tableIncrement]:checked').val() == "1"){
+ $('#tempDH2O').show();
+ $('#submit').show();
+ }
+ }
+ }
+ else if($('input:radio[name=independentStateVar]:checked').val() == "1"){
+ $('#univariantCurve').show();
+ if($('input:radio[name=univariantCurveOption]:checked').val() == "0"){
+ $('#univariantCalc').show();
+ if($('input:radio[name=univariantCalcOption]:checked').val() == "0") {
+ $('#isobars').show();
+ $('#logK').show();
+ $('#logKBoundingTemp').show();
+ $('#submit').show();
+ }
+ else if($('input:radio[name=univariantCalcOption]:checked').val() == "1"){
+ $('#isotherms').show();
+ $('#logK').show();
+ $('#logKBoundingPres').show();
+ $('#submit').show();
+ }
+ }
+ if($('input:radio[name=univariantCurveOption]:checked').val() == "1"){
+ $('#tabulationBaric').show();
+ if($('input:radio[name=tabulationBaricOption]:checked').val() == "0"){
+ $('#table').show();
+ if($('input:radio[name=tableIncrement]:checked').val() == "0"){
+ $('#isobars').show();
+ $('#temp').show();
+ $('#submit').show();
+
+ }
+ else if($('input:radio[name=tableIncrement]:checked').val() == "1"){
+ $('#presTemp').show();
+ $('#submit').show();
+ }
+ }
+ else if($('input:radio[name=tabulationBaricOption]:checked').val() == "1"){
+ $('#table').show();
+ if($('input:radio[name=tableIncrement]:checked').val() == "0"){
+ $('#isotherms').show();
+ $('#pres').show();
+ $('#submit').show();
+ }
+ else if($('input:radio[name=tableIncrement]:checked').val() == "1"){
+ $('#tempPres').show();
+ $('#submit').show();
+ }
+ }
+ }
+
+ }
+ }
+ else if($('input:radio[name=solventPhase]:checked').val() == "1"){
+ $('#lipVapSat').show();
+ if($('input:radio[name=lipVapSatVar]:checked').val() == "0"){
+ $('#table').show();
+ if($('input:radio[name=tableIncrement]:checked').val() == "0"){
+ $('#temp').show();
+ $('#submit').show();
+ }
+ if($('input:radio[name=tableIncrement]:checked').val() == "1"){
+ $('#lipVapSatTemp').show();
+ $('#submit').show();
+ }
+ }
+ if($('input:radio[name=lipVapSatVar]:checked').val() == "1"){
+ $('#table').show();
+ if($('input:radio[name=tableIncrement]:checked').val() == "0"){
+ $('#pres').show();
+ $('#submit').show();
+ }
+ if($('input:radio[name=tableIncrement]:checked').val() == "1"){
+ $('#lipVapSatPres').show();
+ $('#submit').show();
+ }
+ }
+ }
+ }
+ $(document).ready(function() {
+ resetViews();
+ $("input:radio").change(function () {
+ resetViews();
+ });
+ });
</script>
{% endblock %}
diff --git a/django_airavata/apps/workspace/yarn.lock b/django_airavata/apps/workspace/yarn.lock
index 7fc2a41..2407517 100644
--- a/django_airavata/apps/workspace/yarn.lock
+++ b/django_airavata/apps/workspace/yarn.lock
@@ -1122,6 +1122,11 @@
resolved "https://registry.yarnpkg.com/@vue/web-component-wrapper/-/web-component-wrapper-1.2.0.tgz#bb0e46f1585a7e289b4ee6067dcc5a6ae62f1dd1"
integrity sha512-Xn/+vdm9CjuC9p3Ae+lTClNutrVhsXpzxvoTXXtoys6kVRX9FkueSUAqSWAyZntmVLlR4DosBV4pH8y5Z/HbUw==
+"@vue/web-component-wrapper@^1.3.0":
+ version "1.3.0"
+ resolved "https://registry.yarnpkg.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz#b6b40a7625429d2bd7c2281ddba601ed05dc7f1a"
+ integrity sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==
+
"@webassemblyjs/ast@1.8.5":
version "1.8.5"
resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.8.5.tgz#51b1c5fe6576a34953bf4b253df9f0d490d9e359"