initial GUI for materials manager

vue-cli3-webapp/package-lock.json

@@ -880,6 +880,32 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.26",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.26.tgz",
+      "integrity": "sha512-CcM/fIFwZlRdiWG/25xE/wHbtyUuCtqoCTrr6BsWw7hH072fR++n4L56KPydAr3ANgMJMjT8v83ZFIsDc7kE+A=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.26",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.26.tgz",
+      "integrity": "sha512-3Dfd/v2IztP1TxKOxZiB5+4kaOZK9mNy0KU1vVK7nFlPWz3gzxrCWB+AloQhQUoJ8HhGqbzjliK89Vl7PExGbw==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.26"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.12.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.12.0.tgz",
+      "integrity": "sha512-CnpsWs6GhTs9ekNB3d8rcO5HYqRkXbYKf2YNiAlTWbj5eVlPqsd/XH1F9If8jkcR1aegryAbln/qYeKVZzpM0g==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.26"
+      }
+    },
+    "@fortawesome/vue-fontawesome": {
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-0.1.9.tgz",
+      "integrity": "sha512-h/emhmZz+DfB2zOGLWawNwXq82UYhn9waTfUjLLmeaIqtnIyNt6kYlpQT/vzJjLZRDRvY2IEJAh1di5qKpKVpA=="
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",

vue-cli3-webapp/package.json

@@ -8,6 +8,9 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.26",
+    "@fortawesome/free-solid-svg-icons": "^5.12.0",
+    "@fortawesome/vue-fontawesome": "^0.1.9",
     "buefy": "^0.8.0",
     "plotly.js": "^1.33.0",
     "core-js": "^3.4.3",

vue-cli3-webapp/src/App.vue

@@ -22,8 +22,11 @@
                            @stepWLData="simulationSetup.stepWL=$event"
                            @source_unitsData="source_units=$event"
       />
+      <GetMaterials v-bind:materials="materials"/>
       <GetParticleParameters v-bind:layers="simulationSetup.layers"
-                             v-bind:units="units" />
+                             v-bind:units="units"
+                             v-bind:materials="materials"
+      />
 
       <div  class="field is-horizontal">
         <div class="field-label is-normal">
@@ -147,6 +150,7 @@
 
   import ReactiveChart from "./components/ReactiveChart.vue";
   import ShowInfo from "./components/ShowInfo.vue";
+  import GetMaterials from "./components/GetMaterials.vue";
   import GetHostIndex from "./components/GetHostIndex.vue";
   import GetUnits from "./components/GetUnits.vue";
   import GetSourceParameters from "./components/GetSourceParameters.vue";
@@ -156,6 +160,7 @@
     name: 'app',
     components: {
       GetHostIndex,
+      GetMaterials,
       GetSourceParameters,
       GetParticleParameters,
       GetUnits,
@@ -174,6 +179,7 @@
           units_prev: 'nm',
           source_units: 'nm',
           source_units_prev: 'nm',
+          materials: [],
           isSourceOtherUnits: false,
           simulationSetup: {
             hostIndex: 1,

vue-cli3-webapp/src/components/GetLayerParameters.vue

@@ -29,9 +29,9 @@
 
                     </div>
                     <b-select v-model="layer.material">
+                        <option v-if="index == 0" value="PEC" disabled> PEC</option>
                         <option value="nk">nk-constant</option>
-                        <option value="popular">popular</option>
-                        <option value="web" disabled>refractiveindex.info</option>
+                        <option v-for="material in filteredMaterials" v-bind:key="material.name" v-bind:value="material.name">{{material.name}}</option>
                     </b-select>
 
                 </div>
@@ -72,6 +72,13 @@
                 isDisabled: false
             }
         },
+        computed: {
+            filteredMaterials: function () {
+                let tmp = []
+                for (const mat of this.materials) if (mat.inUse && mat.isLoaded) tmp.push(mat);
+                return tmp;
+            }
+        },
         watch: {
             'layer.material': {
                 handler: function () {
@@ -84,7 +91,7 @@
                 }
             }
         },
-        props: ['layer', 'particle', 'index', 'units']
+        props: ['layer', 'particle', 'index', 'units', 'materials']
     }
 </script>
 

vue-cli3-webapp/src/components/GetMaterials.vue

