initial input in plot selector works

guiapp/src/components/GetParticleParameters.vue

@@ -170,11 +170,11 @@ export default defineComponent({
       if (numberOfLayers.value < 1) numberOfLayers.value = 1
       if (numberOfLayers.value > 10) numberOfLayers.value = 10
 
-      while (numberOfLayers.value < layers.length) {
+      while (layers.length > numberOfLayers.value) {
         layers.pop();
       }
       let coreR = layers[0].layerWidth;
-      while (numberOfLayers.value > layers.length) {
+      while (layers.length < numberOfLayers.value) {
         // r_prev = r_prev*1.1;
         layers.push(
             {

guiapp/src/components/GetPlotSettings.vue

@@ -43,8 +43,12 @@ export default defineComponent({
     const numberOfModesToPlot = computed({
       get: () => $store.state.simulationSetup.gui.numberOfModesToPlot,
       set: val => {
-        const intVal = parseInt(val.toString())
-        if (!isNaN(intVal)) $store.commit('simulationSetup/setNumberOfModesToPlot', intVal)
+        let intVal = parseInt(val.toString())
+        if (isNaN(intVal)) return
+        if (intVal<1) intVal = 1
+        if (intVal>10) intVal = 10
+        $store.commit('simulationSetup/setNumberOfModesToPlot', intVal)
+        $store.commit('plotRuntime/resizeIsPlotMode',intVal)
       }
     })
 

guiapp/src/components/PlotSelector.vue

@@ -1,11 +1,42 @@
 <template>
-  <div class="row justify-xs-center justify-sm-start items-baseline">
-    <div class="col-auto">
+  <div class="col-auto">
+    <div class="row justify-xs-center justify-sm-start items-baseline">
+      <q-toggle v-model="isPlotQsca" dense class="q-ml-md">Qsca</q-toggle>
+      <q-toggle v-model="isPlotQabs" dense class="q-ml-md">Qabs</q-toggle>
+      <q-toggle v-model="isPlotQext" dense class="q-ml-md">Qext</q-toggle>
     </div>
-    <q-toggle v-model="isQscaToggle" dense class="q-ml-md">Qsca</q-toggle>
-    <q-toggle v-model="isQabsToggle" dense class="q-ml-md">Qabs</q-toggle>
-    <q-toggle v-model="isQextToggle" dense class="q-ml-md">Qext</q-toggle>
+    <div class="q-ma-sm"/>
+    <q-toggle
+        v-model="rows[0]['1']"
+    />
 
+    <div class="row justify-xs-center justify-sm-start items-baseline">
+      <q-table
+          :rows="rows"
+          :columns="columns"
+          hide-bottom
+          dense
+          flat
+          row-key="name"
+      >
+        <template #body="props">
+          <q-tr :props="props">
+            <q-th key="name" :props="props">
+              {{ props.row.name }}
+            </q-th>
+            <q-td v-for="(val, index) in props.row" :key="index" :props="props">
+              <div v-if="index!='name'" >
+                <q-toggle
+                    v-model="props.row[index.toString()]"
+                />
+                <!--                    @update:input-result="layer.layerWidth = fromUnits(units,$event)"-->
+                {{ props.row[index.toString()]}}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </q-table>
+    </div>
   </div>
 </template>
 
@@ -13,29 +44,73 @@
 import {
   defineComponent,
   computed,
+  ref
   } from 'vue'
 import { useStore } from 'src/store'
-import { flexRowTitleStyle } from 'components/utils'
+import { cloneDeep } from 'lodash'
 
 export default defineComponent({
   name: 'GetPlotSettings',
 
   setup() {
     const $store = useStore()
-    const isQscaToggle = computed({
-      get: () => $store.state.plotRuntime.isQscaToggle,
-      set: val => $store.commit('plotRuntime/setQscaToggle', val)
+    const isPlotQsca = computed({
+      get: () => $store.state.plotRuntime.isPlotQsca,
+      set: val => $store.commit('plotRuntime/setQscaPlotToggle', val)
+    })
+    const isPlotQabs = computed({
+      get: () => $store.state.plotRuntime.isPlotQabs,
+      set: val => $store.commit('plotRuntime/setQabsPlotToggle', val)
     })
-    const isQabsToggle = computed({
-      get: () => $store.state.plotRuntime.isQabsToggle,
-      set: val => $store.commit('plotRuntime/setQabsToggle', val)
+    const isPlotQext = computed({
+      get: () => $store.state.plotRuntime.isPlotQext,
+      set: val => $store.commit('plotRuntime/setQextPlotToggle', val)
     })
-    const isQextToggle = computed({
-      get: () => $store.state.plotRuntime.isQextToggle,
-      set: val => $store.commit('plotRuntime/setQextToggle', val)
+
+    const guiNumberOfModes = computed(()=> $store.state.simulationSetup.gui.numberOfModesToPlot)
+    const simulatedNumberOfModes = computed(()=> $store.state.simulationSetup.current.numberOfModesToPlot)
+
+    $store.commit('plotRuntime/resizeIsPlotMode', guiNumberOfModes)
+
+
+    const columns = computed(()=> {
+      let columns = [{ name: 'name', label: '',  align: 'left', field: '' }]
+      for (let i=1; i<=guiNumberOfModes.value; ++i) {
+        let label_computed = Math.pow(2, i).toString()
+        if (i == 1) label_computed = 'dipole'
+        if (i == 2) label_computed = 'quadrupole'
+        if (i == 3) label_computed = 'octupole'
+        columns.push({
+          name: i.toString(),
+          label: label_computed,
+          align:'right',
+          field: i.toString()
+        })
+      }
+      return columns
+    })
+
+    const rows_store = computed({
+      get: ()=> {
+        let rows = []
+        let row = {name: 'E'}
+        for (let i = 1; i <= guiNumberOfModes.value; ++i) {
+          // eslint-disable-next-line
+          (row as any)[i.toString()] = false
+        }
+        rows.push(cloneDeep(row))
+        row.name = 'H'
+        rows.push(cloneDeep(row))
+        console.log(rows)
+        return rows
+      },
+      set: val => { console.log(val)}
     })
+    const rows = ref(rows_store.value)
 
-    return { isQscaToggle, isQabsToggle, isQextToggle
+    return { isPlotQsca, isPlotQabs, isPlotQext,
+      guiNumberOfModes, simulatedNumberOfModes,
+      columns, rows
       }
   },
 })

guiapp/src/pages/Spectrum.vue

@@ -17,7 +17,7 @@
     <div class="q-ma-xs"/>
     <ReactiveChart :chart="$store.state.plotRuntime.spectraPlot"/>
     <div class="col-auto q-pa-md">
-      Input result: {{$store.state.plotRuntime.isQscaToggle}}
+      Input result: {{$store.state.plotRuntime.isPlotModeE}}
     </div>
   </q-page>
 </template>

guiapp/src/store/plot-runtime/mutations.ts

@@ -24,9 +24,16 @@ const mutation: MutationTree<prsi> = {
     state.spectraPlot.data.push(traceQsca)
 
   },
-  setQscaToggle (state: prsi, val: boolean) {state.isQscaToggle = val},
-  setQabsToggle (state: prsi, val: boolean) {state.isQabsToggle = val},
-  setQextToggle (state: prsi, val: boolean) {state.isQextToggle = val},
+  setQscaPlotToggle (state: prsi, val: boolean) {state.isPlotQsca = val},
+  setQabsPlotToggle (state: prsi, val: boolean) {state.isPlotQabs = val},
+  setQextPlotToggle (state: prsi, val: boolean) {state.isPlotQext = val},
+
+  resizeIsPlotMode (state:prsi, val:number) {
+    while (state.isPlotModeE.length > val) state.isPlotModeE.pop();
+    while (state.isPlotModeH.length > val) state.isPlotModeH.pop();
+    while (state.isPlotModeE.length < val) state.isPlotModeE.push(false);
+    while (state.isPlotModeH.length < val) state.isPlotModeH.push(false);
+  }
 }
 
 export default mutation

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

@@ -25,9 +25,11 @@ export interface plotRuntimeStateInterface {
   Qabs_n:number[][][]
   Qext_n:number[][][]
   spectraPlot: plotlyChart
-  isQscaToggle: boolean
-  isQabsToggle: boolean
-  isQextToggle: boolean
+  isPlotQsca: boolean
+  isPlotQabs: boolean
+  isPlotQext: boolean
+  isPlotModeE: boolean[]
+  isPlotModeH: boolean[]
 }
 
 function state(): plotRuntimeStateInterface {
@@ -36,9 +38,11 @@ function state(): plotRuntimeStateInterface {
   const Qsca_n:number[][][] = [[], []]
   const Qabs_n:number[][][] = [[], []]
   const Qext_n:number[][][] = [[], []]
-  const isQscaToggle = true
-  const isQabsToggle = true
-  const isQextToggle = false
+  const isPlotQsca = true
+  const isPlotQabs = true
+  const isPlotQext = false
+  const isPlotModeE:boolean[] = []
+  const isPlotModeH:boolean[] = []
 
   const spectraPlot:plotlyChart = {
     data: [],
@@ -73,7 +77,8 @@ function state(): plotRuntimeStateInterface {
 
   return { WLs,
     Qsca, Qabs, Qext, Qsca_n, Qabs_n, Qext_n,
-    spectraPlot, isQscaToggle, isQabsToggle, isQextToggle
+    spectraPlot, isPlotQsca, isPlotQabs, isPlotQext,
+    isPlotModeE, isPlotModeH
   }
 }