draft of GetUnit.vue

guiapp/quasar.conf.js

@@ -94,6 +94,7 @@ module.exports = configure(function (ctx) {
 
     // https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework
     framework: {
+      cssAddon: true,
       config: {},
 
       // iconSet: 'material-icons', // Quasar icon set

guiapp/src/components/GetHostIndex.vue

@@ -1,10 +1,12 @@
 <template>
   <div class="row items-baseline">
     <div class="col-xs-12 col-sm-auto text-weight-bold text-center q-px-md q-py-sm">
-      Host media
+      <div :style="flexRowTitleStyle">
+        Host media
+      </div>
     </div>
-    <div class="col-xs-auto col-sm">
-      <div class="row justify-start items-center">
+    <div class="col-xs-grow col-sm">
+      <div class="row justify-xs-center justify-sm-start items-center">
 
         <div class="col-auto" ><input-with-units
             v-model:input-result="hostIndex"
@@ -26,6 +28,7 @@ import {
   } from 'vue'
 import { useStore } from 'src/store'
 import InputWithUnits from 'components/InputWithUnits.vue'
+import { flexRowTitleStyle } from 'components/utils'
 
 export default defineComponent({
 
@@ -45,7 +48,7 @@ export default defineComponent({
       set: val => $store.commit('simulationSetup/setHostIndex', val)
     })
 
-    return { hostIndex, isShowingHelpForInputWithUnits }
+    return { hostIndex, isShowingHelpForInputWithUnits, flexRowTitleStyle}
   },
 })
 </script>

guiapp/src/components/GetSourceParameters.vue

@@ -1,10 +1,12 @@
 <template>
   <div class="row items-baseline">
     <div class="col-xs-12 col-sm-auto text-weight-bold text-center q-px-md q-py-sm">
-      Wavelength
+      <div :style="flexRowTitleStyle">
+        Wavelength
+      </div>
     </div>
-    <div class="col-xs-auto col-sm">
-      <div class="row justify-start items-center">
+    <div class="col-xs-grow col-sm">
+      <div class="row justify-xs-center justify-sm-start items-center">
 
         <div class="col-auto"><input-with-units
             v-model:input-result="fromWL"
@@ -42,6 +44,7 @@ import {
   } from 'vue'
 import { useStore } from 'src/store'
 import InputWithUnits from 'components/InputWithUnits.vue'
+import { flexRowTitleStyle } from 'components/utils'
 
 export default defineComponent({
 
@@ -71,7 +74,7 @@ export default defineComponent({
       set: val => $store.commit('simulationSetup/setPointsWL', val)
     })
 
-    return { fromWL, toWL, pointsWL, isShowingHelpForInputWithUnits }
+    return { fromWL, toWL, pointsWL, isShowingHelpForInputWithUnits, flexRowTitleStyle }
   },
 })
 </script>

guiapp/src/components/GetUnits.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="row items-baseline">
+    <div class="col-xs-12 col-sm-auto text-weight-bold text-center q-px-md q-py-sm">
+      <div :style="flexRowTitleStyle">
+        Units
+      </div>
+    </div>
+    <div class="col-xs-grow col-sm">
+      <div class="row justify-xs-center justify-sm-start items-center">
+
+        <div class="col-auto" >
+          <q-select
+              class="q-pa-xs"
+              outlined
+              dense
+              options-dense
+              style="width: 7em"
+              behavior="menu"
+              v-model="localUnits"
+              :options="unitsOptions"
+          >
+          </q-select>
+        </div>
+
+        <div class="col-auto" >
+          <div class="row q-py-xs q-px-md items-center justify-center">
+          <div class="q-pr-xs"> Source units </div>
+
+            <q-select
+                v-model="localSourceUnits"
+                :options="sourceUnitsOptions"
+                outlined
+                dense
+                options-dense
+                option-value="label"
+                option-label="label"
+            >
+              <template v-slot:option="scope">
+                <q-item :label="scope.opt.title" dense>
+                  <q-item-section class="text-weight-bold">{{ scope.opt.title }}</q-item-section>
+                </q-item>
+                <template v-for="child in scope.opt.children" :key="child.label">
+                  <q-item clickable v-close-popup dense
+                          @click="localSourceUnits = child"
+                  >
+                    <q-item-section> <q-item-label v-html="child.label" class="q-ml-md" /> </q-item-section>
+                  </q-item>
+                </template>
+              </template>
+            </q-select>
+
+
+            <div class="row q-py-xs items-center">
+              <q-checkbox v-model="isSourceSameUnits" size="sm"/>
+              <div>same</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-auto" >
+          units: {{localSourceUnits}}
+          <br> isSource: {{isSourceSameUnits}}
+
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  ref
+  } from 'vue'
+import { useStore } from 'src/store'
+import { flexRowTitleStyle } from 'components/utils'
+
+export default defineComponent({
+
+  name: 'GetHostIndex',
+  components: {},
+
+  setup() {
+    const unitsOptions = [ 'nm', 'mkm', 'mm', 'cm', 'm', 'km' ]
+    let localUnits = ref('nm')
+    const sourceUnitsOptions = [
+      { title: 'Frequency',
+        children: [{label: 'Hz'},{label: 'kHz'},{label: 'MHz'},{label: 'GHz'},{label: 'THz'}]},
+      { title: 'Energy',
+        children: [{label: 'meV'}, {label: 'eV'}]},
+      { title: 'Period duration',
+        children: [{label: 'ps'}, {label: 'fs'}]}
+    ]
+    let localSourceUnits = ref({ "label": "THz" } )
+    const $store = useStore()
+
+    // let isSourceOtherUnits = ref(true)
+    const isSourceSameUnits = computed({
+      get: () => $store.state.guiRuntime.isSourceSameUnits,
+      set: val => $store.commit('guiRuntime/setIsSourceSameUnits', val)
+    })
+
+
+    return { isSourceSameUnits, flexRowTitleStyle,
+      unitsOptions, localUnits,
+      localSourceUnits, sourceUnitsOptions }
+  },
+})
+</script>

