add to the Vuex store modules for simulation-setup and plot-runtime

guiapp/src/layouts/MainLayout.vue

@@ -13,8 +13,8 @@
         />
         <q-tabs align="right">
           <q-route-tab to="/spectrum" label="Spectrum" name="spectrum"/>
-          <q-route-tab to="/page2" label="Near-field" name="nearfield"/>
-          <q-route-tab to="/page3" label="Far-field" name="farfield"/>
+          <q-route-tab to="/nearfield" label="Near-field" name="nearfield"/>
+<!--          <q-route-tab to="/farfield" label="Far-field" name="farfield"/>-->
         </q-tabs>
       </q-toolbar>
     </q-header>

guiapp/src/pages/Far-field.vue

@@ -0,0 +1,51 @@
+<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>
+</template>
+
+<script lang='ts'>
+import { defineComponent, ref,
+  computed
+} from 'vue';
+import { useStore } from 'src/store';
+import InputWithUnits from 'components/InputWithUnits.vue';
+
+
+export default defineComponent({
+  name: 'PageIndex',
+  components: {InputWithUnits },
+  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};
+  }
+});
+</script>

guiapp/src/pages/Near-field.vue

@@ -0,0 +1,51 @@
+<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>
+</template>
+
+<script lang='ts'>
+import { defineComponent, ref,
+  computed
+} from 'vue';
+import { useStore } from 'src/store';
+import InputWithUnits from 'components/InputWithUnits.vue';
+
+
+export default defineComponent({
+  name: 'PageIndex',
+  components: {InputWithUnits },
+  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};
+  }
+});
+</script>

guiapp/src/pages/Spectrum.vue

@@ -1,6 +1,7 @@
 <template>
   <q-page class="row items-center justify-evenly">
-<!--    Your code-->
+    <!--    Your code-->
+    <h4>Spectrum</h4>
     <input-with-units
         v-model:input-result="someValue"
         v-model:is-showing-help="isShowingHelpForInputWithUnits"
