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/05 13:56:05 UTC
[airavata-django-portal] 03/06: AIRAVATA-3453: Input event wrappers
to simplify slot overrides
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 14e2bf6ae84ec5487578da7c9c1ea033e594db75
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) {