update disabled input style

vue-cli3-webapp/src/App.vue

@@ -183,6 +183,7 @@
             layers: [
               {
                 R: 100.0,
+                material: 'nk',
                 reN: 4.0,
                 imN: 0.01,
                 index: 0
@@ -199,8 +200,10 @@
             layers: [
               {
                 R: 100.0,
+                material: 'nk',
                 reN: 4.0,
                 imN: 0.01,
+                index:0
               }
             ],
             mode_n: [],
@@ -341,7 +344,7 @@
           setTimeout(
                   () => {
                     this.plotSelector.isPlotQsca = !this.plotSelector.isPlotQsca
-                  }, 20);
+                  }, 2);
 
         }
       },
@@ -431,7 +434,18 @@
             type: 'is-danger',
             position: 'is-top',
             });
-
+          setTimeout(
+                  () => {
+                    this.runMie();
+                    this.plotResults();
+                    this.$buefy.notification.open({
+                      duration: 3000,
+                      message: 'Finished! '+"It took " + this.ttime + " s.",
+                      type: 'is-success',
+                      position: 'is-top',
+                      })
+                    ;
+                  }, 20);
         },
       runMie: function () {
         this.simulationRuntime.r_units = this.units;

vue-cli3-webapp/src/components/GetLayerParameters.vue

@@ -1,38 +1,60 @@
 <template>
-    <div class="field is-horizontal layer">
-        <div class="field-label is-normal">
-            <label class="label lnorm">
-                <div v-if="particle==='bulk'"> bulk </div>
-                <div v-else-if="particle==='core-shell'">
-                    <div v-if="index == 0"> core </div>
-                    <div v-else> shell </div>
-                </div>
-                <div v-else>
-                    layer {{index+1}}
+    <div class="field">
+        <div class="field is-horizontal layer">
+            <div class="field-label is-normal">
+                <label class="label lnorm">
+                    <div v-if="particle==='bulk'"> bulk </div>
+                    <div v-else-if="particle==='core-shell'">
+                        <div v-if="index == 0"> core </div>
+                        <div v-else> shell </div>
+                    </div>
+                    <div v-else>
+                        layer {{index+1}}
+                    </div>
+                </label>
+            </div>
+            <div class="field-body">
+                <div class="field is-grouped is-grouped-multiline">
+                    <div v-if="index == 0" class="rh-input">
+                        <input-with-units title="R" v-bind:units="units"
+                                          v-bind:value="layer.R"
+                                          @newdata="layer.R=$event"/>
+                        <span class="tooltiptext">Core radius</span>
+                    </div>
+                    <div v-else  class="rh-input">
+                        <input-with-units title="h" v-bind:units="units"
+                                          v-bind:value="layer.R"
+                                          @newdata="layer.R=$event"/>
+                        <span class="tooltiptext">Layer thickness</span>
+
+                    </div>
+                    <b-select v-model="layer.material">
+                        <option value="nk">nk-constant</option>
+                        <option value="popular">popular</option>
+                        <option value="web">refractiveindex.info</option>
+                    </b-select>
+
                 </div>
-            </label>
+            </div>
         </div>
-        <div class="field-body">
-            <div class="field is-grouped is-grouped-multiline">
-                <div v-if="index == 0" class="rh-input">
-                    <input-with-units title="R" v-bind:units="units"
-                                      v-bind:value="layer.R"
-                                      @newdata="layer.R=$event"/>
-                    <span class="tooltiptext">Core radius</span>
-                </div>
-                <div v-else  class="rh-input">
-                    <input-with-units title="h" v-bind:units="units"
-                                      v-bind:value="layer.R"
-                                      @newdata="layer.R=$event"/>
-                    <span class="tooltiptext">Layer thickness</span>
+        <div class="field is-horizontal layer">
+            <div class="field-label is-normal">
+                <label class="label lnorm">
+                    &nbsp;
+                </label>
+            </div>
+            <div class="field-body nk-input">
+                <div class="field is-grouped is-grouped-multiline">
+                    <input-with-units title="Re(n)" units=""
+                                      v-bind:value="layer.reN"
+                                      @newdata="layer.reN=$event"
+                                      v-bind:isDisabled="isDisabled"
+                    />
+                    <input-with-units title="Im(n)" units=""
+                                      v-bind:value="layer.imN"
+                                      @newdata="layer.imN=$event"/>
 
                 </div>
-                <input-with-units title="Re(n)" units=""
-                                  v-bind:value="layer.reN"
-                                  @newdata="layer.reN=$event"/>
-                <input-with-units title="Im(n)" units=""
-                                  v-bind:value="layer.imN"
-                                  @newdata="layer.imN=$event"/> 
             </div>
         </div>
     </div>
@@ -46,6 +68,23 @@
         components: {
             InputWithUnits
         },
+        data () {
+            return {
+                isDisabled: false
+            }
+        },
+        watch: {
+            'layer.material': {
+                handler: function () {
+                    console.log('update');
+                    if (this.layer.material == 'nk') {
+                        this.isDisabled = false;
+                    } else {
+                        this.isDisabled = true;
+                    }
+                }
+            }
+        },
         props: ['layer', 'particle', 'index', 'units']
     }
 </script>
@@ -64,7 +103,7 @@
         font-weight: normal;
     }
     .rh-input {
-        margin-right: 12px;
+        margin-right: 0px;
         position: relative;
         display: inline-block;
     }
@@ -90,4 +129,7 @@
     .rh-input:hover .tooltiptext {
         visibility: visible;
     }
+    .nk-input {
+        margin-bottom: 12px;
+    }
 </style>

vue-cli3-webapp/src/components/GetParticleParameters.vue

@@ -41,7 +41,6 @@
                 particle: 'bulk',
                 layersNum: 1,
                 index: 1
-
             }
         },
         watch: {
@@ -64,6 +63,7 @@
                         this.layers.push(
                             {
                                 R: r_prev*0.1,
+                                material: 'nk',
                                 reN: 4.0,
                                 imN: 0.01,
                                 index: 1

vue-cli3-webapp/src/components/InputWithUnits.vue

@@ -5,10 +5,20 @@
                 {{ title }}
             </a>
         </p>
-        <p class="control">
+        <div v-if="isDisabledLocal">
+            <p class="control">
             <b-input v-model="valueLocal" type="number" step="any"
-                     class="input-with-units-value"></b-input>
-        </p>
+                 class="input-with-units-value" disabled/>
+
+            </p>
+        </div>
+        <div v-else>
+            <p class="control">
+                <b-input v-model="valueLocal" type="number" step="any"
+                         class="input-with-units-value"/>
+
+            </p>
+        </div>
         <p class="control">
             <a class="button is-static input-with-units-units">
                  {{ units }}
@@ -31,28 +41,34 @@
                     this.valueLocal = this.value;
                 }
             },
+            isDisabled: {
+                handler: function () {
+                    this.isDisabledLocal = this.isDisabled;
+                }
+            },
             deep: true
         },
         data () {
             return {
                 // TODO: Is it OK to modify valueLocal later in <b-input>?
-                valueLocal: this.value
+                valueLocal: this.value,
+                isDisabledLocal: false
             }
         },
 
-        props: ['title', 'units', 'value']
+        props: ['title', 'units', 'value', 'isDisabled']
     }
 </script>
 
 <style scoped>
 .input-with-units-title {
     width:4rem;
+    z-index: 1;
 }
 
 .input-with-units-value {
     width:6rem;
 }
-
 .input-with-units-units {
     width:3rem;
 }