add component GetSourceParameters.vue

guiapp/src/components/GetHostIndex.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="row">
-    <div class="col-xs-12 col-sm-auto text-weight-bold text-left q-px-md q-py-sm">
+    <div class="col-xs-12 col-sm-auto text-weight-bold text-center q-px-md q-py-sm">
       Host media
     </div>
     <div class="col-xs-auto col-sm">
@@ -42,8 +42,10 @@ export default defineComponent({
     let simulationSetupGui = reactive(cloneDeep($store.state.simulationSetup.gui))
     const unsubscribe = $store.subscribe((mutation, /*state*/) => {
       if (mutation.type === 'simulationSetup/setGuiState') {
-        // simulationSetupGui = cloneDeep($store.state.simulationSetup.gui)
-        simulationSetupGui.hostIndex = $store.state.simulationSetup.gui.hostIndex
+        let key: keyof typeof simulationSetupGui
+        for (key in simulationSetupGui) {
+          simulationSetupGui[key] = $store.state.simulationSetup.gui[key]
+        }
       }
     })
     onBeforeUnmount(()=>unsubscribe())

guiapp/src/components/GetSourceParameters.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="row">
+    <div class="col-xs-12 col-sm-auto text-weight-bold text-center q-px-md q-py-sm">
+      Wavelength
+    </div>
+    <div class="col-xs-auto col-sm">
+      <div class="row justify-start items-center">
+
+        <div class="col-auto"><input-with-units
+            v-model:input-result="simulationSetupGui.fromWL"
+            v-model:is-showing-help="isShowingHelpForInputWithUnits"
+            :initial-expression="simulationSetupGui.fromWL.toString()"
+            title="from"
+            units="nm"
+        /></div>
+        <div class="col-auto"><input-with-units
+            v-model:input-result="simulationSetupGui.toWL"
+            v-model:is-showing-help="isShowingHelpForInputWithUnits"
+            :initial-expression="simulationSetupGui.toWL.toString()"
+            title="to"
+            units="nm"
+            active
+        /></div>
+        <div class="col-auto"><input-with-units
+            v-model:input-result="simulationSetupGui.pointsWL"
+            v-model:is-showing-help="isShowingHelpForInputWithUnits"
+            :initial-expression="simulationSetupGui.pointsWL.toString()"
+            title="points"
+            units=""
+            active
+        /></div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  reactive,
+  computed,
+  watch,
+  onBeforeUnmount,
+  } from 'vue'
+import { useStore } from 'src/store'
+import { cloneDeep } from 'lodash'
+import InputWithUnits from 'components/InputWithUnits.vue'
+
+export default defineComponent({
+
+  name: 'GetSourceParameters',
+  components: {InputWithUnits,},
+
+  setup() {
+    const $store = useStore()
+
+    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))
+
+    const isShowingHelpForInputWithUnits = computed({
+      get: () => $store.state.plotRuntime.isShowingHelpForInputWithUnits,
+      set: val => $store.commit('plotRuntime/setIsShowingHelpForInputWithUnits', val)
+    })
+    return { simulationSetupGui, isShowingHelpForInputWithUnits }
+  },
+})
+</script>

guiapp/src/components/InputWithUnits.vue

@@ -44,6 +44,9 @@
               @keydown.enter="handleQSelectBlur"
               @input-value="localQSelectModel=$event"
           >
+            <template v-if="isError" #prepend >
+              <q-icon name="error" class="text-warning"/>
+            </template>
             <template
                 v-if="isShowingTooltipAppend&&!isShowingTooltip"
                 #append