@@ -34,7 +35,6 @@ export default defineComponent({
   components: {InputWithUnits },
   setup() {
     const $store = useStore()
-    console.log( 'store value',$store.state.guiRuntime.isShowingHelpForInputWithUnits)
     let someValue = ref(10);
     let someExpr = ref('10');
     // InputWithUnits component will disable showing help after first input

guiapp/src/router/routes.ts

@@ -7,6 +7,8 @@ const routes: RouteRecordRaw[] = [
     children: [
       { path: '', redirect: 'spectrum' },
       { path: 'spectrum', component: () => import('pages/Spectrum.vue') },
+      { path: 'nearfield', component: () => import('pages/Near-field.vue') },
+      { path: 'farfield', component: () => import('pages/Far-field.vue') },
       { path: 'info', component: () => import('pages/Info.vue') },
     ],
   },

guiapp/src/store/index.ts

@@ -9,6 +9,12 @@ import {
 import guiRuntime from './gui-runtime'
 import { guiRuntimeStateInterface } from './gui-runtime/state';
 
+import plotRuntime from './plot-runtime'
+import { plotRuntimeStateInterface } from './plot-runtime/state';
+
+import simulationSetup from './simulation-setup'
+import { simulationSetupStateInterface } from './simulation-setup/state';
+
 /*
  * If not building with SSR mode, you can
  * directly export the Store instantiation;
@@ -21,6 +27,8 @@ import { guiRuntimeStateInterface } from './gui-runtime/state';
 export interface StateInterface {
   // Define your own store structure, using submodules if needed
   guiRuntime: guiRuntimeStateInterface;
+  plotRuntime: plotRuntimeStateInterface;
+  simulationSetup: simulationSetupStateInterface;
   // Declared as unknown to avoid linting issue. Best to strongly type as per the line above.
   // example: unknown
 }
@@ -38,7 +46,9 @@ export const storeKey: InjectionKey<VuexStore<StateInterface>> = Symbol('vuex-ke
 export default store(function (/* { ssrContext } */) {
   const Store = createStore<StateInterface>({
     modules: {
-      guiRuntime
+      guiRuntime,
+      plotRuntime,
+      simulationSetup
     },
 
     // enable strict mode (adds overhead!)

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

@@ -0,0 +1,11 @@
+import { ActionTree } from 'vuex';
+import { StateInterface } from '../index';
+import { plotRuntimeStateInterface } from './state';
+
+const actions: ActionTree<plotRuntimeStateInterface, StateInterface> = {
+  someAction (/* context */) {
+    // your code
+  }
+};
+
+export default actions;

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

@@ -0,0 +1,11 @@
+import { GetterTree } from 'vuex';
+import { StateInterface } from '../index';
+import { plotRuntimeStateInterface } from './state';
+
+const getters: GetterTree<plotRuntimeStateInterface, StateInterface> = {
+  someAction (/* context */) {
+    // your code
+  }
+};
+
+export default getters;

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

@@ -0,0 +1,16 @@
+import { Module } from 'vuex';
+import { StateInterface } from '../index';
+import state, { plotRuntimeStateInterface } from './state';
+import actions from './actions';
+import getters from './getters';
+import mutations from './mutations';
+
+const plotRuntimeModule: Module<plotRuntimeStateInterface, StateInterface> = {
+  namespaced: true,
+  actions,
+  getters,
+  mutations,
+  state
+};
+
+export default plotRuntimeModule;

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

@@ -0,0 +1,11 @@
+import { MutationTree } from 'vuex';
+import { plotRuntimeStateInterface } from './state';
+
+const mutation: MutationTree<plotRuntimeStateInterface> = {
+  setIsShowingHelpForInputWithUnits (state: plotRuntimeStateInterface, newVal: boolean) {
+    // your code
+    state.isShowingHelpForInputWithUnits = newVal
+  }
+};
+
+export default mutation;

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

@@ -0,0 +1,11 @@
+export interface plotRuntimeStateInterface {
+  isShowingHelpForInputWithUnits: boolean;
+}
+
+function state(): plotRuntimeStateInterface {
+  return {
+    isShowingHelpForInputWithUnits: true
+  }
+};
+
+export default state;

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

@@ -0,0 +1,11 @@
+import { ActionTree } from 'vuex';
+import { StateInterface } from '../index';
+import { simulationSetupStateInterface } from './state';
+
+const actions: ActionTree<simulationSetupStateInterface, StateInterface> = {
+  someAction (/* context */) {
+    // your code
+  }
+};
+
+export default actions;

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

@@ -0,0 +1,11 @@
+import { GetterTree } from 'vuex';
+import { StateInterface } from '../index';
+import { simulationSetupStateInterface } from './state';
+
+const getters: GetterTree<simulationSetupStateInterface, StateInterface> = {
+  someAction (/* context */) {
+    // your code
+  }
+};
+
+export default getters;

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

@@ -0,0 +1,16 @@
+import { Module } from 'vuex';
+import { StateInterface } from '../index';
+import state, { simulationSetupStateInterface } from './state';
+import actions from './actions';
+import getters from './getters';
+import mutations from './mutations';
+
+const simulationSetupModule: Module<simulationSetupStateInterface, StateInterface> = {
+  namespaced: true,
+  actions,
+  getters,
+  mutations,
+  state
+};
+
+export default simulationSetupModule;

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

@@ -0,0 +1,11 @@
+import { MutationTree } from 'vuex';
+import { simulationSetupStateInterface } from './state';
+
+const mutation: MutationTree<simulationSetupStateInterface> = {
+  setIsShowingHelpForInputWithUnits (state: simulationSetupStateInterface, newVal: boolean) {
+    // your code
+    state.isShowingHelpForInputWithUnits = newVal
+  }
+};
+
+export default mutation;

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

@@ -0,0 +1,11 @@
+export interface simulationSetupStateInterface {
+  isShowingHelpForInputWithUnits: boolean;
+}
+
+function state(): simulationSetupStateInterface {
+  return {
+    isShowingHelpForInputWithUnits: true
+  }
+};
+
+export default state;