initial layout

guiapp/quasar.conf.js

@@ -48,6 +48,7 @@ module.exports = configure(function (ctx) {
 
       'roboto-font', // optional, you are not bound to it
       'material-icons', // optional, you are not bound to it
+      'material-icons-outlined', // optional, you are not bound to it
     ],
 
     // Full list of options: https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build

guiapp/src/components/InputWithUnits.vue

@@ -137,38 +137,6 @@ export default defineComponent({
     qSelectOptionsHistory.value.pop()
     qSelectOptionsHistory.value.pop()
 
-    function filterQSelectOptions (val:string,
-                       update:(data: ()=>void) => void) {
-      update(() => {
-        // To remove the selection from previously
-        // selected option - we refill the options list
-        qSelectOptions.value = qSelectOptionsHistory.value
-      })
-    }
-
-    function formatNumber (value:string, digits:number):string {
-      if (value==='') return ''
-      const num = parseFloat(value)
-      if ( num < Math.pow(10, -digits) ||
-          num > 5*Math.pow(10,  digits+2)
-      ) return '='+num.toExponential(digits)
-      return '='+Number(Math.round(
-              parseFloat(value + 'e' + digits.toString())).toString()
-          + 'e-' + digits.toString()).toString()
-    }
-
-    // evaluate option items, returns empty string for trivial evaluations and errors
-    function evalString(val:string):string {
-      // Using try{} block to drop silently invalid input
-      try {
-        const tryEvaluate = Number(evaluate(val))
-        if (!isNaN(tryEvaluate) && tryEvaluate != Number(val)) {
-          return tryEvaluate.toString()
-        }
-      } catch { }
-      return ''
-    }
-
     // evaluate current input, keeps the previous evaluateValue for invalid input
     function runEvaluate() {
       // Using try{} block to drop silently invalid input
@@ -225,13 +193,6 @@ export default defineComponent({
       if (qSelectOptions.value.length>0) isShowingHelpLocal.value = false
     })
 
-    function handleQSelectBlur(){
-      isShowingTooltip.value = false
-      const expr = localQSelectValue.value
-      if (!qSelectOptionsHistory.value.includes(expr)) qSelectOptionsHistory.value.unshift(expr)
-      if (qSelectOptionsHistory.value.length > 5) qSelectOptionsHistory.value.pop()
-    }
-
     // eslint-disable-next-line vue/no-setup-props-destructure
     localQSelectValue.value = props.initialExpression // TODO do we need reactivity from props.initialExpression?
     runEvaluate()
@@ -243,8 +204,48 @@ export default defineComponent({
       localTooltipText, isShowingTooltip,
       isShowingTooltipAppend, isShowingHelpLocal,
       qSelectOptions,  localQSelectValue,
-      handleQSelectBlur, filterQSelectOptions,
-      digits, formatNumber, evalString
+
+      handleQSelectBlur(){
+        isShowingTooltip.value = false
+        const expr = localQSelectValue.value
+        if (!qSelectOptionsHistory.value.includes(expr)) qSelectOptionsHistory.value.unshift(expr)
+        if (qSelectOptionsHistory.value.length > 5) qSelectOptionsHistory.value.pop()
+      },
+
+      filterQSelectOptions (val:string,
+                            update:(data: ()=>void) => void) {
+        update(() => {
+          // To remove the selection from previously
+          // selected option - we refill the options list
+          qSelectOptions.value = qSelectOptionsHistory.value
+        })
+      },
+
+      digits,
+
+      formatNumber (value:string, digits:number):string {
+        if (value==='') return ''
+        const num = parseFloat(value)
+        if ( num < Math.pow(10, -digits) ||
+            num > 5*Math.pow(10,  digits+2)
+        ) return '='+num.toExponential(digits)
+        return '='+Number(Math.round(
+                parseFloat(value + 'e' + digits.toString())).toString()
+            + 'e-' + digits.toString()).toString()
+      },
+
+      // evaluate option items, returns empty string for trivial evaluations and errors
+      evalString(val:string):string {
+        // Using try{} block to drop silently invalid input
+        try {
+          const tryEvaluate = Number(evaluate(val))
+          if (!isNaN(tryEvaluate) && tryEvaluate != Number(val)) {
+            return tryEvaluate.toString()
+          }
+        } catch { }
+        return ''
+      },
+
     };
   },
 });

guiapp/src/layouts/MainLayout.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-layout view="hHh Lpr lFf">
+  <q-layout view="hHh lpr lFf">
     <q-header elevated>
       <q-toolbar>
         <q-btn
@@ -10,12 +10,11 @@
           aria-label="Menu"
           @click="toggleLeftDrawer"
         />
-
-        <q-toolbar-title>
-          Quasar App
-        </q-toolbar-title>
-
-        <div>Quasar v{{ $q.version }}</div>
+        <q-tabs align="left">
+          <q-route-tab to="/" label="Spectrum" />
+          <q-route-tab to="/page2" label="Near-field" />
+          <q-route-tab to="/page3" label="Far-field" />
+        </q-tabs>
       </q-toolbar>
     </q-header>
 
@@ -25,17 +24,44 @@
       bordered
     >
       <q-list>
-        <q-item-label
-          header
+
+        <q-item
+            clickable
         >
-          Essential Links
-        </q-item-label>
+          <q-item-section
+              avatar
+          >
+            <q-icon name="o_info" />
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>            Info
+            </q-item-label>
+          </q-item-section>
+        </q-item>
+        <q-separator inset spaced/>
+        <q-item> <q-item-section> <q-item-label> External links</q-item-label> </q-item-section> </q-item>
+        <q-item clickable tag="a" target="_blank" :href="`https://github.com/ovidiopr/scattnlay`" >
+          <q-item-section avatar > <q-icon name="code" /> </q-item-section>
+          <q-item-section> <q-item-label>Project at GitHub</q-item-label>
+            <q-item-label caption> Open-source software </q-item-label>
+          </q-item-section>
+        </q-item>
+        <q-item clickable tag="a" target="_blank" :href="`https://github.com/ovidiopr/scattnlay/issues/new?title=[webapp]`" >
+          <q-item-section avatar > <q-icon name="support" /> </q-item-section>
+          <q-item-section> <q-item-label>Support</q-item-label>
+            <q-item-label caption> Requires a GitHub account</q-item-label></q-item-section>
+        </q-item>
+<!--        <q-item-label-->
+<!--          header-->
+<!--        >-->
+<!--          Essential Links-->
+<!--        </q-item-label>-->
 
-        <EssentialLink
-          v-for="link in essentialLinks"
-          :key="link.title"
-          v-bind="link"
-        />
+<!--        <EssentialLink-->
+<!--          v-for="link in essentialLinks"-->
+<!--          :key="link.title"-->
+<!--          v-bind="link"-->
+<!--        />-->
       </q-list>
     </q-drawer>
 
@@ -46,67 +72,67 @@
 </template>
 
 <script lang="ts">
-import EssentialLink from 'components/EssentialLink.vue'
+// import EssentialLink from 'components/EssentialLink.vue'
 
-const linksList = [
-  {
-    title: 'Docs',
-    caption: 'quasar.dev',
-    icon: 'school',
-    link: 'https://quasar.dev'
-  },
-  {
-    title: 'Github',
-    caption: 'github.com/quasarframework',
-    icon: 'code',
-    link: 'https://github.com/quasarframework'
-  },
-  {
-    title: 'Discord Chat Channel',
-    caption: 'chat.quasar.dev',
-    icon: 'chat',
-    link: 'https://chat.quasar.dev'
-  },
-  {
-    title: 'Forum',
-    caption: 'forum.quasar.dev',
-    icon: 'record_voice_over',
-    link: 'https://forum.quasar.dev'
-  },
-  {
-    title: 'Twitter',
-    caption: '@quasarframework',
-    icon: 'rss_feed',
-    link: 'https://twitter.quasar.dev'
-  },
-  {
-    title: 'Facebook',
-    caption: '@QuasarFramework',
-    icon: 'public',
-    link: 'https://facebook.quasar.dev'
-  },
-  {
-    title: 'Quasar Awesome',
-    caption: 'Community Quasar projects',
-    icon: 'favorite',
-    link: 'https://awesome.quasar.dev'
-  }
-];
+// const linksList = [
+//   {
+//     title: 'Docs',
+//     caption: 'quasar.dev',
+//     icon: 'school',
+//     link: 'https://quasar.dev'
+//   },
+//   {
+//     title: 'Github',
+//     caption: 'github.com/quasarframework',
+//     icon: 'code',
+//     link: 'https://github.com/quasarframework'
+//   },
+//   {
+//     title: 'Discord Chat Channel',
+//     caption: 'chat.quasar.dev',
+//     icon: 'chat',
+//     link: 'https://chat.quasar.dev'
+//   },
+//   {
+//     title: 'Forum',
+//     caption: 'forum.quasar.dev',
+//     icon: 'record_voice_over',
+//     link: 'https://forum.quasar.dev'
+//   },
+//   {
+//     title: 'Twitter',
+//     caption: '@quasarframework',
+//     icon: 'rss_feed',
+//     link: 'https://twitter.quasar.dev'
+//   },
+//   {
+//     title: 'Facebook',
+//     caption: '@QuasarFramework',
+//     icon: 'public',
+//     link: 'https://facebook.quasar.dev'
+//   },
+//   {
+//     title: 'Quasar Awesome',
+//     caption: 'Community Quasar projects',
+//     icon: 'favorite',
+//     link: 'https://awesome.quasar.dev'
+//   }
+// ];
 
 import { defineComponent, ref } from 'vue'
 
 export default defineComponent({
   name: 'MainLayout',
 
-  components: {
-    EssentialLink
-  },
+  // components: {
+  //   EssentialLink
+  // },
 
   setup () {
     const leftDrawerOpen = ref(false)
 
     return {
-      essentialLinks: linksList,
+      // essentialLinks: linksList,
       leftDrawerOpen,
       toggleLeftDrawer () {
         leftDrawerOpen.value = !leftDrawerOpen.value

guiapp/src/pages/Index.vue → guiapp/src/pages/Spectrum.vue

@@ -3,16 +3,15 @@
 
     <input-with-units
         v-model:input-result="someValue"
-        v-model:initial-expression="someExpr"
         v-model:is-showing-help="isShowingHelpInputWithUnits"
+        :initial-expression="someExpr"
         title="Re(n)"
         units="nm"
-        active
     ></input-with-units>
     <input-with-units
         v-model:input-result="someValue"
-        v-model:initial-expression="someExpr"
         v-model:is-showing-help="isShowingHelpInputWithUnits"
+        :initial-expression="someExpr"
         title=""
         units=""
         active
@@ -31,7 +30,7 @@ export default defineComponent({
   components: {InputWithUnits },
   setup() {
     let someValue = ref(10);
-    let someExpr = ref('10+3');
+    let someExpr = ref('10');
     // InputWithUnits component will disable showing help after first input
     let isShowingHelpInputWithUnits = ref(true)
     return { someValue, someExpr, isShowingHelpInputWithUnits };

guiapp/src/router/routes.ts

@@ -4,7 +4,10 @@ const routes: RouteRecordRaw[] = [
   {
     path: '/',
     component: () => import('layouts/MainLayout.vue'),
-    children: [{ path: '', component: () => import('pages/Index.vue') }],
+    children: [
+      { path: '', component: () => import('pages/Spectrum.vue') },
+      // { path: '', component: () => import('pages/Spectrum.vue') },
+    ],
   },
 
   // Always leave this as last one,