@@ -110,6 +113,10 @@ export default defineComponent({
     isShowingHelp: {
       type: Boolean,
       default: false
+    },
+    isError: {
+      type: Boolean,
+      default:false
     }
   },
   emits: [

guiapp/src/pages/Far-field.vue

@@ -1,51 +1,29 @@
 <template>
-  <q-page class="row items-center justify-evenly">
-<!--    Your code-->
-    <h4>Far-field</h4>
-    <input-with-units
-        v-model:input-result="someValue"
-        v-model:is-showing-help="isShowingHelpForInputWithUnits"
-        :initial-expression="someExpr"
-        title="Re(n)"
-        units="nm"
-    ></input-with-units>
-    <input-with-units
-        v-model:input-result="someValue"
-        v-model:is-showing-help="isShowingHelpForInputWithUnits"
-        :initial-expression="someExpr"
-        title=""
-        units=""
-        active
-    ></input-with-units>
-    Input result: {{someValue}}
-<!--    tooltip_text="help text"-->
+  <q-page class="column q-px-md">
+    <div class="q-ma-sm"/>
+    <GetSourceParameters/>
+    <GetHostIndex/>
+    <div class="col-auto">
+      Input result: {{$store.state.simulationSetup.gui.fromWL}}
+    </div>
   </q-page>
 </template>
 
 <script lang='ts'>
-import { defineComponent, ref,
-  computed
-} from 'vue';
-import { useStore } from 'src/store';
-import InputWithUnits from 'components/InputWithUnits.vue';
+import {
+  defineComponent
+} from 'vue'
+import GetHostIndex from 'components/GetHostIndex.vue'
+import GetSourceParameters from 'components/GetSourceParameters.vue'
+// import { useStore } from 'src/store'
 
 
 export default defineComponent({
   name: 'PageIndex',
-  components: {InputWithUnits },
+  components: {GetHostIndex, GetSourceParameters },
   setup() {
-    const $store = useStore()
-    let someValue = ref(10);
-    let someExpr = ref('10');
-    // InputWithUnits component will disable showing help after first input
-    const isShowingHelpForInputWithUnits = computed({
-      get: () => $store.state.guiRuntime.isShowingHelpForInputWithUnits,
-      set: val => {
-        $store.commit('guiRuntime/setIsShowingHelpForInputWithUnits', val)
-      }
-    })
-    // let isShowingHelpForInputWithUnits = ref(true)
-    return { someValue, someExpr, isShowingHelpForInputWithUnits};
+    // const $store = useStore()
+    return {}
   }
-});
+})
 </script>

guiapp/src/pages/Near-field.vue

@@ -1,51 +1,29 @@
 <template>
-  <q-page class="row items-center justify-evenly">
-<!--    Your code-->
-    <h4>Near-field</h4>
-    <input-with-units
-        v-model:input-result="someValue"
-        v-model:is-showing-help="isShowingHelpForInputWithUnits"
-        :initial-expression="someExpr"
-        title="Re(n)"
-        units="nm"
-    ></input-with-units>
-    <input-with-units
-        v-model:input-result="someValue"
-        v-model:is-showing-help="isShowingHelpForInputWithUnits"
-        :initial-expression="someExpr"
-        title=""
-        units=""
-        active
-    ></input-with-units>
-    Input result: {{someValue}}
-<!--    tooltip_text="help text"-->
+  <q-page class="column q-px-md">
+    <div class="q-ma-sm"/>
+    <GetSourceParameters/>
+    <GetHostIndex/>
+    <div class="col-auto">
+      Input result: {{$store.state.simulationSetup.gui.fromWL}}
+    </div>
   </q-page>
 </template>
 
 <script lang='ts'>
-import { defineComponent, ref,
-  computed
-} from 'vue';
-import { useStore } from 'src/store';
-import InputWithUnits from 'components/InputWithUnits.vue';
+import {
+  defineComponent
+} from 'vue'
+import GetHostIndex from 'components/GetHostIndex.vue'
+import GetSourceParameters from 'components/GetSourceParameters.vue'
+// import { useStore } from 'src/store'
 
 
 export default defineComponent({
   name: 'PageIndex',
-  components: {InputWithUnits },
+  components: {GetHostIndex, GetSourceParameters },
   setup() {
-    const $store = useStore()
-    let someValue = ref(10);
-    let someExpr = ref('10');
-    // InputWithUnits component will disable showing help after first input
-    const isShowingHelpForInputWithUnits = computed({
-      get: () => $store.state.guiRuntime.isShowingHelpForInputWithUnits,
-      set: val => {
-        $store.commit('guiRuntime/setIsShowingHelpForInputWithUnits', val)
-      }
-    })
-    // let isShowingHelpForInputWithUnits = ref(true)
-    return { someValue, someExpr, isShowingHelpForInputWithUnits};
+    // const $store = useStore()
+    return {}
   }
-});
+})
 </script>

