GUI for input of multilayer

vue-cli3-webapp/src/App.vue

@@ -183,6 +183,7 @@
                 R: 100.0,
                 reN: 4.0,
                 imN: 0.01,
+                index: 0
               }
             ],
             total_mode_n: 4

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

@@ -1,10 +1,13 @@
 <template>
-    <div class="field is-horizontal">
+    <div class="field is-horizontal layer">
         <div class="field-label is-normal">
             <label class="label">
                 <div v-if="particle==='bulk'"> bulk </div>
-                <div v-else-if="particle==='core-shell'"> core </div>
-                <div v-else> multi </div>
+                <div v-else-if="particle==='core-shell'">
+                    <div v-if="index == 0"> core </div>
+                    <div v-else> shell </div>
+                </div>
+                <div v-else> layer {{index+1}} </div>
             </label>
         </div>
         <div class="field-body">
@@ -42,4 +45,7 @@
         margin-left: 1rem;
         width:5rem;
     }
+    .layer {
+        margin: 0.5rem;
+    }
 </style>

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

@@ -18,11 +18,13 @@
                 </div>
             </div>
         </div>
-        <GetLayerParameters v-bind:layer="layers[0]"
+        <div v-for="layer in layers" v-bind:key="layer.index">
+        <GetLayerParameters v-bind:layer="layer"
                             v-bind:units="units"
                             v-bind:particle="particle"
-                            v-bind:index="index"
+                            v-bind:index="layer.index"
         />
+        </div>
     </div>
 </template>
 
@@ -51,6 +53,28 @@
                     if (this.particle === 'multilayer') {this.layersNum = 3;}
                 }
             },
+            layersNum: {
+                handler: function () {
+                    while (this.layersNum < this.layers.length) {
+                        this.layers.pop();
+                    }
+                    let r_prev = this.layers.slice(-1)[0].R;
+                    while (this.layersNum > this.layers.length) {
+                        r_prev = r_prev*1.1;
+                        this.layers.push(
+                            {
+                                R: r_prev,
+                                reN: 4.0,
+                                imN: 0.01,
+                                index: 1
+                            }
+                        );
+                    }
+                    for (let i = 0; i < this.layers.length; i++) {
+                        this.layers[i].index = i;
+                    }
+                }
+            },
             deep: true
         },
         props: ['layers', 'units']