guiapp/src/components/InputWithUnits.vue

@@ -21,8 +21,8 @@
       <q-card-section
           class="items-center bg-grey-2"
           horizontal>
-        <div class="side_note text-grey-9 q-px-xs"
-             style="width: 4rem"
+        <div class="side_note text-grey-9 q-px-xs text-center"
+             style="width: 4em"
         >
           {{title}}
         </div>
@@ -36,7 +36,7 @@
               hide-selected
               input-debounce="0"
               options-dense
-              style="width: 10rem"
+              style="width: 10em"
               use-input
               behavior="menu"
               @filter="filterQSelectOptions"
@@ -72,8 +72,8 @@
           </q-select>
         </div>
         <div
-            class="side_note text-grey-9 q-px-xs"
-            style="width: 3rem"
+            class="side_note text-grey-9 q-px-xs text-center"
+            style="width: 3em"
         >
           {{units}}
         </div>

guiapp/src/pages/Spectrum.vue

@@ -1,9 +1,15 @@
 <template>
   <q-page class="column q-px-md">
     <div class="q-ma-sm"/>
+    <GetUnits/>
+    <div class="q-ma-xs"/>
+    <GetHostIndex/>
+    <div class="q-ma-xs"/>
     <GetHostIndex/>
     <div class="q-ma-xs"/>
     <GetSourceParameters/>
+    <div class="q-ma-xs"/>
+    <GetSourceParameters/>
     <div class="col-auto">
       Input result: {{$store.state.simulationSetup.gui.fromWL}}
     </div>
@@ -14,6 +20,7 @@
 import {
   defineComponent
 } from 'vue'
+import GetUnits from 'components/GetUnits.vue'
 import GetHostIndex from 'components/GetHostIndex.vue'
 import GetSourceParameters from 'components/GetSourceParameters.vue'
 // import { useStore } from 'src/store'
@@ -21,7 +28,7 @@ import GetSourceParameters from 'components/GetSourceParameters.vue'
 
 export default defineComponent({
   name: 'PageIndex',
-  components: {GetHostIndex, GetSourceParameters },
+  components: {GetUnits, GetHostIndex, GetSourceParameters },
   setup() {
     // const $store = useStore()
     return {}

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

@@ -1,11 +1,11 @@
 import { MutationTree } from 'vuex';
-import { guiRuntimeStateInterface } from './state';
+import { guiRuntimeStateInterface as grsi} from './state';
 
-const mutation: MutationTree<guiRuntimeStateInterface> = {
-  setIsShowingHelpForInputWithUnits (state: guiRuntimeStateInterface, newVal: boolean) {
-    // your code
-    state.isShowingHelpForInputWithUnits = newVal
-  }
+const mutation: MutationTree<grsi> = {
+  setIsShowingHelpForInputWithUnits (state: grsi, val: boolean) {state.isShowingHelpForInputWithUnits = val},
+  setUnits             (state: grsi, val: string ) {state.units             = val},
+  setSourceUnits       (state: grsi, val: string ) {state.sourceUnits       = val},
+  setIsSourceSameUnits (state: grsi, val: boolean) {state.isSourceSameUnits = val},
 };
 
 export default mutation;

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

@@ -1,11 +1,17 @@
 export interface guiRuntimeStateInterface {
-  isShowingHelpForInputWithUnits: boolean;
+  isShowingHelpForInputWithUnits: boolean
+  units: string
+  sourceUnits: string
+  isSourceSameUnits: boolean
 }
 
 function state(): guiRuntimeStateInterface {
   return {
-    isShowingHelpForInputWithUnits: true
+    isShowingHelpForInputWithUnits: true,
+    units: 'nm',
+    sourceUnits: 'nm',
+    isSourceSameUnits: false
   }
-};
+}
 
 export default state;

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

@@ -1,13 +1,13 @@
 import { cloneDeep } from 'lodash'
 export interface simulationSetup {
-  hostIndex: number,
-  fromWL: number, toWL:number, pointsWL:number
+  hostIndex: number
+  fromWL: number; toWL:number; pointsWL:number
 }
 
 export interface simulationSetupStateInterface {
-  library: Map<string,simulationSetup>;
-  gui: simulationSetup;
-  current: simulationSetup;
+  library: Map<string,simulationSetup>
+  gui: simulationSetup
+  current: simulationSetup
 }
 
 function setupFactory(hostIndex = 1,