guiapp/src/pages/Spectrum.vue

@@ -1,87 +1,29 @@
 <template>
-  <q-page class="row items-center justify-evenly">
-    <!--    Your code-->
-
-<!--    <div class="row justify-start items-center">-->
-    <div class="column q-px-md">
-      <GetHostIndex/>
-
-      <div class="row">
-        <div class="col-xs-12 col-sm-auto text-weight-bold text-left q-px-md q-py-sm">Wavelength</div>
-        <div class="col-xs-auto col-sm">
-          <div class="row justify-start items-center">
-            <div class="col-auto"><input-with-units
-                v-model:input-result="simulationSetupGui.fromWL"
-                v-model:is-showing-help="isShowingHelpForInputWithUnits"
-                :initial-expression="simulationSetupGui.fromWL.toString()"
-                title="from"
-                units="nm"
-            /></div>
-            <div class="col-auto"><input-with-units
-                v-model:input-result="simulationSetupGui.toWL"
-                v-model:is-showing-help="isShowingHelpForInputWithUnits"
-                :initial-expression="simulationSetupGui.toWL.toString()"
-                title="to"
-                units="nm"
-                active
-            /></div>
-            <div class="col-auto"><input-with-units
-                v-model:input-result="simulationSetupGui.pointsWL"
-                v-model:is-showing-help="isShowingHelpForInputWithUnits"
-                :initial-expression="simulationSetupGui.pointsWL.toString()"
-                title="points"
-                units=""
-                active
-            /></div>
-          </div>
-        </div>
-      </div>
-
-      <div class="row justify-start items-center">
-        <div class="col-auto">
-          Input result: {{$store.state.simulationSetup.gui.hostIndex}}
-        </div>
-      </div>
+  <q-page class="column q-px-md">
+    <div class="q-ma-sm"/>
+    <GetHostIndex/>
+    <GetSourceParameters/>
+    <div class="col-auto">
+      Input result: {{$store.state.simulationSetup.gui.fromWL}}
     </div>
-<!--    tooltip_text="help text"-->
   </q-page>
 </template>
 
 <script lang='ts'>
 import {
-  defineComponent, ref,
-  computed, watch, reactive, onBeforeUnmount
+  defineComponent
 } from 'vue'
-import { useStore } from 'src/store'
-import InputWithUnits from 'components/InputWithUnits.vue'
 import GetHostIndex from 'components/GetHostIndex.vue'
-import { cloneDeep } from 'lodash'
+import GetSourceParameters from 'components/GetSourceParameters.vue'
+// import { useStore } from 'src/store'
 
 
 export default defineComponent({
   name: 'PageIndex',
-  components: {InputWithUnits, GetHostIndex },
+  components: {GetHostIndex, GetSourceParameters },
   setup() {
-    const $store = useStore()
-    let someValue = ref(10)
-    let someExpr = ref('10')
-    // InputWithUnits component will disable showing help after first input
-    const isShowingHelpForInputWithUnits = computed({
-      get: () => $store.state.plotRuntime.isShowingHelpForInputWithUnits,
-      set: val => $store.commit('plotRuntime/setIsShowingHelpForInputWithUnits', val)
-    })
-
-    let simulationSetupGui = reactive(cloneDeep($store.state.simulationSetup.gui))
-    const unsubscribe = $store.subscribe((mutation, /*state*/) => {
-      if (mutation.type === 'simulationSetup/setGuiState') {
-        simulationSetupGui = cloneDeep($store.state.simulationSetup.gui)
-      }
-    })
-    onBeforeUnmount(()=>unsubscribe())
-    watch(simulationSetupGui, () => $store.commit('simulationSetup/setGuiState',simulationSetupGui))
-
-    // console.log($store.state.simulationSetup.gui.toWL)
-    return { someValue, someExpr, isShowingHelpForInputWithUnits, simulationSetupGui}
+    // const $store = useStore()
+    return {}
   }
 })
 </script>