@@ -0,0 +1,134 @@
+<template>
+    <div class="field">
+        <div class="field is-horizontal">
+            <div class="field-label is-normal">
+                <label class="label">Materials</label>
+            </div>
+            <div class="field-body">
+                <b-switch v-model="isVisible">
+                    <div v-if="isVisible==true">Hide</div>
+                    <div v-else>Show</div>
+                    </b-switch>
+            </div>
+        </div>
+        <transition name="slide" class="list">
+            <transition name="slide">
+                <div class="list" v-if="isVisible">
+                    <table class="table is-striped is-narrow is-hoverable">
+                        <thead>
+                        <tr>
+                            <th>Use</th>
+                            <th>Name</th>
+                            <th>Plot</th>
+                            <th>File or URL</th>
+                        </tr>
+                        </thead>
+                        <tfoot>
+                        <tr>
+                            <th>Use</th>
+                            <th>Name</th>
+                            <th>Plot</th>
+                            <th>File or URL</th>
+                        </tr>
+                        </tfoot>
+                        <tr v-for="material in materials" v-bind:key="material.name">
+                            <td><b-switch v-model="material.inUse"/>
+<!--                                <font-awesome-icon icon="check-circle" class="rh-input has-text-success" v-if="material.isLoaded">-->
+<!--                                    <span class="tooltiptext">test</span>-->
+<!--                                </font-awesome-icon>-->
+                                <span class="rh-input"  v-if="material.isLoaded">
+                                    <font-awesome-icon icon="check-circle" class="has-text-success"/>
+                                    <span class="tooltiptext tip-success">Loaded.</span>
+                                </span>
+                                <span class="rh-input"  v-else>
+                                    <font-awesome-icon icon="ban" class="has-text-danger"/>
+                                    <span class="tooltiptext tip-danger">Failed to load.</span>
+                                </span>
+                            </td>
+                            <td>{{material.name}}</td>
+                            <td><b-checkbox v-model="material.isPlot"/></td>
+                            <td>{{material.fname}}</td>
+                        </tr>
+                    </table>
+                </div>
+            </transition>
+        </transition>
+    </div>
+</template>
+
+<!--https://refractiveindex.info/database/data/main/Au/Johnson.yml-->
+<script>
+    export default {
+        name: "GetMaterials",
+        data () {
+            return {
+                isVisible: true,
+            }
+        },
+        mounted() {
+            let files = ['Ag-Johnson-1972.yml','Au-Johnson-1972.yml'];
+            let names = ['Ag (Silver) Johnson', 'Au (Gold) Johnson'];
+            let old_names=[];
+            for (const mat of this.materials) old_names.push(mat.name);
+            for (let i = 0; i < files.length; i++) {
+                if (old_names.includes(names[i])) continue; //Filter out reloads during development
+                this.materials.push({
+                    fname: files[i],
+                    name: names[i],
+                    isUse: true,
+                    isPlot: false,
+                    isLoaded: false
+                });
+            }
+            console.log(this.materials)
+        },
+        props: ['materials']
+    }
+</script>
+
+<style scoped>
+    .list{
+        transform-origin: top;
+        transition: transform .4s ease-in-out;
+    }
+    .slide-enter, .slide-leave-to{
+        transform: scaleY(0);
+    }
+    .rh-input {
+        margin-right: 0px;
+        position: relative;
+        display: inline-block;
+    }
+    /* Tooltip text */
+    .tip-danger {
+        background-color:         #ff3860;
+    }
+    .tip-success {
+        background-color:         #23d160;
+
+    }
+    .rh-input .tooltiptext {
+        visibility: hidden;
+        width: 120px;
+        /*background-color: #7957d5;*/
+        /*background-color:         #23d160;*/
+
+        color: white;
+        text-align: center;
+        padding: 5px 0;
+        border-radius: 6px;
+
+        /* Position the tooltip text - see examples below! */
+        position: absolute;
+        z-index: 1;
+
+        bottom: 110%;
+        left: 0%;
+    }
+
+    /* Show the tooltip text when you mouse over the tooltip container */
+    .rh-input:hover .tooltiptext {
+        visibility: visible;
+    }
+
+</style>

vue-cli3-webapp/src/components/GetParticleParameters.vue

@@ -23,6 +23,7 @@
                             v-bind:units="units"
                             v-bind:particle="particle"
                             v-bind:index="layer.index"
+                            v-bind:materials="materials"
         />
         </div>
     </div>
@@ -77,7 +78,7 @@
             },
             deep: true
         },
-        props: ['layers', 'units']
+        props: ['layers', 'units','materials']
     }
 </script>
 

vue-cli3-webapp/src/main.js

@@ -5,6 +5,14 @@ import 'buefy/dist/buefy.css'
 // import Plotly from 'plotly.js'
 Vue.use(Buefy)
 
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faCoffee, faCheckCircle, faBan } from '@fortawesome/free-solid-svg-icons'
+library.add(faCoffee, faCheckCircle, faBan)
+
+Vue.component('font-awesome-icon', FontAwesomeIcon)
+
+
 Vue.config.productionTip = false
 
 new Vue({