GetParticleParameters.vue is ready

guiapp/src/components/GetParticleParameters.vue

@@ -42,7 +42,7 @@
       </div>
     </div>
   </div>
-  <div v-for="(layer, index) in layers" class="row items-baseline">
+  <div v-for="(layer, index) in layers" :key="index" class="row items-baseline q-py-xs">
     <div class="col-xs-12 col-sm-auto text-center q-px-md q-py-sm">
       <div :style="flexRowTitleStyle">
         {{getLayerTitle(particleType, index)}}
@@ -62,16 +62,42 @@
             v-model:is-showing-help="isShowingHelpForInputWithUnits"
             :initial-expression="toUnits(layer.layerWidth, units).toString()"
             :units="units"
+            :title=" index==0 ? 'R' : 'h' "
             :input-result="toUnits(layer.layerWidth, units)"
             @update:input-result="layer.layerWidth = fromUnits(units,$event)"
-            :title=" index==0 ? 'R' : 'h' "
           />
         </div>
 
         <div class="col-auto">
+          <q-select
+              v-model="layer.materialName"
+              :options="activatedMaterials"
+              style="width: 17.7em"
+              class="q-px-xs"
+              dense
+              options-dense
+              outlined
+              options-value="value"
+              options-label="label"
+          />
         </div>
 
       </div>
+      <div v-if="layer.materialName=='nk-constant'"
+               class="row justify-xs-center justify-sm-start items-baseline">
+
+        <div class="col-auto"> <input-with-units
+            v-model:input-result="layer.n"
+            :initial-expression="layer.n.toString()"
+            title="Re(n)"
+        /></div>
+        <div class="col-auto"> <input-with-units
+            v-model:input-result="layer.k"
+            :initial-expression="layer.k.toString()"
+            title="Im(n)"
+
+        /></div>
+      </div>
     </div>
   </div>
 </template>
@@ -87,7 +113,7 @@ import {
 import { useStore } from 'src/store'
 import { flexRowTitleStyle, fromUnits, toUnits } from 'components/utils'
 import {cloneDeep} from 'lodash'
-import InputWithUnits from "components/InputWithUnits.vue";
+import InputWithUnits from 'components/InputWithUnits.vue';
 
 export default defineComponent({
   name: 'GetHostIndex',
@@ -108,6 +134,8 @@ export default defineComponent({
       set: val => $store.commit('guiRuntime/setUnits', val)
     })
 
+    const activatedMaterials = computed(() => $store.state.guiRuntime.activatedMaterials)
+
     function getReactiveLayers() {
       return reactive( cloneDeep($store.state.simulationSetup.gui.layers) )
     }
@@ -143,7 +171,7 @@ export default defineComponent({
         layers.push(
             {
               layerWidth: coreR*0.1,
-              materialName: 'nk',
+              materialName: 'nk-constant',
               n: 4.0,
               k: 0.01,
               nSpline: undefined,
@@ -168,7 +196,8 @@ export default defineComponent({
 
     return { flexRowTitleStyle, particleType,
       numberOfLayers, layers, getLayerTitle, getTooltipText,
-      units, toUnits, fromUnits, isShowingHelpForInputWithUnits
+      units, toUnits, fromUnits, isShowingHelpForInputWithUnits,
+      activatedMaterials
       }
   },
 })

guiapp/src/store/gui-runtime/state.ts

@@ -3,6 +3,7 @@ export interface guiRuntimeStateInterface {
   units: string
   sourceUnits: string
   isSourceSameUnits: boolean
+  activatedMaterials: string[]
 }
 
 function state(): guiRuntimeStateInterface {
@@ -10,7 +11,10 @@ function state(): guiRuntimeStateInterface {
     isShowingHelpForInputWithUnits: true,
     units: 'nm',
     sourceUnits: 'nm',
-    isSourceSameUnits: true
+    isSourceSameUnits: true,
+    activatedMaterials: [
+        // 'PEC',
+      'nk-constant']
   }
 }
 

guiapp/src/store/simulation-setup/mutations.ts

@@ -6,25 +6,17 @@ const mutation: MutationTree<sssi> = {
   setGuiState (state: sssi,
                newVal: simulationSetup) {
     state.gui = cloneDeep(newVal)
-    // // Possible usage in component
-    // let simulationSetupGui = reactive(cloneDeep($store.state.simulationSetup.gui))
-    // const unsubscribe = $store.subscribe((mutation, /*state*/) => {
-    //   if (mutation.type === 'simulationSetup/setGuiState') {
-    //     let key: keyof typeof simulationSetupGui
-    //     for (key in simulationSetupGui) {
-    //       simulationSetupGui[key] = $store.state.simulationSetup.gui[key]
-    //     }
-    //   }
-    // })
-    // onBeforeUnmount(()=>unsubscribe())
-    // watch(simulationSetupGui, () => $store.commit('simulationSetup/setGuiState',simulationSetupGui))
   },
+  setLayers    (state: sssi,
+                newVal: layer[]) {
+    state.gui.layers = cloneDeep(newVal)
+  },
+
   setHostIndex (state: sssi, val: number) {state.gui.hostIndex = val},
   setFromWL    (state: sssi, val: number) {state.gui.fromWL    = val},
   setToWL      (state: sssi, val: number) {state.gui.toWL      = val},
   setPointsWL  (state: sssi, val: number) {state.gui.pointsWL  = val},
 
-  setLayers    (state: sssi, val: layer[]) {state.gui.layers = cloneDeep(val) }
 };
 
 export default mutation;

guiapp/src/store/simulation-setup/state.ts

@@ -25,7 +25,8 @@ export interface simulationSetupStateInterface {
 function setupFactory(hostIndex = 1,
                       fromWL = 300, toWL=1000, pointsWL=101,
                       layers = [
-                        {layerWidth:100, n:4, k:0.01, materialName:'nk',
+                        {layerWidth:100, n:4, k:0.01,
+                          materialName:'nk-constant',
                           nSpline:undefined, kSpline:undefined
                         },
                       ]